/* ExeWatch - Custom Styles with Theme Support */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================
   Theme System - CSS Variables
   ============================================ */

/* Default: Dark Theme
   Uses Bootstrap 5.3 dark mode colors exactly.
   --bs-body-bg: #212529, --bs-body-color: #dee2e6
   Semantic colors use BS dark-mode tints (-300 variants) for readability on dark backgrounds.
*/
:root,
[data-ew-theme="dark"] {
    --ew-primary: #0d6efd;        /* bs blue-500 */
    --ew-primary-light: #3d8bfd;  /* bs blue-400 */
    --ew-primary-dark: #0a58ca;   /* bs blue-600 */
    --ew-primary-rgb: 13, 110, 253;
    --ew-accent: #0dcaf0;         /* bs cyan-500 */
    --ew-accent-dark: #0aa2c0;    /* bs cyan-600 */
    --ew-success: #198754;        /* bs green-500 */
    --ew-warning: #ffc107;        /* bs yellow-500 */
    --ew-danger: #dc3545;         /* bs red-500 */
    --ew-bg-body: #212529;        /* bs body-bg dark */
    --ew-bg-sidebar: #1a1e24;
    --ew-bg-card: #2b3035;        /* bs dark subtle */
    --ew-bg-header: #1a1e24;
    --ew-bg-hover: #343a40;       /* bs gray-700 */
    --ew-bg-input: #2b3035;
    --ew-border: #495057;         /* bs gray-600 */
    --ew-text-primary: #dee2e6;   /* bs body-color dark */
    --ew-text-secondary: #adb5bd; /* bs secondary-color dark */
    --ew-text-muted: #6c757d;     /* bs gray-500 */
    --ew-text-on-primary: #000000;
    --ew-shadow: rgba(0, 0, 0, 0.5);
}

/* Light Theme
   Uses Bootstrap 5.3 light mode colors exactly.
   --bs-body-bg: #fff, --bs-body-color: #212529
*/
[data-ew-theme="light"] {
    --ew-primary: #0d6efd;        /* bs blue-500 */
    --ew-primary-light: #3d8bfd;  /* bs blue-400 */
    --ew-primary-dark: #0a58ca;   /* bs blue-600 */
    --ew-primary-rgb: 13, 110, 253;
    --ew-accent: #0dcaf0;         /* bs cyan-500 */
    --ew-accent-dark: #0aa2c0;    /* bs cyan-600 */
    --ew-success: #198754;        /* bs green-500 */
    --ew-warning: #ffc107;        /* bs yellow-500 */
    --ew-danger: #dc3545;         /* bs red-500 */
    --ew-bg-body: #f8f9fa;        /* bs gray-100 */
    --ew-bg-sidebar: #ffffff;
    --ew-bg-card: #ffffff;
    --ew-bg-header: #ffffff;
    --ew-bg-hover: #e9ecef;       /* bs gray-200 */
    --ew-bg-input: #ffffff;
    --ew-border: #dee2e6;         /* bs gray-300 */
    --ew-text-primary: #212529;   /* bs body-color light */
    --ew-text-secondary: #495057; /* bs gray-700 */
    --ew-text-muted: #6c757d;     /* bs gray-500 */
    --ew-text-on-primary: #ffffff;
    --ew-shadow: rgba(0, 0, 0, 0.075);
}

/* Light theme - override text classes to be readable */
html[data-ew-theme="light"] .text-white,
html[data-ew-theme="light"] .text-light,
html[data-ew-theme="light"] span.text-light,
html[data-ew-theme="light"] .badge.text-light {
    color: var(--ew-text-primary) !important;
}

html[data-ew-theme="light"] .card,
html[data-ew-theme="light"] .modal-content {
    color: var(--ew-text-primary);
}

html[data-ew-theme="light"] .form-label,
html[data-ew-theme="light"] h1, html[data-ew-theme="light"] h2,
html[data-ew-theme="light"] h3, html[data-ew-theme="light"] h4,
html[data-ew-theme="light"] h5, html[data-ew-theme="light"] h6 {
    color: var(--ew-text-primary);
}

/* ============================================
   Tag Color Palette (20 colors - maximally distinct)
   Ordered to maximize visual difference between consecutive colors
   ============================================ */
.tag-color-0  { background-color: #3b82f6 !important; color: #fff !important; border-color: #2563eb !important; } /* Blue */
.tag-color-1  { background-color: #1e40af !important; color: #fff !important; border-color: #1e3a8a !important; } /* Navy Blue */
.tag-color-2  { background-color: #22c55e !important; color: #fff !important; border-color: #16a34a !important; } /* Green */
.tag-color-3  { background-color: #f59e0b !important; color: #000 !important; border-color: #d97706 !important; } /* Amber */
.tag-color-4  { background-color: #8b5cf6 !important; color: #fff !important; border-color: #7c3aed !important; } /* Purple */
.tag-color-5  { background-color: #06b6d4 !important; color: #fff !important; border-color: #0891b2 !important; } /* Cyan */
.tag-color-6  { background-color: #15803d !important; color: #fff !important; border-color: #14532d !important; } /* Forest Green */
.tag-color-7  { background-color: #84cc16 !important; color: #000 !important; border-color: #65a30d !important; } /* Lime */
.tag-color-8  { background-color: #f97316 !important; color: #fff !important; border-color: #ea580c !important; } /* Orange */
.tag-color-9  { background-color: #6366f1 !important; color: #fff !important; border-color: #4f46e5 !important; } /* Indigo */
.tag-color-10 { background-color: #14b8a6 !important; color: #fff !important; border-color: #0d9488 !important; } /* Teal */
.tag-color-11 { background-color: #6d7f11 !important; color: #fff !important; border-color: #4d5a0f !important; } /* Olive */
.tag-color-12 { background-color: #eab308 !important; color: #000 !important; border-color: #ca8a04 !important; } /* Yellow */
.tag-color-13 { background-color: #a855f7 !important; color: #fff !important; border-color: #9333ea !important; } /* Violet */
.tag-color-14 { background-color: #0ea5e9 !important; color: #fff !important; border-color: #0284c7 !important; } /* Sky */
.tag-color-15 { background-color: #10b981 !important; color: #fff !important; border-color: #059669 !important; } /* Emerald */
.tag-color-16 { background-color: #d946ef !important; color: #fff !important; border-color: #c026d3 !important; } /* Fuchsia */
.tag-color-17 { background-color: #e11d48 !important; color: #fff !important; border-color: #be123c !important; } /* Rose */
.tag-color-18 { background-color: #c2410c !important; color: #fff !important; border-color: #9a3412 !important; } /* Burnt Orange */
.tag-color-19 { background-color: #7c3aed !important; color: #fff !important; border-color: #6d28d9 !important; } /* Deep Violet */

/* Dark Blue Theme — same BS semantics, navy-tinted backgrounds
   Only backgrounds and border change; text and semantic colors stay standard BS dark. */
[data-ew-theme="dark-blue"] {
    --ew-primary: #0d6efd;        /* bs blue-500 — full intensity */
    --ew-primary-light: #3d8bfd; /* bs blue-400 */
    --ew-primary-dark: #0a58ca;  /* bs blue-600 */
    --ew-primary-rgb: 13, 110, 253;
    --ew-accent: #0dcaf0;         /* bs cyan-500 */
    --ew-accent-dark: #0aa2c0;   /* bs cyan-600 */
    --ew-success: #198754;        /* bs green-500 */
    --ew-warning: #ffc107;        /* bs yellow-500 */
    --ew-danger: #dc3545;         /* bs red-500 */
    --ew-bg-body: #101828;        /* navy tint of bs #212529 */
    --ew-bg-sidebar: #0c1220;
    --ew-bg-card: #182030;
    --ew-bg-header: #0c1220;
    --ew-bg-hover: #1e2a3e;
    --ew-bg-input: #182030;
    --ew-border: #2e3f57;
    --ew-text-primary: #dee2e6;
    --ew-text-secondary: #adb5bd;
    --ew-text-muted: #6c757d;
    --ew-text-on-primary: #000000;
    --ew-shadow: rgba(0, 0, 0, 0.55);
}

/* Dark Red Theme — same BS semantics, red primary, pure black backgrounds */
[data-ew-theme="dark-red"] {
    --ew-primary: #dc3545;        /* bs red-500 — full intensity */
    --ew-primary-light: #e4606d; /* bs red-400 */
    --ew-primary-dark: #bb2d3b;  /* bs red-600 */
    --ew-primary-rgb: 220, 53, 69;
    --ew-accent: #fd7e14;         /* bs orange-500 */
    --ew-accent-dark: #e76a00;   /* bs orange-600 */
    --ew-success: #75b798;
    --ew-warning: #ffda6a;
    --ew-danger: #ea868f;
    --ew-bg-body: #1a1a1a;        /* near black */
    --ew-bg-sidebar: #141414;
    --ew-bg-card: #222222;
    --ew-bg-header: #141414;
    --ew-bg-hover: #2a2a2a;
    --ew-bg-input: #222222;
    --ew-border: #3a3a3a;
    --ew-text-primary: #dee2e6;
    --ew-text-secondary: #adb5bd;
    --ew-text-muted: #6c757d;
    --ew-text-on-primary: #000000;
    --ew-shadow: rgba(0, 0, 0, 0.6);
}

/* Dark Green Theme — same BS semantics, green primary, dark backgrounds */
[data-ew-theme="dark-green"] {
    --ew-primary: #198754;        /* bs green-500 */
    --ew-primary-light: #20a86a; /* bs green-400 */
    --ew-primary-dark: #146c43;  /* bs green-600 */
    --ew-primary-rgb: 25, 135, 84;
    --ew-accent: #20c997;         /* bs teal-500 */
    --ew-accent-dark: #1aa179;   /* bs teal-600 */
    --ew-success: #75b798;
    --ew-warning: #ffda6a;
    --ew-danger: #ea868f;
    --ew-bg-body: #151e15;        /* green-tinted dark */
    --ew-bg-sidebar: #111811;
    --ew-bg-card: #1c261c;
    --ew-bg-header: #111811;
    --ew-bg-hover: #243024;
    --ew-bg-input: #1c261c;
    --ew-border: #2e3f2e;
    --ew-text-primary: #dee2e6;
    --ew-text-secondary: #adb5bd;
    --ew-text-muted: #6c757d;
    --ew-text-on-primary: #000000;
    --ew-shadow: rgba(0, 0, 0, 0.55);
}

/* Legacy variable mapping for backward compatibility */
:root {
    --ew-bg-dark: var(--ew-bg-body);
}

/* Accent color class - used for brand highlights */
.accent {
    color: var(--ew-accent) !important;
}

/* ============================================
   Code Snippets (SDK examples)
   ============================================ */
.code-snippet {
    background-color: var(--ew-bg-body) !important;
    color: var(--ew-text-primary) !important;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    overflow-x: auto;
    border: 1px solid var(--ew-border);
}

.code-snippet .code-keyword { color: var(--ew-danger); }
.code-snippet .code-string { color: var(--ew-accent); }
.code-snippet .code-comment { color: var(--ew-text-muted); }
.code-snippet .code-function { color: var(--ew-primary-light); }

/* ============================================
   Typography
   ============================================ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Body styling with theme support */
body {
    background-color: var(--ew-bg-body);
    color: var(--ew-text-primary);
}

/* Placeholder text - more faded for clarity */
::placeholder {
    color: #6c757d !important;
    opacity: 0.5 !important;
}

.mono, .font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ============================================
   Global Progress Bar (HTMX indicator)
   ============================================ */
#global-loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    background: linear-gradient(90deg, var(--ew-primary), var(--ew-accent), var(--ew-primary));
    background-size: 200% 100%;
    animation: progress-animation 1.5s linear infinite;
}

#global-loader.htmx-request {
    display: block;
}

@keyframes progress-animation {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   Sidebar
   ============================================ */
.sidebar {
    background-color: var(--ew-bg-sidebar);
}

.sidebar-logo {
    padding: 0 1rem;
    border-bottom: 1px solid var(--ew-border);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    height: 57px; /* Match main-header height exactly */
    flex-shrink: 0;
}

.sidebar-logo a {
    color: var(--ew-text-primary) !important;
}

.sidebar-logo a:hover {
    opacity: 0.9;
}

.sidebar-menu {
    padding: 0.5rem 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Scrollbar hidden → no visible strip, no layout shift (items fill full width) */
    scrollbar-width: none;
}

.sidebar-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sidebar-menu .nav-link {
    color: var(--ew-text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    margin: 0.125rem auto;
    width: calc(100% - 1rem);
    transition: all 0.2s ease;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    font-size: 0.875rem;
}

.sidebar-menu .nav-link:hover {
    background-color: var(--ew-bg-hover);
    color: var(--ew-text-primary);
}

.sidebar-menu .nav-link.active {
    background: linear-gradient(135deg, var(--ew-primary), var(--ew-primary-dark));
    color: white;
    box-shadow: 0 2px 8px rgba(var(--ew-primary-rgb), 0.3);
}

.sidebar-menu .nav-link.text-success {
    color: var(--ew-success) !important;
}

.sidebar-menu .nav-link.text-success:hover {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--ew-success) !important;
}

.sidebar-bottom {
    border-top: 1px solid var(--ew-border);
    padding-top: 0.25rem;
    margin-top: auto;
}

.sidebar-bottom .nav-link {
    color: var(--ew-text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    margin: 0.125rem 0.5rem;
    transition: all 0.2s ease;
}

.sidebar-bottom .nav-link:hover {
    background-color: var(--ew-bg-hover);
    color: var(--ew-text-primary);
}

.sidebar-bottom .nav-link.active {
    background: linear-gradient(135deg, var(--ew-primary), var(--ew-primary-dark));
    color: white;
    box-shadow: 0 2px 8px rgba(var(--ew-primary-rgb), 0.3);
}

.app-settings-icon {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.app-menu-item:hover .app-settings-icon {
    opacity: 1;
}

.app-settings-icon:hover {
    color: var(--ew-accent) !important;
}

/* Account Switcher in sidebar */
.account-switcher {
    padding: 0.25rem 0.5rem;
}

.account-switcher .btn-account-switcher {
    background-color: var(--ew-bg-hover);
    border: 1px solid var(--ew-border);
    color: var(--ew-text-secondary);
    font-size: 0.8rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.account-switcher .btn-account-switcher:hover {
    background-color: var(--ew-bg-input);
    color: var(--ew-text-primary);
    border-color: var(--ew-primary);
}

.dropdown-menu-account {
    background-color: var(--ew-bg-card);
    border: 1px solid var(--ew-border);
    box-shadow: 0 4px 12px var(--ew-shadow);
    font-size: 0.8rem;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-menu-account .dropdown-item {
    color: var(--ew-text-secondary);
    padding: 0.5rem 0.75rem;
}

.dropdown-menu-account .dropdown-item:hover {
    background-color: var(--ew-bg-hover);
    color: var(--ew-text-primary);
}

.dropdown-menu-account .dropdown-item.active {
    background-color: rgba(var(--ew-primary-rgb), 0.15);
    color: var(--ew-primary-light);
}

/* Timezone selector in sidebar */
.timezone-setting {
    border-top: 1px solid var(--ew-border);
}

.timezone-setting .form-select {
    background-color: var(--ew-bg-hover);
    border-color: var(--ew-border);
    color: var(--ew-text-secondary);
    font-size: 0.8rem;
}

.timezone-setting .form-select:focus {
    border-color: var(--ew-primary);
    box-shadow: 0 0 0 2px rgba(var(--ew-primary-rgb), 0.2);
}

/* User Info */
.user-info {
    border-top: 1px solid var(--ew-border);
    padding-top: 0.75rem;
}

.user-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--ew-primary), var(--ew-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
}

.user-name {
    color: var(--ew-text-primary);
}

.user-plan {
    color: var(--ew-text-muted) !important;
}

/* ============================================
   Top Bar (Desktop)
   ============================================ */
/* Topbar is no longer used - user profile is inside main-header */

.btn-topbar-user {
    color: var(--ew-text-secondary);
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.btn-topbar-user:hover {
    background-color: var(--ew-bg-hover);
    color: var(--ew-text-primary);
}

.user-name-topbar {
    font-size: 0.85rem;
    font-weight: 500;
}

.user-avatar-sm {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--ew-primary), var(--ew-accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    color: white;
    overflow: hidden;
}

.user-avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-avatar-sm .avatar-fallback {
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
}

.dropdown-menu-user {
    background-color: var(--ew-bg-card);
    border: 1px solid var(--ew-border);
    box-shadow: 0 4px 12px var(--ew-shadow);
    min-width: 200px;
}

.dropdown-menu-user .dropdown-header {
    color: var(--ew-text-primary);
}

.dropdown-menu-user .dropdown-item {
    color: var(--ew-text-secondary);
    font-size: 0.85rem;
}

.dropdown-menu-user .dropdown-item:hover {
    background-color: var(--ew-bg-hover);
    color: var(--ew-text-primary);
}

.dropdown-menu-user .dropdown-divider {
    border-color: var(--ew-border);
}

/* ============================================
   Main Content Area
   ============================================ */
.main-content-wrapper {
    background-color: var(--ew-bg-body);
    position: relative;
}

.content-area {
    background-color: var(--ew-bg-body);
}

/* ============================================
   Main Header
   ============================================ */

/* Fix btn-light hover state in dark mode for toolbar */
.btn-group .btn-light:hover,
.btn-group .btn-light:focus {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-color: #f8f9fa !important;
}

.main-header {
    height: 57px; /* Match sidebar-logo height exactly */
    display: flex;
    align-items: center;
    background-color: var(--ew-bg-sidebar);
    border-bottom-color: var(--ew-border) !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ============================================
   Native <dialog> (confirm/alert)
   Appears in browser top-layer → always above Bootstrap modals
   ============================================ */
.app-dialog {
    padding: 0;
    border: 1px solid var(--ew-border);
    border-radius: 0.5rem;
    background-color: var(--ew-bg-sidebar);
    color: var(--ew-text-primary);
    max-width: 500px;
    width: calc(100% - 2rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    /* Top-layer handles stacking natively, but keep a high z-index as
       fallback for edge cases (e.g. when showModal is not called). */
    z-index: 10000;
}
.app-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 9999;
}
.app-dialog-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.app-dialog-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ew-border);
    font-size: 1.1rem;
    font-weight: 500;
}
.app-dialog-header > #app-dialog-title-text {
    flex: 1;
}
.app-dialog-close {
    background: none;
    border: none;
    color: var(--ew-text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}
.app-dialog-close:hover {
    color: var(--ew-text-primary);
}
.app-dialog-body {
    padding: 1.25rem;
    font-size: 0.95rem;
}
.app-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ew-border);
}

.main-header > div {
    width: 100%;
}

.main-header h1 {
    color: var(--ew-text-primary);
}

/* Toolbar buttons - use primary color */
.main-header .btn-toolbar {
    color: var(--ew-text-secondary);
    background-color: transparent;
    border: 1px solid var(--ew-border);
    transition: all 0.2s ease;
}

.main-header .btn-toolbar:hover {
    color: var(--ew-text-primary);
    background-color: var(--ew-bg-hover);
    border-color: var(--ew-primary);
}

.main-header .btn-toolbar.active {
    color: white;
    background-color: var(--ew-primary);
    border-color: var(--ew-primary);
}

/* ============================================
   Stat Cards
   ============================================ */
.stat-card {
    border-radius: 0.5rem;
    padding: 1.25rem;
    background-color: var(--ew-bg-card);
    border: 1px solid var(--ew-border);
}

.stat-card .stat-value {
    font-size: clamp(1.1rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ew-text-primary);
}

.stat-card .stat-label {
    font-size: clamp(0.65rem, 1vw, 0.875rem);
    margin-top: 0.25rem;
    color: var(--ew-text-secondary);
}

.stat-card .stat-icon {
    font-size: 2rem;
    opacity: 0.5;
}

/* ============================================
   Tables - Header styling
   ============================================ */
.table thead th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Logs Table
   ============================================ */
.logs-table {
    font-size: 0.875rem;
}

.logs-table td,
.logs-table th {
    vertical-align: middle;
}

.logs-table thead th {
    background-color: var(--ew-bg-sidebar);
    border-bottom: 1px solid var(--ew-border);
    white-space: nowrap;
    color: var(--ew-text-secondary);
}

.logs-table tbody {
    background-color: transparent !important;
}

.logs-table tbody tr {
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease;
}

/* Zebra striping - override Bootstrap dark theme */
.logs-table.table > tbody > tr:nth-child(odd) {
    --bs-table-bg: var(--ew-bg-card);
    --bs-table-striped-bg: var(--ew-bg-card);
    background-color: var(--ew-bg-card) !important;
}

.logs-table.table > tbody > tr:nth-child(even) {
    --bs-table-bg: var(--ew-bg-hover);
    --bs-table-striped-bg: var(--ew-bg-hover);
    background-color: var(--ew-bg-hover) !important;
}

/* Hover - override Bootstrap table-hover */
.logs-table.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(var(--ew-primary-rgb), 0.25);
    --bs-table-bg: rgba(var(--ew-primary-rgb), 0.25);
    background-color: rgba(var(--ew-primary-rgb), 0.25) !important;
}

/* Debug level color (teal) */
.bg-debug {
    background-color: var(--bs-teal) !important;
    color: #000 !important;
}

/* Timing badge (purple) */
.bg-purple {
    background-color: #8b5cf6 !important;
    color: #fff !important;
}

.timing-badge {
    cursor: help;
}

.timing-duration {
    font-weight: 500;
}

/* Fixed width for log level badges */
.log-level-badge {
    display: inline-block;
    min-width: 65px;
    text-align: center;
}

/* Severity-based left border colors */
.log-row.log-fatal { border-left-color: var(--bs-danger); }
.log-row.log-error { border-left-color: var(--bs-danger); }
.log-row.log-warning { border-left-color: var(--bs-warning); }
.log-row.log-info { border-left-color: var(--bs-info); }
.log-row.log-debug { border-left-color: var(--bs-teal); }

/* Column widths */
.log-col-time { width: 140px; white-space: nowrap; }
.log-col-level { width: 70px; }
.log-col-customer { width: 120px; }
.log-col-device { width: 180px; }
.log-col-message { min-width: 200px; }
.log-col-tag { width: 160px; }
.log-col-thread { width: 80px; white-space: nowrap; }

/* Scrollable table wrapper */
.logs-table-wrapper {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

/* Ensure filter dropdowns appear above sticky table header */
.logs-table-wrapper .sticky-top {
    z-index: 10;
}

/* Dropdown menus need higher z-index than sticky headers */
.dropdown-menu {
    z-index: 1030;
}

/* Log row highlight animation for new entries */
.log-row.is-new {
    animation: log-highlight 2s ease-out;
}

@keyframes log-highlight {
    0% { background-color: rgba(var(--ew-primary-rgb), 0.25); }
    100% { background-color: transparent; }
}

/* ============================================
   Device Info Grid
   ============================================ */
.device-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.device-info-item {
    border-radius: 0.375rem;
    padding: 0.75rem;
}

.device-info-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.device-info-item .value {
    font-weight: 500;
    word-break: break-all;
}

/* ============================================
   Filters Bar
   ============================================ */
.filters-bar {
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--ew-bg-card);
    border: 1px solid var(--ew-border);
}

/* Filters bar buttons - override Bootstrap btn-dark */
.filters-bar .btn-dark {
    background-color: var(--ew-bg-hover);
    border-color: var(--ew-border);
    color: var(--ew-text-primary);
}

.filters-bar .btn-dark:hover,
.filters-bar .btn-dark:focus {
    background-color: var(--ew-bg-sidebar);
    border-color: var(--ew-primary-dark);
    color: var(--ew-text-primary);
}

.filters-bar .btn-dark:active,
.filters-bar .btn-dark.show {
    background-color: var(--ew-primary-dark);
    border-color: var(--ew-primary);
    color: #fff;
}

/* Filters bar input group */
.filters-bar .input-group-text,
.card-header .input-group-text {
    background-color: var(--ew-bg-hover);
    border-color: var(--ew-border);
    color: var(--ew-text-secondary);
}

/* Dropdown menus in filters */
.filters-bar .dropdown-menu {
    background-color: var(--ew-bg-card);
    border-color: var(--ew-border);
}

.filters-bar .dropdown-menu .dropdown-item {
    color: var(--ew-text-primary);
}

.filters-bar .dropdown-menu .dropdown-item:hover,
.filters-bar .dropdown-menu .dropdown-item:focus {
    background-color: var(--ew-bg-hover);
    color: var(--ew-text-primary);
}

.filters-bar .dropdown-divider {
    border-color: var(--ew-border);
}

/* Pagination buttons in filters bar */
.filters-bar .btn-group .btn-dark {
    background-color: var(--ew-bg-hover);
    border-color: var(--ew-border);
}

.filters-bar .btn-group .btn-dark:hover:not(:disabled) {
    background-color: var(--ew-primary-dark);
    border-color: var(--ew-primary);
    color: #fff;
}

.filters-bar .btn-group .btn-dark:disabled {
    background-color: var(--ew-bg-card);
    border-color: var(--ew-border);
    color: var(--ew-text-muted);
    opacity: 0.5;
}

/* Outline secondary button in filters */
.filters-bar .btn-outline-secondary {
    border-color: var(--ew-border);
    color: var(--ew-text-secondary);
}

.filters-bar .btn-outline-secondary:hover {
    background-color: var(--ew-bg-hover);
    border-color: var(--ew-primary);
    color: var(--ew-text-primary);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    background-color: var(--ew-bg-hover);
}

.filter-tag .btn-close {
    font-size: 0.625rem;
}

/* Form controls in dark theme */
.form-control,
.form-select {
    background-color: var(--ew-bg-input);
    border-color: var(--ew-border);
    color: var(--ew-text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ew-bg-input);
    border-color: var(--ew-primary);
    color: var(--ew-text-primary);
    box-shadow: 0 0 0 2px rgba(var(--ew-primary-rgb), 0.25);
}

/* Cards in app */
.card {
    background-color: var(--ew-bg-card);
    border-color: var(--ew-border);
}

.card-header {
    background-color: var(--ew-bg-sidebar);
    border-bottom-color: var(--ew-border);
}

/* Tables - transparent background to match theme */
.table {
    --bs-table-bg: transparent;
}

/* ============================================
   Collapsible Sections
   ============================================ */
.collapse-header {
    cursor: pointer;
    user-select: none;
}

.collapse-header .collapse-icon {
    transition: transform 0.2s ease;
}

.collapse-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(90deg);
}

/* ============================================
   Login Page
   ============================================ */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ew-bg-body);
}

.login-box {
    border-radius: 0.75rem;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    background-color: var(--ew-bg-card);
    border: 1px solid var(--ew-border);
}

/* Wider on desktop for 2-column layout */
@media (min-width: 768px) {
    .login-box {
        max-width: 650px;
        padding: 2rem 3rem;
    }
}

.login-logo {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.login-logo .icon {
    color: var(--ew-primary);
}

.login-form .btn-primary {
    background: linear-gradient(135deg, var(--ew-primary), var(--ew-primary-dark));
    border: none;
}

.login-form .btn-primary:hover {
    background: linear-gradient(135deg, var(--ew-primary-light), var(--ew-primary));
    box-shadow: 0 4px 12px rgba(var(--ew-primary-rgb), 0.3);
}

/* ============================================
   Utilities
   ============================================ */
.cursor-pointer {
    cursor: pointer;
}

.spin-animation {
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   Buttons - Brand colors
   ============================================ */
.btn-primary {
    background-color: var(--ew-primary);
    border-color: var(--ew-primary);
}

.btn-primary:hover {
    background-color: var(--ew-primary-light);
    border-color: var(--ew-primary-light);
}

.btn-outline-primary {
    color: var(--ew-primary-light);
    border-color: var(--ew-primary);
}

.btn-outline-primary:hover {
    background-color: var(--ew-primary);
    border-color: var(--ew-primary);
    color: white;
}

.btn-info {
    background-color: var(--ew-accent);
    border-color: var(--ew-accent);
    color: var(--ew-bg-body);
}

.btn-info:hover {
    background-color: var(--ew-accent-dark);
    border-color: var(--ew-accent-dark);
    color: var(--ew-bg-body);
}

/* ============================================
   Modal styling
   ============================================ */
.modal-content {
    background-color: var(--ew-bg-card);
    border-color: var(--ew-border);
}

.modal-header {
    border-bottom-color: var(--ew-border);
}

.modal-footer {
    border-top-color: var(--ew-border);
}

/* ============================================
   Sidebar dimensions
   ============================================ */
.sidebar {
    width: 280px;
    min-width: 280px;
}

/* ============================================
   Mobile Header
   ============================================ */
.mobile-header {
    display: none;
}

/* ============================================
   Sidebar Overlay (mobile)
   ============================================ */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        z-index: 9999;
        transition: left 0.3s ease;
    }

    .sidebar.show {
        left: 0;
    }

    .sidebar-overlay {
        display: block;
        z-index: 9998;
    }

    .mobile-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 1rem;
        background-color: var(--ew-bg-sidebar);
        border-bottom: 1px solid var(--ew-border);
        font-size: 1.5rem;
    }

    .main-content-wrapper {
        width: 100%;
    }
}

/* ============================================
   Mobile Responsive Enhancements
   ============================================ */

/* App Toolbar Mobile */
.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--ew-text-secondary);
    text-decoration: none;
    font-size: 0.7rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}
.mobile-nav-btn i {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}
.mobile-nav-btn:hover {
    color: var(--ew-text-primary);
    background-color: var(--ew-bg-hover);
}
.mobile-nav-btn.active {
    color: white;
    background: linear-gradient(135deg, var(--ew-primary), var(--ew-primary-dark));
}

@media (max-width: 1299.98px) {
    .main-header {
        padding: 0 1rem !important;
        min-height: 57px;
        height: 57px;
    }
    /* Compact: hide user name, show only avatar */
    .main-header .user-name-topbar {
        display: none;
    }
    .main-header .btn-topbar-user .bi-chevron-down {
        display: none;
    }
    /* Hide device column below 1300px - visible in detail modal */
    .logs-table .log-col-device {
        display: none !important;
    }
}

/* ============================================
   App toolbar — progressive disclosure (>= 768px)
   Lower-priority buttons collapse into the "More" dropdown as the window narrows,
   so the menu buttons disappear before the profile/actions get clipped.
   Default (>= 1400px): every button inline, dropdown twins + More button hidden.
   ============================================ */
.app-toolbar .tb-menu-item { display: none; }
.app-toolbar .toolbar-more { display: none; }

/* 1200–1399px: collapse tier 3 (Alerts, API Keys) into More */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .app-toolbar .tb-inline.tb-tier-3 { display: none; }
    .app-toolbar .tb-menu-item.tb-tier-3 { display: block; }
    .app-toolbar .toolbar-more { display: inline-flex; }
}
/* 768–1199px: also collapse tier 2 (Updates, Metrics, Usage) into More */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .app-toolbar .tb-inline.tb-tier-2,
    .app-toolbar .tb-inline.tb-tier-3 { display: none; }
    .app-toolbar .tb-menu-item.tb-tier-2,
    .app-toolbar .tb-menu-item.tb-tier-3 { display: block; }
    .app-toolbar .toolbar-more { display: inline-flex; }
}
@media (max-width: 767.98px) {
    .main-header {
        padding: 1.25rem 1rem 1.5rem 1rem !important;
        min-height: 120px;
    }
    .main-header .btn-group .btn {
        padding: 0.75rem 1rem;
        font-size: 1.2rem;
    }
    .main-header .btn-sm.btn-dark {
        padding: 0.75rem;
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    /* App name row spacing */
    .main-header .d-md-none .mt-3 {
        margin-top: 1.25rem !important;
    }
}

/* Filter Bar Mobile */
@media (max-width: 575.98px) {
    .filters-bar {
        flex-direction: column;
        align-items: stretch !important;
    }
    .filters-bar .input-group {
        width: 100% !important;
        max-width: 100%;
    }
    .filters-bar .dropdown {
        width: 100%;
    }
    .filters-bar .dropdown .btn {
        width: 100%;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .filters-bar .dropdown .btn::after {
        margin-left: auto;
    }
    .filters-bar .ms-auto {
        margin-left: 0 !important;
        margin-top: 0.5rem;
        width: 100%;
        justify-content: center;
    }
    #pagination-controls {
        width: 100%;
        justify-content: center;
    }
}

/* Tables Mobile - Logs */
@media (max-width: 767.98px) {
    .logs-table .log-col-time {
        width: 55px;
        font-size: 0.65rem;
        white-space: nowrap;
    }
    .logs-table .log-col-message {
        max-width: none;
    }
    .logs-table .log-col-tag .badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
        min-width: auto !important;
    }
    .logs-table td {
        padding: 0.4rem 0.3rem;
        font-size: 0.75rem;
    }
    .logs-table th {
        padding: 0.4rem 0.3rem;
        font-size: 0.7rem;
    }
}

/* Timing table - hide checkbox column on tablet */
@media (max-width: 991.98px) {
    .timing-checkbox-col {
        display: none !important;
    }
}

/* Stat Cards - hide icons when row is cramped */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .stat-card .stat-icon {
        display: none !important;
    }
}

/* Stat Cards Mobile */
@media (max-width: 575.98px) {
    .stat-card {
        padding: 0.75rem;
    }
    .stat-card .stat-value {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }
    .stat-card .stat-icon {
        font-size: 1.25rem;
    }
    .stat-card .stat-label {
        font-size: 0.7rem;
    }

    /* Dashboard stat numbers */
    .card .fs-2 {
        font-size: 1.5rem !important;
    }
    .card .fs-3 {
        font-size: 1.25rem !important;
    }

    /* Padding ridotto su mobile */
    .content-area {
        padding: 1rem !important;
    }
}

/* Modals Fullscreen on Mobile */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    .modal-content {
        min-height: 100vh;
        border: none;
        border-radius: 0;
    }
    .modal-lg,
    .modal-xl {
        max-width: 100%;
    }
    .modal-header {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--ew-bg-card);
    }
    .modal-body {
        padding: 1rem;
    }
    /* Log detail modal - stack table cells on mobile */
    #log-detail-modal .modal-body > table td {
        display: block;
        width: 100%;
        padding: 0.25rem 0;
    }
    #log-detail-modal .modal-body > table tr {
        display: block;
        border-bottom: 1px solid var(--ew-border);
        padding: 0.5rem 0;
    }
    #log-detail-modal .modal-body > table td[colspan] {
        display: block;
    }
    #log-detail-modal .modal-body > table .text-body-secondary {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    /* Timing info cards */
    #log-detail-modal .col-md-6,
    #log-detail-modal .col-md-4 {
        margin-bottom: 0.5rem;
    }
    /* Message textarea smaller on mobile */
    #log-detail-modal #detail-message {
        font-size: 0.8rem;
    }
    /* API Key wrap on mobile */
    .api-key-display {
        word-break: break-all;
        font-size: 0.85rem;
    }
}

/* Dashboard Stat Cards */
.dashboard-stat-card .card-body {
    padding: 1rem;
}
.dashboard-stat-card .stat-icon-box {
    padding: 0.75rem;
}
.dashboard-stat-card .stat-icon-box i {
    font-size: 1.25rem;
}
.dashboard-stat-card .stat-number {
    font-size: 1.75rem;
}

@media (max-width: 575.98px) {
    .dashboard-stat-card .card-body {
        padding: 0.5rem;
    }
    .dashboard-stat-card .stat-icon-box {
        padding: 0.5rem;
    }
    .dashboard-stat-card .stat-icon-box i {
        font-size: 1rem;
    }
    .dashboard-stat-card .stat-number {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    .dashboard-stat-card .stat-icon-box {
        padding: 1rem;
    }
    .dashboard-stat-card .stat-icon-box i {
        font-size: 1.5rem;
    }
    .dashboard-stat-card .stat-number {
        font-size: 2rem;
    }
}

/* Usage Analytics - Heatmap */
.heatmap-grid {
    display: grid;
    grid-template-columns: 40px repeat(24, 1fr);
    gap: 2px;
}
.heatmap-label {
    font-size: 0.75rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    white-space: nowrap;
}
.heatmap-hour-label {
    font-size: 0.65rem;
    color: #6b7280;
    text-align: center;
}
.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 2px;
    min-height: 16px;
    cursor: default;
    transition: opacity 0.15s;
}
.heatmap-cell:hover {
    opacity: 0.8;
    outline: 1px solid rgba(255, 255, 255, 0.3);
}
.stat-delta {
    font-size: 0.75rem;
    font-weight: 600;
}
.heatmap-container {
    overflow-x: auto;
}

.os-legend {
    max-height: 300px;
    overflow-y: auto;
}

.os-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Health Score Indicator */
.health-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.health-green {
    background-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}
.health-yellow {
    background-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.health-red {
    background-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
.health-gray {
    background-color: #6b7280;
}

/* App environment sidebar indicators */
.app-menu-item .nav-link[data-env="DEV"] {
    border: 1px solid rgba(13,202,240,0.3);
    border-left: 5px solid #0dcaf0;
}
.app-menu-item .nav-link[data-env="TEST"] {
    border: 1px solid rgba(25,135,84,0.3);
    border-left: 5px solid #198754;
}
.app-menu-item .nav-link[data-env="STAGING"] {
    border: 1px solid rgba(255,193,7,0.3);
    border-left: 5px solid #ffc107;
}
.app-menu-item .nav-link[data-env="PROD"] {
    border: 1px solid rgba(220,53,69,0.3);
    border-left: 5px solid #dc3545;
}
.app-menu-item .nav-link.active[data-env="DEV"] {
    border-color: rgba(13,202,240,0.4);
    border-left: 5px solid #0dcaf0;
}
.app-menu-item .nav-link.active[data-env="TEST"] {
    border-color: rgba(25,135,84,0.4);
    border-left: 5px solid #198754;
}
.app-menu-item .nav-link.active[data-env="STAGING"] {
    border-color: rgba(255,193,7,0.4);
    border-left: 5px solid #ffc107;
}
.app-menu-item .nav-link.active[data-env="PROD"] {
    border-color: rgba(220,53,69,0.4);
    border-left: 5px solid #dc3545;
}
.app-menu-item .nav-link.active .env-label {
    color: rgba(255,255,255,0.8) !important;
}

/* Nested-timing-trace tree (waterfall + aggregated CCT). Collapsible nodes use
   native <details>; the caret must be inline-block or `transform` won't apply
   to the inline <i>. Lives here (not an injected <style>) so it loads with the
   page and applies to htmx-swapped modal content. */
.trace-details > summary { list-style: none; }
.trace-details > summary::-webkit-details-marker { display: none; }
.trace-details > summary::marker { content: ""; }
.trace-caret {
    display: inline-block;
    transition: transform 0.12s ease;
    transform: rotate(0deg);
}
.trace-details[open] > summary .trace-caret { transform: rotate(90deg); }
.trace-node-summary { cursor: pointer; }
.trace-node-summary:hover { background: rgba(255,255,255,0.04); }