/**
 * Admin CSS - Styles for administrative dashboard components
 * Task Management, System Monitoring, and Admin UI elements
 */

/* === Task Management Styles === */

.mojo-task-management-page {
    padding: 0;
}

.mojo-task-management-container {
    max-width: 100%;
    margin: 0;
}

/* Task Stats Cards */
.mojo-task-stats-header .card {
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--bs-border-color);
}

.mojo-task-stats-header .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
}

.mojo-task-stats-header .card-body {
    padding: 1.5rem;
}

.mojo-task-stats-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-dark);
}

.mojo-task-stats-header .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
}

.mojo-task-stats-header .fs-2 {
    opacity: 0.6;
    font-size: 2.5rem !important;
}

/* Task Runners Section */
.task-runners-section .mojo-task-runner-list {
    max-height: 400px;
    overflow-y: auto;
}

.task-runners-section .mojo-task-runner-item {
    border: 1px solid var(--bs-gray-200);
    transition: all 0.2s ease-in-out;
}

.task-runners-section .mojo-task-runner-item:hover {
    border-color: var(--bs-primary);
    background-color: var(--bs-gray-50) !important;
}

.task-runners-section .mojo-task-runner-info {
    min-width: 0;
    flex: 1;
}

.task-runners-section .mojo-task-runner-name {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.task-runners-section .mojo-task-runner-channels {
    word-break: break-all;
    line-height: 1.3;
}

.task-runners-section .mojo-task-runner-list::-webkit-scrollbar {
    width: 6px;
}

.task-runners-section .mojo-task-runner-list::-webkit-scrollbar-track {
    background: var(--bs-gray-100);
    border-radius: 3px;
}

.task-runners-section .mojo-task-runner-list::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400);
    border-radius: 3px;
}

.task-runners-section .mojo-task-runner-list::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

.task-runners-section .mojo-task-runner-status .badge {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
}

.task-runners-section .mojo-task-runner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.task-runners-section .dropdown-toggle {
    border: 1px solid var(--bs-border-color);
    background: white;
    transition: all 0.2s ease;
}

.task-runners-section .dropdown-toggle:hover {
    background: var(--bs-gray-50);
    border-color: var(--bs-primary);
}

.task-runners-section .dropdown-menu {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    min-width: 160px;
}

.task-runners-section .dropdown-item {
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.task-runners-section .dropdown-item:hover {
    background-color: var(--bs-gray-100);
}

.task-runners-section .dropdown-item i {
    width: 1rem;
    text-align: center;
}

/* Task Charts Section */
.mojo-task-charts-section .card {
    border: 1px solid var(--bs-border-color);
    transition: all 0.2s ease-in-out;
}

.mojo-task-charts-section .card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08) !important;
}

.mojo-task-charts-section .card-body {
    padding: 1.5rem;
}

/* Task Tables Section */
.mojo-task-management-page .tab-view .nav-tabs {
    border-bottom: 2px solid var(--bs-gray-200);
    margin-bottom: 1.5rem;
}

.mojo-task-management-page .tab-view .nav-link {
    color: var(--bs-gray-600);
    border: none;
    padding: 0.75rem 1.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: all 0.2s ease;
    font-weight: 500;
}

.mojo-task-management-page .tab-view .nav-link:hover {
    color: var(--bs-primary);
    background-color: var(--bs-gray-50);
}

.mojo-task-management-page .tab-view .nav-link.active {
    color: var(--bs-primary);
    background-color: white;
    border-bottom: 2px solid var(--bs-primary);
    transform: translateY(1px);
}

.mojo-task-management-page .tab-content {
    min-height: 400px;
}

.mojo-task-management-page .table-container {
    background: white;
    border-radius: 0.5rem;
}

/* Task Status Badges */
.badge.mojo-task-status-pending {
    background-color: var(--bs-primary) !important;
    color: white;
}

.badge.mojo-task-status-running {
    background-color: var(--bs-success) !important;
    color: white;
}

.badge.mojo-task-status-completed {
    background-color: var(--bs-info) !important;
    color: white;
}

.badge.mojo-task-status-error {
    background-color: var(--bs-danger) !important;
    color: white;
}

/* Action Buttons */
.mojo-task-management-page .btn-group .btn {
    transition: all 0.2s ease;
}

.mojo-task-management-page .btn-group .btn:hover {
    transform: translateY(-1px);
}

.mojo-task-management-page .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

/* Loading States */
.mojo-task-management-page .bi-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
    .mojo-task-stats-header .card-body {
        padding: 1rem;
    }

    .mojo-task-stats-header h3 {
        font-size: 1.5rem;
    }

    .task-runners-section .mojo-task-runner-item .row {
        margin: 0;
    }

    .task-runners-section .mojo-task-runner-item .col-md-8,
    .task-runners-section .mojo-task-runner-item .col-md-4 {
        padding-left: 0;
        padding-right: 0;
    }

    .task-runners-section .mojo-task-runner-channels small {
        font-size: 0.75rem;
    }

    .mojo-task-management-page .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .mojo-task-management-page .btn-group .btn {
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 576px) {
    .mojo-task-management-container {
        padding: 0.5rem;
    }

    .mojo-task-stats-header .col-12 {
        margin-bottom: 0.5rem !important;
    }

    .mojo-task-charts-section .col-xl-6 {
        margin-bottom: 1rem !important;
    }

    .mojo-task-management-page .tab-view .nav-link {
        padding: 0.5rem 1rem;
        margin-right: 0.25rem;
        font-size: 0.875rem;
    }

    .task-runners-section .mojo-task-runner-item {
        padding: 1rem !important;
    }

    .task-runners-section .mojo-task-runner-name {
        font-size: 0.9rem;
    }

    .task-runners-section .mojo-task-runner-channels small {
        font-size: 0.7rem;
        display: block;
        margin-top: 0.25rem;
    }
}

/* === Admin Dashboard General Styles === */

.admin-dashboard-page,
.admin-page {
    background-color: var(--bs-gray-50);
    min-height: 100vh;
}

/*.admin-dashboard-container,
.admin-container {
    padding: 2rem;
    max-width: 100%;
}*/

/* Admin Cards */
.admin-page .card {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.2s ease-in-out;
}

.admin-page .card:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.admin-page .card-header {
    background-color: white;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
}

.admin-page .card-body {
    padding: 1.5rem;
}

/* Admin Header Styles */
.admin-page h1,
.admin-page .h3 {
    color: var(--bs-dark);
    font-weight: 600;
}

.admin-page .text-muted {
    color: var(--bs-gray-600) !important;
}

/* Admin Alerts */
.admin-page .alert {
    border: none;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
}

.admin-page .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--bs-success-text-emphasis);
}

.admin-page .alert-info {
    background-color: rgba(13, 202, 240, 0.1);
    color: var(--bs-info-text-emphasis);
}

.admin-page .alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: var(--bs-warning-text-emphasis);
}

.admin-page .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger-text-emphasis);
}

/* Admin Utilities */
.admin-page .text-truncate {
    max-width: 200px;
}

.admin-page .small-text {
    font-size: 0.875rem;
}

.admin-page .micro-text {
    font-size: 0.75rem;
}

/* Admin Navigation */
.admin-page .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.admin-page .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-gray-500);
}

.admin-page .breadcrumb-item a {
    color: var(--bs-primary);
    text-decoration: none;
}

.admin-page .breadcrumb-item a:hover {
    text-decoration: underline;
}

/* === Modal Styles === */

/* Task Details Modal */
.mojo-task-details-modal .modal-dialog {
    max-width: 800px;
}

.mojo-task-details-modal .fw-mono {
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
    font-size: 0.9rem;
}

.mojo-task-details-modal .log-entry {
    border-left: 3px solid var(--bs-gray-300);
    transition: all 0.2s ease;
}

.mojo-task-details-modal .log-entry:hover {
    border-left-color: var(--bs-primary);
    background-color: var(--bs-gray-50) !important;
}

.mojo-task-details-modal pre code {
    font-size: 0.85rem;
    line-height: 1.4;
}

.mojo-task-details-modal .badge {
    font-weight: 500;
}

/* Runner Details Modal */
.mojo-runner-details-modal .modal-dialog {
    max-width: 1200px;
}

.mojo-runner-details-modal .performance-metric {
    transition: all 0.3s ease;
}

.mojo-runner-details-modal .performance-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* === Task and Runner Details Views === */

.mojo-task-details-view,
.mojo-runner-details-view {
    max-height: 70vh;
    overflow-y: auto;
}

.mojo-task-details-view .card,
.mojo-runner-details-view .card {
    border: 1px solid var(--bs-border-color);
}

.mojo-task-details-view .card-header,
.mojo-runner-details-view .card-header {
    background-color: var(--bs-gray-50);
    font-weight: 500;
}

.mojo-task-details-view .log-entry,
.mojo-runner-details-view .log-entry {
    transition: background-color 0.2s ease;
}

.mojo-task-details-view .log-entry:hover,
.mojo-runner-details-view .log-entry:hover {
    background-color: var(--bs-gray-50) !important;
}

.mojo-task-details-view .progress,
.mojo-runner-details-view .progress {
    border-radius: 10px;
    overflow: hidden;
}

.mojo-task-details-view .progress-bar,
.mojo-runner-details-view .progress-bar {
    transition: width 0.3s ease;
}

/* Log level badges */
.mojo-task-details-view .badge,
.mojo-runner-details-view .badge {
    font-weight: 500;
}

/* Code blocks in task details */
.mojo-task-details-view pre {
    font-size: 0.875rem;
    line-height: 1.4;
    border: 1px solid var(--bs-border-color);
}

.mojo-task-details-view pre code,
.mojo-runner-details-view pre code {
    color: var(--bs-gray-800);
}

/* Resource usage bars */
.mojo-runner-details-view .progress {
    background-color: var(--bs-gray-200);
}

.mojo-runner-details-view .progress-bar {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Tables in modals */
.mojo-task-details-view .table,
.mojo-runner-details-view .table {
    font-size: 0.875rem;
}

.mojo-task-details-view .table th,
.mojo-runner-details-view .table th {
    font-weight: 600;
    color: var(--bs-gray-700);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mojo-task-details-view .table td,
.mojo-runner-details-view .table td {
    vertical-align: middle;
}

/* Button groups in tables */
.mojo-task-details-view .btn-group-sm .btn,
.mojo-runner-details-view .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* Filter buttons */
.mojo-runner-details-view .btn-group .btn.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Scrollable containers */
.mojo-task-logs-container,
.mojo-runner-logs-container {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

.mojo-task-logs-container::-webkit-scrollbar,
.mojo-runner-logs-container::-webkit-scrollbar {
    width: 6px;
}

.mojo-task-logs-container::-webkit-scrollbar-track,
.mojo-runner-logs-container::-webkit-scrollbar-track {
    background: var(--bs-gray-100);
    border-radius: 3px;
}

.mojo-task-logs-container::-webkit-scrollbar-thumb,
.mojo-runner-logs-container::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400);
    border-radius: 3px;
}

.mojo-task-logs-container::-webkit-scrollbar-thumb:hover,
.mojo-runner-logs-container::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

/* Print Styles */
@media print {
    .admin-page .btn,
    .admin-page .dropdown,
    .admin-page .card-header .btn-group {
        display: none !important;
    }

    .admin-page .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }

    .admin-page {
        background-color: white !important;
    }

    .mojo-task-details-view,
    .mojo-runner-details-view {
        max-height: none;
        overflow: visible;
    }
}

/* ─── Mojo ───────────────────────────────────────────── */

.mojo-nav-icon {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    margin-right: 0.5rem;
}

.mojo-avatar-icon {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}

/* ═══════════════════════════════════════════════════════════════
   Assistant Chat Interface
   Clean, modern AI chat UI inspired by Claude/ChatGPT
   ═══════════════════════════════════════════════════════════════ */

/* Make modal header a minimal floating close button */
.assistant-view {
    height: 100%;
    min-height: 0;
}

.modal-fullscreen:has(.assistant-view) .modal-header {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 10;
    border: none;
    background: transparent;
    padding: 0;
}

.modal-fullscreen:has(.assistant-view) .modal-header .modal-title {
    display: none;
}

.modal-fullscreen:has(.assistant-view) .modal-header .btn-close {
    opacity: 0.5;
    margin: 0;
    padding: 8px;
}

.modal-fullscreen:has(.assistant-view) .modal-header .btn-close:hover {
    opacity: 1;
}

.modal-fullscreen:has(.assistant-view) .modal-body {
    padding: 0;
}

.modal-fullscreen:has(.assistant-view) .modal-footer {
    display: none;
}

.assistant-layout {
    display: flex;
    height: 100vh;
    min-height: 0;
}

/* ── Sidebar ──────────────────────────────────────────────── */

.assistant-sidebar {
    width: 260px;
    min-width: 260px;
    border-right: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f7f7f8;
}

.assistant-conversation-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.conversation-list-header {
    padding: 12px !important;
}

.conversation-list-header .btn {
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 8px 16px;
}

.conversation-list-items {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
}

.conversation-date-header {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: var(--bs-secondary);
    padding: 12px 8px 4px !important;
    margin: 0;
}

.conversation-date-header:first-child {
    padding-top: 4px !important;
}

.conversation-item {
    cursor: pointer;
    transition: background-color 0.15s;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border: none;
}

.conversation-item:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.conversation-item.active {
    background-color: rgba(0, 0, 0, 0.1);
}

.conversation-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 8px;
    margin-top: 2px;
    object-fit: cover;
}

.conversation-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.6rem;
    font-weight: 600;
}

.conversation-title {
    font-size: 0.84rem;
    color: var(--bs-body-color);
}

.conversation-meta {
    display: flex;
    gap: 6px;
    font-size: 0.7rem;
    line-height: 1.2;
    margin-top: 1px;
}

.conversation-meta span:not(:last-child)::after {
    content: '·';
    margin-left: 6px;
    opacity: 0.5;
}

.conversation-delete {
    opacity: 0;
    transition: opacity 0.15s;
}

.conversation-item:hover .conversation-delete {
    opacity: 0.5;
}

.conversation-delete:hover {
    opacity: 1 !important;
}

/* ── Main Area ────────────────────────────────────────────── */

.assistant-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
}

/* ── Welcome State ────────────────────────────────────────── */

.assistant-welcome {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.assistant-welcome-content {
    text-align: center;
    max-width: 480px;
    padding: 32px 24px;
}

.assistant-welcome-icon {
    margin-bottom: 16px;
}

.assistant-welcome-icon img {
    width: 100px;
    height: 100px;
}

.assistant-welcome-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 6px;
}

.assistant-welcome-subtitle {
    font-size: 1rem;
    color: var(--bs-secondary-color);
    margin-bottom: 28px;
}

.assistant-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}

.assistant-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: #fff;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.assistant-suggestion:hover {
    background: #f7f7f8;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.assistant-suggestion i {
    font-size: 1rem;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ── Chat Area ────────────────────────────────────────────── */

.assistant-chat-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.assistant-chat-area .chat-view {
    height: 100%;
}

.assistant-chat-area .chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
}

.assistant-chat-area .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

/* ── Assistant chat message differentiation ──────────────────── */

/* Base message reset */
.assistant-chat-area .chat-theme-compact .message-item {
    border-bottom: none;
    padding: 16px 0 8px;
}

.assistant-chat-area .chat-theme-compact .message-item:hover {
    background: transparent;
}

/* ── Assistant messages: full-width, clean left-align ────── */

.assistant-chat-area .message-assistant .message-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    background: var(--bs-primary) !important;
    color: #fff;
}

.assistant-chat-area .message-assistant .message-text {
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: normal;
}

/* ── User messages: right-aligned bubble ─────────────────── */

.assistant-chat-area .message-user .message-item {
    flex-direction: row-reverse;
}

.assistant-chat-area .message-user .message-avatar {
    display: none;
}

.assistant-chat-area .message-user .message-content {
    flex: unset;
    max-width: 75%;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
    padding: 10px 16px;
}

.assistant-chat-area .message-user .message-header {
    justify-content: flex-end;
}

.assistant-chat-area .message-user .message-author {
    display: none;
}

.assistant-chat-area .message-user .message-time {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
}

.assistant-chat-area .message-user .message-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #fff;
    white-space: pre-wrap;
}

/* ── Custom Input Area ────────────────────────────────────── */

.assistant-input-wrapper {
    flex-shrink: 0;
    padding: 0 24px 20px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.assistant-input-box {
    display: flex;
    align-items: flex-end;
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 8px 8px 8px 18px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.assistant-input-box:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 1px 8px rgba(var(--bs-primary-rgb), 0.12);
}

.assistant-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 0.9rem;
    line-height: 1.5;
    max-height: 200px;
    padding: 6px 0;
    background: transparent;
    color: var(--bs-body-color);
}

.assistant-input::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.7;
}

.assistant-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background-color 0.15s,
        opacity 0.15s;
    font-size: 1rem;
}

.assistant-send-btn:hover {
    background: var(--bs-primary);
    opacity: 0.85;
}

.assistant-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.assistant-stop-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid var(--bs-secondary-color);
    background: transparent;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        border-color 0.15s,
        color 0.15s;
    font-size: 0.9rem;
}

.assistant-stop-btn:hover {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.assistant-input-status {
    font-size: 0.78rem;
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: 6px;
    padding: 5px 12px;
    margin-bottom: 8px;
    text-align: center;
    cursor: pointer;
    transition: filter 0.15s;
}

.assistant-input-status:hover {
    filter: brightness(0.95);
}

.assistant-input-status-dismiss {
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    margin-left: 6px;
    text-decoration: underline;
    opacity: 0.7;
}

.assistant-input-status:hover .assistant-input-status-dismiss {
    opacity: 1;
}

.assistant-input-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 0;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

/* ── Connection Status Dot ────────────────────────────────── */

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--bs-secondary);
    flex-shrink: 0;
}

.status-dot.connected {
    background: var(--bs-success);
}

.status-dot.reconnecting {
    background: var(--bs-warning);
    animation: pulse-dot 1.2s infinite;
}

.status-dot.disconnected {
    background: var(--bs-danger);
}

@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* ── Thinking Indicator ───────────────────────────────────── */

.chat-thinking {
    padding: 12px 0;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.chat-thinking-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f7f7f8;
    border-radius: 16px;
    font-size: 0.84rem;
    color: var(--bs-secondary-color);
}

.chat-thinking-dots {
    display: inline-flex;
    gap: 3px;
}

.chat-thinking-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-secondary);
    animation: thinking-bounce 1.4s infinite ease-in-out both;
}

.chat-thinking-dots span:nth-child(1) {
    animation-delay: -0.32s;
}
.chat-thinking-dots span:nth-child(2) {
    animation-delay: -0.16s;
}
.chat-thinking-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes thinking-bounce {
    0%,
    80%,
    100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

.chat-thinking-timer {
    font-size: 0.75rem;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* ── Assistant Message Styling ────────────────────────────── */

.chat-message.message-assistant .message-text {
    color: var(--bs-body-color);
}

.message-tool-calls a {
    text-decoration: none;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.message-tool-calls a:hover {
    text-decoration: underline;
}

/* ── Data Blocks (tables, charts, stats) ──────────────────── */

.assistant-block {
    margin-top: 12px;
}

/* ── Stat blocks (always inline) ── */

.assistant-block .d-flex.flex-wrap {
    gap: 8px !important;
}

.assistant-stat-card {
    min-width: 100px;
    flex: 1 1 100px;
    border-color: var(--bs-border-color);
    border-radius: 8px;
}

.assistant-stat-card .card-body {
    padding: 8px 12px !important;
}

.assistant-stat-card .fw-bold {
    font-size: 1.1rem !important;
}

.assistant-stat-card .text-muted {
    font-size: 0.75rem !important;
}

/* ── Collapsible block toggle ── */

.assistant-collapsible-block {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
}

.assistant-block-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none !important;
    color: var(--bs-body-color) !important;
    cursor: pointer;
    transition: background 0.15s;
}

.assistant-block-toggle:hover {
    background: var(--bs-tertiary-bg);
}

.assistant-block-toggle-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--bs-primary);
}

.assistant-block-toggle-text {
    flex: 1;
    min-width: 0;
}

.assistant-block-toggle-title {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
}

.assistant-block-toggle-subtitle {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
    margin-top: 1px;
}

.assistant-block-chevron {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    transition: transform 0.2s;
}

.assistant-block-toggle:not(.collapsed) .assistant-block-chevron {
    transform: rotate(180deg);
}

/* ── Collapsible block body ── */

.assistant-block-body {
    border-top: 1px solid var(--bs-border-color);
    padding: 12px;
}

/* ── Chart blocks inside collapsible — strip dashboard chrome ── */

.assistant-chart-body {
    width: 100%;
    position: relative;
}

/* ── MiniPieChart inside assistant blocks ── */

.mini-pie-segment {
    cursor: pointer;
    transition:
        filter 0.15s,
        stroke-width 0.15s;
}

.mini-pie-segment:hover {
    filter: brightness(1.12) drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
    stroke-width: 2.5;
}

.mini-pie-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-pie-layout-bottom {
    flex-direction: column;
    align-items: flex-start;
}

.mini-pie-layout-right {
    flex-direction: row;
}

.mini-pie-svg-area {
    position: relative;
    flex-shrink: 0;
}

.mini-pie-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.mini-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
}

.mini-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mini-pie-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.mini-pie-legend-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-pie-legend-value {
    color: var(--bs-secondary-color, #6c757d);
    margin-left: auto;
    flex-shrink: 0;
}

/* ── MiniSeriesChart inside assistant blocks ── */

.mini-series-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mini-series-svg-area {
    position: relative;
    width: 100%;
}

.mini-series-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.mini-series-tooltip-label {
    font-weight: 600;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding-bottom: 2px;
}

.mini-series-tooltip-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mini-series-tooltip-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mini-series-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: center;
    padding: 4px 0 8px;
    font-size: 0.8rem;
}

.mini-series-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.mini-series-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.mini-series-legend-label {
    color: var(--bs-body-color, #212529);
}

/* MiniSeriesChart hover states */

.mini-series-bar {
    cursor: pointer;
    transition: filter 0.15s;
}

.mini-series-bar:hover {
    filter: brightness(1.15) drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
}

.mini-series-dot {
    cursor: pointer;
    transition: filter 0.15s;
    stroke: transparent;
    stroke-width: 8;
    paint-order: stroke;
}

.mini-series-dot:hover {
    filter: brightness(1.12) drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
    r: 5;
}

/* ── Table blocks inside collapsible ── */

.assistant-block-body .table-view-component {
    margin-bottom: 0;
}

.assistant-block-body .mojo-table-wrapper {
    margin: 0;
}

.assistant-block-body .table {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.assistant-block-body .table th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 12px;
}

.assistant-block-body .table td {
    padding: 6px 12px;
}

/* ── Markdown content in assistant messages ───────────────── */

.message-assistant .message-text h1,
.message-assistant .message-text h2,
.message-assistant .message-text h3,
.message-assistant .message-text h4,
.message-assistant .message-text h5,
.message-assistant .message-text h6 {
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.message-assistant .message-text h1 {
    font-size: 1.1rem;
}
.message-assistant .message-text h2 {
    font-size: 1.05rem;
}
.message-assistant .message-text h3 {
    font-size: 1rem;
}
.message-assistant .message-text h4 {
    font-size: 0.95rem;
}
.message-assistant .message-text h5,
.message-assistant .message-text h6 {
    font-size: 0.9rem;
}

.message-assistant .message-text h1:first-child,
.message-assistant .message-text h2:first-child,
.message-assistant .message-text h3:first-child {
    margin-top: 0;
}

.message-assistant .message-text hr {
    margin: 4px 0;
    opacity: 0.15;
}

/* ── Collapsible long messages ─────────────────────────────── */

.message-assistant .message-text.message-collapsed {
    max-height: var(--collapse-height, 300px);
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.message-expand-toggle {
    display: block;
    background: none;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 4px 12px;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background-color 0.15s;
}

.message-expand-toggle:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.message-assistant .message-text ul,
.message-assistant .message-text ol {
    padding-left: 20px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.message-assistant .message-text li {
    margin-bottom: 2px;
}

.message-assistant .message-text pre {
    background: var(--bs-tertiary-bg);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 0.82rem;
    overflow-x: auto;
}

.message-assistant .message-text code {
    font-size: 0.85em;
    padding: 1px 5px;
    background: var(--bs-tertiary-bg);
    border-radius: 4px;
}

.message-assistant .message-text pre code {
    padding: 0;
    background: none;
}

.message-assistant .message-text p {
    margin-bottom: 6px;
}

.message-assistant .message-text p:last-child {
    margin-bottom: 0;
}

.message-assistant .message-text table {
    width: 100%;
    margin: 10px 0;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.message-assistant .message-text th,
.message-assistant .message-text td {
    padding: 6px 10px;
    border: 1px solid var(--bs-border-color);
    text-align: left;
}

.message-assistant .message-text th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

/* ── Action blocks ────────────────────────────────────────── */

.assistant-action-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bs-tertiary-bg);
}

.assistant-action-header {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 2px;
}

.assistant-action-desc {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin-bottom: 10px;
}

.assistant-action-buttons {
    display: flex;
    gap: 8px;
}

.assistant-action-chosen-label {
    font-size: 0.82rem;
    color: var(--bs-success-text-emphasis);
}

.assistant-action-chosen-label i {
    color: var(--bs-success);
}

/* ── File blocks ─────────────────────────────────────────── */

.assistant-file-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--bs-body-bg);
    text-decoration: none !important;
    color: var(--bs-body-color) !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.assistant-file-card:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary-border-subtle);
}

.assistant-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    color: var(--bs-primary);
}

.assistant-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.assistant-file-name {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-file-stats {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    line-height: 1.2;
}

.assistant-file-expiry {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    opacity: 0.75;
    line-height: 1.2;
}

.assistant-file-download {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    transition: background 0.15s, color 0.15s;
}

.assistant-file-card:hover .assistant-file-download {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* ── Context reference chips ────────────────────────────── */

.assistant-context-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.assistant-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
}

.assistant-context-chip.clickable {
    cursor: pointer;
    color: var(--bs-primary);
}

.assistant-context-chip.clickable:hover {
    background: rgba(var(--bs-primary-rgb), 0.06);
    text-decoration: underline;
}

.assistant-context-chip i { font-size: 0.65rem; }

/* ── List blocks (key/value detail) ──────────────────────── */

.assistant-list-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bs-body-bg);
}

.assistant-list-title {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 10px;
}

.assistant-list-items {
    margin: 0;
}

.assistant-list-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.assistant-list-row:last-child {
    border-bottom: none;
}

.assistant-list-row dt {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 400;
    flex-shrink: 0;
    margin-right: 16px;
}

.assistant-list-row dd {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 500;
    text-align: right;
}

/* ── Alert blocks ────────────────────────────────────────── */

.assistant-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 0.84rem;
}

.assistant-alert-content strong {
    display: block;
    margin-bottom: 2px;
    font-size: 0.85rem;
}

.assistant-alert-content div {
    font-size: 0.8rem;
    color: var(--bs-body-color);
}

/* ── Progress blocks ─────────────────────────────────────── */

.assistant-progress-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 14px 16px;
    background: var(--bs-body-bg);
}

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

.assistant-progress-title {
    font-weight: 600;
    font-size: 0.88rem;
}

.assistant-progress-counter {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.assistant-progress-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.assistant-progress-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
}

.assistant-progress-step .step-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.82rem;
    line-height: 20px;
}

.assistant-progress-step .step-content {
    display: flex;
    flex-direction: column;
}

.assistant-progress-step .step-description {
    font-size: 0.82rem;
    line-height: 20px;
}

.assistant-progress-step .step-summary {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-top: 1px;
}

.step-pending .step-icon,
.step-pending .step-description {
    color: var(--bs-secondary-color);
}

.step-in_progress .step-icon {
    color: var(--bs-primary);
    animation: assistant-pulse 1.5s ease-in-out infinite;
}

.step-in_progress .step-description {
    color: var(--bs-body-color);
    font-weight: 500;
}

.step-done .step-icon {
    color: var(--bs-success);
}

.step-done .step-description {
    color: var(--bs-body-color);
}

.step-skipped .step-icon {
    color: var(--bs-secondary-color);
}

.step-skipped .step-description {
    color: var(--bs-secondary-color);
    text-decoration: line-through;
}

@keyframes assistant-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
    .assistant-sidebar {
        display: none;
    }

    .assistant-input-wrapper,
    .assistant-chat-area .chat-messages {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ================================================================
   Assistant Management Pages (Skills, Memory, Conversations)
   ================================================================ */

/* --- Skill View --- */

.assistant-skill-view {
    padding: 1rem;
}

.skill-steps-list {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--bs-body-bg);
}

.skill-step-item {
    padding: 0.625rem 0;
}

.skill-step-number .badge {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* --- Memory Page --- */

.assistant-memory-page .table code {
    font-size: 0.8125rem;
    color: var(--bs-emphasis-color);
    background: var(--bs-tertiary-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.assistant-memory-page .table td:last-child {
    white-space: nowrap;
}

/* --- Conversation View --- */

.assistant-conversation-view {
    padding: 1rem;
}

.assistant-conversation-view .chat-messages {
    max-height: 600px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Assistant Sidebar Panel
   Right-side chat panel that reflows the portal layout
   ═══════════════════════════════════════════════════════════════ */

#assistant-panel {
    width: 0;
    overflow: hidden;
    flex-shrink: 0;
    border-left: 1px solid var(--bs-border-color);
    transition: width 0.25s ease;
    position: relative;
    z-index: var(--mojo-zindex-fixed, 1030);
}

.assistant-panel-open #assistant-panel {
    width: 500px;
}

/* ── Resize Handle ───────────────────────────────────────────── */

.assistant-panel-resize-handle {
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 1;
}

.assistant-panel-resize-handle:hover,
.assistant-panel-resize-handle:active {
    background: rgba(var(--bs-primary-rgb), 0.15);
}

/* ── Panel Layout ────────────────────────────────────────────── */

.assistant-panel-view {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.assistant-panel-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ── Panel Header ────────────────────────────────────────────── */

.assistant-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px solid var(--bs-border-color);
    background: #f7f7f8;
    flex-shrink: 0;
}

.assistant-panel-header-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
    font-size: 1rem;
    padding: 0;
}

.assistant-panel-header-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--bs-body-color);
}

.assistant-panel-title {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--bs-body-color);
    min-width: 0;
}

/* ── History Panel ───────────────────────────────────────────── */

.assistant-panel-history {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #f7f7f8;
}

.assistant-panel-history .assistant-conversation-list {
    height: 100%;
}

/* ── Chat Area (within panel) ────────────────────────────────── */

.assistant-panel-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.assistant-panel-view .assistant-welcome-content {
    padding: 24px 16px;
}

.assistant-panel-view .assistant-welcome-icon img {
    width: 84px;
    height: 84px;
}

.assistant-panel-view .assistant-welcome-title {
    font-size: 1.25rem;
}

.assistant-panel-view .assistant-welcome-subtitle {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.assistant-panel-view .assistant-suggestions {
    max-width: 280px;
}

.assistant-panel-view .assistant-suggestion {
    padding: 10px 14px;
    font-size: 0.82rem;
}

.assistant-panel-view .assistant-input-wrapper {
    padding: 0 12px 12px;
}

.assistant-panel-view .assistant-chat-area .chat-messages {
    padding: 16px 12px;
}

/* ── Conversation Search ─────────────────────────────────────── */

.conversation-search-wrapper {
    position: relative;
}

.conversation-search-input {
    border-radius: 8px;
    font-size: 0.82rem;
    padding: 6px 12px;
    background: #fff;
    border-color: var(--bs-border-color);
}

.conversation-search-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15);
}

/* ── Load More ───────────────────────────────────────────────── */

.conversation-load-more .btn {
    font-size: 0.78rem;
}

/* ── Responsive: full overlay on narrow screens ──────────────── */

@media (max-width: 767.98px) {
    .assistant-panel-open #assistant-panel {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: var(--mojo-zindex-offcanvas, 1045);
    }
}

/* ════════════════════════════════════════════════════════════════
   Admin assistant — dark theme overrides

   The assistant view's base styles (above) hardcode light hex
   values (#fff, #f7f7f8) and dark-on-light hover tints
   (rgba(0,0,0,...)). When data-bs-theme="dark" is active, re-skin
   the same surfaces using framework tokens so the panel matches
   the rest of the dark portal. Pattern mirrors chat.css.
   ════════════════════════════════════════════════════════════════ */

/* ── Modal-fullscreen variant ──────────────────────────── */
[data-bs-theme="dark"] .assistant-sidebar { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .assistant-main    { background: var(--bs-body-bg); }

/* ── Conversation rail items (used in sidebar + history) ─ */
[data-bs-theme="dark"] .conversation-item:hover  { background-color: rgba(255, 255, 255, 0.06); }
[data-bs-theme="dark"] .conversation-item.active { background-color: rgba(255, 255, 255, 0.10); }

/* ── Welcome / suggestion chips ────────────────────────── */
[data-bs-theme="dark"] .assistant-suggestion        { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .assistant-suggestion:hover  { background: var(--bs-secondary-bg); }

/* ── Composer input box ────────────────────────────────── */
[data-bs-theme="dark"] .assistant-input-box {
    background: var(--bs-tertiary-bg);
    box-shadow: none;
}

/* ── Thinking indicator pill ───────────────────────────── */
[data-bs-theme="dark"] .chat-thinking-content { background: var(--bs-tertiary-bg); }

/* ── Right-sidebar panel form ──────────────────────────── */
[data-bs-theme="dark"] .assistant-panel-header  { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .assistant-panel-history { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .assistant-panel-chat    { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .assistant-panel-header-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ── Conversation search input (history pane) ──────────── */
[data-bs-theme="dark"] .conversation-search-input { background: var(--bs-body-bg); }

/* ── Context reference chips ─────────────────────────────── */
[data-bs-theme="dark"] .assistant-context-chip { background: var(--bs-tertiary-bg); }


/* ═══════════════════════════════════════════════════════════
   Ticket Panel — slide-over layout
   ═══════════════════════════════════════════════════════════ */

#ticket-panel {
    width: 0;
    overflow: hidden;
    flex-shrink: 0;
    border-left: 1px solid var(--bs-border-color);
    transition: width 0.25s ease;
    position: relative;
    z-index: var(--mojo-zindex-fixed, 1030);
}

.ticket-panel-open #ticket-panel {
    width: 460px;
}

/* ── Action card styles ──────────────────────────────────── */

.ac {
    margin: 8px 16px 4px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
    overflow: hidden;
}

.ac-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 0;
}

.ac-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ac-dot.accent  { background: var(--bs-primary); }
.ac-dot.red     { background: var(--bs-danger); }
.ac-dot.green   { background: var(--bs-success); }
.ac-dot.amber   { background: var(--bs-warning); }
.ac-dot.context { background: var(--bs-secondary-color); }

.ac-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
    flex: 1;
}

.ac-badge {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.ac-badge.approved { background: rgba(var(--bs-success-rgb), 0.1); color: var(--bs-success); }
.ac-badge.denied   { background: rgba(var(--bs-danger-rgb), 0.1); color: var(--bs-danger); }
.ac-badge.pending  { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

.ac.resolved .ac-top { cursor: pointer; }
.ac.resolved .ac-top:hover { background: var(--bs-tertiary-bg); }
.ac-chevron { font-size: 0.6rem; color: var(--bs-secondary-color); flex-shrink: 0; transition: transform 0.15s; }
.ac.resolved:not(.compact) .ac-chevron { transform: rotate(180deg); }
.ac.resolved.compact .ac-detail { display: none; }
.ac.resolved.compact .ac-label { font-weight: 400; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ac.resolved.compact .ac-top { min-width: 0; }

.ac-detail {
    padding: 6px 12px 0;
    font-size: 0.74rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

.ac-ref {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--bs-primary);
    cursor: pointer;
    padding: 3px 8px;
    margin-top: 4px;
    border-radius: 5px;
    transition: all 0.12s;
}

.ac-ref:hover {
    background: rgba(var(--bs-primary-rgb), 0.06);
    text-decoration: underline;
}

.ac-ref i { font-size: 0.65rem; }

.ac-foot {
    padding: 8px 12px 10px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-approve, .btn-deny {
    font-size: 0.74rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.12s;
}

.btn-approve {
    background: var(--bs-success);
    color: #fff;
}

.btn-approve:hover { filter: brightness(1.08); }

.btn-deny {
    background: transparent;
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

.btn-deny:hover {
    background: rgba(var(--bs-danger-rgb), 0.05);
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-approve:disabled, .btn-deny:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Resolved card */
.ac.resolved { border-color: var(--bs-border-color-translucent); }
.ac.resolved .ac-top { padding-bottom: 10px; }
.ac.resolved .ac-label { color: var(--bs-secondary-color); font-weight: 400; }

/* Context card */
.ac.ac-context { border-style: dashed; }

/* ── Resolved actions summary ────────────────────────────── */

.actions-summary {
    margin: 6px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px dashed var(--bs-border-color);
    transition: all 0.12s;
    font-size: 0.74rem;
    color: var(--bs-secondary-color);
}

.actions-summary:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}

.actions-summary i { font-size: 0.7rem; }
.actions-summary .count { font-weight: 500; }
.actions-summary .dots { display: flex; gap: 3px; margin-left: auto; }
.actions-summary .sdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.sdot-accent { background: var(--bs-primary); }
.sdot-red    { background: var(--bs-danger); }
.sdot-green  { background: var(--bs-success); }
.sdot-amber  { background: var(--bs-warning); }

.actions-expanded { display: none; }
.actions-expanded.show { display: block; }
.actions-collapse-btn {
    display: block;
    margin: 4px 16px 6px;
    font-size: 0.72rem;
    color: var(--bs-primary);
    cursor: pointer;
    padding: 3px 0;
}
.actions-collapse-btn:hover { text-decoration: underline; }

/* ========================================================================
   RuleSetView — Overview section cards
   ========================================================================
   The KPI row uses a CSS grid that's container-aware (auto-fit + minmax),
   not viewport-aware Bootstrap columns. That way 4 cards fit side-by-side
   any time the section is at least ~660px wide — including in a modal at
   sub-md viewport widths where Bootstrap's `col-md-3` would have wrapped.
*/
.ruleset-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (max-width: 575px) {
    .ruleset-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.ruleset-overview-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (max-width: 575px) {
    .ruleset-overview-pair { grid-template-columns: 1fr; }
}
.ruleset-overview-card { padding: 0.6rem 0.75rem; }
.ruleset-overview-card h6 {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin: 0 0 0.4rem;
}
.ruleset-overview-card ul {
    font-size: 0.75rem;
    line-height: 1.4;
    padding-left: 0.9rem;
    margin: 0;
    color: var(--bs-body-color);
}
.ruleset-overview-card ul li { margin-bottom: 0.1rem; }
.ruleset-overview-card ul li:last-child { margin-bottom: 0; }
.ruleset-overview-card code {
    font-size: 0.72rem;
    word-break: break-word;
}

/* ========================================================================
   RuleSetView — Triggering section flow
   ========================================================================
   Match → Bundle → Threshold → Re-trigger as a 4-column visual flow with
   chevron arrows between cards.
*/
.rs-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1rem;
}
.rs-flow-step {
    padding: 1rem 1.05rem;
    background: var(--bs-body-bg);
    position: relative;
    min-width: 0;
}
.rs-flow-step + .rs-flow-step { border-left: 1px solid var(--bs-border-color); }
.rs-flow-step::after {
    content: '';
    position: absolute;
    right: -8px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 14px; height: 14px;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
    z-index: 1;
}
.rs-flow-step:last-child::after { display: none; }
.rs-flow-num {
    font-family: var(--bs-font-monospace);
    font-size: 0.7rem;
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
    font-weight: 600;
}
.rs-flow-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.15rem 0 0.4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
.rs-flow-title .btn { padding: 0.1rem 0.4rem; font-size: 0.75rem; }
.rs-flow-value { font-size: 0.95rem; color: var(--bs-body-color); font-weight: 500; }
.rs-flow-empty { color: var(--bs-secondary-color); font-style: italic; font-weight: 400; }
.rs-flow-hint  { font-size: 0.78rem; color: var(--bs-secondary-color); margin-top: 0.3rem; }
@media (max-width: 768px) {
    .rs-flow { grid-template-columns: 1fr 1fr; }
    .rs-flow-step:nth-child(2)::after { display: none; }
}
@media (max-width: 480px) {
    .rs-flow { grid-template-columns: 1fr; }
    .rs-flow-step + .rs-flow-step { border-left: none; border-top: 1px solid var(--bs-border-color); }
    .rs-flow-step::after { display: none; }
}

/* ========================================================================
   RuleSetView — Handler chain cards
   ======================================================================== */
.rs-chain {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 0.75rem;
}
.rs-chain-step {
    flex: 1 1 200px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-left-width: 3px;
    border-radius: 0.5rem;
    padding: 0.85rem 0.95rem;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    position: relative;
}
.rs-chain-step.tone-info    { border-left-color: var(--bs-info); }
.rs-chain-step.tone-warning { border-left-color: var(--bs-warning); }
.rs-chain-step.tone-danger  { border-left-color: var(--bs-danger); }
.rs-chain-step.tone-primary { border-left-color: var(--bs-primary); }
.rs-chain-icon {
    width: 32px; height: 32px;
    border-radius: 0.375rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
.rs-chain-step.tone-info    .rs-chain-icon { background: rgba(13, 110, 253, 0.12); color: var(--bs-info); }
.rs-chain-step.tone-warning .rs-chain-icon { background: rgba(255, 193, 7, 0.16);  color: var(--bs-warning); }
.rs-chain-step.tone-danger  .rs-chain-icon { background: rgba(220, 53, 69, 0.16);  color: var(--bs-danger); }
.rs-chain-step.tone-primary .rs-chain-icon { background: rgba(13, 110, 253, 0.12); color: var(--bs-primary); }
.rs-chain-label  { font-weight: 600; font-size: 0.9rem; color: var(--bs-emphasis-color, var(--bs-body-color)); }
.rs-chain-detail { font-size: 0.8rem; color: var(--bs-secondary-color); word-break: break-all; }
.rs-chain-raw {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bs-secondary-bg);
    border-radius: 0.375rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    word-break: break-all;
}

/* ========================================================================
   RuleSetView — Agent Prompt textarea
   ======================================================================== */
.rs-prompt {
    width: 100%;
    min-height: 220px;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
}
.rs-prompt:focus { outline: 2px solid var(--bs-primary); outline-offset: -1px; border-color: transparent; }

/* ========================================================================
   RuleSetView — Incidents table title ellipsis
   ========================================================================
   max-width:0 + width:100% on the cell tricks the table layout into letting
   the title respect text-overflow without making the row grow.
*/
.ruleset-incidents-section td.rs-incident-title {
    max-width: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================================================
   RuleSetTablePage — row Identity cell
   ========================================================================
   Combined first-column cell that packs priority pill + name + active state
   + #id reference into a two-line block, replacing four atomic columns.
*/
.rs-row-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
}
.rs-row-identity-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.rs-row-identity-name {
    font-weight: 500;
    color: var(--bs-emphasis-color, var(--bs-body-color));
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-row-identity-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}
.rs-row-identity-active {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.rs-row-identity-active.is-active   { color: var(--bs-success); }
.rs-row-identity-active.is-inactive { color: var(--bs-secondary-color); }
.rs-row-identity-id {
    font-family: var(--bs-font-monospace);
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
}

/* ========================================================================
   RuleSetTablePage — row Behavior cell
   ========================================================================
   Compact two-line cell: handler chain (icon + label chips) on top, a
   trigger/bundle one-liner below. Tones (danger / warning / info / primary)
   mirror HANDLER_META in RuleSetView so the table and the detail view share
   the same visual language.
*/
.rs-row-behavior { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.rs-row-chips    { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.rs-row-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color-translucent);
    border-left-width: 2px;
}
.rs-row-chip.tone-info    { border-left-color: var(--bs-info); }
.rs-row-chip.tone-warning { border-left-color: var(--bs-warning); }
.rs-row-chip.tone-danger  { border-left-color: var(--bs-danger); }
.rs-row-chip.tone-primary { border-left-color: var(--bs-primary); }
.rs-row-chip-empty        { color: var(--bs-secondary-color); font-style: italic; }
.rs-row-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}
.rs-row-meta i  { font-size: 0.78rem; }
.rs-row-sep     { padding: 0 0.15rem; }


/* ========================================================================
   DetailView — minimalist typography (small, clean, drill-down feel)

   Applied via the `.detail-view` wrapper so only DetailView subclasses pick
   up the tightened sizes. The page-level Bootstrap defaults are unchanged
   for everything else.
*/
.detail-view {
    font-size: 0.85rem;
    line-height: 1.45;
}
.detail-view .detail-header .dh-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin: 0 0 0.15rem;
}
.detail-view .detail-header .dh-subtitle {
    font-size: 0.78rem;
    margin: 0 0 0.4rem;
}
.detail-view .detail-header .dh-icon {
    width: 38px; height: 38px;
    border-radius: 0.5rem;
    font-size: 1.05rem;
}
.detail-view .detail-header .dh-chips .badge {
    font-size: 0.68rem;
    padding: 0.2em 0.6em;
}
.detail-view .section-eyebrow {
    color: var(--bs-secondary-color);
    font-size: 0.58rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.15rem;
    opacity: 0.7;
}
.detail-view .section-title {
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0 0 1rem;
    letter-spacing: -0.005em;
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
/* Section padding is owned by `DetailView.contentPadding` (default
   `'1.5rem'`, applied as inline style on `.snv-content` by SideNavView).
   Section views no longer need their own `p-3` / `p-4` utility class —
   the layout handles uniform breathing room. */

/* Tighter MetricCard inside DetailView Overview sections — the default
   is the small / quiet treatment; `metric-card-lg` is opt-in for
   emphasis only (rarely used). */
.detail-view .metric-card { padding: 0.5rem 0.7rem; gap: 0.15rem; }
.detail-view .metric-card-label { font-size: 0.58rem; letter-spacing: 0.1em; opacity: 0.85; }
.detail-view .metric-card-value { font-size: 0.82rem; line-height: 1.3; }
.detail-view .metric-card.metric-card-lg .metric-card-value { font-size: 0.95rem; letter-spacing: -0.005em; }

/* Tiny, subtle button groups inside DetailView. The Common/Advanced/
   Effective and similar segment toggles don't need to be touch-sized;
   they're secondary controls in a viewer surface. Override Bootstrap's
   default btn-* sizes inside .detail-view scope so we don't have to
   sprinkle .btn-sm on every consumer. */
.detail-view .btn-group .btn,
.detail-view .btn-group-sm .btn {
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    line-height: 1.4;
    font-weight: 500;
    border-radius: 0.3rem;
}
.detail-view .btn-group .btn-outline-secondary {
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--bs-secondary-color);
}
.detail-view .btn-group .btn-outline-secondary:hover {
    background: var(--bs-secondary-bg);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .detail-view .btn-group .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .detail-view .btn-group .btn-outline-secondary:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Side rail tightening */
.detail-view .snv-nav a { padding: 0.35rem 1.15rem; font-size: 0.78rem; }
.detail-view .snv-nav-label { font-size: 0.6rem; letter-spacing: 0.08em; padding: 0.7rem 1.15rem 0.2rem; opacity: 0.6; }
.detail-view .snv-badge { font-size: 0.62rem; font-weight: 500; padding: 0.05rem 0.4rem; }


/* ========================================================================
   DetailView — generic Overview-section layout helpers

   The Overview section of every DetailView leans on the same shape: a
   4-up KPI strip and a 2-up card row for the at-a-glance pair. These
   classes generalize the ruleset-* equivalents so any DetailView
   subclass (Job / User / Group / etc.) can drop them in.
*/
/* KPI strip — 4-up by default (the canonical Overview row).
   Container query (not viewport) drops to 2-up when the strip's own
   container is genuinely narrow, so it works correctly inside an `lg`
   modal where auto-fit was producing awkward 3+1 layouts. */
.detail-kpi-grid {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
@container (max-width: 480px) {
    .detail-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Card-pair — stacks by default; only goes side-by-side when its own
   container is wide enough to give each card real breathing room.
   Container query (not viewport) so it works correctly inside an `lg`
   modal regardless of the page width. */
.detail-pair {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
@container (min-width: 720px) {
    .detail-pair { grid-template-columns: 1fr 1fr; }
}
.detail-pair .card-title {
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bs-emphasis-color, var(--bs-body-color));
    letter-spacing: -0.005em;
}
.detail-pair .card-title i { color: var(--bs-secondary-color); font-size: 0.85rem; }
/* The card titles ("What triggered this", "Recent activity") are
   self-evident headings — no surrounding box needed. Pair cells sit
   transparently on the section background; the title alone separates
   them visually. */
.detail-pair .card {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.detail-pair .card .card-body { padding: 0; }


/* StatusPanel — moved to src/core/css/core.css; the JS class lives at
   @core/views/data/StatusPanel.js. Kept this header so grep still
   finds the migration history. */


/* Timeline — moved to src/core/css/core.css; the JS class lives at
   @core/views/data/Timeline.js. */


/* Flat labeled-section primitives — moved to src/core/css/core.css.
   See `.detail-section`, `.detail-section-eyebrow`,
   `.detail-section-action`, `.detail-flat-row*`, and `KnownFieldsCard`
   blocks there. The classes are framework-wide @core primitives now. */


/* ========================================================================
   AdminConnectedSection — OAuth provider rows
   ========================================================================
   Stacked rows of linked providers, each with icon · name · email · meta ·
   unlink button. Theme-aware via Bootstrap tokens (no hardcoded hex).
*/
.admin-connected-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.25rem;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
}
.admin-connected-row:last-child { border-bottom: none; }
[data-bs-theme="dark"] .admin-connected-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.admin-connected-icon {
    width: 36px; height: 36px;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
.admin-connected-info { flex: 1; min-width: 0; }
.admin-connected-provider {
    font-weight: 600;
    font-size: 0.88rem;
    text-transform: capitalize;
    color: var(--bs-body-color);
}
.admin-connected-meta {
    font-size: 0.78rem;
}
.admin-connected-empty {
    text-align: center;
    padding: 2rem 1rem;
}
.admin-connected-empty i {
    font-size: 2rem;
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}


/* ========================================================================
   AdminSecuritySection — clickable security action rows
   ========================================================================
   Each row is an interactive item: icon + title/description + badge or
   chevron. Hover lifts the border + bg slightly. Theme-aware via tokens.
*/
.admin-security-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.25rem;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
    margin-bottom: 0;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s;
}
.admin-security-item:last-child { border-bottom: none; }
[data-bs-theme="dark"] .admin-security-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.admin-security-item:hover {
    background: var(--bs-secondary-bg);
}
.admin-security-icon {
    width: 36px; height: 36px;
    border-radius: 0.5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.admin-security-info { flex: 1; min-width: 0; }
.admin-security-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--bs-body-color);
}
.admin-security-desc {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}
.admin-security-chevron {
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
    font-size: 0.8rem;
    flex-shrink: 0;
    opacity: 0.7;
}


/* ========================================================================
   AdminSecuritySection — passkey list (Modal.dialog body)
   ======================================================================== */
/* Audit / Activity / Devices / Groups feed rows inside UserView's
   ListView-backed sections. Single-column flow that fits the cramped
   Modal.detail width — meta line on top, body below. */
.user-feed-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.user-feed-row:last-child { border-bottom: none; }
.user-feed-row .user-feed-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.user-feed-row .user-feed-body {
    color: var(--bs-body-color);
}
.user-feed-row .user-feed-path {
    word-break: break-all;
}
[data-bs-theme="dark"] .user-feed-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Audit feed rows — leading tonal icon, primary/secondary stack, right-
   aligned relative time. Tone-keyed left-rail accent gives the list a
   "feed" feel. Used by UserView's Activity / Events / Audit Log tabs. */
.user-audit-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.5rem 0.55rem 0.65rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 3px solid var(--bs-secondary);
}
.user-audit-row:first-child { border-top: none; }
.user-audit-row.user-audit-row-success { border-left-color: var(--bs-success); }
.user-audit-row.user-audit-row-info    { border-left-color: var(--bs-info); }
.user-audit-row.user-audit-row-warning { border-left-color: var(--bs-warning); }
.user-audit-row.user-audit-row-danger  { border-left-color: var(--bs-danger); }

.user-audit-row .user-audit-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 0.4rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-top: 0.05rem;
}
.user-audit-row.user-audit-row-success .user-audit-icon { background: rgba(var(--bs-success-rgb), 0.12); color: var(--bs-success); }
.user-audit-row.user-audit-row-info    .user-audit-icon { background: rgba(var(--bs-info-rgb), 0.12);    color: var(--bs-info); }
.user-audit-row.user-audit-row-warning .user-audit-icon { background: rgba(var(--bs-warning-rgb), 0.12); color: var(--bs-warning); }
.user-audit-row.user-audit-row-danger  .user-audit-icon { background: rgba(var(--bs-danger-rgb), 0.12);  color: var(--bs-danger); }

.user-audit-row .user-audit-body {
    flex: 1;
    min-width: 0;
}
.user-audit-row .user-audit-title {
    font-weight: 600;
    color: var(--bs-body-color);
    font-size: 0.85rem;
    line-height: 1.3;
}
.user-audit-row .user-audit-detail {
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-top: 0.1rem;
    word-break: break-word;
}
.user-audit-row .user-audit-path {
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
    font-size: 0.72rem;
    margin-top: 0.15rem;
    word-break: break-all;
}
.user-audit-row .user-audit-meta { margin-top: 0.25rem; }

.user-audit-row .user-audit-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    align-self: flex-start;
    margin-top: 0.25rem;
    white-space: nowrap;
}

[data-bs-theme="dark"] .user-audit-row {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* Logins timeline — vertical rail with tone-coded dots per event. Used by
   UserView's Logins tab. CSS-only timeline (no group-row primitive); see
   planning/requests/listview-grouped-rows.md for the deferred day-grouping
   header support. */
.user-login-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.5rem 0.65rem 2.5rem;
}
.user-login-row::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}
.user-login-row:first-child::before { top: 0.7rem; }
.user-login-row:last-child::before  { bottom: calc(100% - 1.25rem); }

.user-login-row .user-login-dot {
    position: absolute;
    left: 0.75rem;
    top: 0.6rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: var(--bs-secondary);
    border: 3px solid var(--bs-body-bg);
    z-index: 1;
}
.user-login-row .user-login-dot-success { background: var(--bs-success); }
.user-login-row .user-login-dot-danger  { background: var(--bs-danger); }
.user-login-row .user-login-dot-warning { background: var(--bs-warning); }
.user-login-row .user-login-dot-info    { background: var(--bs-info); }

.user-login-row .user-login-body {
    flex: 1;
    min-width: 0;
}
.user-login-row .user-login-title {
    font-weight: 500;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    line-height: 1.3;
}
.user-login-row .user-login-meta {
    margin-top: 0.15rem;
    word-break: break-all;
}

.user-login-row .user-login-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    align-self: flex-start;
    margin-top: 0.2rem;
    white-space: nowrap;
}

[data-bs-theme="dark"] .user-login-row::before {
    background: var(--bs-border-color-translucent);
}

/* Device card rows — icon + label + last-seen + kind badge. Same row
   shape as the audit feed but with an icon column. */
.user-device-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.user-device-row:last-child { border-bottom: none; }
.user-device-row .user-device-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.user-device-row .user-device-info {
    flex: 1;
    min-width: 0;
}
.user-device-row .user-device-label {
    font-weight: 500;
    color: var(--bs-body-color);
}
.user-device-row .user-device-meta {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}
[data-bs-theme="dark"] .user-device-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.admin-passkey-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.25rem;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
}
.admin-passkey-row:last-child { border-bottom: none; }
[data-bs-theme="dark"] .admin-passkey-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.admin-passkey-icon {
    width: 32px; height: 32px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border-radius: 0.4rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.admin-passkey-info { flex: 1; min-width: 0; }
.admin-passkey-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}
.admin-passkey-meta {
    font-size: 0.73rem;
}
.admin-passkey-empty {
    text-align: center;
    padding: 2rem 1rem;
}
.admin-passkey-empty i {
    font-size: 2rem;
    color: var(--bs-tertiary-color, var(--bs-secondary-color));
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}


/* ========================================================================
   AdminSecuritySection — recovery codes (Modal.dialog body)
   ======================================================================== */
.admin-recovery-info {
    font-size: 0.82rem;
    margin-bottom: 1rem;
}
.admin-recovery-remaining {
    font-weight: 600;
    color: var(--bs-emphasis-color, var(--bs-body-color));
}
.admin-recovery-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
}
.admin-recovery-code {
    font-family: var(--bs-font-monospace);
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    background: var(--bs-tertiary-bg);
    border: 0;
    border-radius: 0.4rem;
    text-align: center;
    color: var(--bs-body-color);
}


/* ========================================================================
   DetailView — Field-card (DEPRECATED — prefer flat labeled sections)
   ========================================================================
   Bordered card containing a header row (group name + edit pencil) and a
   stack of label/value rows. Replaced by the flat
   `.detail-section-eyebrow` + `.detail-flat-row` family above. Existing
   call-sites in UserView / DeviceView / etc. will be migrated off as
   part of the DetailView migration rethink (see
   planning/requests/detailview-migration-rethink.md). Do NOT add new
   uses of `.detail-field-card*`.
*/
.detail-field-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.detail-field-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.detail-field-card-header h4 {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-body-color);
    display: flex; align-items: center; gap: 0.4rem;
}
.detail-field-card-header h4 i { color: var(--bs-secondary-color); }
.detail-field-card-body {
    padding: 0.2rem 0.9rem 0.6rem;
}
.detail-field-row {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    padding: 0.5rem 0;
    border-top: 1px dashed var(--bs-border-color);
    align-items: center;
    font-size: 0.85rem;
}
.detail-field-row:first-child { border-top: none; }
.detail-field-row .detail-field-label {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}
.detail-field-row .detail-field-value {
    color: var(--bs-body-color);
    font-weight: 500;
}


/* ========================================================================
   DetailView — Permissions grouping
   ========================================================================
   Stacked permission groups, each with a header (area + granted-count meta)
   and rows of permission name/key + Bootstrap form-switch. Pairs with the
   .form-check.form-switch markup from Bootstrap for the actual toggle.
*/
/* Borderless flat groups — same minimal treatment as flat-row family.
   No box, no header bar; the small uppercase eyebrow is the only
   subsection signal. */
.detail-perm-group {
    background: transparent;
    border: 0;
    margin-bottom: 1.5rem;
    overflow: visible;
}
.detail-perm-group:not(:first-child) { margin-top: 2rem; }
.detail-perm-group-header {
    padding: 0 0 0.5rem;
    border-bottom: 0;
    display: flex; justify-content: space-between; align-items: center;
}
.detail-perm-group-header h5 {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    font-weight: 700;
}
.detail-perm-group-meta {
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    font-family: var(--bs-font-monospace);
    opacity: 0.7;
}
/* Permissions grid — wraps the rows. Common tab is single-column,
   Advanced + Effective use the .detail-perm-grid--two-col modifier. */
.detail-perm-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.5rem;
}
.detail-perm-grid--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) {
    .detail-perm-grid--two-col { grid-template-columns: 1fr; }
}

/* A row is a Bootstrap `form-check form-switch`: input on the left,
   label.form-check-label on the right (the label *is* the clickable name).
   Override .form-check's default left-padding so the switch sits flush
   with the section's left edge. */
.detail-perm-row.form-check {
    padding: 0.55rem 0 0.55rem 2.5rem;
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    min-height: 2.5rem;
    display: block;
}
.detail-perm-row.form-check:first-of-type { border-top: none; }
[data-bs-theme="dark"] .detail-perm-row.form-check {
    border-top-color: rgba(255, 255, 255, 0.06);
}
.detail-perm-row .form-check-input {
    margin-top: 0.2rem;
}
.detail-perm-name {
    font-size: 0.85rem;
    color: var(--bs-body-color);
    font-weight: 500;
    cursor: pointer;
}
.detail-perm-key {
    display: block;
    font-family: var(--bs-font-monospace);
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    font-weight: 400;
    margin-top: 0.1rem;
}
.detail-perm-help {
    display: block;
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    font-weight: 400;
    line-height: 1.45;
    margin-top: 0.15rem;
}


/* ========================================================================
   DetailView — Audit list
   ========================================================================
   Compact log entries with an icon, source label, descriptive text, and
   relative timestamp. Designed to merge today's separate Events / Activity
   Log / Object Log tabs into a single feed with a source filter.
*/
.detail-audit-list {
    list-style: none; margin: 0; padding: 0;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}
.detail-audit-entry {
    display: grid;
    grid-template-columns: 1.5rem 4.5rem minmax(0, 1fr) 5.5rem;
    gap: 0.75rem;
    padding: 0.45rem 0.85rem;
    border-top: 1px dashed var(--bs-border-color);
    align-items: center;
    font-size: 0.78rem;
}
.detail-audit-entry:first-child { border-top: none; }
.detail-audit-entry > div { min-width: 0; }
.detail-audit-icon {
    width: 1.75rem; height: 1.75rem;
    border-radius: 0.4rem;
    display: grid; place-items: center;
    font-size: 0.85rem;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}
.detail-audit-icon.tone-danger  { color: var(--bs-danger);  background: rgba(var(--bs-danger-rgb),  0.1); border-color: rgba(var(--bs-danger-rgb),  0.25); }
.detail-audit-icon.tone-warning { color: var(--bs-warning); background: rgba(var(--bs-warning-rgb), 0.1); border-color: rgba(var(--bs-warning-rgb), 0.25); }
.detail-audit-icon.tone-success { color: var(--bs-success); background: rgba(var(--bs-success-rgb), 0.1); border-color: rgba(var(--bs-success-rgb), 0.25); }
.detail-audit-icon.tone-info    { color: var(--bs-info);    background: rgba(var(--bs-info-rgb),    0.1); border-color: rgba(var(--bs-info-rgb),    0.25); }
.detail-audit-source {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--bs-secondary-color);
    font-family: var(--bs-font-monospace);
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail-audit-when {
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* ════════════════════════════════════════════════════════════════
   DetailView redesign primitives — dark theme overrides

   The base styles above use Bootstrap surface tokens (bs-tertiary-bg,
   bs-border-color, etc.) which auto-adapt under data-bs-theme="dark".
   The toned background tints (rgba(var(--bs-danger-rgb), 0.08))
   already work in both themes. Only the timeline connector and audit
   row hover feedback need a subtle dark adjustment.
   ════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .detail-timeline::before {
    background: linear-gradient(180deg, var(--bs-border-color-translucent, var(--bs-border-color)), transparent);
}
[data-bs-theme="dark"] .detail-audit-entry:hover {
    background: rgba(255, 255, 255, 0.025);
}
[data-bs-theme="dark"] .detail-perm-row:hover {
    background: rgba(255, 255, 255, 0.02);
}
[data-bs-theme="dark"] .detail-status-panel {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}


/* ========================================================================
   DetailView — Avatar (used by UserView header, MemberView header)
   ========================================================================
   Gradient initials block. Render in place of the dh-icon when the record
   is a user/person — uses Bootstrap success→info gradient by default.
*/
.detail-avatar {
    width: 38px; height: 38px;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--bs-success), var(--bs-info));
    display: grid; place-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-bg);
    flex: 0 0 auto;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.detail-avatar.detail-avatar-lg {
    width: 56px; height: 56px;
    border-radius: 0.75rem;
    font-size: 1.4rem;
}
.detail-avatar.detail-avatar-sm {
    width: 28px; height: 28px;
    border-radius: 0.4rem;
    font-size: 0.7rem;
}


/* ========================================================================
   DetailView — Kind pill (used in UserView Devices, FileView shares, etc.)
   ========================================================================
   Compact rounded chip used to distinguish row types in unified tables
   (Browser vs Push device, file kind, etc.). Pair with `.text-info`,
   `.text-primary`, `.text-warning` etc. on the element to color the
   icon + text.
*/
.detail-kind-pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    font-size: 0.65rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
    line-height: 1.6;
}
.detail-kind-pill i { font-size: 0.7rem; }


/* ========================================================================
   DetailView — Error block (used by JobDetailsView execution card,
   IncidentView stack-trace summary, etc.)
   ======================================================================== */
.detail-error-block {
    background: rgba(var(--bs-danger-rgb), 0.06);
    border: 1px solid rgba(var(--bs-danger-rgb), 0.25);
    border-radius: 0.35rem;
    padding: 1rem 0.75rem 0.55rem;
    margin-top: 0.6rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.7rem;
    color: var(--bs-danger);
    white-space: pre-wrap;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
}
.detail-error-block::before {
    content: 'ERROR';
    position: absolute;
    top: 0.35rem; right: 0.65rem;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    color: var(--bs-danger);
    opacity: 0.7;
    font-family: var(--bs-font-sans-serif);
    font-weight: 600;
}


/* ========================================================================
   UserView — Permissions filter input + API-key token banner
   ========================================================================
   Layout-only knobs that don't fit a Bootstrap utility cleanly. Both are
   theme-neutral (no colors) so dark theme inherits automatically.
*/
.user-permissions-tab .form-control[data-action="filter-perms"] {
    max-width: 280px;
}
.user-api-keys-section .alert .font-monospace,
.user-api-keys-section .alert code {
    word-break: break-all;
}


/* ========================================================================
   IncidentView — source-section action row
   ========================================================================
   The Source section ends with a row of contextual buttons (Block /
   Whitelist / Open GeoIP / View on map). Sits below the flat-row stack
   with predictable rhythm, then yields to the inner DataView blocks.
*/
.incident-source-actions {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}


/* ========================================================================
   ShortLinkView · Slack / iMessage preview tile
   ========================================================================
   Borderless tinted region (per Wave 3 design language — NO outer card
   wrapper). Thumb on the left, domain / title / description on the right.
   Tones use Bootstrap surface tokens so dark theme works automatically.

   Used by: src/extensions/admin/shortlinks/ShortLinkView.js
   (ShortLinkOverviewSection)
*/
.sl-preview {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--bs-secondary-bg);
}
.sl-preview-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 0.4rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.6rem;
}
.sl-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sl-preview-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    justify-content: center;
}
.sl-preview-domain {
    font-size: 0.65rem;
    color: var(--bs-secondary-color);
    text-transform: lowercase;
}
.sl-preview-title {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-body-color);
}
.sl-preview-desc {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* ========================================================================
   GroupView — Hierarchy mini-tree (Overview)
   ========================================================================
   Small DOM-only ASCII tree under the "Hierarchy" eyebrow in
   GroupView's Overview section. No card wrapper — sits flat on the
   surface. The line-height accommodates the decorative └─ / ├─ rule
   chars without crowding adjacent rows.
*/
.group-hierarchy-tree {
    color: var(--bs-secondary-color);
    margin-bottom: 1.5rem;
}
.group-hierarchy-tree-rows { line-height: 1.7; }


/* ========================================================================
   Incident-domain list items (.ili)
   ========================================================================
   Reusable ListView card chassis used by EventListItem / TicketListItem /
   IncidentListItem (in src/extensions/admin/incidents/). All three render
   into the same `.ili-card` shell so the visual language stays consistent
   across embedded sub-lists in IncidentView (Events / Tickets / Related)
   and any future surface that lists these models. Cards layer on top of
   ListView's `rowStripe` (severity edge) and `clickAction` (whole-card
   click-to-view); this section owns only the inside-the-row design
   language — chip pills, priority dots, meta row, id slot.
*/
/* The list-view-item is a flex child of .list-items (column flex). Without
   min-width: 0 the child won't shrink below its intrinsic content width —
   long titles, status pills, and meta lines escape narrow panels (DetailView
   sections, modal bodies). Constrain at the item level. */
.event-list-item,
.ticket-list-item,
.incident-list-item {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.ili-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background 0.1s;
    min-width: 0;
    max-width: 100%;
}
.list-view-item:last-child .ili-card { border-bottom: none; }
.list-view-item.clickable .ili-card { cursor: pointer; }
.list-view-item.clickable:hover .ili-card { background: var(--bs-tertiary-bg); }

.ili-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}
.ili-title {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 500;
    color: var(--bs-body-color);
    /* Wrap long titles instead of truncating — matches the DetailView
       header pattern (`word-break: break-word`). Long error strings like
       stack-trace lines stay readable across two/three lines. */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.ili-eyebrow {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.ili-meta {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}
.ili-meta > * { white-space: nowrap; }
/* Free-text slot in the meta row (category line, hostname). Truncates
   with ellipsis so the right-aligned #id stays put. Single-line in the
   meta row keeps the card height predictable. */
.ili-meta-text {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ili-meta-dim { color: var(--bs-tertiary-color); }

.ili-id {
    margin-left: auto;
    font-family: var(--bs-font-monospace);
    color: var(--bs-tertiary-color);
}

/* Status / category chip — toned background + matching text colour.
   `flex-shrink: 0` keeps the pill from being squeezed when its sibling
   title is long. */
.ili-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.ili-chip-info     { background: rgba(var(--bs-info-rgb), 0.10);    color: var(--bs-info); }
.ili-chip-success  { background: rgba(var(--bs-success-rgb), 0.10); color: var(--bs-success); }
.ili-chip-warning  { background: rgba(var(--bs-warning-rgb), 0.12); color: var(--bs-warning); }
.ili-chip-danger   { background: rgba(var(--bs-danger-rgb), 0.10);  color: var(--bs-danger); }
.ili-chip-muted    { background: var(--bs-secondary-bg);            color: var(--bs-secondary-color); }
.ili-chip-cat      { background: var(--bs-secondary-bg);            color: var(--bs-secondary-color); }

/* Priority chip — boxy, monospace number */
.ili-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: var(--bs-font-monospace);
}
.ili-pri-hi { background: rgba(var(--bs-danger-rgb), 0.10);  color: var(--bs-danger); }
.ili-pri-md { background: rgba(var(--bs-warning-rgb), 0.12); color: var(--bs-warning); }
.ili-pri-lo { color: var(--bs-secondary-color); }

/* Category dot — 6px circle preceding the category label in the meta row */
.ili-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.ili-dot-primary { background: var(--bs-primary); }
.ili-dot-success { background: var(--bs-success); }
.ili-dot-warning { background: var(--bs-warning); }
.ili-dot-danger  { background: var(--bs-danger); }
.ili-dot-muted   { background: var(--bs-secondary-color); }


/* ═══════════════════════════════════════════════════════════
   TicketView — Lite Modal
   Compact, clickable-field header. Clicking pills / fields
   triggers inline edits; description is read-only preview.
   ═══════════════════════════════════════════════════════════ */

.ticket-view .tv-body { padding: 14px 8px 4px; }

.ticket-view .tv-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.ticket-view .tv-title-row { display: flex; align-items: flex-start; gap: 6px; }
.ticket-view .tv-title-block { flex: 1; min-width: 0; }
.ticket-view .tv-id-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ticket-view .tv-id { font-family: var(--bs-font-monospace); font-size: 0.72rem; color: var(--bs-secondary-color); }
.ticket-view .tv-time { font-size: 0.7rem; color: var(--bs-secondary-color); display: inline-flex; align-items: center; gap: 3px; }
.ticket-view .tv-time i { font-size: 0.64rem; }

.ticket-view .tv-pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 8px; border-radius: 10px;
    font-size: 0.68rem; font-weight: 500;
    cursor: pointer; transition: filter 0.12s;
}
.ticket-view .tv-pill:hover { filter: brightness(0.92); }
.ticket-view .tv-pill i { font-size: 0.52rem; }
.ticket-view .tv-pill-new      { background: rgba(var(--bs-info-rgb), 0.1);     color: var(--bs-info); }
.ticket-view .tv-pill-open     { background: rgba(var(--bs-success-rgb), 0.1);  color: var(--bs-success); }
.ticket-view .tv-pill-prog     { background: rgba(var(--bs-warning-rgb), 0.1);  color: var(--bs-warning); }
.ticket-view .tv-pill-resolved { background: rgba(var(--bs-success-rgb), 0.1);  color: var(--bs-success); }
.ticket-view .tv-pill-closed   { background: var(--bs-secondary-bg);            color: var(--bs-secondary-color); }

.ticket-view .tv-title { font-size: 1rem; font-weight: 600; color: var(--bs-emphasis-color); line-height: 1.35; margin-bottom: 6px; }

.ticket-view .tv-fields { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ticket-view .tv-field {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.74rem; color: var(--bs-secondary-color);
    padding: 2px 7px; border-radius: 5px;
    cursor: pointer; transition: all 0.12s;
    border: 1px solid transparent;
}
.ticket-view .tv-field:hover { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); }
.ticket-view .tv-field i.tv-field-icon { font-size: 0.7rem; }
.ticket-view .tv-field .caret { font-size: 0.55rem; opacity: 0; transition: opacity 0.12s; margin-left: -1px; }
.ticket-view .tv-field:hover .caret { opacity: 0.6; }
.ticket-view .tv-sep { color: var(--bs-secondary-color); font-size: 0.6rem; margin: 0 1px; user-select: none; }

.ticket-view .tv-btns { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.ticket-view .tv-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none;
    color: var(--bs-secondary-color);
    border-radius: 6px; cursor: pointer;
    font-size: 0.9rem; transition: all 0.12s;
}
.ticket-view .tv-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

/* Linked incident — compact one-liner replaces the old yellow-bordered card */
.ticket-view .tv-linked {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    margin-bottom: 12px;
    background: var(--bs-tertiary-bg);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background 0.12s;
}
.ticket-view .tv-linked:hover { background: var(--bs-secondary-bg); }
.ticket-view .tv-linked .tv-linked-icon { color: var(--bs-warning); font-size: 0.78rem; flex-shrink: 0; }
.ticket-view .tv-linked .ltitle { color: var(--bs-body-color); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-view .tv-linked .lpill { font-size: 0.62rem; padding: 0 5px; border-radius: 3px; background: rgba(var(--bs-warning-rgb), 0.1); color: var(--bs-warning); font-weight: 500; flex-shrink: 0; }
.ticket-view .tv-linked .ltrail { color: var(--bs-secondary-color); font-size: 0.7rem; flex-shrink: 0; }

/* Description — read-only preview, headings scaled to body */
.ticket-view .tv-desc { position: relative; margin-bottom: 12px; }
.ticket-view .tv-desc-edit {
    position: absolute; top: -2px; right: 0;
    font-size: 0.72rem; color: var(--bs-secondary-color);
    background: none; border: none; padding: 2px 6px;
    border-radius: 4px; cursor: pointer;
    opacity: 0; transition: opacity 0.12s, background 0.12s;
}
.ticket-view .tv-desc:hover .tv-desc-edit { opacity: 0.7; }
.ticket-view .tv-desc-edit:hover { opacity: 1; background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.ticket-view .tv-desc-empty { font-size: 0.78rem; color: var(--bs-secondary-color); font-style: italic; }
.ticket-view .tv-desc-empty.tv-desc-add { cursor: pointer; font-style: normal; }
.ticket-view .tv-desc-empty.tv-desc-add:hover { color: var(--bs-primary); }

.ticket-view .tv-desc-body { font-size: 0.85rem; line-height: 1.6; color: var(--bs-body-color); }
.ticket-view .tv-desc-body p { margin-bottom: 8px; }
.ticket-view .tv-desc-body p:last-child { margin-bottom: 0; }
.ticket-view .tv-desc-body h1,
.ticket-view .tv-desc-body h2,
.ticket-view .tv-desc-body h3,
.ticket-view .tv-desc-body h4,
.ticket-view .tv-desc-body h5,
.ticket-view .tv-desc-body h6 {
    font-size: 0.9rem; font-weight: 600; line-height: 1.35;
    margin: 14px 0 4px; color: var(--bs-emphasis-color);
}
.ticket-view .tv-desc-body h1 { font-size: 0.95rem; }
.ticket-view .tv-desc-body > h1:first-child,
.ticket-view .tv-desc-body > h2:first-child,
.ticket-view .tv-desc-body > h3:first-child,
.ticket-view .tv-desc-body > h4:first-child { margin-top: 0; }
.ticket-view .tv-desc-body hr { margin: 12px 0; opacity: 0.5; }
.ticket-view .tv-desc-body pre { background: var(--bs-tertiary-bg); border-radius: 6px; padding: 10px 14px; font-size: 0.8rem; overflow-x: auto; }
.ticket-view .tv-desc-body code { font-size: 0.85em; padding: 1px 5px; background: var(--bs-tertiary-bg); border-radius: 4px; }
.ticket-view .tv-desc-body pre code { padding: 0; background: none; }
.ticket-view .tv-desc-body ul, .ticket-view .tv-desc-body ol { padding-left: 20px; margin-bottom: 8px; }
.ticket-view .tv-desc-body blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.ticket-view .tv-desc-body table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 8px 0; }
.ticket-view .tv-desc-body th, .ticket-view .tv-desc-body td { padding: 5px 8px; border: 1px solid var(--bs-border-color); text-align: left; }
.ticket-view .tv-desc-body th { background: var(--bs-tertiary-bg); font-weight: 600; }