/* SteuerConnect Custom CSS Overrides */

/* ========================================
   THEME TRANSITIONS
   Smooth transitions when switching themes
   ======================================== */

/* Disable transitions during initial load to prevent flash */
html.no-transitions,
html.no-transitions * {
    transition: none !important;
}

/* Theme swap: apply a unified color transition to EVERY element only during
   the ~300ms window around a theme toggle (class added/removed by
   SteuerConnect.theme.setTheme in shared-utilities.js). !important is
   required to override Tabler/Bootstrap per-component transitions
   (e.g. .form-control focus) that would otherwise make inputs snap
   while cards fade. Outside this window, no global color transition
   is active, so hover/focus interactions stay snappy. */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                fill 0.3s ease,
                stroke 0.3s ease,
                box-shadow 0.3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-transitioning,
    html.theme-transitioning *,
    html.theme-transitioning *::before,
    html.theme-transitioning *::after {
        transition: none !important;
    }
}

/* Theme toggle button styling */
#theme-toggle {
    background: transparent;
    border: 1px solid var(--tblr-border-color);
    color: var(--tblr-body-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#theme-toggle:hover {
    background: var(--tblr-secondary-bg);
    border-color: var(--tblr-primary);
}

#theme-toggle .theme-icon-light,
#theme-toggle .theme-icon-dark {
    transition: opacity 0.3s ease;
}

/* Dark mode specific adjustments */
html[data-bs-theme="dark"] #theme-toggle {
    color: var(--tblr-light);
}

html[data-bs-theme="dark"] #theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   CONSISTENT BACKGROUND COLORS
   Ensures all page containers have matching backgrounds
   ======================================== */

/* Light mode backgrounds - ensure consistency across all containers */
html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
    background-color: #f5f7fb !important;
}

html[data-bs-theme="light"] .page-wrapper,
html[data-bs-theme="light"] .page-header,
html[data-bs-theme="light"] .page-body,
html[data-bs-theme="light"] .page-body .container-fluid,
html[data-bs-theme="light"] .container-xl {
    background-color: #f5f7fb !important;
}

/* Dark mode backgrounds - ensure consistency across all containers */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background-color: #111827 !important;
}

html[data-bs-theme="dark"] .page-wrapper,
html[data-bs-theme="dark"] .page-header,
html[data-bs-theme="dark"] .page-body,
html[data-bs-theme="dark"] .page-body .container-fluid,
html[data-bs-theme="dark"] .container-xl {
    background-color: #111827 !important;
}

/* Ensure cards maintain their own backgrounds */
html[data-bs-theme="light"] .card {
    background-color: #ffffff !important;
}

html[data-bs-theme="dark"] .card {
    background-color: #1f2937 !important;
}

/* Remove any conflicting backgrounds during transitions */
html.no-transitions .page-wrapper,
html.no-transitions .page-body,
html.no-transitions .container-fluid,
html.no-transitions .container-xl {
    transition: none !important;
}

/* ========================================
   AUTH PAGES BACKGROUND WITH GEOMETRIC SHAPES
   Subtle geometric patterns matching app design
   ======================================== */

/* Auth page container with geometric background */
.page-center {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;  /* Clip all overflowing shapes - prevents scrolling */
}

/* Inner content container that can scroll if needed */
.page-center > .container,
.page-center > .container-tight {
    position: relative;
    z-index: 1;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* Remove padding - container already has py-3 class */
    box-sizing: border-box;
}

/* Only show scrollbar when actually scrolling */
.page-center > .container::-webkit-scrollbar,
.page-center > .container-tight::-webkit-scrollbar {
    width: 6px;
    opacity: 0;
    transition: opacity 0.3s;
}

.page-center > .container:hover::-webkit-scrollbar,
.page-center > .container-tight:hover::-webkit-scrollbar {
    opacity: 1;
}

.page-center > .container::-webkit-scrollbar-track,
.page-center > .container-tight::-webkit-scrollbar-track {
    background: transparent;
}

.page-center > .container::-webkit-scrollbar-thumb,
.page-center > .container-tight::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

/* Dark mode scrollbar */
html[data-bs-theme="dark"] .page-center > .container::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] .page-center > .container-tight::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Ensure proper scrolling on mobile devices and smaller screens */
@media (max-height: 700px) {
    .page-center {
        align-items: flex-start;
    }
    
    /* Let Bootstrap's py-3 handle the padding */
    .page-center > .container,
    .page-center > .container-tight {
        max-height: none;  /* Remove height restriction on small screens */
    }
}

/* Geometric shape animations */
@keyframes float-slow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

@keyframes float-reverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(20px) rotate(-10deg); }
}

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

/* Geometric background shapes container */
.page-center::before,
.page-center::after,
.auth-geometric-1,
.auth-geometric-2,
.auth-geometric-3 {
    content: '';
    position: absolute;
    pointer-events: none;
}

/* Large circle - top left */
.page-center::before {
    width: 400px;
    height: 400px;
    top: -200px;
    left: -200px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.03));
    animation: float-slow 20s ease-in-out infinite;
}

/* Square - bottom right */
.page-center::after {
    width: 300px;
    height: 300px;
    bottom: -150px;
    right: -150px;
    background: linear-gradient(45deg, rgba(102, 126, 234, 0.02), rgba(118, 75, 162, 0.02));
    transform: rotate(45deg);
    animation: rotate-slow 40s linear infinite;
}

/* Additional geometric shapes */
html[data-bs-theme="light"] .page-center {
    background: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(102, 126, 234, 0.03) 0%, transparent 50%),
        #f5f7fb;
}

html[data-bs-theme="dark"] .page-center {
    background: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(102, 126, 234, 0.05) 0%, transparent 50%),
        #111827;
}

/* Floating triangle shape */
.auth-geometric-1 {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid rgba(102, 126, 234, 0.03);
    top: 20%;
    right: 10%;
    animation: float-reverse 15s ease-in-out infinite;
}

/* Small floating circles */
.auth-geometric-2 {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(118, 75, 162, 0.04);
    bottom: 20%;
    left: 15%;
    animation: float-slow 18s ease-in-out infinite;
}

.auth-geometric-3 {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03), transparent);
    top: 50%;
    left: 5%;
    transform: rotate(45deg);
    animation: rotate-slow 30s linear infinite;
}

/* Dark mode adjustments for shapes */
html[data-bs-theme="dark"] .auth-geometric-1 {
    border-bottom-color: rgba(102, 126, 234, 0.05);
}

html[data-bs-theme="dark"] .auth-geometric-2 {
    background: rgba(118, 75, 162, 0.06);
}

html[data-bs-theme="dark"] .auth-geometric-3 {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), transparent);
}

/* Ensure content stays above background shapes */
.page-center > .container,
.page-center > .container-tight {
    position: relative;
    z-index: 1;
}

/* Auth forms with comfortable spacing */
.auth-form {
    max-width: 480px;
    margin: 0 auto;
}

.auth-form .card-body {
    padding: 2rem;
}

/* Remove compact overrides to restore normal spacing */
.auth-compact {
    max-width: 480px;
    margin: 0 auto;
}

.auth-compact .card-body {
    padding: 2rem;
}

/* Registration-specific spacing - extra compact */
.auth-register .card-body {
    padding: 1.25rem;
}

/* Tighter label spacing for registration */
.auth-register .form-label {
    margin-bottom: 0.25rem;
}

/* Input field spacing for authentication forms with icons */
.auth-compact .input-group .form-control.ps-0,
.auth-register .input-group .form-control.ps-0 {
    padding-left: 0.75rem !important;  /* Add spacing from icon */
}

/* Ensure consistent input group text width */
.auth-compact .input-group-text,
.auth-register .input-group-text {
    min-width: 2.5rem;  /* Consistent icon container width */
    justify-content: center;
}

/* Two-column layout for registration form */
@media (min-width: 576px) {
    .register-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    
    .register-grid .full-width {
        grid-column: 1 / -1;
    }
}

/* ========================================
   MODAL FIXES FOR PROPER CENTERING
   Let Bootstrap handle modal positioning naturally
   ======================================== */



/* Calculate scrollbar width and store in CSS variable */
:root {
    --scrollbar-width: 0px;
}

/* Blur lives on Bootstrap's backdrop so its fade-in/out stays in sync with
   the modal. Opacity is driven by .modal-backdrop.show (Bootstrap). */
.modal-backdrop {
    /* Tabler sets --tblr-backdrop-opacity: 0.24 on .modal-backdrop.show, which
       crushes our rgba alpha + blur to ~8% visible. Override the variable so our
       paint renders at full strength. */
    --tblr-backdrop-opacity: 1;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    background-color: rgba(0, 0, 0, 0.45);
    transition: opacity 0.1s linear;
}

[data-bs-theme="dark"] .modal-backdrop {
    background-color: rgba(10, 14, 22, 0.55);
    backdrop-filter: blur(8px) saturate(150%) brightness(0.85);
    -webkit-backdrop-filter: blur(8px) saturate(150%) brightness(0.85);
}

/* Stacked modals: only the outermost backdrop blurs. Inner backdrops just dim,
   so the modal underneath stays crisp behind the new one on top. */
.modal-backdrop ~ .modal-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Reserve scrollbar space at all times so opening a modal (which sets
   body.modal-open { overflow: hidden }) doesn't cause a layout shift. */
html {
    scrollbar-gutter: stable;
}

.modal.fade {
    transition: opacity 0.1s linear;
}

.modal.fade .modal-dialog {
    transition: transform 0.1s ease-out;
}

body.modal-open {
    overflow: hidden;
    /* scrollbar-gutter: stable on <html> already reserves the space,
       so override Bootstrap's inline padding-right compensation that
       would otherwise squeeze the page content on the right. */
    padding-right: 0 !important;
}

.modal-blur.modal.show {
    /* Bootstrap handles padding */
}

/* ========================================
   PROGRESS BAR VISUALIZATIONS
   Enhanced styles for financial data bars
   ======================================== */

/* Smooth animations for progress bars */
.progress-bar {
    transition: width 0.6s ease-out, background-color 0.3s ease;
}

/* Enhanced progress bar height for better visibility */
.progress-lg {
    height: 1.5rem;
}

/* Add hover effects to progress bars */
.progress:hover .progress-bar {
    filter: brightness(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Avatar icons for comparison bars */
.avatar-sm {
    transition: transform 0.2s ease;
}

.avatar-sm:hover {
    transform: scale(1.1);
}

/* Financial value text styling */
.fw-bold {
    letter-spacing: -0.02em;
}

/* Comparison bar containers */
.comparison-bar-item {
    position: relative;
    transition: all 0.3s ease;
}

.comparison-bar-item:hover {
    transform: translateX(2px);
}

/* Dark mode adjustments for progress bars */
html[data-bs-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.05);
}

html[data-bs-theme="dark"] .progress-bar {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Result/total sections styling */
.border-top {
    border-color: var(--tblr-border-color) !important;
}

/* Animated percentage counters */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-muted.small {
    animation: fadeInUp 0.4s ease-out;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .progress-lg {
        height: 1.25rem;
    }
    
    .avatar-sm {
        width: 2rem;
        height: 2rem;
    }
}

/* ========================================
   UPLOAD FIELD DARK MODE STYLING
   Better visibility for file upload areas in dark mode
   ======================================== */

/* Light mode upload area */
html[data-bs-theme="light"] #belegDropZone {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #495057 !important;
}

html[data-bs-theme="light"] #belegDropZone:hover {
    background-color: #e9ecef !important;
}

html[data-bs-theme="light"] #belegDropZone.bg-primary-lt {
    background-color: #d1e7dd !important;
}

/* Dark mode upload area */
html[data-bs-theme="dark"] #belegDropZone {
    background-color: #1a202e !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

html[data-bs-theme="dark"] #belegDropZone:hover {
    background-color: #252f3f !important;
}

html[data-bs-theme="dark"] #belegDropZone.bg-primary-lt {
    background-color: #1e3a5f !important;
}

/* Dark mode file preview area */
html[data-bs-theme="dark"] #belegPreview .bg-light {
    background-color: #1a202e !important;
    color: #e5e7eb !important;
}

html[data-bs-theme="dark"] #existingDocumentDisplay .bg-light {
    background-color: #1a202e !important;
    border-color: #374151 !important;
}

html[data-bs-theme="dark"] #existingDocumentDisplay .bg-white {
    background-color: #252f3f !important;
    border-color: #374151 !important;
}

/* Dark mode alert boxes in upload section */
html[data-bs-theme="dark"] .alert-info {
    background-color: #1e3a5f !important;
    border-color: #2563eb !important;
    color: #93bbfc !important;
}

html[data-bs-theme="dark"] .alert-info .alert-title {
    color: #dbeafe !important;
}

html[data-bs-theme="dark"] .alert-info .text-muted {
    color: #93bbfc !important;
    opacity: 0.8;
}

/* Dark mode buttons in upload area */
html[data-bs-theme="dark"] .btn-white {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

html[data-bs-theme="dark"] .btn-white:hover {
    background-color: #4b5563 !important;
    border-color: #6b7280 !important;
    color: #f3f4f6 !important;
}

/* Dark mode avatar backgrounds in file preview */
html[data-bs-theme="dark"] .avatar.bg-danger-lt {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

html[data-bs-theme="dark"] .avatar.bg-primary-lt {
    background-color: rgba(37, 99, 235, 0.2) !important;
}

html[data-bs-theme="dark"] .avatar.bg-secondary-lt {
    background-color: rgba(107, 114, 128, 0.2) !important;
}

/* Dark mode progress bar */
html[data-bs-theme="dark"] #belegUploadProgress {
    background-color: #1a202e !important;
}

html[data-bs-theme="dark"] #belegUploadProgress .progress-bar {
    background-color: #2563eb !important;
}

/* Dark mode sidebar styling - works regardless of navbar-light/navbar-dark class */
html[data-bs-theme="dark"] .navbar-vertical,
html[data-bs-theme="dark"] .navbar-vertical.navbar-light {
    background-color: var(--tblr-dark) !important;
    border-color: var(--tblr-border-color) !important;
}

html[data-bs-theme="dark"] .navbar-vertical .navbar-brand,
html[data-bs-theme="dark"] .navbar-vertical.navbar-light .navbar-brand {
    color: var(--tblr-light) !important;
}

html[data-bs-theme="dark"] .navbar-vertical .nav-link,
html[data-bs-theme="dark"] .navbar-vertical.navbar-light .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

html[data-bs-theme="dark"] .navbar-vertical .nav-link:hover,
html[data-bs-theme="dark"] .navbar-vertical.navbar-light .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .navbar-vertical .nav-link.active,
html[data-bs-theme="dark"] .navbar-vertical.navbar-light .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dark mode sidebar badges and dividers */
html[data-bs-theme="dark"] .navbar-vertical .navbar-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-bs-theme="dark"] .navbar-vertical .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Light mode explicit styles for safety */
html[data-bs-theme="light"] .navbar-vertical,
html:not([data-bs-theme]) .navbar-vertical {
    background-color: white;
}

/* ========================================
   BUTTON ICON SIZE OVERRIDES
   Reduces the default Tabler btn-icon sizes globally
   ======================================== */

/* Global btn-icon size reduction - COMPACT for better table layout */
.btn.btn-icon,
a.btn.btn-icon,
button.btn.btn-icon,
.btn-icon {
    width: 1.875rem !important;  /* Compact - reduced from default ~2.5rem */
    height: 1.875rem !important; /* Compact - reduced from default ~2.5rem */
    min-width: 1.875rem !important;
    min-height: 1.875rem !important;
    max-width: 1.875rem !important;
    max-height: 1.875rem !important;
    padding: 0 !important;
    font-size: 0.875rem !important; /* Smaller icon size */
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn.btn-icon .icon,
.btn.btn-icon .ti,
a.btn.btn-icon .icon,
a.btn.btn-icon .ti,
.btn-icon .icon,
.btn-icon .ti {
    width: 1.125rem !important;  /* Proportional icon size */
    height: 1.125rem !important;
    font-size: 1.125rem !important;
}

/* Small variant - compact */
.btn.btn-icon.btn-sm,
a.btn.btn-icon.btn-sm,
.btn-icon.btn-sm {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
    max-width: 1.5rem !important;
    max-height: 1.5rem !important;
}

.btn.btn-icon.btn-sm .icon,
.btn.btn-icon.btn-sm .ti,
a.btn.btn-icon.btn-sm .icon,
a.btn.btn-icon.btn-sm .ti,
.btn-icon.btn-sm .icon,
.btn-icon.btn-sm .ti {
    width: 0.875rem !important;
    height: 0.875rem !important;
    font-size: 0.875rem !important;
}

/* Large variant - normal size */
.btn.btn-icon.btn-lg,
a.btn.btn-icon.btn-lg,
.btn-icon.btn-lg {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    max-width: 2.25rem !important;
    max-height: 2.25rem !important;
}

.btn.btn-icon.btn-lg .icon,
.btn.btn-icon.btn-lg .ti,
a.btn.btn-icon.btn-lg .icon,
a.btn.btn-icon.btn-lg .ti,
.btn-icon.btn-lg .icon,
.btn-icon.btn-lg .ti {
    width: 1.375rem !important;
    height: 1.375rem !important;
    font-size: 1.375rem !important;
}

/* Override any flex properties that might affect sizing */
.btn.btn-icon,
a.btn.btn-icon {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Touch devices: the compact (30px / 24px) icon buttons above are below the
   ~44px minimum tap target. On a coarse pointer with no hover (phones/tablets)
   restore a 44px hit area so lock/unlock, edit and similar icon actions are
   reliably tappable. Desktop density is untouched (the media query never
   matches a mouse). */
@media (hover: none) and (pointer: coarse) {
    .btn.btn-icon,
    a.btn.btn-icon,
    button.btn.btn-icon,
    .btn-icon,
    .btn.btn-icon.btn-sm,
    a.btn.btn-icon.btn-sm,
    .btn-icon.btn-sm {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        max-width: 2.75rem !important;
        max-height: 2.75rem !important;
    }
}

/* Same touch-target floor for the icon-only filter toggles (shared by the
   Buchungen list + Kontrollansicht list via includes/filter_icon_toggle.html,
   which sizes the label to ~34px inline). min-width/min-height override the
   smaller inline width/height without !important; desktop is untouched. */
@media (hover: none) and (pointer: coarse) {
    .filter-icon-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================
   GESCHÄFTSFALL SELECTOR — name truncation
   The selector trigger (server partial includes/geschaeftsfall_selector.html
   AND its JS twin static/js/geschaeftsfall_selector.js) is a flex button
   holding a name + Kategorie column and a chevron. Without min-width:0 on the
   flex chain a long Geschäftsfall name overflows the button / pushes the
   chevron off-screen on a narrow column. This CSS engages ellipsis for both
   render paths (no markup change needed).
   ======================================== */
.geschaeftsfall-selector .btn {
    min-width: 0;
}
.geschaeftsfall-selector .btn > .d-flex.flex-column {
    min-width: 0;
    flex: 1 1 auto;
}
.geschaeftsfall-selector .btn > .d-flex.flex-column > span,
.geschaeftsfall-selector .btn > .d-flex.flex-column > small {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.geschaeftsfall-selector .btn > .ti-chevron-right {
    flex: 0 0 auto;
}

/* ========================================
   BUTTON COLOR OVERRIDES
   ======================================== */

/* Edit button - use a nice blue color for better visibility */
.btn-icon.btn-secondary {
    background-color: #3b82f6 !important; /* Nice blue */
    border-color: #3b82f6 !important;
    color: white !important;
}

.btn-icon.btn-secondary:hover {
    background-color: #2563eb !important; /* Darker blue on hover */
    border-color: #2563eb !important;
}

/* ========================================
   TABLE ROW OVERRIDES
   ======================================== */

/* Row hover effect */
tr.cursor-pointer:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* ========================================
   BADGE OVERRIDES
   ======================================== */

/* White text for all badge types for better contrast */
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-success,
.badge.bg-info,
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-yellow,
.badge.bg-orange,
.badge.bg-green,
.badge.bg-red {
    color: white !important;
}

/* ========================================
   FILTER FORM SPECIFIC OVERRIDES
   ======================================== */

/* Filter form reset button - larger size to match filter fields */
#filter-form .btn.btn-icon.btn-ghost-secondary,
#filter-form-active .btn.btn-icon.btn-ghost-secondary,
#filter-form-inactive .btn.btn-icon.btn-ghost-secondary,
#active-filter-form .btn.btn-icon.btn-ghost-secondary,
#inactive-filter-form .btn.btn-icon.btn-ghost-secondary,
#draft-filter-form .btn.btn-icon.btn-ghost-secondary,
#kontroll-filter-form .btn.btn-icon.btn-ghost-secondary {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    max-width: 2.5rem !important;
    max-height: 2.5rem !important;
}

#filter-form .btn.btn-icon.btn-ghost-secondary .icon,
#filter-form .btn.btn-icon.btn-ghost-secondary .ti,
#filter-form-active .btn.btn-icon.btn-ghost-secondary .icon,
#filter-form-active .btn.btn-icon.btn-ghost-secondary .ti,
#filter-form-inactive .btn.btn-icon.btn-ghost-secondary .icon,
#filter-form-inactive .btn.btn-icon.btn-ghost-secondary .ti,
#active-filter-form .btn.btn-icon.btn-ghost-secondary .icon,
#active-filter-form .btn.btn-icon.btn-ghost-secondary .ti,
#inactive-filter-form .btn.btn-icon.btn-ghost-secondary .icon,
#inactive-filter-form .btn.btn-icon.btn-ghost-secondary .ti,
#draft-filter-form .btn.btn-icon.btn-ghost-secondary .icon,
#draft-filter-form .btn.btn-icon.btn-ghost-secondary .ti,
#kontroll-filter-form .btn.btn-icon.btn-ghost-secondary .icon,
#kontroll-filter-form .btn.btn-icon.btn-ghost-secondary .ti {
    width: 1.25rem !important;
    height: 1.25rem !important;
    font-size: 1.25rem !important;
}

/* ========================================
   SIDEBAR WIDTH - ULTRATHINK NARROW
   ======================================== */

/* Make sidebar narrower */
.navbar-vertical {
    width: 200px !important;  /* Reduced from default ~260px */
    min-width: 200px !important;
    max-width: 200px !important;
}

/* Adjust content wrapper for narrow sidebar */
.page-wrapper {
    margin-left: 200px !important;
}

/* Mobile responsive */
@media (max-width: 991px) {
    .navbar-vertical {
        width: 100% !important;
        max-width: 100% !important;
    }
    .page-wrapper {
        margin-left: 0 !important;
    }
}

/* ========================================
   LOGO & BRAND - ULTRATHINK STYLE
   ======================================== */

/* Make logo area more compact */
.navbar-brand {
    font-size: 1.125rem !important;  /* Smaller brand text */
    padding: 0.5rem 0 !important;
    margin: 0 !important;
}

.navbar-brand a {
    display: flex !important;
    align-items: center !important;
    font-weight: 600 !important;
    color: #495057 !important;
}

.navbar-brand i {
    font-size: 1.25rem !important;  /* Smaller icon */
    margin-right: 0.5rem !important;  /* Less spacing */
}

/* Adjust sidebar container padding for narrow width */
.navbar-vertical .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* ========================================
   SIDEBAR NAVIGATION - ULTRATHINK STYLE
   ======================================== */

/* Adjust nav items for narrow sidebar */
.navbar-nav .nav-item .nav-link.py-2 {
    padding-top: 0.5rem !important;      /* Keep original py-2 */
    padding-bottom: 0.5rem !important;   /* Keep original py-2 */
    padding-left: 0.75rem !important;    /* Less padding for narrow sidebar */
    padding-right: 0.75rem !important;   /* Less padding for narrow sidebar */
    font-size: 0.875rem !important;      /* 14px - match table text size */
}

/* Remove extra spacing between items - ultrathink */
.navbar-nav .nav-item {
    margin-bottom: 0 !important;         /* No gap - ultrathink */
}

/* Keep icons small and clean */
.navbar-nav .nav-item .nav-link .nav-link-icon {
    width: 20px !important;              /* Small, clean icon */
    height: 20px !important;
    margin-right: 0.625rem !important;   /* Even more compact for narrow sidebar */
}

.navbar-nav .nav-item .nav-link .nav-link-icon i {
    font-size: 1.125rem !important;      /* 18px - subtle icon */
    width: 20px !important;
    height: 20px !important;
}

/* Text matching the page's clean style */
.navbar-nav .nav-item .nav-link .nav-link-title {
    font-size: 0.875rem !important;      /* 14px - matches table content */
    font-weight: 500 !important;         /* Medium weight */
}

/* ========================================
   PDF GENERATION PROTECTION STYLES
   Animations and visual states for PDF generation
   ======================================== */

/* Spinner animation for rotating icons */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Disabled state for cards during PDF generation */
.card-generating {
    opacity: 0.6 !important;
    pointer-events: none !important;
    cursor: wait !important;
    position: relative;
}

.card-generating .card-body {
    position: relative;
}

/* Ensure icons spin when animate-spin is added */
.card-generating .ti,
.card-generating i[class*="ti-"] {
    display: inline-block;
}

.ti.animate-spin,
i[class*="ti-"].animate-spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Tabler spinner integration */
.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .75s linear infinite;
}

.spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
}

/* Button disabled state during generation */
button.card-generating,
a.card-generating {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Dark mode adjustments */
html[data-bs-theme="dark"] .card-generating {
    opacity: 0.5 !important;
}

html[data-bs-theme="dark"] button.card-generating,
html[data-bs-theme="dark"] a.card-generating {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================
   DARK MODE FIXES FOR BANK IMPORT PAGES
   Ensures proper contrast and visibility in dark mode
   ======================================== */

/* Fix light grey backgrounds that don't adapt to dark mode */
html[data-bs-theme="dark"] .bg-gray-50 {
    background-color: #2d3748 !important;  /* Dark grey background */
}

html[data-bs-theme="dark"] .bg-gray-lt {
    background-color: #4a5568 !important;  /* Medium dark grey for badges */
    color: #e2e8f0 !important;
}

html[data-bs-theme="dark"] .bg-blue-lt {
    background-color: #2c5282 !important;  /* Dark blue background */
    color: #bee3f8 !important;
}

/* Improve text-muted contrast in dark mode */
html[data-bs-theme="dark"] .text-muted {
    color: #a0aec0 !important;  /* Lighter grey for better contrast */
}

/* Ensure small uppercase text is visible */
html[data-bs-theme="dark"] .text-muted.small.text-uppercase {
    color: #cbd5e0 !important;  /* Even lighter for small uppercase labels */
}

/* Fix sticky bottom action bar in dark mode */
html[data-bs-theme="dark"] .sticky-bottom {
    background-color: #2d3748 !important;
    border-top-color: #4a5568 !important;
}

/* Fix list group items in dark mode */
html[data-bs-theme="dark"] .list-group-item {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

/* Ensure list group item with bg-blue-lt is visible */
html[data-bs-theme="dark"] .list-group-item.bg-blue-lt {
    background-color: #2c5282 !important;
    color: #bee3f8 !important;
}

/* Alert styling in dark mode */
html[data-bs-theme="dark"] .alert-warning {
    background-color: #7c2d12 !important;
    border-color: #92400e !important;
    color: #fef3c7 !important;
}

html[data-bs-theme="dark"] .alert-danger {
    background-color: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fee2e2 !important;
}

/* Fix table hover effect in dark mode */
html[data-bs-theme="dark"] tr.cursor-pointer:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Ensure disabled checkboxes are visible in dark mode */
html[data-bs-theme="dark"] .checkbox-disabled {
    opacity: 0.6 !important;
}

html[data-bs-theme="dark"] .checkbox-disabled td {
    color: #6b7280 !important;
}

/* Table warning and success rows in dark mode for Vorlage import */
html[data-bs-theme="dark"] .table-warning {
    --bs-table-bg: rgba(217, 119, 6, 0.2) !important;
    --bs-table-color: #fbbf24 !important;
    background-color: rgba(217, 119, 6, 0.2) !important;
    color: #fbbf24 !important;
}

html[data-bs-theme="dark"] .table-warning td {
    color: #fbbf24 !important;
}

html[data-bs-theme="dark"] .table-success {
    --bs-table-bg: rgba(34, 197, 94, 0.2) !important;
    --bs-table-color: #86efac !important;
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

html[data-bs-theme="dark"] .table-success td {
    color: #86efac !important;
}

/* Disabled form controls — unified visual disabled state.
   The Tabler/Bootstrap defaults for `<select disabled>` are too subtle next
   to the searchable-select's clear grey-fill treatment, which was visible in
   Geschaeftsfall forms (disabled Buchungscode looked active next to a disabled
   Konto). Force a clearly-greyed background, muted text color, and the
   not-allowed cursor on every disabled form control so the state reads at
   a glance.

   IMPORTANT: !important is required because Tabler's `.form-select` uses a
   `background:` shorthand for the chevron icon which can clobber a plain
   `background-color`. Targeting via attribute selector + pseudo-class +
   !important wins reliably across themes. */
.form-select:disabled,
.form-select[disabled],
.form-control:disabled,
.form-control[disabled] {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

html[data-bs-theme="dark"] .form-select:disabled,
html[data-bs-theme="dark"] .form-select[disabled],
html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-control[disabled] {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Fix warning and success light badges in dark mode */
html[data-bs-theme="dark"] .bg-warning-lt {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #fbbf24 !important;
}

html[data-bs-theme="dark"] .bg-success-lt {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

/* ========================================
   LOCKED BUCHUNG ROW + BADGE
   Dedicated styling for gesperrte Buchungen in kontrollansicht
   and buchungsansicht. Not reusing .table-warning because that
   utility is used elsewhere for unrelated purposes (e.g. geschaeftsfall
   rows in Vorlage template editing). Follows the same Tabler/Bootstrap
   table-variable override pattern used by the .table-danger block
   below, so Tabler's :hover and striped rules cannot win.
   ======================================== */

/* Light mode row */
.table .row-buchung-locked,
tr.row-buchung-locked,
.row-buchung-locked,
.table tbody tr.row-buchung-locked,
.table-vcenter tr.row-buchung-locked {
    --tblr-table-bg: #fff8e1 !important;
    --tblr-table-striped-bg: #fff8e1 !important;
    --tblr-table-active-bg: #fef3c7 !important;
    --tblr-table-hover-bg: #fef3c7 !important;
    --bs-table-bg: #fff8e1 !important;
    --bs-table-striped-bg: #fff8e1 !important;
    --bs-table-active-bg: #fef3c7 !important;
    --bs-table-hover-bg: #fef3c7 !important;
    --tblr-table-color: var(--tblr-body-color) !important;
    --tblr-table-border-color: var(--tblr-border-color) !important;
    background-color: #fff8e1 !important;
    color: var(--tblr-body-color) !important;
}

/* Light mode left amber accent — inset shadow instead of border so
   the Nr column content stays aligned with non-locked rows (padding
   on .card-table differs from 0.75rem). */
.row-buchung-locked td:first-child,
tr.row-buchung-locked td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* Dark mode row */
html[data-bs-theme="dark"] .table .row-buchung-locked,
html[data-bs-theme="dark"] tr.row-buchung-locked,
html[data-bs-theme="dark"] .row-buchung-locked,
html[data-bs-theme="dark"] .table tbody tr.row-buchung-locked,
html[data-bs-theme="dark"] .table-vcenter tr.row-buchung-locked {
    --tblr-table-bg: rgba(251, 191, 36, 0.08) !important;
    --tblr-table-striped-bg: rgba(251, 191, 36, 0.08) !important;
    --tblr-table-active-bg: rgba(251, 191, 36, 0.14) !important;
    --tblr-table-hover-bg: rgba(251, 191, 36, 0.14) !important;
    --bs-table-bg: rgba(251, 191, 36, 0.08) !important;
    --bs-table-striped-bg: rgba(251, 191, 36, 0.08) !important;
    --bs-table-active-bg: rgba(251, 191, 36, 0.14) !important;
    --bs-table-hover-bg: rgba(251, 191, 36, 0.14) !important;
    --tblr-table-color: #fcd34d !important;
    --tblr-table-border-color: var(--tblr-border-color) !important;
    background-color: rgba(251, 191, 36, 0.08) !important;
    color: #fcd34d !important;
}

html[data-bs-theme="dark"] .row-buchung-locked td,
html[data-bs-theme="dark"] tr.row-buchung-locked td {
    color: #fcd34d !important;
}

/* Dark mode left amber accent (same inset-shadow technique) */
html[data-bs-theme="dark"] .row-buchung-locked td:first-child,
html[data-bs-theme="dark"] tr.row-buchung-locked td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* Locked badge — light mode */
.badge.badge-buchung-locked {
    background-color: #fef3c7;
    color: #92400e !important;
    border: 1px solid #fcd34d;
}

/* Locked badge — dark mode */
html[data-bs-theme="dark"] .badge.badge-buchung-locked {
    background-color: rgba(251, 191, 36, 0.18);
    color: #fcd34d !important;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

/* ========================================
   CLOSED-PERIOD ROW (.row-period-closed) — slate
   Applied when buchung.monat.abgeschlossen OR buchung.jahr.abgeschlossen.
   Closed dominates locked because the period freeze is the hard constraint
   (the row class is set with elif, so locked styling is suppressed for
   closed rows). Same inset-shadow accent technique as .row-buchung-locked
   so first-cell content alignment stays identical across both states.
   ======================================== */

/* Light mode row */
.table .row-period-closed,
tr.row-period-closed,
.row-period-closed,
.table tbody tr.row-period-closed,
.table-vcenter tr.row-period-closed {
    --tblr-table-bg: #f1f5f9 !important;
    --tblr-table-striped-bg: #f1f5f9 !important;
    --tblr-table-active-bg: #e2e8f0 !important;
    --tblr-table-hover-bg: #e2e8f0 !important;
    --bs-table-bg: #f1f5f9 !important;
    --bs-table-striped-bg: #f1f5f9 !important;
    --bs-table-active-bg: #e2e8f0 !important;
    --bs-table-hover-bg: #e2e8f0 !important;
    --tblr-table-color: var(--tblr-body-color) !important;
    --tblr-table-border-color: var(--tblr-border-color) !important;
    background-color: #f1f5f9 !important;
    color: var(--tblr-body-color) !important;
}

.row-period-closed td:first-child,
tr.row-period-closed td:first-child {
    box-shadow: inset 3px 0 0 #64748b;
}

/* Dark mode row */
html[data-bs-theme="dark"] .table .row-period-closed,
html[data-bs-theme="dark"] tr.row-period-closed,
html[data-bs-theme="dark"] .row-period-closed,
html[data-bs-theme="dark"] .table tbody tr.row-period-closed,
html[data-bs-theme="dark"] .table-vcenter tr.row-period-closed {
    --tblr-table-bg: rgba(148, 163, 184, 0.08) !important;
    --tblr-table-striped-bg: rgba(148, 163, 184, 0.08) !important;
    --tblr-table-active-bg: rgba(148, 163, 184, 0.14) !important;
    --tblr-table-hover-bg: rgba(148, 163, 184, 0.14) !important;
    --bs-table-bg: rgba(148, 163, 184, 0.08) !important;
    --bs-table-striped-bg: rgba(148, 163, 184, 0.08) !important;
    --bs-table-active-bg: rgba(148, 163, 184, 0.14) !important;
    --bs-table-hover-bg: rgba(148, 163, 184, 0.14) !important;
    --tblr-table-color: #cbd5e1 !important;
    --tblr-table-border-color: var(--tblr-border-color) !important;
    background-color: rgba(148, 163, 184, 0.08) !important;
    color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .row-period-closed td,
html[data-bs-theme="dark"] tr.row-period-closed td {
    color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .row-period-closed td:first-child,
html[data-bs-theme="dark"] tr.row-period-closed td:first-child {
    box-shadow: inset 3px 0 0 #94a3b8;
}

/* Closed-period badge — light mode */
.badge.badge-period-closed {
    background-color: #e2e8f0;
    color: #334155 !important;
    border: 1px solid #cbd5e1;
}

/* Closed-period badge — dark mode */
html[data-bs-theme="dark"] .badge.badge-period-closed {
    background-color: rgba(148, 163, 184, 0.18);
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

/* ========================================
   CLOSED-PERIOD CARD (.card-period-closed) — slate
   Mirrors .row-period-closed for Bootstrap card layouts. Used in
   Klienten-Auswahl (change_active_klient.html) and Zeiten Jahr-cards.
   The .active variant covers selected-card state in the picker grid:
   active+closed stays in the slate family (darker shade) rather than
   flipping to primary blue — keeps the closed cue consistent.
   ======================================== */

.card.card-period-closed,
.card-period-closed {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    box-shadow: inset 3px 0 0 #64748b !important;
}

.card.card-period-closed.active,
.card-period-closed.active {
    background-color: #cbd5e1 !important;
    border-color: #475569 !important;
    color: #1e293b !important;
    box-shadow: inset 3px 0 0 #475569, 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08) !important;
}

html[data-bs-theme="dark"] .card.card-period-closed,
html[data-bs-theme="dark"] .card-period-closed {
    background-color: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    box-shadow: inset 3px 0 0 #94a3b8 !important;
    color: #cbd5e1 !important;
}

html[data-bs-theme="dark"] .card.card-period-closed.active,
html[data-bs-theme="dark"] .card-period-closed.active {
    background-color: rgba(148, 163, 184, 0.25) !important;
    border-color: #cbd5e1 !important;
    color: #f1f5f9 !important;
    box-shadow: inset 3px 0 0 #cbd5e1 !important;
}

/* Text utility for closed-period content (status icon + label). Parallels
   Tabler's text-warning / text-success utilities. */
.text-period-closed {
    color: #475569 !important;
}

html[data-bs-theme="dark"] .text-period-closed {
    color: #94a3b8 !important;
}

/* ========================================
   BUCHUNGEN + KONTROLLANSICHT LIST — FIXED COLUMN LAYOUT
   These two list tables re-render their <tbody> via AJAX whenever a filter is
   toggled. With the default table-layout:auto the browser re-measures column
   widths from the new content, so the columns visibly jump on every filter
   change. Locking them with table-layout:fixed makes column widths depend only
   on the header row, not the row content — so they stay put across filters and
   the server-rendered + JS-rendered rows always align.
   Scoped to a dedicated class, NOT .card-table (16 other tables rely on auto
   layout). Both tables share the same 7-column order, so one block covers both.
   ======================================== */
.buchungen-list-table {
    table-layout: fixed;
    min-width: 46rem;            /* graceful floor; below this .table-responsive scrolls */
}
.buchungen-list-table > thead > tr > th:nth-child(1) { width: 8%; }    /* NR.      */
.buchungen-list-table > thead > tr > th:nth-child(2) { width: 9%; }    /* DATUM    */
/* col 3 (BUCHUNGSTEXT/TEXT) intentionally unset → absorbs the remaining ~24% */
.buchungen-list-table > thead > tr > th:nth-child(4) { width: 21%; }   /* BVSATZ   */
.buchungen-list-table > thead > tr > th:nth-child(5) { width: 9%; }    /* BETRAG   */
.buchungen-list-table > thead > tr > th:nth-child(6) { width: 18%; }   /* STATUS   */
.buchungen-list-table > thead > tr > th:nth-child(7) { width: 11%; }   /* AKTIONEN */

/* Keep the belegnummer and its split-chip on one line — the chip is an
   inline-flex pill with a left margin, so in the narrow (fixed) NR column it
   would otherwise wrap below the number. */
.buchungen-list-table > tbody > tr > td:nth-child(1) {
    white-space: nowrap;
}

/* Keep the flexible text column clipping with an ellipsis instead of forcing
   the (fixed) column wider when content is long. */
.buchungen-list-table > tbody > tr > td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BVSATZ column: always a single line — clip long Geschäftsfall names with an
   ellipsis instead of wrapping to a second row (the full name stays in the
   cell's title tooltip). nowrap at td level also keeps the "Ohne
   Geschäftsfall" badge on one line. The name renders untruncated server- and
   JS-side; this rule is the single truncation point. */
.buchungen-list-table > tbody > tr > td:nth-child(4) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   BELEG-GRUPPE (SPLITTBUCHUNG) GROUPING — INLINE LAYOUT
   The leader row of a split-booking carries the belegnummer + a small split
   chip in the NR column; subsequent member rows leave NR/DATUM empty and
   show a tree connector before the BUCHUNGSTEXT cell instead. No separate
   header row. The connector pseudo-elements attach to the third cell
   (BUCHUNGSTEXT) since that's where the visual nesting needs to land.
   ======================================== */

/* Tree connector — vertical guide line + horizontal tick on each member's
   BUCHUNGSTEXT cell. The line continues down to the next member; the last
   member terminates it at its midpoint (└─ shape). */
.row-group-member > td:nth-child(3) {
    position: relative;
    padding-left: 2rem;
}

.row-group-member > td:nth-child(3)::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--tblr-border-color);
}

.row-group-member > td:nth-child(3)::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    width: 0.6rem;
    height: 1px;
    background-color: var(--tblr-border-color);
}

.row-group-member-last > td:nth-child(3)::before {
    bottom: 50%;
}

.row-group-member-last > td {
    border-bottom: 1px solid var(--tblr-border-color);
}

/* Indented member text gets a slightly muted feel; locked and closed-period
   rows still win because .row-buchung-locked / .row-period-closed sit
   alongside .row-group-member and use higher-specificity overrides. */
.row-group-member:not(.row-buchung-locked):not(.row-period-closed) > td {
    color: var(--tblr-secondary);
}

.row-group-member:not(.row-buchung-locked):not(.row-period-closed) > td .text-primary,
.row-group-member:not(.row-buchung-locked):not(.row-period-closed) > td strong {
    color: inherit;
}

/* Split-chip rendered next to the leader's belegnummer. Outline pill with
   the ti-arrows-split icon; tooltip carries the member count + group total
   so the row never grows in height. */
.badge.badge-split-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    margin-left: 0.35rem;
    border-radius: 0.25rem;
    background-color: transparent;
    color: var(--tblr-secondary);
    border: 1px solid var(--tblr-border-color);
    vertical-align: middle;
}

.badge.badge-split-chip > .icon {
    font-size: 0.75rem;
    line-height: 1;
}

/* ========================================
   STATUS COLUMN — ICON-ONLY CHIPS
   Each status flag (locked, exported, not-export-ready, comments,
   bank-import variants, etc.) renders as a fixed 1.5rem square chip
   with only an icon inside. Tooltip carries the descriptive text.
   Multiple chips on the same row stay on a single line via flex-nowrap
   so the row height is constant regardless of how many flags are set.
   ======================================== */

.status-chips {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
}

/* Slot wrapper is transparent to the flex layout so an empty slot
   (no comments yet) doesn't leave an orphan gap between siblings. */
.status-chips [data-buchung-comment-slot] {
    display: contents;
}

.badge.badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 0.25rem;
    flex: 0 0 auto;
}

.badge.badge-status > .icon {
    font-size: 0.875rem;
    line-height: 1;
}

/* Variants — light mode */
.badge.badge-status-exported {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.badge.badge-status-not-export-ready {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.badge.badge-status-comment {
    background-color: var(--tblr-bg-surface-secondary, #f1f5f9);
    color: var(--tblr-secondary);
    border: 1px solid var(--tblr-border-color);
}

.badge.badge-status-bank {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.badge.badge-status-warning {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.badge.badge-status-danger {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Variants — dark mode */
html[data-bs-theme="dark"] .badge.badge-status-exported {
    background-color: rgba(110, 231, 183, 0.15);
    color: #6ee7b7;
    border-color: rgba(110, 231, 183, 0.35);
}

html[data-bs-theme="dark"] .badge.badge-status-not-export-ready,
html[data-bs-theme="dark"] .badge.badge-status-danger {
    background-color: rgba(252, 165, 165, 0.15);
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.35);
}

html[data-bs-theme="dark"] .badge.badge-status-comment {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--tblr-secondary);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-bs-theme="dark"] .badge.badge-status-bank {
    background-color: rgba(147, 197, 253, 0.15);
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.35);
}

html[data-bs-theme="dark"] .badge.badge-status-warning {
    background-color: rgba(252, 211, 77, 0.15);
    color: #fcd34d;
    border-color: rgba(252, 211, 77, 0.35);
}

/* Unread comment indicator — small filled dot overlaid on top-right of the
   chip. Border matches the table background so the dot reads as detached. */
.badge.badge-status-comment.has-unread {
    position: relative;
}

.badge.badge-status-comment.has-unread::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--tblr-danger, #d63939);
    border: 1.5px solid var(--tblr-bg-surface, #fff);
}

html[data-bs-theme="dark"] .badge.badge-status-comment.has-unread::after {
    border-color: var(--tblr-bg-surface, #1a1d23);
}

/* ========================================
   TABLE DANGER ROWS - BANK IMPORT
   No background, just red left border indicator
   ======================================== */

/* Remove all background colors - transparent */
.table .table-danger,
tr.table-danger,
.table-danger,
.table tbody tr.table-danger,
.table-vcenter tr.table-danger {
    /* Override Tabler's CSS variables to transparent */
    --tblr-table-bg: transparent !important;
    --tblr-table-striped-bg: transparent !important;
    --tblr-table-active-bg: transparent !important;
    --tblr-table-hover-bg: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    
    /* Override text color to use normal table color */
    --tblr-table-color: var(--tblr-body-color) !important;
    
    /* Use normal border color - same as regular table rows */
    --tblr-table-border-color: var(--tblr-border-color) !important;
    
    /* No background */
    background-color: transparent !important;
    background: transparent !important;
    
    /* Use normal body text color */
    color: var(--tblr-body-color) !important;
}

/* Add red left border indicator */
.table-danger td:first-child,
tr.table-danger td:first-child {
    border-left: 3px solid rgba(220, 53, 69, 0.4);  /* Red border indicator */
    padding-left: calc(0.75rem - 3px);  /* Adjust padding to account for border */
}

/* Keep all text with same styling as normal rows (except .text-danger) */
.table-danger td:not(.text-danger),
tr.table-danger td:not(.text-danger) {
    color: var(--tblr-body-color) !important;
    opacity: 1 !important;  /* Full opacity for all content */
}

/* Dark mode: Keep transparent background and fix text color */
html[data-bs-theme="dark"] .table .table-danger,
html[data-bs-theme="dark"] tr.table-danger,
html[data-bs-theme="dark"] .table-danger,
html[data-bs-theme="dark"] .table tbody tr.table-danger,
html[data-bs-theme="dark"] .table-vcenter tr.table-danger {
    /* Override variables to transparent */
    --tblr-table-bg: transparent !important;
    --tblr-table-striped-bg: transparent !important;
    --tblr-table-active-bg: transparent !important;
    --tblr-table-hover-bg: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-active-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    
    /* Override text color to use dark mode body color */
    --tblr-table-color: var(--tblr-body-color) !important;
    
    /* Use normal border color for dark mode */
    --tblr-table-border-color: var(--tblr-border-color) !important;
    
    background-color: transparent !important;
    background: transparent !important;
    
    /* Use dark mode body text color */
    color: var(--tblr-body-color) !important;
}

/* Dark mode: Red left border (slightly brighter for visibility) */
html[data-bs-theme="dark"] .table-danger td:first-child,
html[data-bs-theme="dark"] tr.table-danger td:first-child {
    border-left: 3px solid rgba(248, 113, 113, 0.5);  /* Brighter red for dark mode */
}

/* Dark mode: Keep text with same styling as normal rows (except .text-danger) */
html[data-bs-theme="dark"] .table-danger td:not(.text-danger),
html[data-bs-theme="dark"] tr.table-danger td:not(.text-danger) {
    color: var(--tblr-body-color) !important;
    opacity: 1 !important;  /* Full opacity for all content */
}

/* Both modes: Ensure error messages remain prominent */
.table-danger .text-danger,
.table-danger .small.text-danger,
tr.table-danger .text-danger,
tr.table-danger .small.text-danger {
    opacity: 1 !important;
    font-weight: 500;
}

/* Both modes: Keep badges and buttons fully visible */
.table-danger .badge,
tr.table-danger .badge,
.table-danger .btn-ghost-danger,
tr.table-danger .btn-ghost-danger {
    opacity: 1 !important;
}

/* ========================================
   Vorlage IMPORT INSTANT COLLAPSE
   Remove transition delay for details dropdown
   ======================================== */

/* Instant collapse for Vorlage import preview details */
#previewForm .collapse,
#previewForm .collapsing {
    transition: none !important;
}

/* Remove animation from collapse elements */
#previewForm [id^="detail-"] {
    transition: none !important;
}

/* ========================================
   CHART CONTAINER STYLES
   Optimized layouts for Chart.js visualizations
   ======================================== */

/* Doughnut chart container styling */
.chart-container-doughnut {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

/* Ensure canvas elements are responsive */
.chart-container-doughnut canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* Card styling specifically for charts */
.card-chart {
    overflow: visible;
    position: relative;
}

.card-chart .card-body {
    padding: 1.5rem;
}

/* Responsive chart sizing */
@media (max-width: 768px) {
    .chart-container-doughnut {
        max-width: 350px;
        padding: 10px;
    }
    
    /* Stack legend below chart on mobile */
    .chart-container-doughnut canvas {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .chart-container-doughnut {
        max-width: 280px;
        padding: 5px;
    }
}

/* Chart loading states */
.chart-loading {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Smooth transitions for chart containers */
.chart-container-doughnut canvas {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect for chart containers */
.chart-container-doughnut:hover canvas {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

html[data-bs-theme="dark"] .chart-container-doughnut:hover canvas {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Chart legend improvements */
.chart-legend-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Ensure proper spacing in chart cards */
.card .chart-container-doughnut:last-child {
    margin-bottom: 0;
}

/* Animation for chart appearance */
@keyframes chartFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chart-container-doughnut canvas {
    animation: chartFadeIn 0.6s ease-out;
}

/* Better text rendering in charts */
.chart-container-doughnut {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure chart tooltips appear above other elements */
.chartjs-tooltip {
    z-index: 9999 !important;
}

/* ========================================
   FORM VALIDATION ICONS - HIDE COMPLETELY
   Removes Bootstrap validation feedback icons from inputs
   ======================================== */

/* Hide validation icons on all form controls */
.form-control.is-valid,
.form-control.is-invalid,
.form-select.is-valid,
.form-select.is-invalid {
    background-image: none !important;
    padding-right: 0.75rem !important; /* Reset to normal padding */
}

/* Remove validation state borders and colors but keep functionality */
.form-control.is-valid {
    border-color: #dee2e6 !important; /* Default border color */
}

.form-control.is-invalid {
    border-color: #dee2e6 !important; /* Default border color */
}

/* Dark mode adjustments for form controls */
html[data-bs-theme="dark"] .form-control.is-valid,
html[data-bs-theme="dark"] .form-control.is-invalid {
    border-color: #495057 !important; /* Dark mode default border */
}

/* Also prevent the was-validated class from showing icons */
.was-validated .form-control:valid,
.was-validated .form-control:invalid,
.was-validated .form-select:valid,
.was-validated .form-select:invalid {
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* ========================================
   KLIENT SELECTION VIEW - LIGHT MODE FIXES
   Ensures proper text contrast on selected cards
   ======================================== */

/* Light mode: Warning/completed cards should use dark text */
html[data-bs-theme="light"] .card.bg-warning .text-dark,
html[data-bs-theme="light"] .card.bg-warning .text-dark.opacity-75 {
    color: #212529 !important;
}

/* Light mode: Ensure proper contrast for warning badges on selected cards */
html[data-bs-theme="light"] .card.bg-warning .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.8) !important;
    color: #212529 !important;
}

/* Light mode: Fix icon visibility on warning background */
html[data-bs-theme="light"] .card.bg-warning .ti {
    color: #212529 !important;
    opacity: 1 !important;
}

/* Dark mode: Keep white text for warning cards */
html[data-bs-theme="dark"] .card.bg-warning .text-white,
html[data-bs-theme="dark"] .card.bg-warning .text-white-50 {
    color: #ffffff !important;
}

/* Theme-specific text colors for primary background cards */
html[data-bs-theme="dark"] .card.bg-primary .card-body,
html[data-bs-theme="dark"] .card.bg-primary .card-body * {
    color: #ffffff !important;
}

html[data-bs-theme="light"] .card.bg-primary .text-dark,
html[data-bs-theme="light"] .card.bg-primary .text-dark.opacity-75 {
    color: #212529 !important;
}

/* Light mode: Fix icon visibility on primary background */
html[data-bs-theme="light"] .card.bg-primary .ti {
    color: #212529 !important;
    opacity: 1 !important;
}

/* Transitions for smooth theme switching */
.card.bg-warning .card-body,
.card.bg-primary .card-body {
    transition: color 0.3s ease;
}

/* ========================================
   SWEETALERT2 MODAL SYSTEM
   Match Bootstrap modal styling with blur backdrop and proper backgrounds
   ======================================== */

/* ===== BACKDROP ===== */
/* Apply same blur effect as Bootstrap modals */
.swal2-container {
    backdrop-filter: blur(8px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
    z-index: 1055 !important;
}

[data-bs-theme="dark"] .swal2-container {
    background-color: rgba(10, 14, 22, 0.55) !important;
    backdrop-filter: blur(8px) saturate(150%) brightness(0.85) !important;
    -webkit-backdrop-filter: blur(8px) saturate(150%) brightness(0.85) !important;
}

/* ===== MODAL POPUP - PAGE BACKGROUND THEME ===== */
/* Light mode - use page background color */
html[data-bs-theme="light"] .swal-tabler.swal2-popup {
    background-color: #f5f7fb !important;
    color: var(--tblr-body-color) !important;
    border: none !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem !important;
}

html[data-bs-theme="light"] .swal-tabler .swal2-title {
    color: var(--tblr-body-color) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

/* Dark mode - use dark page background color */
html[data-bs-theme="dark"] .swal-tabler.swal2-popup {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem !important;
}

html[data-bs-theme="dark"] .swal-tabler .swal2-title {
    color: #e5e7eb !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

/* Dark mode - ensure all text is readable */
html[data-bs-theme="dark"] .swal-tabler .swal2-html-container {
    color: #e5e7eb !important;
}

/* ===== INNER CARDS - STAND OUT FROM BACKGROUND ===== */
/* Light mode - white cards stand out from page background */
html[data-bs-theme="light"] .swal-tabler .card {
    background-color: #ffffff !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Dark mode - dark cards stand out from darker page background */
html[data-bs-theme="dark"] .swal-tabler .card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

/* ===== ICON AREA ===== */
.swal-tabler .swal2-icon {
    margin: 1rem auto 1.25rem !important;
}

/* ===== CONTENT AREA ===== */
.swal-tabler .swal2-html-container {
    padding: 0 !important;
    margin: 1rem 0 1.25rem !important;
}

/* ===== BUTTONS ===== */
.swal-tabler .swal2-actions {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== ANIMATIONS ===== */
/* Smooth transitions between themes */
.swal-tabler.swal2-popup,
.swal-tabler .swal2-title,
.swal-tabler .swal2-html-container,
.swal-tabler .card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Fade in animation for popup */
.swal2-show {
    animation: swal2FadeIn 0.1s ease-out !important;
}

@keyframes swal2FadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   DROPDOWN OVERFLOW FIX FOR TABLE-RESPONSIVE
   The fix is JS, not CSS: shared-utilities.js hooks `show.bs.dropdown` for any
   [data-bs-toggle="dropdown"] inside `.table-responsive` and injects a Popper
   popperConfig with strategy:'fixed' (+ disabled `hide` modifier), so the menu
   floats over the table instead of being clipped by the scroll container's
   overflow. The data-bs-boundary="viewport" attribute on the toggles is kept —
   in Bootstrap 5 it only feeds Popper's preventOverflow modifier and on its
   own never escaped the overflow clipping (the menu stays position:absolute
   inside the clipping ancestor).
   ======================================== */

/* ========================================
   DOCUMENT DROPDOWN MENU STYLING
   Enhanced visibility for document dropdowns in tables
   ======================================== */

/* Light mode dropdown styling */
html[data-bs-theme="light"] .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Dark mode dropdown styling */
html[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1f2937;
    border: 1px solid #4b5563;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

/* Dropdown header styling */
html[data-bs-theme="dark"] .dropdown-header {
    color: #9ca3af;
}

/* Dropdown item hover states */
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #374151;
    color: #f3f4f6;
}

/* ========================================
   MISSING BOOTSTRAP 5.3 UTILITY FILL-INS
   Tabler's bundled Bootstrap omits a few utility classes that templates
   already rely on. Defining them here keeps markup like .min-w-0
   (required for text-truncate inside flex rows) working everywhere.
   ======================================== */

.min-w-0 {
    min-width: 0 !important;
}

/* ========================================
   BVSATZ SELECTOR BUTTON — TEXT TRUNCATION
   Long Geschaeftsfall / Kategorie names truncate with an ellipsis instead of
   stretching the picker button or wrapping across lines.
   Used in kontrollansicht.html and update_buchung.html.
   ======================================== */

/* The picker button and its inner text column must be allowed to shrink
   below their intrinsic content width — flex items default to
   min-width: auto, which is what normally prevents ellipsis from kicking
   in on overflowing text. */
.geschaeftsfall-selector > .btn {
    min-width: 0;
    overflow: hidden;
}

.geschaeftsfall-selector > .btn > .d-flex.flex-column {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Single-line truncation on both text rows inside the Geschaeftsfall selector. */
.geschaeftsfall-selector > .btn > .d-flex.flex-column > span,
.geschaeftsfall-selector > .btn > .d-flex.flex-column > small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   SWEETALERT2 MODAL ENHANCEMENTS
   Avatar icons and animations
   ======================================== */

/* Avatar icon styling in modals */
.swal-tabler .avatar {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Spinning loader animation */
@keyframes spin-loader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin-loader 1s linear infinite;
    display: inline-block;
}

/* Button spacing in modals */
.swal-tabler .swal2-actions.gap-2 {
    gap: 0.5rem;
}

/* Card body in modals - ensure proper spacing */
.swal-tabler .card-body {
    border-radius: var(--tblr-border-radius);
}

/* Ensure badges in modals have white text */
.swal-tabler .badge {
    color: #ffffff !important;
}

/* Sidebar user-menu dropdown: when popped out via Popper strategy:'fixed' it leaves the
   navbar's CSS context but inherits some of its styling (e.g. transparent background,
   dark text on dark navbar). Pin width and re-apply standard dropdown surface so it
   looks like a normal floating menu. */
/* Tabler design tokens for the surface (bg, padding, radius) so it matches the rest
   of the app, but use Tabler's stronger --tblr-box-shadow-lg + solid border-color
   (not the translucent variant) so the menu reads clearly on white pages. */
.sidebar-user-dropdown-menu {
    min-width: auto !important;
    background-color: var(--tblr-dropdown-bg, var(--tblr-bg-surface)) !important;
    color: var(--tblr-dropdown-color, var(--tblr-body-color)) !important;
    border: var(--tblr-border-width, 1px) solid var(--tblr-border-color) !important;
    border-radius: var(--tblr-dropdown-border-radius, var(--tblr-border-radius)) !important;
    padding: var(--tblr-dropdown-padding-y, 0.25rem) 0 !important;
    box-shadow: var(--tblr-box-shadow-lg), var(--tblr-shadow-dropdown) !important;
}
.sidebar-user-dropdown-menu > .px-3.py-2:first-child {
    padding-top: 0.5rem !important;
    padding-bottom: 0.375rem !important;
    max-width: 16rem;
    overflow: hidden;
}
.sidebar-user-dropdown-menu .dropdown-item {
    color: var(--tblr-dropdown-link-color, inherit);
    padding: 0.4rem 1rem 0.4rem 0.875rem !important;
}
.sidebar-user-dropdown-menu button.dropdown-item {
    border: 0 !important;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    text-align: inherit;
    width: 100%;
}
.sidebar-user-dropdown-menu .dropdown-divider {
    margin: 0.25rem 0;
}
.sidebar-user-dropdown-menu .dropdown-item:focus,
.sidebar-user-dropdown-menu .dropdown-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------
   Sidebar Klient badge — ellipsis truncation
   Tabler's .badge is display:inline-flex with justify-content:center,
   so text-align (and Bootstrap's .text-start utility) cannot left-
   align the inner text. Switch to inline-block so text-truncate's
   ellipsis renders at the right edge as expected.
--------------------------------------------------------------- */
#activeUser {
    display: inline-block;
    text-align: left;
    max-width: 100%;
}

/* ---------------------------------------------------------------
   Self-hosted Inter Variable
   Preloaded in base.html so the font is in cache before first
   paint. font-display: block ensures no visible swap (block
   period is negligible because the file is same-origin + preloaded).
   The Inter Variable v4 file covers weights 100-900 in one file.
--------------------------------------------------------------- */
@font-face {
    font-family: 'Inter Var';
    font-weight: 100 900;
    font-style: normal;
    font-display: block;
    src: url("../fonts/inter/InterVariable.2bf3d951bf9d.woff2") format('woff2-variations'),
         url("../fonts/inter/InterVariable.2bf3d951bf9d.woff2") format('woff2');
}

/* ---------------------------------------------------------------
   Password-manager injection resilience
   Extensions like NordPass inject sibling elements next to text
   inputs (e.g. <nordpass-icon>). Tabler's .form-control has no
   explicit flex-grow, so the injection causes a visible reflow.
   These rules lock the input's flex behavior and reserve right-
   padding for the icon, so the page doesn't shift on injection.
--------------------------------------------------------------- */
.input-group > .form-control,
.input-group > .form-select {
    flex: 1 1 auto;
    min-width: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea {
    padding-right: 2.25rem;
}

/* Don't double-pad inputs that already have a trailing button/addon */
.input-group > input + .input-group-text,
.input-group > input + .btn,
.input-group > input + .input-group-append {
    margin-left: -2.25rem;
}

/* ==============================
 * Notyf overrides
 * ==============================
 * The vendor stylesheet caps `.notyf__toast` at 300px and paints the
 * background through a 400×400 `.notyf__ripple` circle anchored at the
 * bottom-right corner. Long multi-line messages overflow the ripple,
 * leaving an unpainted gap on the right side of the toast.
 *
 * Fix: widen the toast and scale up the ripple so the background fully
 * covers the message, regardless of length.
 */
.notyf__toast {
    max-width: 520px;
}
.notyf__ripple {
    height: 800px;
    width: 800px;
}
/* Give wrapped messages a little breathing room when the toast is wider. */
.notyf__message {
    line-height: 1.45em;
}