{% extends "admin/base.html" %}
{% load i18n static admin_extras %}
{% block dark-mode-vars %}
  <link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
  <script>
    (function () {
      const defaultTheme = 'dark';
      let theme = defaultTheme;

      try {
        const storage = window.localStorage;
        const storedTheme = storage.getItem('theme');
        const validThemes = ['light', 'dark', 'auto'];

        if (storedTheme === null) {
          storage.setItem('theme', defaultTheme);
        } else if (validThemes.indexOf(storedTheme) !== -1) {
          theme = storedTheme;
        } else {
          storage.setItem('theme', defaultTheme);
        }
      } catch (error) {
        theme = defaultTheme;
      }

      document.documentElement.dataset.theme = theme;
    })();
  </script>
  <script src="{% static "admin/js/theme.js" %}"></script>
{% endblock %}
{% block title %}{% if title %}{{ title }} | {% endif %}{{ site_title|default:_('Django site admin') }}{% endblock %}
{% block extrahead %}
{{ block.super }}
<script>
  (function loadHtmxWithFallbacks() {
    const head = document.head;

    function loadScript(src, onload) {
      const script = document.createElement('script');
      script.src = src;
      script.async = true;
      script.crossOrigin = 'anonymous';
      script.referrerPolicy = 'no-referrer';
      script.onload = function (event) {
        if (onload) {
          onload(false, event);
        }
      };
      script.onerror = function (event) {
        if (onload) {
          onload(true, event);
        }
      };

      head.appendChild(script);
    }

    function loadLocalHtmx(afterLoad) {
      // Load the bundled htmx copy to avoid cross-origin requests to the CDN.
      loadScript('{% static "htmx/htmx.min.js" %}', function (hadError) {
        if (hadError || !window.htmx) {
          console.error('Failed to load local htmx');
          return;
        }

        if (document.readyState !== 'loading') {
          window.htmx.process(document.body);
        }

        if (afterLoad) {
          afterLoad();
        }
      });
    }

    function loadHtmxExtensions() {
      if (!window.htmx) {
        return;
      }

      loadScript('{% static "htmx/reveal.js" %}');
      loadScript('{% static "htmx/intersect.js" %}');
    }

    loadLocalHtmx(loadHtmxExtensions);
  })();
</script>
{% if badge_role %}
  {% if badge_role.name == "Control" %}
<link rel="icon" href="data:image/png;base64,{% include 'admin/favicon_control.txt' %}">
  {% elif badge_role.name == "Watchtower" or badge_role.name == "Constellation" %}
<link rel="icon" href="data:image/png;base64,{% include 'admin/favicon_watchtower.txt' %}">
  {% elif badge_role.name == "Satellite" %}
<link rel="icon" href="data:image/png;base64,{% include 'admin/favicon_satellite.txt' %}">
  {% else %}
<link rel="icon" href="data:image/png;base64,{% include 'admin/favicon.txt' %}">
  {% endif %}
{% elif current_site_domain == "arthexis.com" %}
<link rel="icon" href="data:image/png;base64,{% include 'admin/favicon_arthexis.txt' %}">
{% else %}
<link rel="icon" href="data:image/png;base64,{% include 'admin/favicon.txt' %}">
{% endif %}
<script id="admin-filter-empty-groups">
document.addEventListener('DOMContentLoaded', function () {
    const nav = document.getElementById('nav-filter');
    const sidebar = document.getElementById('nav-sidebar');
    if (!nav || !sidebar) {
        return;
    }

    const modules = Array.from(sidebar.querySelectorAll('.module'));

    function toggleEmptyGroups() {
        const query = nav.value.trim().toLowerCase();
        const visibleModules = [];

        modules.forEach(function (module) {
            const hasVisibleRows = Array.from(module.querySelectorAll('tr')).some(function (row) {
                return row.style.display !== 'none' && row.querySelector('th[scope="row"]');
            });

            if (hasVisibleRows) {
                module.style.display = '';
                visibleModules.push(module);
            } else {
                module.style.display = 'none';
            }
        });

        // Ensure modules remain expanded while filtering and during normal navigation.
        visibleModules.forEach(function (module) {
            module.classList.remove('collapsed');
        });
    }

    nav.addEventListener('change', toggleEmptyGroups);
    nav.addEventListener('input', toggleEmptyGroups);
    nav.addEventListener('keyup', toggleEmptyGroups);

    toggleEmptyGroups();
});
</script>
<script id="admin-sidebar-collapse-toggle-visibility">
document.addEventListener('DOMContentLoaded', function () {
    const sidebar = document.getElementById('nav-sidebar');
    if (!sidebar) {
        return;
    }

    const toggles = sidebar.querySelectorAll('.app-collapse-toggle');
    if (!toggles.length) {
        return;
    }

    toggles.forEach(function (button) {
        button.hidden = true;
        button.setAttribute('aria-hidden', 'true');
        button.setAttribute('tabindex', '-1');
    });
});
</script>
{% now "c" as current_time %}
{% now "T" as current_tz %}
<script id="admin-server-clock">
document.addEventListener('DOMContentLoaded', function () {
    const clock = document.getElementById('server-clock');
    if (!clock) {
        return;
    }
    const serverStart = Date.parse("{{ current_time|escapejs }}");
    const clientStart = Date.now();
    const tz = "{{ TIME_ZONE|escapejs }}";
    function pad(n) {
        return String(n).padStart(2, '0');
    }
    function update() {
        const now = new Date(serverStart + (Date.now() - clientStart));
        const formatted = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
        clock.textContent = `${formatted} {{ current_tz|escapejs }}`;
        const dateFull = new Intl.DateTimeFormat([], { timeZone: tz, year: 'numeric', month: 'long', day: 'numeric' }).format(now);
        const weekday = new Intl.DateTimeFormat([], { timeZone: tz, weekday: 'long' }).format(now);
        const tzName = new Intl.DateTimeFormat([], { timeZone: tz, timeZoneName: 'long' })
            .formatToParts(now)
            .find(part => part.type === 'timeZoneName').value;
        clock.title = `${dateFull}\n${weekday}\n${tzName}`;
    }
    update();
    setInterval(update, 1000);
});
</script>
{% if request.user.is_authenticated and request.user.is_staff %}
{% include "core/version_check.html" %}
{% endif %}
<script id="admin-breadcrumb-copy">
document.addEventListener('DOMContentLoaded', function () {
    const breadcrumbs = document.querySelector('.breadcrumbs');
    if (!breadcrumbs || breadcrumbs.dataset.copyEnhanced === '1') {
        return;
    }

    const breadcrumbText = breadcrumbs.textContent.replace(/\s+/g, ' ').trim();
    if (!breadcrumbText) {
        return;
    }

    const copyLabel = '{% translate "Copy" %}';
    const copiedLabel = '{% translate "Copied!" %}';
    const copyErrorLabel = '{% translate "Copy failed" %}';

    function copyText(value) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            return navigator.clipboard.writeText(value);
        }

        return new Promise(function (resolve, reject) {
            const textarea = document.createElement('textarea');
            textarea.value = value;
            textarea.setAttribute('readonly', '');
            textarea.style.position = 'absolute';
            textarea.style.left = '-9999px';
            document.body.appendChild(textarea);
            const selection = document.getSelection();
            const selected = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
            textarea.select();

            try {
                document.execCommand('copy');
                resolve();
            } catch (error) {
                reject(error);
            }

            document.body.removeChild(textarea);

            if (selected && selection) {
                selection.removeAllRanges();
                selection.addRange(selected);
            }
        });
    }

    function getBreadcrumbCopyValue() {
        const breadcrumbLabel = breadcrumbs.dataset.breadcrumbText || breadcrumbText;
        return `In ${breadcrumbLabel} (${window.location.href})`;
    }

    function focusNavFilter() {
        const navFilter = document.getElementById('nav-filter');
        if (navFilter) {
            navFilter.focus();
            if (typeof navFilter.select === 'function') {
                navFilter.select();
            }
        }
    }

    function handleBreadcrumbCopy() {
        const copyValue = getBreadcrumbCopyValue();
        return copyText(copyValue)
            .then(function () {
                setStatus(copiedLabel);
            })
            .catch(function () {
                setStatus(copyErrorLabel);
            });
    }

    function setStatus(label) {
        breadcrumbsCopyLink.textContent = label;
        window.setTimeout(function () {
            breadcrumbsCopyLink.textContent = copyLabel;
        }, 1500);
    }

    const breadcrumbsCopyLink = document.createElement('a');
    breadcrumbsCopyLink.href = '#';
    breadcrumbsCopyLink.className = 'breadcrumbs__copy-link';
    breadcrumbsCopyLink.textContent = copyLabel;
    breadcrumbsCopyLink.dataset.breadcrumbCopy = '1';
    breadcrumbsCopyLink.setAttribute('role', 'button');
    breadcrumbsCopyLink.setAttribute('aria-label', '{% translate "Copy breadcrumb to clipboard" %}');

    breadcrumbs.dataset.copyEnhanced = '1';
    breadcrumbs.dataset.breadcrumbText = breadcrumbText;
    breadcrumbs.appendChild(breadcrumbsCopyLink);

    breadcrumbsCopyLink.addEventListener('click', function (event) {
        event.preventDefault();
        handleBreadcrumbCopy();
    });

    document.addEventListener('keydown', function (event) {
        if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === 's') {
            event.preventDefault();
            handleBreadcrumbCopy().finally(function () {
                focusNavFilter();
            });
        }
    });
});
</script>
{% endblock %}
{% block extrastyle %}
{{ block.super }}
<style>
.breadcrumbs__copy-link {
    margin-left: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumbs__translate-link {
    float: right;
    margin-left: 1rem;
    font-size: 0.875rem;
}

:root {
    --user-story-card-bg: var(--body-bg, #ffffff);
    --user-story-card-fg: var(--body-fg, #212529);
    --user-story-card-border: rgba(15, 23, 42, 0.12);
    --user-story-input-bg: var(--body-bg, #ffffff);
    --user-story-input-border: rgba(15, 23, 42, 0.15);
    --user-story-checkbox-border: rgba(15, 23, 42, 0.25);
    --user-story-muted: rgba(15, 23, 42, 0.6);
    --user-story-focus-ring: rgba(37, 99, 235, 0.2);
    --user-story-alert-success-bg: rgba(34, 197, 94, 0.12);
    --user-story-alert-success-border: rgba(34, 197, 94, 0.35);
    --user-story-alert-success-fg: #047857;
    --user-story-alert-danger-bg: rgba(248, 113, 113, 0.12);
    --user-story-alert-danger-border: rgba(248, 113, 113, 0.35);
    --user-story-alert-danger-fg: #b91c1c;
    --user-story-close-hover-bg: rgba(15, 23, 42, 0.08);
}

.chat-widget {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.chat-toggle {
    position: relative;
    border: 0;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #15803d, #34d399);
    color: #f0fdf4;
    box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-toggle:hover,
.chat-toggle:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 1.75rem 3rem rgba(15, 23, 42, 0.45);
}

.chat-toggle .chat-toggle-icon {
    display: inline-flex;
}

.chat-toggle .chat-toggle-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

.chat-toggle .chat-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.chat-toggle .chat-unread {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.65rem;
    background: #16a34a;
    color: #fff;
    box-shadow: 0 0.35rem 0.85rem rgba(14, 116, 44, 0.45);
}

.chat-toggle .chat-unread[hidden] {
    display: none;
}

.chat-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1080;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

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

.chat-drawer {
    width: min(28rem, 100%);
    border-radius: 1rem;
    background: var(--body-bg);
    color: var(--body-fg);
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(21, 128, 61, 0.25);
    overflow: hidden;
    transform: translateY(1rem);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    display: flex;
    flex-direction: column;
}

.chat-overlay.show .chat-drawer {
    transform: translateY(0);
    opacity: 1;
}

.chat-widget.open .chat-toggle {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.18), rgba(16, 185, 129, 0.25));
    border-bottom: 1px solid rgba(21, 128, 61, 0.35);
}

.chat-header h2 {
    margin: 0;
    font-size: 1rem;
}

.chat-header small {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.chat-close {
    border: 0;
    background: transparent;
    color: var(--body-fg);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.chat-close::before {
    content: "\00d7";
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.chat-close:hover,
.chat-close:focus-visible {
    background: rgba(21, 128, 61, 0.12);
    color: #15803d;
    transform: translateY(-1px);
    outline: none;
}

.chat-messages {
    flex: 1 1 auto;
    max-height: 18rem;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.chat-message .chat-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.chat-message.staff {
    flex-direction: row-reverse;
}

.chat-message.staff .chat-body {
    align-items: flex-end;
}

.chat-message.staff .chat-meta {
    text-align: right;
}

.chat-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0.35rem 0.75rem rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(21, 128, 61, 0.25);
    background: rgba(22, 163, 74, 0.1);
    flex-shrink: 0;
}

.chat-bubble {
    padding: 0.6rem 0.9rem;
    border-radius: 0.85rem;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(22, 163, 74, 0.15);
    max-width: 100%;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-message.staff .chat-bubble {
    background: rgba(21, 128, 61, 0.22);
    border-color: rgba(21, 128, 61, 0.3);
}

.chat-meta {
    font-size: 0.75rem;
    color: rgba(21, 94, 49, 0.75);
}

.chat-form {
    border-top: 1px solid rgba(21, 128, 61, 0.25);
    padding: 0.75rem 1.25rem 1.25rem;
    background: var(--body-bg);
}

.chat-form textarea {
    resize: vertical;
    min-height: 3.5rem;
}

.chat-form .chat-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    background: var(--body-bg);
    color: var(--body-fg);
    border: 1px solid rgba(21, 128, 61, 0.35);
    border-radius: 0.75rem;
    padding: 0.75rem 0.9rem;
    line-height: 1.5;
    box-shadow: inset 0 0.08rem 0.35rem rgba(15, 23, 42, 0.12);
}

.chat-input::placeholder {
    color: rgba(21, 94, 49, 0.7);
}

.chat-input:focus-visible {
    outline: 2px solid rgba(22, 163, 74, 0.35);
    outline-offset: 2px;
    border-color: rgba(22, 163, 74, 0.6);
}

.chat-actions {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.chat-actions .chat-session-hint {
    color: rgba(21, 94, 49, 0.65);
}

.chat-form .button-primary,
.chat-form .btn-primary {
    background: linear-gradient(135deg, #15803d, #22c55e);
    border-color: #15803d;
    color: #052e16;
    box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.25);
}

.chat-form .button-primary:hover,
.chat-form .button-primary:focus-visible,
.chat-form .btn-primary:hover,
.chat-form .btn-primary:focus-visible {
    background: linear-gradient(135deg, #166534, #16a34a);
    border-color: #166534;
    color: #f0fdf4;
}

.chat-session-hint {
    font-size: 0.75rem;
    opacity: 0.7;
}

body.chat-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .chat-widget {
        left: 1rem;
        bottom: 1rem;
    }
}

@media (max-width: 767.98px) {
    .chat-overlay {
        align-items: stretch;
        justify-content: flex-start;
        padding: 1rem;
    }

    .chat-drawer {
        width: 100%;
        max-width: none;
        border-radius: 1rem;
    }
}

[data-theme="dark"] {
    --user-story-card-bg: #0f172a;
    --user-story-card-fg: #f8fafc;
    --user-story-card-border: rgba(148, 163, 184, 0.25);
    --user-story-input-bg: #1e293b;
    --user-story-input-border: rgba(148, 163, 184, 0.35);
    --user-story-checkbox-border: rgba(148, 163, 184, 0.35);
    --user-story-muted: rgba(148, 163, 184, 0.85);
    --user-story-focus-ring: rgba(59, 130, 246, 0.45);
    --user-story-alert-success-bg: rgba(34, 197, 94, 0.16);
    --user-story-alert-success-border: rgba(34, 197, 94, 0.45);
    --user-story-alert-success-fg: #22c55e;
    --user-story-alert-danger-bg: rgba(248, 113, 113, 0.18);
    --user-story-alert-danger-border: rgba(248, 113, 113, 0.45);
    --user-story-alert-danger-fg: #fca5a5;
    --user-story-close-hover-bg: rgba(148, 163, 184, 0.25);
}

body.login #header {
    padding-top: 1em;
    padding-bottom: 1em;
}

body.login #branding {
    flex-direction: column;
    align-items: center;
}

body.login #site-name {
    margin-inline-end: 0;
}

body.login #site-badges {
    margin-top: 0.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#site-badges .badge {
    border-radius: 4px;
    color: white;
    display: inline-flex;
    align-items: center;
}
body.login #site-badges .badge {
    margin-right: 0.5em;
    font-size: 0.7em;
    padding: 2px 4px;
}
body.login #site-badges .badge a {
    color: white;
    text-decoration: none;
}
#site-badges .badge .badge-link {
    color: inherit;
    text-decoration: none;
}
#site-badges .badge .badge-link-value {
    margin-left: 0.25em;
}
body.login .badge-unknown {background-color:#6c757d;}
#server-clock {
    font-family: monospace;
    font-size: 0.9rem;
}

.user-tools-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--body-quiet-color, #6b7280);
    font-size: 0.9rem;
}

.user-tools-spinner {
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--border-color, rgba(15, 23, 42, 0.2));
    border-top-color: var(--link-fg, #2563eb);
    border-radius: 999px;
    display: inline-flex;
    animation: user-tools-spin 0.9s linear infinite;
}

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

body:not(.login) #header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
}

body:not(.login) #branding,
body:not(.login) #user-tools {
    float: none;
}

body:not(.login) #branding {
    display: flex;
    align-items: center;
}

body:not(.login) #site-name {
    margin: 0;
    display: flex;
    align-items: center;
}

body:not(.login) #site-name > a {
    margin-right: 10px;
    margin-bottom: 0;
}

body:not(.login) #site-badges {
    margin-left: 0.5em;
    display: flex;
    align-items: center;
}

body:not(.login) #site-badges .badge {
    margin-right: 0.25em;
    padding: 2px 6px;
    font-size: 0.8em;
    text-decoration: none;
}

body:not(.login) .badge-unknown {background-color:#6c757d;}
#nav-sidebar .module h2 {
    cursor: default;
}
.form-row {
    margin-top: 0;
    margin-bottom: 0;
}
.form-row > div:only-child input[type="text"]:not(.vDateField):not(.vTimeField),
.form-row > div:only-child textarea {
    width: 150% !important;
}

.form-row .datetime {
    display: flex;
    gap: 0.5em;
}

.favorite-star {
    color: #666;
    text-decoration: none;
    margin-right: 4px;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}
.favorite-star.favorited {
    color: gold;
}
.favorite-star.user-data-star {
    color: #0d6efd;
    background: none;
    border: none;
    padding: 0;
    margin-right: 0;
    line-height: 1;
    cursor: pointer;
}
.favorite-star.user-data-star.has-user-data {
    color: gold;
}
.favorite-star.user-data-star.disabled {
    cursor: default;
}

.content-title-with-favorite {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.content-title-with-favorite h1 {
    margin: 0;
}
.user-data-column {
    text-align: center;
    width: 1.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

#result_list .user-data-column {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Highlight the currently selected model row */
.current-model > th,
.current-model > td {
    background: var(--selected-row);
}

.related-widget-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.related-widget-wrapper > div {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.related-widget-wrapper input,
.related-widget-wrapper select,
.related-widget-wrapper textarea {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.related-widget-wrapper .related-lookup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    margin-left: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--button-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
}

.related-widget-wrapper .related-lookup:hover {
    background-color: var(--button-hover-bg);
}

/* Ensure related object buttons match theme */
.related-widget-wrapper-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--button-bg);
    color: var(--button-fg);
}

.related-widget-wrapper > .related-widget-wrapper-link {
    margin-left: 0;
}

.related-widget-wrapper-link:hover {
    background: var(--button-hover-bg);
}

/* Style object action buttons like history links */
.object-tools li button {
    border: none;
    border-radius: 15px;
    display: block;
    float: left;
    padding: 5px 12px;
    line-height: 1rem;
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    font-weight: 400;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.object-tools li button:focus,
.object-tools li button:hover {
    background-color: var(--object-tools-hover-bg);
}
.object-tools .discover-action {
    display: inline-flex;
    align-items: center;
    padding-right: 12px;
    background-image: none;
}

/* Language dropdown styling */
.language-select {
    background: none;
    border: none;
    color: var(--header-link-color);
    cursor: pointer;
}

.language-select option {
    background-color: var(--body-bg);
    color: var(--body-fg);
}

/* Align delete button with other submit-row buttons */
.submit-row a.deletelink {
    margin-left: 0;
    display: inline-block;
    padding: 0.625rem 0.9375rem;
    height: 0.9375rem;
    line-height: 0.9375rem;
    border-radius: 4px;
    background: var(--delete-button-bg, #ba2121);
    color: var(--button-fg);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
}

.submit-row a.deletelink:focus,
.submit-row a.deletelink:hover {
    background: var(--delete-button-hover-bg, #a41515);
    color: var(--button-fg);
}

.favorite-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12.5rem;
    padding: 0.625rem 0.9375rem;
    border-radius: 4px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1rem;
    text-decoration: none;
}

.favorite-action--danger {
    background: var(--delete-button-bg, #ba2121);
    color: var(--button-fg, #ffffff);
}

.favorite-action--danger:hover,
.favorite-action--danger:focus {
    background: var(--delete-button-hover-bg, #a41515);
    color: var(--button-fg, #ffffff);
}

/* Keep dual-selector widgets oriented left-to-right */
.selector {
    flex-direction: row;
}

.selector-available {
    order: 0;
}

.selector ul.selector-chooser {
    order: 1;
}

.selector-chosen {
    order: 2;
}

.user-story-toggle {
    position: fixed;
    right: 1.75rem;
    bottom: 1.75rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #facc15, #fb923c);
    color: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 1080;
}

.user-story-toggle:hover,
.user-story-toggle:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 1.75rem 3rem rgba(15, 23, 42, 0.45);
}

.user-story-toggle svg {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
}

body.user-story-open .user-story-toggle {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.user-story-open {
    overflow: hidden;
}

.user-story-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1070;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

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

.user-story-card {
    width: min(28rem, 100%);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.45);
    background: var(--user-story-card-bg);
    color: var(--user-story-card-fg);
    transform: translateY(1rem);
    transition: transform 0.25s ease;
}

.user-story-card .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--user-story-card-border);
}

.user-story-card .card-body {
    padding: 1rem 1.25rem 1.5rem;
}

.user-story-card .card-title {
    margin-bottom: 0.25rem;
}

.user-story-card .card-subtitle {
    margin-bottom: 0;
}

.user-story-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.user-story-card .btn:hover,
.user-story-card .btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 1rem 2rem rgba(14, 165, 233, 0.35);
    text-decoration: none;
}

.user-story-card .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.user-story-card .btn-close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.user-story-card .btn-close::before {
    content: "\00d7";
    font-size: 1.25rem;
    line-height: 1;
}

.user-story-card .btn-close:hover,
.user-story-card .btn-close:focus-visible {
    background-color: var(--user-story-close-hover-bg);
}

.user-story-card .form-control,
.user-story-card textarea {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--user-story-input-border);
    padding: 0.5rem 0.75rem;
    background: var(--user-story-input-bg);
    color: var(--user-story-card-fg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: vertical;
}

.user-story-card .form-control::placeholder,
.user-story-card textarea::placeholder {
    color: var(--user-story-muted);
}

.user-story-card .form-control:focus,
.user-story-card textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.2rem var(--user-story-focus-ring);
    outline: none;
}

.user-story-card .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.35rem;
    border: 1px solid var(--user-story-checkbox-border);
    background-color: var(--user-story-input-bg);
    color: var(--user-story-card-fg);
    cursor: pointer;
}

.user-story-card .mb-3 {
    margin-bottom: 1rem;
}

.user-story-card .mt-3 {
    margin-top: 1rem;
}

.user-story-card .w-100 {
    width: 100%;
}

.user-story-card .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.user-story-card .d-none {
    display: none !important;
}

.user-story-card .form-check-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.2rem var(--user-story-focus-ring);
}

.user-story-overlay.show .user-story-card {
    transform: translateY(0);
}

.user-story-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.35rem;
}

.user-story-feedback-options {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.user-story-rating-hint {
    margin-left: auto;
    font-style: italic;
    color: var(--user-story-muted);
}

.user-story-card .form-label,
.user-story-card .form-text,
.user-story-card .form-check-label {
    display: block;
}

.user-story-card .form-text {
    color: var(--user-story-muted);
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.user-story-card .text-muted {
    color: var(--user-story-muted) !important;
}

.user-story-clipboard {
    margin: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.user-story-clipboard .form-check-input {
    margin-top: 0;
}

.user-story-rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.user-story-rating label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: rgba(148, 163, 184, 0.7);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.user-story-rating label:hover,
.user-story-rating label:focus-visible,
.user-story-rating label:hover ~ label {
    color: #fbbf24;
}

.user-story-rating input:checked ~ label {
    color: #f59e0b;
}

.user-story-rating label:active {
    transform: scale(0.95);
}

.user-story-alert {
    transition: opacity 0.2s ease;
}

.user-story-card .alert {
    margin-bottom: 0;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    padding: 0.75rem 1rem;
}

.user-story-card .alert-success {
    background-color: var(--user-story-alert-success-bg);
    border-color: var(--user-story-alert-success-border);
    color: var(--user-story-alert-success-fg);
}

.user-story-card .alert-danger {
    background-color: var(--user-story-alert-danger-bg);
    border-color: var(--user-story-alert-danger-border);
    color: var(--user-story-alert-danger-fg);
}

@media (max-width: 767.98px) {
    .user-story-toggle {
        right: 1.25rem;
        bottom: 1.25rem;
    }

    .user-story-overlay {
        align-items: stretch;
        padding: 1rem;
    }

    .user-story-card {
        width: 100%;
        border-radius: 1rem;
    }
}
</style>
{% endblock %}
{% block branding %}
<h1 id="site-name">
  <a href="{% url 'admin:index' %}"><span id="server-clock"></span></a>
</h1>
<div id="site-badges">
  <span class="badge {% if not badge_site %}badge-unknown{% endif %}" {% if badge_site %}style="background-color: {{ badge_site_color }};"{% endif %}>
    <a class="badge-link" href="{% url 'admin:pages_siteproxy_changelist' %}">SITE:</a>
    {% if badge_site %}
      <a class="badge-link badge-link-value" href="{% url 'admin:pages_siteproxy_change' badge_site.pk %}">{{ badge_admin_site_name }}</a>
    {% else %}
      <span class="badge-link badge-link-value">Unknown</span>
    {% endif %}
    <span style="display:none">SITE: {% if badge_site %}{{ badge_admin_site_name }}{% else %}Unknown{% endif %}</span>
  </span>
  <span class="badge {% if not badge_node %}badge-unknown{% endif %}" {% if badge_node %}style="background-color: {{ badge_node_color }};"{% endif %}>
    <a class="badge-link" href="{% url 'admin:nodes_node_changelist' %}">NODE:</a>
    {% if badge_node %}
      <a class="badge-link badge-link-value" href="{% url 'admin:nodes_node_change' badge_node.pk %}">{{ badge_node.hostname }}</a>
    {% else %}
      <span class="badge-link badge-link-value">Unknown</span>
    {% endif %}
    <span style="display:none">NODE: {% if badge_node %}{{ badge_node.hostname }}{% else %}Unknown{% endif %}</span>
  </span>
  {% if badge_node and badge_role %}
    <span class="badge" style="background-color: {{ badge_role_color }};">
      <a class="badge-link" href="{% url 'admin:nodes_noderole_changelist' %}">ROLE:</a>
      <a class="badge-link badge-link-value" href="{% url 'admin:nodes_noderole_change' badge_role.pk %}">{{ badge_role.name }}</a>
      <span style="display:none">ROLE: {{ badge_role.name }}</span>
    </span>
  {% endif %}
  <span class="badge {% if not badge_video_device %}badge-unknown{% endif %}" {% if badge_video_device %}style="background-color: {{ badge_video_device_color }};"{% endif %}>
    <a class="badge-link" href="{% url 'admin:video_videodevice_changelist' %}">CAM:</a>
    {% with device_display_text=badge_video_device.display_name|default:"N/A" %}
      {% if badge_video_device %}
        <a class="badge-link badge-link-value" href="{% url 'admin:video_videodevice_change' badge_video_device.pk %}">{{ device_display_text }}</a>
      {% else %}
        <span class="badge-link badge-link-value">{{ device_display_text }}</span>
      {% endif %}
      <span style="display:none">CAM: {{ device_display_text }}</span>
    {% endwith %}
  </span>
</div>
{% endblock %}
{% block userlinks %}
  {% include "admin/includes/user_tools.html" %}
{% endblock %}
{% block nav-global %}{% endblock %}
{% block nav-sidebar %}
  <button class="sticky toggle-nav-sidebar" id="toggle-nav-sidebar" aria-label="{% translate 'Toggle navigation' %}"></button>
  <nav class="sticky" id="nav-sidebar" aria-label="{% translate 'Sidebar' %}">
    <input type="search" id="nav-filter"
           placeholder="{% translate 'Start typing to filter…' %}"
           aria-label="{% translate 'Filter navigation items' %}">
    {% include 'admin/app_list.html' with app_list=available_apps %}
  </nav>
{% endblock %}
{% block messages %}
  {% include "admin/includes/messages.html" %}
{% endblock %}
{% block footer %}
  {{ block.super }}
  {% if chat_enabled and request.user.is_authenticated %}
    <div
      id="chat-widget"
      class="chat-widget"
      data-path="{{ chat_socket_path }}"
      data-session-storage-key="pages.chat.session"
      data-connected-text="{% trans 'Connected' %}"
      data-connecting-text="{% trans 'Connecting…' %}"
      data-disconnected-text="{% trans 'Disconnected' %}"
      data-unread-text="{% trans 'New' %}"
      data-open-text="{% trans 'Need help?' %}"
      data-close-text="{% trans 'Close chat' %}"
      data-session-label="{% trans 'Session' %}"
      data-empty-text="{% trans 'Say hello to start the conversation.' %}"
      data-error-text="{% trans 'We could not send your message. Please retry.' %}"
      data-staff-join-text="{% trans 'A staff member joined the chat.' %}"
      data-staff-leave-text="{% trans 'A staff member left the chat.' %}"
      data-visitor-join-text="{% trans 'You joined the chat.' %}"
      data-visitor-leave-text="{% trans 'You left the chat.' %}"
      data-staff="{{ request.user.is_staff|yesno:"true,false" }}"
    >
      <button
        type="button"
        class="chat-toggle"
        data-chat-toggle
        aria-expanded="false"
        aria-controls="chat-drawer"
        aria-label="{% trans 'Need help?' %}"
      >
        <span class="chat-toggle-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
            <path
              fill="currentColor"
              d="M12 3c-4.97 0-9 3.582-9 8 0 1.93.78 3.69 2.08 5.08-.097.86-.43 2.348-1.4 3.734a.75.75 0 00.902 1.133c2.115-.633 3.422-1.522 4.09-2.073A10.63 10.63 0 0012 19c4.97 0 9-3.582 9-8s-4.03-8-9-8z"
            ></path>
          </svg>
        </span>
        <span class="chat-toggle-label">{% trans "Need help?" %}</span>
        <span class="chat-unread" data-chat-unread hidden>{% trans "New" %}</span>
      </button>
      <div
        class="chat-overlay"
        data-chat-overlay
        role="presentation"
        hidden
      >
        <aside
          id="chat-drawer"
          class="chat-drawer"
          data-chat-drawer
          role="dialog"
          aria-modal="true"
          aria-labelledby="chat-title"
          aria-label="{% trans 'Support chat' %}"
        >
          <header class="chat-header">
            <div>
              <h2 class="mb-0" id="chat-title">{% trans "Support" %}</h2>
              <small data-chat-status>{% trans "Connecting…" %}</small>
            </div>
            <button type="button" class="chat-close" data-chat-close aria-label="{% trans 'Close chat' %}"></button>
          </header>
          <div
            class="chat-messages"
            data-chat-messages
            role="log"
            aria-live="polite"
            aria-relevant="additions"
          ></div>
          <form class="chat-form" data-chat-form>
            <label class="visually-hidden" for="chat-message-input">{% trans "Message" %}</label>
            <textarea
              id="chat-message-input"
              class="vLargeTextField chat-input"
              name="message"
              rows="3"
              data-chat-input
              placeholder="{% trans 'Type your message…' %}"
              required
            ></textarea>
            <div class="chat-actions">
              <span class="chat-session-hint" data-chat-session-hint></span>
              <button type="submit" class="button button-primary">{% trans "Send" %}</button>
            </div>
          </form>
        </aside>
      </div>
    </div>
    <script src="{% static 'pages/js/chat.js' %}" defer></script>
  {% endif %}
  {% include "admin/includes/user_story_feedback.html" %}
{% endblock %}