/* ==========================================================================
   BaraLink Admin — production UX layer on Django Unfold
   ========================================================================== */

[x-cloak] {
    display: none !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

:root {
    --baralink-primary: #1a1ae6;
    --baralink-primary-hover: #1515b8;
    --baralink-link: #1a1ae6;
    --baralink-sidebar-bg: #1E1E2D;
    --baralink-sidebar-border: rgba(255, 255, 255, 0.06);
    --baralink-secondary: #f5c518;
    /* The sidebar is dark in both themes: its own small palette. */
    --baralink-sidebar-text: #94a3b8;
    --baralink-sidebar-link: #9ca3af;
    --baralink-sidebar-icon: #64748b;
    --baralink-sidebar-strong: #ffffff;
    --baralink-sidebar-hover-bg: #141722;
    --baralink-sidebar-hover-icon: #3b82f6;
    --baralink-sidebar-active-bg: rgba(26, 26, 230, 0.15);
    --baralink-sidebar-focus: #a5b4fc;
    --baralink-surface: #ffffff;
    --baralink-surface-muted: #f8f9fc;
    --baralink-border: #e5e7eb;
    --baralink-text: #111827;
    --baralink-text-muted: #6b7280;
    --baralink-success: #059669;
    --baralink-warning: #d97706;
    --baralink-danger: #dc2626;
    /* The same three colours darkened for text: as text on a light surface the bright
       ones miss the 4.5:1 contrast (warning 3.2:1, success 3.8:1). */
    --baralink-success-text: #047857;
    --baralink-warning-text: #b45309;
    --baralink-danger-text: #b91c1c;
    /* Type scale and radii: every size in this file is one of these. */
    --bl-text-2xs: 0.6875rem;
    --bl-text-xs: 0.75rem;
    --bl-text-sm: 0.8125rem;
    --bl-text-base: 0.875rem;
    --bl-text-md: 1rem;
    --bl-text-lg: 1.125rem;
    --bl-text-xl: 1.25rem;
    --bl-text-2xl: 1.5rem;
    --bl-text-3xl: 1.75rem;
    --bl-radius-sm: 0.375rem;
    --bl-radius-md: 0.5rem;
    --bl-radius-lg: 0.75rem;
    --bl-radius-full: 9999px;
    --baralink-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
    --baralink-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
    --baralink-shadow-primary: 0 4px 14px rgba(26, 26, 230, 0.22);
    --bg-base-900: #1e1e2d;
    --bg-base-800: #262638;
    --bg-base-700: #32324a;
}

/* --------------------------------------------------------------------------
   Dark mode alignment
   -------------------------------------------------------------------------- */

.dark body,
.dark .bg-base-900,
.dark .bg-base-950\/20 {
    background-color: var(--bg-base-900) !important;
}

.dark .bg-base-800 {
    background-color: var(--bg-base-800) !important;
}

.dark .border-base-800,
.dark .border-base-700 {
    border-color: var(--bg-base-700) !important;
}

/* :root.dark, not `.dark :root` -- .dark is ON <html>, which is :root itself, so the
   descendant form could never match and these overrides never applied. */

:root.dark {
    --baralink-link: #a5b4fc;
    --baralink-surface: #1e1e2d;
    --baralink-surface-muted: #262638;
    --baralink-border: #32324a;
    --baralink-text: #f3f4f6;
    --baralink-text-muted: #9ca3af;
    --baralink-success-text: #34d399;
    --baralink-warning-text: #fbbf24;
    --baralink-danger-text: #f87171;
}

/* --------------------------------------------------------------------------
   Branding — larger, recognizable logo
   -------------------------------------------------------------------------- */

/* 40px fits the 65px header; the old 6.5-7.5rem only compensated for artwork padded
   inside a 929x1024 canvas, which the trimmed logo-full.png no longer has. */

.baralink-logo img {
    height: 2.5rem;
    max-height: 2.5rem;
    width: auto;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   Buttons — clear hierarchy with subtle elevation
   -------------------------------------------------------------------------- */

.bg-primary-600 {
    background-color: var(--baralink-primary) !important;
    box-shadow: var(--baralink-shadow-sm);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bg-primary-600:hover {
    background-color: var(--baralink-primary-hover) !important;
    box-shadow: var(--baralink-shadow-primary);
    transform: translateY(-1px);
}

.baralink-btn {
    align-items: center;
    border-radius: var(--bl-radius-sm);
    display: inline-flex;
    font-weight: 500;
    gap: 0.375rem;
    justify-content: center;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.baralink-btn--primary {
    background-color: var(--baralink-link);
    border: 1px solid var(--baralink-primary);
    box-shadow: var(--baralink-shadow-sm);
    color: #fff;
}

.baralink-btn--primary:hover {
    background-color: var(--baralink-primary-hover);
    box-shadow: var(--baralink-shadow-primary);
    transform: translateY(-1px);
}

#submit-row .bg-primary-600,
#submit-row .bg-red-600 {
    box-shadow: var(--baralink-shadow-sm);
}

#submit-row .bg-primary-600:hover {
    box-shadow: var(--baralink-shadow-primary);
}

#submit-row button,
#submit-row a[class*="border"] {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#submit-row button:hover,
#submit-row a[class*="border"]:hover {
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Sidebar Navigation Backgrounds (Slate Design)
   -------------------------------------------------------------------------- */

/* Custom Scrollbar */

/* Sidebar Accordion (details/summary) */

/* --------------------------------------------------------------------------
   Dashboard layout — minimal, scannable
   -------------------------------------------------------------------------- */

.baralink-dashboard-section {
    display: flex;
    flex-direction: column;
}

.baralink-dashboard__header-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.baralink-cl-export-header {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.baralink-dashboard__title {
    color: var(--baralink-text);
    font-size: var(--bl-text-xl);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.baralink-period-badge {
    background-color: rgba(26, 26, 230, 0.08);
    border-radius: var(--bl-radius-full);
    color: var(--baralink-link);
    font-size: var(--bl-text-2xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    text-transform: uppercase;
}

.dark .baralink-period-badge {
    background-color: rgba(26, 26, 230, 0.15);
}

.baralink-export-btn {
    align-items: center;
    background-color: var(--baralink-link);
    border-radius: var(--bl-radius-md);
    color: #fff;
    display: inline-flex;
    font-size: var(--bl-text-sm);
    font-weight: 600;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    text-decoration: none;
    transition: background-color 0.15s;
}

.baralink-export-btn:hover {
    background-color: var(--baralink-primary-hover, #1515c8);
    color: #fff;
}

/* Breadcrumbs */

.baralink-breadcrumbs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--bl-text-sm);
    gap: 0.35rem;
}

.baralink-breadcrumbs__link {
    color: var(--baralink-text-muted);
    text-decoration: none;
}

.baralink-breadcrumbs__link:hover {
    color: var(--baralink-link);
}

.baralink-breadcrumbs__current {
    color: var(--baralink-text);
    font-weight: 500;
}

.baralink-breadcrumbs__sep {
    color: var(--baralink-text-muted);
    opacity: 0.5;
}

.baralink-section-title {
    color: var(--baralink-text);
    font-size: var(--bl-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

/* Period bar — inline toolbar */

.baralink-period-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.baralink-period-bar select,
.baralink-period-bar input[type="date"] {
    background-color: var(--baralink-surface);
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-sm);
    color: var(--baralink-text);
    font-size: var(--bl-text-sm);
    padding: 0.4rem 0.65rem;
}

.dark .baralink-period-bar select,
.dark .baralink-period-bar input[type="date"] {
    background-color: var(--bg-base-900);
    border-color: var(--bg-base-700);
}

.baralink-period-custom {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.baralink-period-custom__sep {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-sm);
}

.baralink-btn--sm {
    font-size: var(--bl-text-sm);
    padding: 0.4rem 0.85rem;
}

/* View tabs */

.baralink-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.baralink-view-tab {
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-sm);
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-sm);
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.baralink-view-tab:hover {
    border-color: var(--baralink-link);
    color: var(--baralink-link);
}

.baralink-view-tab[aria-current="page"] {
    background-color: var(--baralink-link);
    border-color: var(--baralink-link);
    color: #fff;
}

/* KPI cards — compact */

.baralink-kpi-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .baralink-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .baralink-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.baralink-kpi-card {
    background-color: var(--baralink-surface);
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-md);
    box-shadow: var(--baralink-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 0;
    padding: 0.85rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.baralink-kpi-card--link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.baralink-kpi-card--link:hover {
    border-color: rgba(26, 26, 230, 0.4);
    box-shadow: var(--baralink-shadow-md);
    transform: translateY(-2px);
}

.baralink-kpi-card--attention {
    border-left: 3px solid var(--baralink-warning);
}

.baralink-kpi-card__title {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-xs);
    font-weight: 500;
    line-height: 1.3;
}

.baralink-kpi-card__trend {
    font-size: var(--bl-text-xs);
    font-weight: 500;
    margin-top: 0.15rem;
}

.baralink-kpi-card__trend--improvement {
    color: var(--baralink-success-text);
}

.baralink-kpi-card__trend--worsening {
    color: var(--baralink-danger-text);
}

.baralink-kpi-card__trend--neutral,
.baralink-kpi-card__trend--new {
    color: var(--baralink-text-muted);
}

/* Overview panels — compact row cards */

.baralink-panel-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .baralink-panel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .baralink-panel-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.baralink-panel-card {
    align-items: center;
    background-color: var(--baralink-surface);
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-md);
    box-shadow: var(--baralink-shadow-sm);
    color: inherit;
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.baralink-panel-card:hover {
    border-color: rgba(26, 26, 230, 0.3);
    box-shadow: var(--baralink-shadow-md);
}

.baralink-panel-card__icon {
    align-items: center;
    background-color: rgba(26, 26, 230, 0.08);
    border-radius: var(--bl-radius-sm);
    color: var(--baralink-link);
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--bl-text-xl);
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.baralink-panel-card__title {
    color: var(--baralink-text);
    flex: 1;
    font-size: var(--bl-text-base);
    font-weight: 500;
}

.baralink-panel-card__arrow {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-lg);
}

/* Link row (lists section) */

.baralink-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.baralink-link-row__item {
    align-items: center;
    background-color: var(--baralink-surface);
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-sm);
    color: var(--baralink-link);
    display: inline-flex;
    font-size: var(--bl-text-sm);
    font-weight: 500;
    gap: 0.25rem;
    padding: 0.45rem 0.75rem;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.baralink-link-row__item:hover {
    border-color: rgba(26, 26, 230, 0.3);
    box-shadow: var(--baralink-shadow-sm);
}

.baralink-link-row__item .material-symbols-outlined {
    font-size: var(--bl-text-md);
}

/* Activity */

.baralink-activity-card {
    background-color: var(--baralink-surface);
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-md);
    box-shadow: var(--baralink-shadow-sm);
    padding: 0.85rem 1rem;
}

.baralink-activity-card__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.baralink-activity-card__title {
    color: var(--baralink-text);
    font-size: var(--bl-text-sm);
    font-weight: 600;
    margin: 0;
}

.baralink-activity-card__view-all {
    color: var(--baralink-link);
    font-size: var(--bl-text-xs);
    font-weight: 500;
    text-decoration: none;
}

.baralink-activity-card__view-all:hover {
    text-decoration: underline;
}

.baralink-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.baralink-activity-item {
    border-bottom: 1px solid var(--baralink-border);
    display: grid;
    gap: 0.15rem;
    grid-template-columns: 1.5rem 1fr;
    padding: 0.5rem 0;
}

.baralink-activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.baralink-activity-item__index {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-2xs);
    font-weight: 600;
    padding-top: 0.1rem;
    text-align: right;
}

.baralink-activity-item__label:hover {
    color: var(--baralink-link);
}

.baralink-activity-item__meta {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-2xs);
}

/* Charts */

.baralink-chart-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 1024px) {
    .baralink-chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.baralink-chart-card {
    background-color: var(--baralink-surface);
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-md);
    box-shadow: var(--baralink-shadow-sm);
    padding: 0.85rem 1rem;
}

.baralink-chart-card--wide {
    grid-column: 1 / -1;
}

.baralink-chart-card__title {
    color: var(--baralink-text);
    font-size: var(--bl-text-sm);
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.baralink-chart-card__desc {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-2xs);
    margin: 0 0 0.65rem;
    line-height: 1.4;
}

.baralink-chart-sparse {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-2xs);
    font-style: italic;
    margin: 0.5rem 0 0;
    text-align: center;
}

/* Empty states */

.baralink-empty-state {
    border: 1px dashed var(--baralink-border);
    border-radius: var(--bl-radius-md);
    padding: 2rem 1rem;
    text-align: center;
}

.baralink-empty-state--compact {
    padding: 1.25rem 1rem;
}

.baralink-empty-state--inline {
    margin-top: 0.5rem;
}

.baralink-empty-state__icon {
    color: var(--baralink-text-muted);
    display: block;
    font-size: var(--bl-text-3xl);
    margin-bottom: 0.5rem;
}

.baralink-empty-state__title {
    color: var(--baralink-text);
    font-size: var(--bl-text-sm);
    font-weight: 600;
    margin: 0;
}

.baralink-empty-state__text {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-xs);
    line-height: 1.45;
    margin: 0.35rem auto 0;
    max-width: 24rem;
}





/* Compact changelist tables */

#result_list thead th {
    font-size: var(--bl-text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#result_list tbody td {
    font-size: var(--bl-text-sm);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

table tbody tr {
    transition: background-color 0.12s ease;
}

/* Remove legacy verbose styles */

.baralink-kpi-card__header,
.baralink-kpi-card__description {
    display: none;
}

/* --------------------------------------------------------------------------
   Status badges (reusable in list displays via format_html)
   -------------------------------------------------------------------------- */

.baralink-status {
    border-radius: var(--bl-radius-full);
    display: inline-block;
    font-size: var(--bl-text-2xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.55rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.baralink-status--success {
    background-color: rgba(5, 150, 105, 0.12);
    color: var(--baralink-success-text);
}

.baralink-status--warning {
    background-color: rgba(217, 119, 6, 0.12);
    color: var(--baralink-warning-text);
}

.baralink-status--danger {
    background-color: rgba(220, 38, 38, 0.12);
    color: var(--baralink-danger-text);
}

.baralink-status--neutral {
    background-color: rgba(107, 114, 128, 0.12);
    color: var(--baralink-text-muted);
}

.baralink-status--info {
    background-color: rgba(26, 26, 230, 0.1);
    color: var(--baralink-link);
}

/* --------------------------------------------------------------------------
   Tables & sidebar polish
   -------------------------------------------------------------------------- */

table tbody tr:hover {
    background-color: rgba(26, 26, 230, 0.03);
}

.dark table tbody tr:hover {
    background-color: rgba(26, 26, 230, 0.08);
}

/* Django admin messages — clearer feedback after actions */

.messagelist {
    margin: 0 0 1.25rem;
    padding: 0;
}

.messagelist li {
    border-radius: var(--bl-radius-sm);
    box-shadow: var(--baralink-shadow-sm);
    font-size: var(--bl-text-base);
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
}

.messagelist .success {
    background-color: rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(5, 150, 105, 0.25);
    color: var(--baralink-success-text);
}

.messagelist .warning {
    background-color: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.25);
    color: var(--baralink-warning-text);
}

.messagelist .error {
    background-color: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.22);
    color: var(--baralink-danger-text);
}

table thead th:first-child,
table tbody td:first-child {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-sm);
    text-align: center;
    width: 3rem;
}

.border-primary-600 {
    border-color: var(--baralink-primary) !important;
}

.text-primary-600 {
    color: var(--baralink-primary) !important;
}

/* Legacy alias */

.empty-state-box {
    border: 2px dashed var(--baralink-border);
    border-radius: var(--bl-radius-md);
    padding: 2.5rem;
    text-align: center;
}

/* ==========================================================================
   Sidebar collapse-to-rail mode
   ========================================================================== */

/* ── Toggle button ────────────────────────────────────────────────────────── */

.bl-rail-toggle:hover .bl-rail-toggle__icon-box {
    background: var(--baralink-primary);
    border-color: var(--baralink-link);
}

.bl-rail-toggle__chevron {
    color: inherit;
    flex-shrink: 0;
    font-size: var(--bl-text-base) !important;
    line-height: 1;
    transition: transform 0.3s ease, color 0.15s ease;
}

.bl-rail-toggle:hover .bl-rail-toggle__chevron {
    color: #fff;
}

.bl-rail-toggle__label {
    overflow: hidden;
    transition: opacity 0.2s ease, width 0.3s ease;
}

/* ── Rail mode — nav-sidebar-inner.bl-rail ────────────────────────────────── */

/* Group headers (summary) — hidden in rail */

/* Search bar — hidden in rail */

#nav-sidebar-inner.bl-rail #nav-sidebar-search,
#nav-sidebar-inner.bl-rail form[role="search"],
#nav-sidebar-inner.bl-rail [data-simplebar] ~ * > input[type="search"] {
    display: none;
}

/* Nav item container */

/* Nav item links — center icon, remove label */

#nav-sidebar-inner.bl-rail #nav-sidebar-apps li a {
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}

/* Icon — remove right margin when label is hidden */

/* Text label — hide with smooth fade */

#nav-sidebar-inner.bl-rail #nav-sidebar-apps li a .bl-nav-label,
#nav-sidebar-inner.bl-rail #nav-sidebar-apps li a .unfold-badge {
    display: none;
}

/* Tooltip — shown on hover using CSS attr(title).
   `top` has no CSS-only way to track the hovered icon's on-screen position,
   so admin_dashboard.js sets --bl-tooltip-top from getBoundingClientRect()
   on mouseover; the 50% fallback only matters before that JS has run once. */

#nav-sidebar-inner.bl-rail #nav-sidebar-apps li a::after {
    content: attr(title);
    position: fixed;
    top: var(--bl-tooltip-top, 50%);
    left: 88px;
    transform: translateY(-50%);
    background-color: #111827;
    color: #f9fafb;
    padding: 0.3rem 0.65rem;
    border-radius: var(--bl-radius-sm);
    font-size: var(--bl-text-xs);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.dark #nav-sidebar-inner.bl-rail #nav-sidebar-apps li a::after {
    background-color: #1f2937;
    color: #f3f4f6;
}

#nav-sidebar-inner.bl-rail #nav-sidebar-apps li a:hover::after {
    opacity: 1;
}

/* Toggle button in rail — shrink to a bare circular icon button, hide label */

#nav-sidebar-inner.bl-rail .bl-rail-toggle {
    background: transparent;
    border-color: transparent;
    justify-content: center;
    padding: 0;
    width: auto;
}

#nav-sidebar-inner.bl-rail .bl-rail-toggle:hover {
    background: transparent;
    box-shadow: none;
}

#nav-sidebar-inner.bl-rail .bl-rail-toggle__icon-box {
    height: 30px;
    width: 30px;
}

#nav-sidebar-inner.bl-rail .bl-rail-toggle__label {
    display: none;
}

/* Site branding — hide site name in rail, keep icon */

#nav-sidebar-inner.bl-rail .bl-rail-toggle-wrap {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Header — swap full logo for icon in rail */

#nav-sidebar-inner.bl-rail .baralink-logo__full {
    display: none !important;
}

#nav-sidebar-inner.bl-rail .baralink-logo {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    width: 100%;
}

#nav-sidebar-inner.bl-rail .baralink-logo__icon {
    display: block !important;
}

.dark #nav-sidebar-inner.bl-rail .baralink-logo__icon:first-of-type {
    display: none !important;
}

.dark #nav-sidebar-inner.bl-rail .baralink-logo__icon:last-of-type {
    display: block !important;
}

/* User section — hide entirely in rail mode */

#nav-sidebar-inner.bl-rail .border-t {
    display: none;
}

/* Search wrapper hide in rail */

/* Ensure accordion stays open in rail (collapsed groups are still navigable) */

/* ── Changelist action bar ────────────────────────────────────────────────── */

/* Raise action bar above the sidebar stacking context (z-60) */

.bl-changelist-actions-outer {
    position: fixed;
    z-index: 200;
}

/* In rail mode the sidebar is 80px, not 288px — correct the left offset */

@media (min-width: 1280px) {
    body.bl-rail-active #changelist-actions-wrapper {
        margin-left: 80px !important;
    }
}

/* ==========================================================================
   LengoPay-Inspired Premium UI Enhancement for BaraLink Admin
   ========================================================================== */

/* ── 1. Sidebar Dark Theme ────────────────────────────────────────────────── */

#nav-sidebar,
#nav-sidebar-inner,
.bl-sidebar,
#bl-rail-wrapper,
#bl-rail-wrapper > div,
div[class*="bg-base-50"] #nav-sidebar {
    background-color: var(--baralink-sidebar-bg) !important;
    border-right: 1px solid var(--baralink-sidebar-border) !important;
    color: #94a3b8 !important;
}

/* Logo Area (Top of Sidebar) */

#nav-sidebar-inner > div:first-child {
    background-color: #12121C !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Force logo to be white since the sidebar is dark navy */

#nav-sidebar-inner > div:first-child img {
    filter: brightness(0) invert(1);
}





/* ── 4. Main Page Container ──────────────────────────────────────────────── */

.baralink-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-bottom: 4rem !important;
}

/* --------------------------------------------------------------------------
   Quick actions rail -- token-based, so it follows the dark theme
   -------------------------------------------------------------------------- */

.baralink-quick-actions {
    background-color: var(--baralink-surface);
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-lg);
    box-shadow: var(--baralink-shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.baralink-quick-actions__title {
    border-bottom: 1px solid var(--baralink-border);
    color: var(--baralink-text);
    font-size: var(--bl-text-lg);
    font-weight: 700;
    margin: 0;
    padding: 1rem 1.25rem;
}

.baralink-quick-actions__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
}

.baralink-quick-action {
    --qa-tone: var(--baralink-primary);
    align-items: center;
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-lg);
    color: inherit;
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.baralink-quick-action:hover,
.baralink-quick-action:focus-visible {
    border-color: var(--qa-tone);
    box-shadow: var(--baralink-shadow-md);
}

.baralink-quick-action--warning {
    --qa-tone: var(--baralink-warning);
}

.baralink-quick-action--danger {
    --qa-tone: var(--baralink-danger);
}

.baralink-quick-action--success {
    --qa-tone: var(--baralink-success);
}

.baralink-quick-action__icon {
    align-items: center;
    background-color: color-mix(in srgb, var(--qa-tone) 14%, transparent);
    border-radius: var(--bl-radius-md);
    color: var(--qa-tone);
    display: flex;
    flex-shrink: 0;
    font-size: var(--bl-text-2xl);
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.baralink-quick-action__body {
    min-width: 0;
}

.baralink-quick-action__title {
    color: var(--baralink-text);
    display: block;
    font-size: var(--bl-text-base);
    font-weight: 700;
}

.baralink-quick-action__text {
    color: var(--baralink-text-muted);
    display: block;
    font-size: var(--bl-text-xs);
    margin-top: 0.125rem;
}

/* --------------------------------------------------------------------------
   Rail mode -- rules for the markup Unfold actually renders. The older rail rules
   above target <details>/<summary>, which app_list.html never emits.
   -------------------------------------------------------------------------- */

#nav-sidebar-inner.bl-rail #nav-sidebar-apps h2,
#nav-sidebar-inner.bl-rail .bl-nav-chevron,
#nav-sidebar-inner.bl-rail #nav-sidebar-apps hr {
    display: none !important;
}

/* Collapsed groups would hide every icon in an 80px rail: keep all items reachable. */

#nav-sidebar-inner.bl-rail #nav-sidebar-apps ol {
    display: flex !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

#nav-sidebar-inner.bl-rail #nav-sidebar-apps li a .material-symbols-outlined {
    width: auto;
    margin-right: 0 !important;
}

/* Both logo variants are rendered; show only the one matching the theme in the rail. */

:root:not(.dark) #nav-sidebar-inner.bl-rail .baralink-logo__icon:last-of-type {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Dashboard layout and card details (D-0). Everything here is on the tokens, so
   it follows the dark theme; Tailwind utilities that Unfold never compiled did not.
   -------------------------------------------------------------------------- */

.baralink-dashboard__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

.baralink-dashboard__main,
.baralink-dashboard__aside,
.baralink-activity-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

@media (min-width: 1024px) {
    .baralink-dashboard__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.baralink-kpi-card__header {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.baralink-kpi-card__icon {
    color: var(--baralink-text-muted);
    flex-shrink: 0;
    font-size: var(--bl-text-xl);
}

.baralink-kpi-card--attention .baralink-kpi-card__icon {
    color: var(--baralink-warning-text);
}

.baralink-kpi-card__description {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-xs);
    line-height: 1.4;
    margin: 0.25rem 0 0;
}

.baralink-kpi-card__value {
    color: var(--baralink-text);
    font-size: var(--bl-text-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.baralink-activity-item__label {
    color: var(--baralink-text);
    font-size: var(--bl-text-sm);
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.baralink-export-btn .material-symbols-outlined {
    font-size: var(--bl-text-lg);
}

/* --------------------------------------------------------------------------
   Executive overview (D-7)
   -------------------------------------------------------------------------- */

.baralink-overview {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* auto-fit instead of a fixed 5 columns: five 130px cards at 1024px overflowed. */

.baralink-overview__hero {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.baralink-overview__flows {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.baralink-kpi-card--hero {
    border-top: 3px solid var(--kpi-tone, var(--baralink-border));
}

.baralink-kpi-card--hero .baralink-kpi-card__value {
    font-size: var(--bl-text-3xl);
}

.baralink-kpi-card--primary {
    --kpi-tone: var(--baralink-link);
}

.baralink-kpi-card--success {
    --kpi-tone: var(--baralink-success);
}

.baralink-kpi-card--hero.baralink-kpi-card--attention {
    --kpi-tone: var(--baralink-warning);
}

.baralink-chip {
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-full);
    color: var(--baralink-link);
    display: inline-block;
    font-size: var(--bl-text-2xs);
    font-weight: 700;
    margin-left: 0.35rem;
    padding: 0 0.45rem;
    text-decoration: none;
}

.baralink-flow-card {
    align-items: center;
    flex-direction: row;
    gap: 1rem;
}

.baralink-flow-card__body {
    min-width: 0;
}

.baralink-flow-card__icon {
    align-items: center;
    background-color: color-mix(in srgb, var(--flow-tone) 14%, transparent);
    border-radius: var(--bl-radius-lg);
    color: var(--flow-tone);
    display: flex;
    flex-shrink: 0;
    font-size: var(--bl-text-2xl);
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.baralink-flow-card--in {
    --flow-tone: var(--baralink-success);
}

.baralink-flow-card--out {
    --flow-tone: var(--baralink-link);
}

.baralink-meter {
    background-color: var(--baralink-surface-muted);
    border-radius: var(--bl-radius-full);
    height: 0.5rem;
    margin: 0.5rem 0 0.25rem;
    overflow: hidden;
}

.baralink-meter__fill {
    background-color: var(--baralink-success);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.baralink-txn {
    border-bottom: 1px solid var(--baralink-border);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.6rem 0;
}

.baralink-txn__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.baralink-txn__side {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.2rem;
}

.baralink-txn__amount {
    color: var(--baralink-text);
    font-size: var(--bl-text-sm);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Sidebar links (D-1 / D-3). Layout and hover come from the older
   `#nav-sidebar-apps ol li a` rules above; this block owns colour and the active
   state, which were inline !important styles in app_list.html plus a CSS rule that
   never matched (Unfold emits neither .active nor aria-current). The older rules use
   !important, so these selectors carry the #nav-sidebar-apps id to out-rank them.
   -------------------------------------------------------------------------- */

#nav-sidebar-inner {
    padding-top: 0.5rem;
    border-right: 1px solid var(--baralink-sidebar-border);
    color: #94a3b8;
}









.bl-nav-separator {
    border-top: 1px solid var(--baralink-sidebar-border);
}

.baralink-inline-link {
    color: var(--baralink-link);
    text-decoration: none;
}

.baralink-inline-link:hover,
.baralink-inline-link:focus-visible {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Sidebar, 2026-10 pass: group titles are buttons, one account card, a skip link.
   Everything here is on the tokens; no inline styles are left in the templates.
   -------------------------------------------------------------------------- */

/* The title's padding moved onto its button, so the whole row is the target. */

#nav-sidebar-apps h2.bl-nav-group-title {
    font-size: var(--bl-text-2xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    padding: 0 !important;
}

.bl-nav-group-btn {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--bl-radius-md);
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    letter-spacing: inherit;
    padding: 0.5rem 1.25rem;
    text-align: left;
    text-transform: inherit;
    width: 100%;
}

span.bl-nav-group-btn {
    cursor: default;
}

button.bl-nav-group-btn:hover {
    color: #ffffff;
}

.bl-nav-group-btn:focus-visible,
.bl-nav-link:focus-visible,
.bl-user-card:focus-visible,
.bl-menu-btn:focus-visible {
    outline: 2px solid #a5b4fc;
    outline-offset: 2px;
}

/* Reachable with the first press of Tab, invisible otherwise. */

.bl-skip-link {
    background-color: var(--baralink-primary);
    border-radius: 0 0 0.5rem 0;
    color: #ffffff;
    font-size: var(--bl-text-base);
    font-weight: 600;
    left: 0;
    padding: 0.625rem 1rem;
    position: fixed;
    top: 0;
    transform: translateY(-120%);
    z-index: 100;
}

.bl-skip-link:focus {
    transform: translateY(0);
}

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

.bl-menu-btn {
    align-items: center;
    border-radius: var(--bl-radius-sm);
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

/* The signed-in person, at the top of the sidebar. */

.bl-user-card {
    align-items: center;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--baralink-sidebar-border);
    border-radius: var(--bl-radius-lg);
    display: flex;
    gap: 0.75rem;
    padding: 0.625rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.bl-user-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.bl-user-card__avatar {
    align-items: center;
    background-color: var(--baralink-primary);
    border-radius: var(--bl-radius-lg);
    color: #ffffff;
    display: flex;
    flex-shrink: 0;
    font-size: var(--bl-text-base);
    font-weight: 700;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}

.bl-user-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.bl-user-card__name {
    color: #ffffff;
    font-size: var(--bl-text-sm);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bl-user-card__role {
    color: #cbd5e1;
    font-size: var(--bl-text-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.bl-user-card__chevron {
    color: #94a3b8;
    font-size: var(--bl-text-md);
}

/* Icon rail: only the avatar of the account card, and no search field. */

#nav-sidebar-inner.bl-rail .bl-user-card__body,
#nav-sidebar-inner.bl-rail .bl-user-card__chevron {
    display: none;
}

#nav-sidebar-inner.bl-rail .bl-user-card {
    border: 0;
    justify-content: center;
    padding: 0.25rem;
}

#nav-sidebar-inner.bl-rail .bl-nav-search {
    display: none;
}

/* The sidebar is dark in both themes: its controls use the sidebar's own colours, not
   the page's light surfaces (the Collapse control and the search field were white). */

.bl-rail-toggle-wrap {
    padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--baralink-sidebar-border);
}

.bl-rail-toggle {
    align-items: center;
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-md);
    cursor: pointer;
    display: flex;
    font-size: var(--bl-text-xs);
    font-weight: 600;
    gap: 0.5rem;
    padding: 0.3rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    width: 100%;
    background: transparent;
    border-color: var(--baralink-sidebar-border);
    color: #cbd5e1;
}

.bl-rail-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    color: #ffffff;
}

.bl-rail-toggle:focus-visible {
    outline: 2px solid var(--baralink-primary);
    outline-offset: 2px;
    outline-color: #a5b4fc;
}

.bl-rail-toggle__icon-box {
    align-items: center;
    border: 1px solid var(--baralink-border);
    border-radius: var(--bl-radius-full);
    display: flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    width: 24px;
    background: rgba(255, 255, 255, 0.08);
    border-color: transparent;
}

.bl-nav-search > div > div {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--baralink-sidebar-border) !important;
    box-shadow: none !important;
}

.bl-nav-search > div > div > div {
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

.bl-nav-search .material-symbols-outlined {
    color: #94a3b8 !important;
}

/* The square mark already has its own colours: the "make the logo white" filter above
   turned it into a white box in the icon rail. */

#nav-sidebar-inner > div:first-child img.baralink-logo__icon {
    filter: none;
}

/* Theme button: one icon per theme. The utility classes used before (`dark:inline`) are
   not in Unfold's compiled stylesheet, so in the dark theme the button was an empty box. */

.bl-theme-icon--to-light,
.dark .bl-theme-icon--to-dark {
    display: none;
}

.dark .bl-theme-icon--to-light {
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Sidebar links — one rule family, on the sidebar's tokens. (They used to be styled
   by two families at once, the older one forcing every property with !important.)
   The link carries only the class .bl-nav-link, so nothing has to be forced.
   -------------------------------------------------------------------------- */

#nav-sidebar-apps .bl-nav-link {
    align-items: center;
    border-radius: var(--bl-radius-md);
    color: var(--baralink-sidebar-link);
    display: flex;
    font-size: var(--bl-text-sm);
    font-weight: 500;
    height: 2.5rem;
    margin: 0.125rem 0.75rem;
    padding: 0.5rem 0.875rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#nav-sidebar-apps .bl-nav-link:hover {
    background-color: var(--baralink-sidebar-hover-bg);
    color: var(--baralink-sidebar-strong);
}

#nav-sidebar-apps .bl-nav-link .material-symbols-outlined {
    color: var(--baralink-sidebar-icon);
    font-size: var(--bl-text-lg);
    margin-right: 0.75rem;
    transition: color 0.15s ease;
}

#nav-sidebar-apps .bl-nav-link__icon {
    width: 18px;
}

#nav-sidebar-apps .bl-nav-link:hover .material-symbols-outlined {
    color: var(--baralink-sidebar-hover-icon);
}

#nav-sidebar-apps .bl-nav-link[aria-current="page"] {
    background-color: var(--baralink-sidebar-active-bg);
    border-left: 3px solid var(--baralink-secondary);
    color: var(--baralink-sidebar-strong);
    font-weight: 600;
}

#nav-sidebar-apps .bl-nav-link[aria-current="page"] .bl-nav-link__icon {
    color: var(--baralink-secondary);
}

/* The "opens in a new tab" mark on an outside link. */
#nav-sidebar-apps .bl-nav-link .bl-nav-chevron {
    color: var(--baralink-sidebar-link);
    font-size: var(--bl-text-base);
    margin-left: auto;
    margin-right: 0;
}

.bl-nav-group-chevron {
    color: var(--baralink-sidebar-icon);
}

/* Header buttons that are an icon only: a 40px target. */
.bl-icon-btn {
    height: 2.5rem;
    width: 2.5rem;
}

/* Counter beside a sidebar entry: what is waiting there. */
.bl-nav-badge {
    background-color: var(--baralink-danger);
    border-radius: var(--bl-radius-full);
    color: #ffffff;
    flex-shrink: 0;
    font-size: var(--bl-text-2xs);
    font-weight: 700;
    line-height: 1.125rem;
    margin-left: auto;
    min-width: 1.125rem;
    padding: 0 0.3125rem;
    text-align: center;
}

/* In the icon rail the counter sits on the icon's corner. */
#nav-sidebar-inner.bl-rail .bl-nav-badge {
    margin: 0;
    position: absolute;
    right: 0.5rem;
    top: 0.125rem;
}

/* In the submit row of a page that has nothing to save. */
.bl-read-only-note {
    color: var(--baralink-text-muted);
    font-size: var(--bl-text-sm);
}

/* Needs Attention: the queues with nothing in them, named on one line. */
.baralink-quiet-queues {
    align-items: flex-start;
    color: var(--baralink-text-muted);
    display: flex;
    font-size: var(--bl-text-sm);
    gap: 0.5rem;
    line-height: 1.6;
    margin-top: 0.75rem;
}

.baralink-quiet-queues .material-symbols-outlined {
    color: var(--baralink-success);
    font-size: var(--bl-text-lg);
}

.baralink-quiet-queues a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--baralink-border);
    text-underline-offset: 2px;
}

.baralink-quiet-queues a:hover,
.baralink-quiet-queues a:focus-visible {
    color: var(--baralink-link);
}


/* A tab's introductory sentence: Unfold renders it flush with the card's edge, while
   the fields below it are inset. */
.tab-wrapper > fieldset.tab > div.leading-relaxed {
    padding: 0.75rem 0.75rem 0;
}

/* --------------------------------------------------------------------------
   The time-zone note beside date and time fields
   Django adds it for anyone outside the server's time zone; Unfold draws it as a
   red warning triangle on every such field, which read as an error. It is
   information: a grey "i", and the sentence still appears when pointed at.
   -------------------------------------------------------------------------- */
/* Unfold's stylesheet loads after this one: the longer selector is what wins. */
#content .help.timezonewarning::before {
    color: var(--color-base-400);
    content: "info";
    cursor: help;
}