/* Component styles.
 *
 * These lived in <style> blocks inside layout.html, login_layout.html,
 * chat.html, data.html, and equipment_detail.html. They were moved here so the
 * Content-Security-Policy can drop 'unsafe-inline' from style-src: an inline
 * <style> block is indistinguishable, to the browser, from one an attacker
 * injected.
 *
 * The .chat-* rules were duplicated across three templates -- data.html and
 * equipment_detail.html were byte-identical, and chat.html held a superset --
 * so this also removes about ninety lines of triplication.
 *
 * Kept outside @layer so Tailwind's content scanner cannot purge a rule whose
 * class is only ever applied from JavaScript.
 */

/* --- application chrome (was layout.html) --- */
        /* Global loading bar at top of page */
        #page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            z-index: 9999;
            background: transparent;
            pointer-events: none;
        }
        #page-loader .bar {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            transition: width 0.2s ease;
        }
        #page-loader.loading .bar {
            animation: loader 1.5s ease-in-out infinite;
        }
        @keyframes loader {
            0%   { width: 0; margin-left: 0; }
            50%  { width: 60%; margin-left: 20%; }
            100% { width: 0; margin-left: 100%; }
        }

        /* AI badge in navbar brand */
        .ai-badge {
            display: inline-flex;
            align-items: center;
            margin-left: 0.4rem;
            padding: 0.05rem 0.45rem;
            border-radius: 0.375rem;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            line-height: 1.4;
            color: #fff;
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
            background-size: 200% 200%;
            animation: ai-shimmer 4s ease infinite;
            text-shadow: 0 1px 2px rgba(0,0,0,0.25);
            box-shadow: 0 0 12px rgba(139, 92, 246, 0.45), inset 0 0 0 1px rgba(255,255,255,0.2);
            vertical-align: middle;
        }
        @keyframes ai-shimmer {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        /* Larger variant for the login heading */
        .ai-badge-lg {
            font-size: 0.85rem;
            padding: 0.1rem 0.55rem;
            margin-left: 0.25rem;
        }

        /* HTMX indicator */
        .htmx-indicator {
            display: none;
        }
        .htmx-request .htmx-indicator,
        .htmx-request.htmx-indicator {
            display: inline-flex;
        }

        /* Spinner animation */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .spinner {
            display: inline-block;
            width: 1em;
            height: 1em;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        /* Skeleton pulse for charts */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        .skeleton {
            background: #e5e7eb;
            border-radius: 0.375rem;
            animation: pulse 1.5s ease-in-out infinite;
        }

        /* Nav dropdowns */
        .nav-dropdown { position: relative; }
        .nav-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 12rem;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
            padding: 0.25rem 0;
            z-index: 50;
        }
        .nav-dropdown:hover .nav-dropdown-menu,
        .nav-dropdown:focus-within .nav-dropdown-menu {
            display: block;
        }
        .nav-dropdown-menu a {
            display: block;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            color: #4b5563;
            text-decoration: none;
        }
        .nav-dropdown-menu a:hover {
            background: #f3f4f6;
            color: #111827;
        }

        .five-whys-modal {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            background: rgba(15, 23, 42, 0.42);
            z-index: 60;
        }
        .five-whys-modal[hidden] { display: none; }
        .five-whys-dialog {
            width: min(56rem, 100%);
            max-height: min(86vh, 52rem);
            overflow: hidden;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 0.25rem;
            box-shadow: 0 32px 64px rgba(15, 23, 42, 0.18);
            display: flex;
            flex-direction: column;
        }
        .five-whys-header {
            padding: 1rem 1.25rem 0.75rem;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
        }
        .five-whys-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: flex-end;
            align-items: center;
        }
        .five-whys-action-btn {
            border: 1px solid #d1d5db;
            background: #ffffff;
            color: #334155;
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 1;
            padding: 0.55rem 0.75rem;
            border-radius: 0.25rem;
        }
        .five-whys-action-btn:hover {
            background: #f8fafc;
            border-color: #94a3b8;
            color: #0f172a;
        }
        .five-whys-title {
            font-size: 1rem;
            font-weight: 600;
            color: #111827;
        }
        .five-whys-subtitle {
            margin-top: 0.2rem;
            font-size: 0.875rem;
            color: #6b7280;
            line-height: 1.5;
        }
        .five-whys-close {
            border: none;
            background: transparent;
            color: #6b7280;
            font-size: 1.25rem;
            line-height: 1;
            padding: 0.1rem 0.2rem;
        }
        .five-whys-report-surface {
            border: 1px solid #e5e7eb;
            border-radius: 0.25rem;
            background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
            padding: 1rem;
        }
        .five-whys-body {
            padding: 1rem 1.25rem 1.25rem;
            overflow-y: auto;
        }
        .five-whys-status {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #6b7280;
            font-size: 0.875rem;
            margin-bottom: 0.75rem;
        }
        .five-whys-status.hidden {
            display: none;
        }
        .five-whys-steps {
            margin-bottom: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.25rem;
            background: #f8fafc;
            overflow: hidden;
        }
        .five-whys-steps[hidden] { display: none; }
        .five-whys-steps-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.6rem 0.85rem;
            font-size: 0.8rem;
            color: #475569;
            border-bottom: 1px solid #e5e7eb;
        }
        .five-whys-step-list {
            max-height: 8rem;
            overflow-y: auto;
            padding: 0.35rem 0;
        }
        .five-whys-step {
            font-size: 0.8rem;
            color: #475569;
            line-height: 1.4;
            padding: 0.35rem 0.85rem;
            display: flex;
            gap: 0.5rem;
        }
        .five-whys-step::before {
            content: '';
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 9999px;
            background: #8b5cf6;
            margin-top: 0.35rem;
            flex: none;
        }
        .five-whys-trigger {
            white-space: nowrap;
        }
    </style>


/* --- chat and markdown rendering (was chat.html) --- */
    .chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 { font-weight: 600; margin: 0.9em 0 0.3em; line-height: 1.3; }
    .chat-md h1:first-child, .chat-md h2:first-child, .chat-md h3:first-child, .chat-md h4:first-child, .chat-md > p:first-child { margin-top: 0; }
    .chat-md h1 { font-size: 1.15em; }
    .chat-md h2 { font-size: 1.05em; }
    .chat-md h3 { font-size: 0.95em; color: #374151; }
    .chat-md h3::before, .chat-md h4::before {
        content: '';
        display: inline-block;
        width: 0.55em;
        height: 0.55em;
        border-radius: 9999px;
        background: #93c5fd;
        margin-right: 0.4em;
        vertical-align: 2%;
    }
    .chat-md p { margin: 0.4em 0; }
    .chat-md ul, .chat-md ol { margin: 0.4em 0; padding-left: 1.35em; }
    .chat-md li { margin: 0.3em 0; }
    .chat-md li::marker { color: #9ca3af; }
    .chat-md code { background: #f3f4f6; padding: 0.15em 0.35em; border-radius: 0.25em; font-size: 0.9em; }
    .chat-md pre { background: #1f2937; color: #e5e7eb; padding: 0.75em; border-radius: 0.5em; overflow-x: auto; margin: 0.5em 0; }
    .chat-md pre code { background: none; padding: 0; color: inherit; }
    .chat-md table { border-collapse: collapse; margin: 0.6em 0; font-size: 0.85em; display: block; overflow-x: auto; white-space: nowrap; }
    .chat-md th, .chat-md td { border: 1px solid #e5e7eb; padding: 0.3em 0.6em; text-align: left; vertical-align: top; }
    .chat-md th { background: #f9fafb; font-weight: 600; color: #374151; white-space: nowrap; }
    .chat-md tbody tr:nth-child(even) { background: #fafafa; }
    .chat-md strong { font-weight: 600; color: #111827; }
    .chat-md blockquote { border-left: 3px solid #d1d5db; padding-left: 0.75em; color: #6b7280; margin: 0.4em 0; }
    .chat-md hr { border: none; border-top: 1px solid #f3f4f6; margin: 0.75em 0; }
    .chat-status { display: inline-flex; align-items: center; gap: 0.5em; color: #9ca3af; font-size: 0.85em; }
    .chat-status .dot-pulse { display: inline-flex; gap: 3px; }
    .chat-status .dot-pulse span {
        width: 5px; height: 5px; border-radius: 50%; background: #9ca3af;
        animation: dotPulse 1.2s ease-in-out infinite;
    }
    .chat-status .dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
    .chat-status .dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
    .chat-activity {
        margin: 0.5rem 0 0.75rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        background: #f9fafb;
        overflow: hidden;
    }
    .chat-activity[hidden] { display: none; }
    .chat-activity details { width: 100%; }
    .chat-activity summary {
        list-style: none;
        cursor: pointer;
        font-size: 0.8rem;
        color: #4b5563;
        padding: 0.55rem 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        user-select: none;
    }
    .chat-activity summary::-webkit-details-marker { display: none; }
    .chat-activity-count {
        color: #6b7280;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .chat-activity-list {
        max-height: 8.5rem;
        overflow-y: auto;
        border-top: 1px solid #e5e7eb;
        padding: 0.35rem 0;
    }
    .chat-activity-item {
        font-size: 0.8rem;
        color: #4b5563;
        padding: 0.35rem 0.75rem;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        line-height: 1.4;
    }
    .chat-activity-item::before {
        content: '';
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 0.35rem;
        border-radius: 9999px;
        background: #60a5fa;
        flex: none;
    }
    .mode-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
        color: #4b5563;
    }
    .mode-help-btn {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #475569;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .mode-help-btn:hover {
        background: #f8fafc;
        border-color: #94a3b8;
        color: #1e293b;
    }
    .chat-help-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.42);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        z-index: 40;
    }
    .chat-help-overlay[hidden] { display: none; }
    .chat-help-dialog {
        width: min(42rem, 100%);
        max-height: min(80vh, 42rem);
        overflow-y: auto;
        background: #ffffff;
        border-radius: 1rem;
        border: 1px solid #e5e7eb;
        box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
        padding: 1.25rem 1.25rem 1rem;
    }
    .chat-help-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.75rem;
    }
    .chat-help-title {
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
    }
    .chat-help-subtitle {
        margin-top: 0.25rem;
        font-size: 0.875rem;
        color: #6b7280;
        line-height: 1.5;
    }
    .chat-help-close {
        border: none;
        background: transparent;
        color: #6b7280;
        font-size: 1.25rem;
        line-height: 1;
        padding: 0.1rem 0.2rem;
    }
    .chat-help-section {
        margin-top: 1rem;
    }
    .chat-help-section h3 {
        font-size: 0.875rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 0.4rem;
    }
    .chat-help-section p,
    .chat-help-section li {
        font-size: 0.875rem;
        color: #4b5563;
        line-height: 1.5;
    }
    .chat-help-section ul {
        margin: 0;
        padding-left: 1.2rem;
    }
    .chat-help-examples {
        display: grid;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .chat-help-example {
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        background: #f9fafb;
        padding: 0.7rem 0.8rem;
        font-size: 0.84rem;
        color: #374151;
        line-height: 1.45;
    }
    .chat-help-example code {
        background: #eef2ff;
        color: #1d4ed8;
        padding: 0.08rem 0.28rem;
        border-radius: 0.3rem;
    }
    .mode-switch {
        position: relative;
        width: 3.25rem;
        height: 1.75rem;
        display: inline-flex;
        align-items: center;
        flex: none;
    }
    .mode-switch input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        margin: 0;
    }
    .mode-switch-track {
        width: 100%;
        height: 100%;
        border-radius: 9999px;
        background: #cbd5e1;
        transition: background 0.2s ease;
    }
    .mode-switch-thumb {
        position: absolute;
        top: 0.125rem;
        left: 0.125rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
        transition: transform 0.2s ease;
    }
    .mode-switch input:checked + .mode-switch-track {
        background: #2563eb;
    }
    .mode-switch input:checked ~ .mode-switch-thumb {
        transform: translateX(1.5rem);
    }
    .mode-label {
        transition: color 0.2s ease, font-weight 0.2s ease;
    }
    .mode-label.active {
        color: #111827;
        font-weight: 600;
    }
    @keyframes dotPulse {
        0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
        40% { opacity: 1; transform: scale(1); }
    }
    .chat-expand-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2rem; height: 2rem; border-radius: 0.5rem;
        border: 1px solid #e5e7eb; background: #fff; color: #6b7280;
        cursor: pointer; transition: all 0.2s ease;
    }
    .chat-expand-btn:hover { background: #f3f4f6; color: #1f2937; border-color: #d1d5db; }
    .chat-expand-btn svg { width: 1.1rem; height: 1.1rem; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
    .chat-expand-btn.expanded svg { transform: rotate(180deg); }
    .chat-panel-fullscreen {
        position: fixed !important; inset: 0 !important;
        z-index: 60; height: 100vh !important; max-height: 100vh !important;
        padding: 1rem !important; background: #fff !important;
        display: flex; flex-direction: column;
    }
    .chat-panel-fullscreen #chat-messages { flex: 1; }


/* --- expanding chat panel (was equipment_detail.html / data.html) --- */
    .chat-messages-area { transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1); }
    .chat-panel-expanded {
        position: fixed !important; top: 1rem; left: 1rem; right: 1rem; bottom: 1rem;
        z-index: 50; max-height: none !important; margin: 0 !important;
        box-shadow: 0 25px 60px rgba(15,23,42,0.35);
        display: flex; flex-direction: column;
        background: #fff !important;
    }
    .chat-panel-expanded .chat-messages-area { flex: 1; max-height: none !important; min-height: 50vh; }
    .chat-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.42); z-index: 49; opacity: 0; transition: opacity 0.3s ease; }
    .chat-backdrop.visible { opacity: 1; }

/* --- replacements for former inline style attributes --- */

/* Right-aligned dropdown menus in the navbar. */
.nav-dropdown-menu--right { right: 0; left: auto; }

/* Chart containers. The height is fixed rather than fluid because Chart.js
 * needs a sized parent to compute its canvas. The allsites variants scale with
 * how many sites are plotted; the template picks one by row count, which it
 * already branched on. */
.chart-box { position: relative; }
.chart-box--sm { height: 240px; }
.chart-box--md { height: 320px; }
.chart-box--lg { height: 480px; }

/* Fixed-height chart slot used on the analytics page. */
.chart-slot { height: 320px; }

/* Scroll regions for the embedded chat panels. */
.chat-messages-area--equip { max-height: 22rem; }
.chat-messages-area--data { max-height: 18rem; }

/* Full-page chat panel, less the app chrome above it. */
.chat-panel--full { height: calc(100vh - 8rem); }