body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f5f6fa;
}

/* Turkish-aware text capitalization - handled by JavaScript */
/* CSS text-transform: uppercase doesn't handle Turkish locale correctly */
/* JavaScript will apply proper capitalization based on locale */

/* Help icon styling */
.help-icon {
    cursor: help;
    font-size: 0.875rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.help-icon:hover,
.help-icon:focus {
    opacity: 1;
}

/* Make tooltips wider for better readability */
.tooltip {
    max-width: 400px !important;
}

.tooltip-inner {
    max-width: 400px;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Date input highlight when changed from today */
.date-changed {
    background-color: #fff3cd !important;
    border-color: #ffc107 !important;
}

/* Account input clear button */
.account-input-wrapper {
    position: relative;
    overflow: visible;
}

.account-input-wrapper .autocomplete-input,
.account-input-wrapper .form-control {
    padding-right: 2.5rem;
}

/* Invalid state for category autocomplete inputs */
.autocomplete-input.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4m0 4.8-.4-.4-.4.4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

.autocomplete-input.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Ensure folder-search-input respects wrapper padding */
.account-input-wrapper .folder-search-input {
    padding-right: 2.5rem !important;
}

.btn-account-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 0.875rem;
}

.btn-account-clear:hover,
.btn-account-clear:focus {
    color: #dc3545;
    background: none;
    border: none;
    outline: none;
}

.btn-account-clear:active {
    color: #c82333;
}

.btn-account-clear i {
    font-size: 0.875rem;
}

/* Sidebar Layout - AdminLTE 3 Inspired */
.sidebar-enabled {
    display: flex;
    min-height: 100vh;
}

.main-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    background-color: #343a40;
    color: #c2c7d0;
    z-index: 1000;
    transition: width 0.3s ease, transform 0.3s ease;
    overflow-x: hidden;
    overflow-y: hidden;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.main-sidebar.collapsed {
    width: 70px;
}

.main-sidebar.collapsed .brand-text,
.main-sidebar.collapsed .nav-link p {
    display: none;
}

.main-sidebar.collapsed .nav-link {
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Brand Logo */
.brand-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.brand-link {
    display: flex;
    align-items: center;
    color: #c2c7d0;
    text-decoration: none;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
}

.brand-link:hover {
    color: #ffffff;
}

.brand-image {
    height: 40px;
    width: 40px;
    object-fit: contain;
    margin-right: 0.75rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.brand-image i {
    font-size: 1.5rem;
    color: #c2c7d0;
}

.brand-link:hover .brand-image i {
    color: #ffffff;
}

.brand-text {
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.main-sidebar.collapsed .brand-text {
    opacity: 0;
    width: 0;
}

.sidebar-toggle-desktop {
    color: #c2c7d0;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0.75rem;
    border-radius: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-toggle-desktop:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.main-sidebar.collapsed .sidebar-toggle-desktop {
    display: none;
}

/* Collapsed Toggle Button (shown when sidebar is collapsed on desktop) */
.sidebar-toggle-collapsed {
    display: none;
    color: #c2c7d0;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 1rem;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
}

.sidebar-toggle-collapsed:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 992px) {
    .main-sidebar.collapsed .sidebar-toggle-collapsed {
        display: block;
    }
}

/* Sidebar Navigation Container */
.sidebar-nav-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* Allow scrolling for nav items only */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sidebar Navigation */
.nav-sidebar {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex-wrap: nowrap;
}

.nav-sidebar .nav-item {
    margin: 0.125rem 0;
}

.nav-sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #c2c7d0;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.nav-sidebar .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-left-color: rgba(255, 255, 255, 0.3);
}

.nav-sidebar .nav-link.active {
    color: #ffffff;
    background-color: rgba(138, 43, 226, 0.2);
    border-left-color: #8a2be2;
    font-weight: 600;
}

.nav-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #8a2be2;
}

.nav-sidebar .nav-icon {
    width: 1.5rem;
    font-size: 1.25rem;
    text-align: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.nav-sidebar .nav-link p {
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.3s ease;
    display: inline;
    line-height: 1.5;
}

.main-sidebar.collapsed .nav-link p {
    opacity: 0;
    width: 0;
}

.nav-sidebar .badge {
    float: right;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin-top: 0.125rem;
}

.main-sidebar.collapsed .badge {
    display: none;
}

/* Mobile Close Button */
.mobile-close-item {
    display: none;
}

.mobile-close-button {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    color: #dc3545;
    padding: 0.75rem 1rem;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.mobile-close-button:hover {
    color: #ffffff;
    background-color: rgba(220, 53, 69, 0.2);
    border-left-color: #dc3545;
}

.mobile-close-button .nav-icon {
    color: #dc3545;
}

.mobile-close-button:hover .nav-icon {
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .mobile-close-item {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Content Wrapper */
.content-wrapper {
    flex: 1;
    margin-left: 250px;
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991.98px) {
    .content-wrapper {
        margin-left: 0 !important;
        padding-top: 18px;
        /* Mobile topbar height */
    }

    .sidebar-enabled .main-sidebar.collapsed~.content-wrapper {
        margin-left: 0 !important;
        padding-top: 18px;
    }
}

.sidebar-enabled .main-sidebar.collapsed~.content-wrapper {
    margin-left: 70px;
}

/* Mobile Sidebar Toggle Button */
.sidebar-toggle-mobile {
    display: none;
}

@media (max-width: 991.98px) {
    .sidebar-toggle-mobile {
        display: block;
    }
}

/* Content Area */
.content {
    flex: 1;
    padding: 0;
}

/* Sidebar Profile Menu at Bottom */
.sidebar-profile-menu {
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    margin-top: auto;
    background-color: #343a40;
    z-index: 10;
}

.sidebar-divider {
    margin: 0.5rem 0;
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.sidebar-profile-menu .nav-link {
    padding: 0.75rem 1rem;
}

.sidebar-profile-menu .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-profile-menu button.nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Profile Menu Item with Toggle */
.profile-menu-item {
    display: flex;
    align-items: center;
    position: relative;
}

.profile-menu-item .nav-link {
    flex: 1;
    display: flex;
    align-items: center;
}

.profile-menu-item .nav-link p {
    display: inline;
    margin: 0;
    line-height: 1.5;
    padding: 0 0.25rem;
}

.profile-submenu-toggle {
    background: none;
    border: none;
    color: #c2c7d0;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-submenu-toggle:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.profile-submenu-toggle i {
    transition: transform 0.3s ease;
}

.profile-submenu-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Profile Submenu Container (Categories) */
.profile-submenu-container {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.profile-submenu-container[style*="display: none"] {
    max-height: 0;
}

.profile-submenu-container:not([style*="display: none"]) {
    max-height: 200px;
}

.sidebar-profile-menu .profile-submenu {
    padding-left: 3.5rem;
    font-size: 0.9rem;
    position: relative;
}


.sidebar-profile-menu .profile-submenu .nav-icon {
    font-size: 1rem;
    margin-right: 0.5rem;
}

.sidebar-profile-menu .profile-submenu p {
    display: inline;
    margin: 0;
    line-height: 1.5;
}

/* Bottom Action Buttons */
.sidebar-bottom-actions {
    padding: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    background-color: #343a40;
    z-index: 10;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Ensure bottom buttons are always visible on mobile */
@media (max-width: 991.98px) {
    .sidebar-bottom-actions {
        /* Add extra padding on mobile to account for browser chrome and safe areas */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        /* Ensure buttons stay at bottom and are always visible */
        position: relative;
        margin-top: auto;
        /* Ensure buttons are above browser chrome */
        margin-bottom: 0;
    }

    /* Make sure nav container can scroll if needed, but bottom buttons stay fixed */
    .sidebar-nav-container {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        /* Add padding to prevent content from being hidden behind bottom buttons */
        padding-bottom: 0.5rem;
        /* Use -webkit-overflow-scrolling for smooth scrolling on iOS */
        -webkit-overflow-scrolling: touch;
    }

}

.sidebar-install-btn {
    padding: 0.5rem 1rem;
    background-color: #0d6efd;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

.sidebar-install-btn:hover {
    background-color: #0b5ed7;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

.sidebar-install-btn i {
    font-size: 1.1rem;
}

.install-text {
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.main-sidebar.collapsed .install-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.main-sidebar.collapsed .sidebar-install-btn {
    padding: 0.5rem;
    width: 100%;
    border-radius: 0.5rem;
}

.sidebar-logout-btn {
    padding: 0.5rem 1rem;
    background-color: #dc3545;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

.sidebar-logout-btn:hover {
    background-color: #c82333;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.sidebar-logout-btn i {
    font-size: 1.1rem;
}

.logout-text {
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.main-sidebar.collapsed .logout-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.main-sidebar.collapsed .sidebar-logout-btn {
    padding: 0.5rem;
    width: 100%;
    border-radius: 0.5rem;
}

/* Mobile Topbar */
.mobile-topbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: #343a40;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1030;
    display: none;
}

.mobile-topbar-content {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    gap: 1rem;
}

.mobile-topbar-toggle {
    background: none;
    border: none;
    color: #c2c7d0;
    font-size: 1.5rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.mobile-topbar-toggle:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.mobile-topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ffffff;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.mobile-topbar-brand:hover {
    color: #ffffff;
    text-decoration: none;
}

.mobile-topbar-logo {
    height: 32px;
    width: 32px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.mobile-topbar-logo i {
    font-size: 1.5rem;
    color: #c2c7d0;
}

.mobile-topbar-name {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile Sidebar - Full Screen */
@media (max-width: 991.98px) {
    .sidebar-enabled {
        flex-direction: column;
    }

    .mobile-topbar {
        display: block;
    }

    /* Ensure sidebar starts hidden on mobile */
    .main-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        /* Use dynamic viewport height for mobile browsers to account for browser chrome */
        height: 100vh;
        height: 100dvh;
        /* Dynamic viewport height - adjusts for mobile browser UI */
        width: 100% !important;
        max-width: 100% !important;
        transform: translateX(-100%) !important;
        z-index: 1040;
        transition: transform 0.3s ease;
        /* Ensure sidebar doesn't exceed visible viewport */
        max-height: 100vh;
        max-height: 100dvh;
        /* Ensure flexbox layout keeps bottom buttons visible */
        overflow: hidden;
        /* Ensure proper flexbox layout */
        display: flex;
        flex-direction: column;
    }

    .main-sidebar.show {
        transform: translateX(0) !important;
    }

    .main-sidebar.collapsed {
        width: 100% !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
        padding-top: 18px;
        /* Height of mobile topbar */
        width: 100%;
    }

    .sidebar-enabled .main-sidebar.collapsed~.content-wrapper {
        margin-left: 0 !important;
        padding-top: 18px;
    }

    /* Overlay when sidebar is open */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1035;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* Hide desktop elements on mobile */
    .brand-link-wrapper {
        display: none !important;
    }

    .sidebar-toggle-desktop {
        display: none !important;
    }

    .sidebar-toggle-collapsed {
        display: none !important;
    }
}

/* Modern Navbar (for login page) */
.navbar {
    background: rgba(31, 41, 51, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* Legacy navbar styles (for login page only) */
.navbar:not(.main-header .navbar) .nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar:not(.main-header .navbar) .nav-links .btn-link {
    position: relative;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    letter-spacing: 0.01em;
    overflow: hidden;
}

.navbar:not(.main-header .navbar) .nav-links .btn-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0.5rem;
}

.navbar:not(.main-header .navbar) .nav-links .btn-link:hover::before {
    opacity: 1;
}

.navbar:not(.main-header .navbar) .nav-links .btn-link:hover {
    transform: translateY(-1px);
    background-color: rgba(255, 255, 255, 0.08);
}

.navbar:not(.main-header .navbar) .nav-links .btn-link:active {
    transform: translateY(0);
}

.navbar:not(.main-header .navbar) .nav-links .btn-link i {
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

.navbar:not(.main-header .navbar) .nav-links .btn-link:hover i {
    transform: scale(1.1);
}

.navbar-divider {
    width: 1px;
    height: 1.75rem;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(255, 255, 255, 0.2) 80%,
            transparent 100%);
    margin: 0 0.25rem;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.navbar-divider:hover {
    opacity: 1;
}

@media (max-width: 767px) {
    .navbar-divider {
        display: none;
    }
}

.navbar-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.95);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar-brand:hover .navbar-logo {
    transform: scale(1.05);
    opacity: 1;
}

.navbar-brand {
    transition: all 0.3s ease;
    padding: 0.5rem 0;
}

.navbar-brand:hover {
    transform: translateX(2px);
}

.profile-company-logo {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

.card {
    border: none;
    border-radius: 1rem;
}

.add-transaction-card {
    border: 1px solid #e4e7ec;
}

.add-transaction-card h3 {
    font-weight: 600;
}

.add-transaction-card p {
    margin-bottom: 0;
}

.form-stacked .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-stacked .form-control,
.form-stacked .input-group {
    border-radius: 0.65rem;
}

.alert-primary .btn-close {
    filter: invert(1);
}

.transactions-date-cell {
    display: block;
}

.transactions-date-content {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.transactions-category-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.transactions-category-badge {
    font-size: 0.72rem;
    padding: 0.2rem 0.45rem;
    line-height: 1;
    border-radius: 0.6rem;
    font-weight: 600;
}

/* Transaction amount emphasis */
.transactions-amount-value {
    font-weight: 600;
}

/* Modern Mobile Menu */
@media (max-width: 991px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 85vw);
        height: 100vh;
        background: rgba(31, 41, 51, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1050;
        padding: 2rem 1.5rem;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
    }

    .navbar-collapse.show {
        right: 0;
    }

    /* Overlay when menu is open */
    .navbar-collapse.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .navbar .nav-links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 1rem;
        gap: 0.5rem;
    }

    .navbar .nav-links .btn-link,
    .navbar .nav-links .btn,
    .navbar .nav-links form,
    .navbar .nav-links a.navbar-text {
        width: 100%;
        text-align: left;
        padding: 0.875rem 1rem;
        justify-content: flex-start;
        border-radius: 0.5rem;
    }

    /* Close button for mobile menu */
    .navbar-collapse::after {
        content: '✕';
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
    }

    .navbar-collapse::after:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
}

@media (max-width: 767px) {
    .navbar .nav-links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 1rem;
        gap: 0.5rem;
    }

    .navbar .nav-links .btn-link,
    .navbar .nav-links .btn,
    .navbar .nav-links form,
    .navbar .nav-links a.navbar-text {
        width: 100%;
        text-align: left;
        padding: 0.875rem 1rem;
    }

    .add-transaction-card {
        border-radius: 1.25rem;
    }

    .form-stacked .col-6,
    .form-stacked .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Search input full width on mobile */
    .cases-search-container {
        width: 100%;
        max-width: 100%;
    }
}

/* Search input styling */
.cases-search-container {
    max-width: 600px;
    width: 100%;
}

.cases-search-input,
.form-select.cases-filter-select {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.cases-search-input:focus,
.form-select.cases-filter-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    outline: none;
}

.cases-search-input::placeholder {
    color: #6c757d;
    opacity: 0.8;
}

/* Search input clear button */
.cases-search-container {
    position: relative;
}

.cases-search-container .cases-search-input {
    padding-right: 2.5rem;
}

.btn-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 0.875rem;
}

.btn-search-clear:hover,
.btn-search-clear:focus {
    color: #dc3545;
    background: none;
    border: none;
    outline: none;
}

.btn-search-clear:active {
    color: #c82333;
}

.btn-search-clear i {
    font-size: 0.875rem;
}

.autocomplete-dropdown {
    position: absolute;
    z-index: 1050;
    background: #fff;
    border: 2px solid #6c757d;
    border-radius: 0.5rem;
    margin-top: 0.25rem;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: none;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ensure dropdowns are visible outside cards */
.card:has(.autocomplete-input),
.card:has(.account-input-wrapper) {
    overflow: visible;
}

.card-body:has(.autocomplete-input),
.card-body:has(.account-input-wrapper) {
    overflow: visible;
}

/* Fallback for browsers that don't support :has() */
.card[data-quick-account-card="true"] .card-body,
.card[data-find-account-card="true"] .card-body {
    overflow: visible;
}

.autocomplete-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    border: none;
    background: #fff;
    text-align: left;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f0f0f0;
    gap: 0.5rem;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item:focus {
    background-color: #f8f9fa;
    outline: none;
}

.autocomplete-item strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    flex: 1;
    min-width: 0;
}

.autocomplete-item small {
    font-size: 0.75rem;
    color: #6c757d;
    display: block;
    margin-top: 0.25rem;
}

/* Badge styling in autocomplete items - make them prominent */
.autocomplete-item .badge {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    font-weight: 600;
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* Inline editing styles */
.editable-cell {
    position: relative;
    min-width: 120px;
}

.editable-cell .cell-display {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Override for inline editable elements (date/category in same cell) */
.editable-inline.editable-cell {
    position: relative !important;
    /* Keep relative for dropdown positioning */
    min-width: auto !important;
    /* Remove the 120px minimum */
    display: inline-block !important;
    /* inline-block to maintain flow but allow relative positioning */
}

/* Also remove padding from cell-display inside inline editable cells */
.editable-inline.editable-cell .cell-display {
    padding: 0 !important;
}

/* Icon buttons for inline editing - keep on same row with gap */
.save-row-btn,
.cancel-row-btn {
    min-width: 32px;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.save-row-btn {
    margin-right: 0.25rem;
}

.save-row-btn span,
.cancel-row-btn span {
    font-weight: bold;
}

.editable-cell .cell-edit {
    width: 100%;
    min-width: 150px;
}

.editable-cell .cell-edit.d-none {
    display: none !important;
}

.editable-cell .cell-edit:not(.d-none) {
    display: block !important;
}

/* Autocomplete dropdown in table  cells - make it prominent */
.editable-cell .autocomplete-dropdown {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 2px solid #6c757d !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    min-width: 250px;
    /* Ensure it's wide enough even in narrow cells */
}

/* Fix for autocomplete clipped by table containers */
.table-responsive:has(.autocomplete-dropdown[style*="display: block"]),
.table-responsive:has(.autocomplete-dropdown:not([style*="display: none"])) {
    overflow: visible !important;
}

/* Ensure parents don't clip */
td:has(.autocomplete-dropdown[style*="display: block"]),
th:has(.autocomplete-dropdown[style*="display: block"]) {
    overflow: visible !important;
    position: relative;
}

/* Toast notification styles */
#toast-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#toast-container .alert {
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Linked account badge styling shared across lists */
.linked-account-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: none;
    letter-spacing: 0.01em;
    color: #ffffff !important;
}

a:hover .linked-account-badge,
a:focus .linked-account-badge {
    color: #ffffff !important;
    text-decoration: none;
    background-color: #0b5ed7 !important;
}

/* Global table styling - alternating row colors for all tables */
@media (min-width: 768px) {
    .table tbody tr:nth-child(even) {
        background-color: #f8f9fa !important;
    }

    .table tbody tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    /* Ensure case list has alternating colors - more specific selectors */
    .table tbody#cases-table-body tr:nth-child(even),
    #cases-table-body tr:nth-child(even),
    table tbody#cases-table-body tr:nth-child(even) {
        background-color: #f8f9fa !important;
    }

    .table tbody#cases-table-body tr:nth-child(odd),
    #cases-table-body tr:nth-child(odd),
    table tbody#cases-table-body tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    /* Ensure table cells inherit row background */
    #cases-table-body tr:nth-child(even) td,
    .table tbody#cases-table-body tr:nth-child(even) td {
        background-color: transparent !important;
    }

    #cases-table-body tr:nth-child(odd) td,
    .table tbody#cases-table-body tr:nth-child(odd) td {
        background-color: transparent !important;
    }
}

/* Make folder numbers more visible */
#cases-table-body tr td:first-child {
    font-weight: 700;
    font-size: 1.05rem;
    color: #212529;
    letter-spacing: 0.02em;
}

/* On mobile, make folder number more visible too */
@media (max-width: 767px) {
    .table tbody tr td:first-child {
        font-weight: 700;
        font-size: 1.1rem;
        color: #212529;
    }

    .table tbody tr td:first-child:before {
        font-weight: 700;
        color: #495057;
    }
}


/* Mobile-responsive tables - stack columns for all tables */
@media (max-width: 767px) {

    /* Hide table headers on mobile */
    .table thead {
        display: none;
    }

    /* Convert all tables to card layout on mobile */
    .table,
    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }

    .table tbody tr {
        margin-bottom: 1rem;
        background: #fff !important;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: left;
        cursor: default !important;
        flex-wrap: wrap;
    }

    /* Hide cells that are empty or only contain "—" on mobile */
    .table tbody tr td[data-empty="true"] {
        display: none !important;
    }

    .table tbody tr td:last-child {
        border-bottom: none;
    }

    .table tbody tr td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .table tbody tr td[data-no-label="true"]:before {
        content: '';
        display: none;
    }

    .table tbody tr td.transactions-description-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    /* Keep date line single-row on mobile with small badges */
    .table tbody tr td.transactions-date-cell .transactions-date-content {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .table tbody tr td.transactions-date-cell .transactions-category-badge {
        font-size: 0.68rem;
        padding: 0.15rem 0.4rem;
    }

    .table tbody tr td.transactions-description-cell .transactions-description-text,
    .table tbody tr td.transactions-description-cell .transactions-description-value {
        width: 100%;
        display: block;
        white-space: normal;
    }

    .table tbody tr td.transactions-description-cell .transactions-description-row {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    /* Mobile: allow description to take full width */
    .table-responsive table.table tbody#transactions-table-body tr td.transactions-description-cell {
        max-width: 100% !important;
        width: 100% !important;
    }

    .transactions-description-toggle {
        margin-top: 0.5rem;
        margin-left: 0;
    }


    /* Hide empty cells on mobile (cells marked with data-empty="true") */
    .table tbody tr td[data-empty="true"] {
        display: none !important;
    }

    /* Hide empty row styling on mobile */
    .table tbody tr[id$="-empty-row"] {
        text-align: center;
        padding: 2rem;
        border: none;
        box-shadow: none;
    }

    .table tbody tr[id$="-empty-row"] td {
        display: block;
        border: none;
        padding: 0;
        justify-content: center;
    }

    .table tbody tr[id$="-empty-row"] td:before {
        display: none;
    }

    /* Make editable cells work better on mobile */
    .editable-cell {
        min-width: auto;
        width: 100%;
    }

    .editable-cell .cell-display,
    .editable-cell .cell-edit {
        flex: 1;
        min-width: 0;
        word-break: break-word;
    }

    /* Stack action buttons on mobile */
    .table tbody tr td:last-child {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    .table tbody tr td:last-child .btn {
        width: 100%;
    }

    /* Ensure table-responsive doesn't add horizontal scroll */
    .table-responsive {
        overflow-x: visible;
    }
}

/* Remove link-like styling from table cells - prevent text from looking like links */
.table td,
.table th {
    cursor: default !important;
    user-select: text;
}

/* Ensure wrapped text lines align properly in table cells - no indentation on any line */
.table td,
.table th {
    text-align: left !important;
    vertical-align: middle;
    text-indent: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-inline-start: 0.75rem !important;
    padding-inline-end: 0.75rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    box-sizing: border-box !important;
}

/* Force all text content to start at the same position - only for text content, not form elements */
.table td>*:first-child:not(input):not(select):not(textarea):not(.form-control):not(.form-select):not(.cell-edit):not(.btn):not(.badge),
.table th>*:first-child:not(input):not(select):not(textarea):not(.form-control):not(.form-select):not(.cell-edit):not(.btn):not(.badge) {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    text-indent: 0 !important;
}

/* Remove any indentation or margin from text content only - exclude form elements and badges */
/* Only apply to text nodes and text-containing elements, not form controls */
.table td>*:not(.badge):not(input):not(select):not(textarea):not(.form-control):not(.form-select):not(.form-check-input):not(.btn):not(.cell-edit),
.table td>*:not(.badge):not(input):not(select):not(textarea):not(.form-control):not(.form-select):not(.form-check-input):not(.btn):not(.cell-edit)::before,
.table td>*:not(.badge):not(input):not(select):not(textarea):not(.form-control):not(.form-select):not(.form-check-input):not(.btn):not(.cell-edit)::after,
.table th>*:not(.badge):not(input):not(select):not(textarea):not(.form-control):not(.form-select):not(.form-check-input):not(.btn):not(.cell-edit),
.table th>*:not(.badge):not(input):not(select):not(textarea):not(.form-control):not(.form-select):not(.form-check-input):not(.btn):not(.cell-edit)::before,
.table th>*:not(.badge):not(input):not(select):not(textarea):not(.form-control):not(.form-select):not(.form-check-input):not(.btn):not(.cell-edit)::after {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    text-indent: 0 !important;
}

/* Ensure first line and subsequent lines align the same */
.table td::first-line,
.table th::first-line {
    text-indent: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Ensure text content aligns from the start with consistent line height */
.table td,
.table th {
    line-height: 1.5;
    display: table-cell;
}

/* Remove any list-style or bullet points that might cause indentation */
.table td ul,
.table td ol,
.table td li,
.table th ul,
.table th ol,
.table th li {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    padding-left: 0 !important;
    padding-inline-start: 0 !important;
    list-style: none !important;
    text-indent: 0 !important;
}

/* Badge styling - ensure badges have proper padding and look good */
.table td .badge,
.table th .badge {
    padding: 0.35em 0.65em !important;
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    display: inline-block;
}

/* Only actual links should have pointer cursor */
.table td a,
.table td a * {
    cursor: pointer !important;
}

/* Prevent text selection from looking like links - remove all hover effects */
.table tbody tr td {
    color: inherit;
    text-decoration: none;
}

.table tbody tr td:hover {
    background-color: inherit !important;
    color: inherit;
    cursor: default !important;
}

/* Remove hover effects from case list specifically */
#cases-table-body tr:hover {
    background-color: inherit !important;
}

#cases-table-body tr td:hover {
    background-color: transparent !important;
    color: inherit !important;
    cursor: default !important;
}

/* Force alternating colors on case list rows - highest specificity */
@media (min-width: 768px) {

    /* Ensure tbody doesn't have a background that covers rows */
    #cases-table-body,
    table.table tbody#cases-table-body {
        background-color: transparent !important;
    }

    table.table tbody#cases-table-body tr:nth-child(even) {
        background-color: #f8f9fa !important;
    }

    table.table tbody#cases-table-body tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    /* Override any Bootstrap or card styles */
    .card-body table.table tbody#cases-table-body tr:nth-child(even),
    .table-responsive table.table tbody#cases-table-body tr:nth-child(even),
    .card-body table.table tbody#transactions-table-body tr:nth-child(even),
    .table-responsive table.table tbody#transactions-table-body tr:nth-child(even) {
        background-color: #f8f9fa !important;
    }

    .card-body table.table tbody#cases-table-body tr:nth-child(odd),
    .table-responsive table.table tbody#cases-table-body tr:nth-child(odd),
    .card-body table.table tbody#transactions-table-body tr:nth-child(odd),
    .table-responsive table.table tbody#transactions-table-body tr:nth-child(odd) {
        background-color: #ffffff !important;
    }

    /* Make sure cells don't override row background */
    table.table tbody#cases-table-body tr:nth-child(even) td,
    table.table tbody#transactions-table-body tr:nth-child(even) td {
        background-color: transparent !important;
    }

    table.table tbody#cases-table-body tr:nth-child(odd) td,
    table.table tbody#transactions-table-body tr:nth-child(odd) td {
        background-color: transparent !important;
    }
}

/* Remove Bootstrap's default table hover effects */
.table tbody tr:hover td,
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover {
    background-color: inherit !important;
}

/* Ensure alternating colors work even with Bootstrap's table-hover */
.table-hover tbody tr:nth-child(even):hover {
    background-color: #f8f9fa !important;
}

.table-hover tbody tr:nth-child(odd):hover {
    background-color: #ffffff !important;
}

/* Folder Search Styles */
.folder-search-input {
    /* padding handled by .account-input-wrapper .folder-search-input */
    font-size: 1rem;
    border: 2px solid #ced4da;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
}

.folder-search-input:focus {
    border-color: #6c757d;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
    outline: none;
}

.folder-search-dropdown {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    background: #fff;
    border: 2px solid #6c757d;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: none;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.folder-search-item {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.folder-search-item:last-child {
    border-bottom: none;
}

/* Alternating card colors for folder search results */
.folder-search-item:nth-child(even) {
    background-color: #f8f9fa;
}

.folder-search-item:nth-child(odd) {
    background-color: #ffffff;
}

.folder-search-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.folder-search-item-header>div {
    display: flex;
    align-items: center;
    flex: 1;
}

.folder-search-folder-number {
    font-size: 1.1rem;
    color: #343a40;
}

.folder-search-account-name {
    color: #212529;
    font-size: 0.95rem;
}

.folder-search-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.folder-search-field {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.folder-search-label {
    font-weight: 600;
    color: #6c757d;
    min-width: 80px;
}

.folder-search-value {
    color: #212529;
    flex: 1;
}

.folder-search-loading,
.folder-search-empty,
.folder-search-error {
    padding: 1rem;
    text-align: center;
    color: #6c757d;
}

.folder-search-error {
    color: #dc3545;
}

.quick-account-submit-btn {
    min-height: calc(1.5em + 0.75rem + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile adjustments for folder search */
@media (max-width: 767px) {
    .folder-search-field {
        flex-direction: column;
        gap: 0.25rem;
    }

    .folder-search-label {
        min-width: auto;
        font-size: 0.85rem;
    }

    .folder-search-value {
        font-size: 0.9rem;
    }

    .folder-search-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .folder-search-item-header>div {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .folder-search-account-name {
        font-size: 0.9rem;
    }
}

@media (min-width: 992px) {

    /* Transaction list column width constraints - limit description column to 50% */
    .table-responsive table.table:has(tbody#transactions-table-body) thead th:nth-child(3),
    .table-responsive table.table tbody#transactions-table-body tr td:nth-child(3) {
        max-width: 50% !important;
        width: 50% !important;
    }
}

.table-responsive table.table tbody#transactions-table-body tr td:nth-child(3) {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Credit/Debt list column width and wrapping rules */
/* Prevent wrapping for date, amount, remaining, and balance columns */
.table-responsive table.table tbody#credits-debts-table-body tr td[data-label*="Date"],
.table-responsive table.table tbody#credits-debts-table-body tr td[data-label*="Amount"],
.table-responsive table.table tbody#credits-debts-table-body tr td[data-label*="Remaining"],
.table-responsive table.table tbody#credits-debts-table-body tr td[data-label*="Balance"],
.table-responsive table.table tbody#account-credit-debt-table-body tr td[data-label*="Date"],
.table-responsive table.table tbody#account-credit-debt-table-body tr td[data-label*="Amount"],
.table-responsive table.table tbody#account-credit-debt-table-body tr td[data-label*="Remaining"],
.table-responsive table.table tbody#account-credit-debt-table-body tr td[data-label*="Balance"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Make description column larger and allow wrapping */
.table-responsive table.table tbody#credits-debts-table-body tr td[data-label*="Description"],
.table-responsive table.table tbody#account-credit-debt-table-body tr td[data-label*="Description"] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 200px;
    max-width: none;
}

/* Make case folder column smaller */
.table-responsive table.table tbody#credits-debts-table-body tr td[data-label*="Case Folder"],
.table-responsive table.table tbody#account-credit-debt-table-body tr td[data-label*="Case Folder"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    min-width: 80px;
}

/* Column width constraints for credit/debt tables */
@media (min-width: 992px) {

    /* Account column - for main credits-debts table: Account is 1st column */
    /* Use nth-of-type to only count td/th elements, ignoring hidden inputs */
    .table-responsive table.table.credits-debts-table thead th:nth-of-type(1),
    .table-responsive table.table.credits-debts-table tbody#credits-debts-table-body tr td:nth-of-type(1) {
        width: 12% !important;
        min-width: 120px;
    }

    /* Date columns - no wrap, fixed width (8%) - MUST come before Description rule */
    /* For main credits-debts table: Date is 2nd column */
    /* Use nth-of-type to only count td/th elements, ignoring hidden inputs */
    .table-responsive table.table.credits-debts-table thead th:nth-of-type(2),
    .table-responsive table.table.credits-debts-table tbody#credits-debts-table-body tr td:nth-of-type(2) {
        width: 12% !important;
        min-width: 80px;
        max-width: none !important;
    }

    /* Description column - larger (34% width) */
    /* For main credits-debts table: Description is 3rd column (after Account and Date) */
    /* Use nth-of-type to only count td/th elements, ignoring hidden inputs */
    .table-responsive table.table.credits-debts-table thead th:nth-of-type(3),
    .table-responsive table.table.credits-debts-table tbody#credits-debts-table-body tr td:nth-of-type(3) {
        width: 34% !important;
        min-width: 200px;
    }

    /* For account details table: Description is 2nd column (after Date) */
    .table-responsive table.table.account-credits-debts-table thead th:nth-child(2),
    .table-responsive table.table.account-credits-debts-table tbody#account-credit-debt-table-body tr td:nth-child(2) {
        width: 36% !important;
        min-width: 250px;
    }

    /* Case folder column - smaller (10% width) */
    /* For main credits-debts table: Case Folder is 4th column */
    /* Use nth-of-type to only count td/th elements, ignoring hidden inputs */
    .table-responsive table.table.credits-debts-table thead th:nth-of-type(4),
    .table-responsive table.table.credits-debts-table tbody#credits-debts-table-body tr td:nth-of-type(4) {
        width: 10% !important;
        max-width: 120px;
    }

    /* For account details table: Case Folder is 3rd column */
    /* Use class-based selector for more reliable targeting */
    .table-responsive table.table.account-credits-debts-table thead th:nth-child(3),
    .table-responsive table.table.account-credits-debts-table tbody#account-credit-debt-table-body tr td:nth-child(3) {
        width: 8% !important;
        max-width: 120px;
    }

    /* For account details table: Date is 1st column */
    .table-responsive table.table.account-credits-debts-table thead th:nth-child(1),
    .table-responsive table.table.account-credits-debts-table tbody#account-credit-debt-table-body tr td:nth-child(1) {
        width: 8% !important;
        min-width: 80px;
    }

    /* Due date column - no wrap, fixed width (10%) */
    /* For main credits-debts table: Due Date is 5th column */
    /* Use nth-of-type to only count td/th elements, ignoring hidden inputs */
    .table-responsive table.table.credits-debts-table thead th:nth-of-type(5),
    .table-responsive table.table.credits-debts-table tbody#credits-debts-table-body tr td:nth-of-type(5) {
        width: 10% !important;
        min-width: 80px;
    }

    /* For account details table: Due Date is 4th column */
    .table-responsive table.table.account-credits-debts-table thead th:nth-child(4),
    .table-responsive table.table.account-credits-debts-table tbody#account-credit-debt-table-body tr td:nth-child(4) {
        width: 10% !important;
        min-width: 80px;
    }

    /* Amount columns - no wrap, fixed width (10%) */
    /* For main credits-debts table: Amount is 6th, Remaining is 7th */
    /* Use nth-of-type to only count td/th elements, ignoring hidden inputs */
    .table-responsive table.table.credits-debts-table thead th:nth-of-type(6),
    .table-responsive table.table.credits-debts-table thead th:nth-of-type(7),
    .table-responsive table.table.credits-debts-table tbody#credits-debts-table-body tr td:nth-of-type(6),
    .table-responsive table.table.credits-debts-table tbody#credits-debts-table-body tr td:nth-of-type(7) {
        width: 10% !important;
        min-width: 80px;
    }

    /* For account details table: Amount is 5th, Remaining is 6th */
    .table-responsive table.table.account-credits-debts-table thead th:nth-child(5),
    .table-responsive table.table.account-credits-debts-table thead th:nth-child(6),
    .table-responsive table.table.account-credits-debts-table tbody#account-credit-debt-table-body tr td:nth-child(5),
    .table-responsive table.table.account-credits-debts-table tbody#account-credit-debt-table-body tr td:nth-child(6) {
        width: 10% !important;
        min-width: 80px;
    }

    /* Balance column - no wrap, fixed width (10%) */
    /* For main credits-debts table: Balance is 8th column */
    /* Use nth-of-type to only count td/th elements, ignoring hidden inputs */
    .table-responsive table.table.credits-debts-table thead th:nth-of-type(8),
    .table-responsive table.table.credits-debts-table tbody#credits-debts-table-body tr td:nth-of-type(8) {
        width: 10% !important;
        min-width: 80px;
    }

    /* For account details table: Balance is 7th column */
    .table-responsive table.table.account-credits-debts-table thead th:nth-child(7),
    .table-responsive table.table.account-credits-debts-table tbody#account-credit-debt-table-body tr td:nth-child(7) {
        width: 10% !important;
        min-width: 80px;
    }
}


.transactions-description-toggle {
    display: inline;
    color: #0d6efd;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
}

.transactions-description-toggle:focus,
.transactions-description-toggle:hover {
    color: #0a58ca;
}

.transactions-description-cell,
.transactions-description-cell.editable-cell {
    width: auto;
    max-width: 50%;
    min-width: 220px;
    vertical-align: top;
    word-break: break-word;
}

.transactions-description-cell .editable-cell,
.transactions-description-cell .transactions-description-group,
.transactions-description-cell .cell-display,
.transactions-description-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.transactions-description-cell .transactions-description-group {
    gap: 0.2rem;
    max-width: 100%;
}

.transactions-description-text,
.transactions-description-value {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.1rem;
    flex-wrap: wrap;
    max-width: 100%;
    white-space: normal;
    min-width: 0;
    flex: 0 1 auto;
}

/* Editing mode: stack category and textarea full-width */
.transactions-description-cell.editable-cell .transactions-description-group {
    flex: 1 1 100%;
    width: 100%;
}

.transactions-description-cell.editable-cell textarea.cell-edit {
    width: 100%;
    min-height: 120px;
    resize: vertical;
}

/* Prevent currency columns from wrapping */
td[data-label="Tutar"],
td[data-label="Hesap Bakiyesi"] {
    white-space: nowrap;
}

/* Report period selector styling */
.report-period-selector {
    font-size: 0.875rem !important;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #212529;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.report-period-selector:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.report-period-selector:hover {
    border-color: #adb5bd;
}

/* Dashboard Stats - Net Profits Custom Green Border */
.border-profits {
    border-left-color: #20c997 !important;
    /* Teal-green shade - distinct from Bootstrap's success green */
}

/* Dashboard Stats - Custom Border Colors */
.border-debts {
    border-left-color: #198754 !important;
    /* Green for unpaid debts */
}

.border-credits {
    border-left-color: #dc3545 !important;
    /* Red for unpaid credits */
}

.border-overdue {
    border-left-color: #8b0000 !important;
    /* Darker red for overdue debts */
}

/* PWA Install Web Component Styling */
/* Style the pwa-install component to match dashboard design */
pwa-install {
    display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Style the install button using shadow parts */
/* Default: hidden (we use custom navbar button for Android/Desktop) */
pwa-install::part(openButton) {
    display: none;
}

/* Show the pwa-install component's button on iOS */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari */
    @media screen and (max-width: 768px) {
        pwa-install::part(openButton) {
            display: inline-block;
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #fff;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
        }
    }
}

pwa-install::part(openButton):hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
}

pwa-install::part(openButton):active {
    transform: translateY(0);
    background-color: #0a58ca;
}

/* Style the install modal */
pwa-install::part(installModal) {
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Use CSS variables for customization */
pwa-install {
    --install-button-color: #0d6efd;
    --modal-z-index: 1055;
    --modal-background-color: #fff;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    pwa-install {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    pwa-install::part(openButton) {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }
}

/* PWA Fullscreen Support - Hide URL bar on mobile */
@supports (-webkit-touch-callout: none) {

    /* iOS Safari */
    html {
        height: -webkit-fill-available;
    }

    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* Android Chrome/Edge - Ensure full viewport */
@media (display-mode: standalone) {
    body {
        overscroll-behavior-y: none;
    }

    /* Prevent pull-to-refresh that might show URL bar */
    html {
        overscroll-behavior-y: none;
    }
}

/* Safe area support for devices with notches (iOS) */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    main {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Notyf Notification Customization */
/* Ensure notifications are above Bootstrap modals and other elements */
.notyf {
    z-index: 1060 !important;
}

/* Mobile-friendly adjustments for Notyf */
@media (max-width: 768px) {
    .notyf {
        left: 0.5rem !important;
        right: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .notyf__toast {
        margin-bottom: 0.5rem;
    }
}

/* Ensure notifications don't overlap with navbar on mobile */
@media (max-width: 991px) {
    .notyf__toast--top {
        top: 5rem !important;
    }
}

/* PWA mode adjustments */
@media (display-mode: standalone) {
    .notyf__toast--top {
        top: 1rem !important;
    }
}

/* Navigation Active State - Modern Purple Accent */
.nav-active {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.25), rgba(138, 43, 226, 0.15)) !important;
    border: 1px solid rgba(138, 43, 226, 0.4) !important;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.2),
        0 0 0 1px rgba(138, 43, 226, 0.1) inset !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    position: relative;
    transform: translateY(-1px);
}

.nav-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #8a2be2, transparent);
    border-radius: 2px 2px 0 0;
}

.nav-active:hover,
.nav-active:focus {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.35), rgba(138, 43, 226, 0.25)) !important;
    box-shadow: 0 6px 16px rgba(138, 43, 226, 0.3),
        0 0 0 1px rgba(138, 43, 226, 0.2) inset !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.nav-active i {
    color: #b794f6 !important;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.5));
}

/* Navbar brand active state (for dashboard/home) */
.nav-active-brand {
    position: relative;
}

.nav-active-brand::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #8a2be2, transparent);
    border-radius: 2px 2px 0 0;
    transform-origin: left;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* Enhanced Dropdown Menu */
.dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: rgba(31, 41, 51, 0.98);
}

.dropdown-item {
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
    margin: 0.125rem 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.dropdown-item i {
    width: 1.25rem;
    text-align: center;
}

/* Dropdown menu active state */
.dropdown-item.active {
    background: linear-gradient(90deg, rgba(138, 43, 226, 0.15), rgba(138, 43, 226, 0.1)) !important;
    color: #8a2be2 !important;
    font-weight: 600;
    border-left: 3px solid #8a2be2;
    padding-left: calc(1rem - 3px);
}

.dropdown-item.active:hover,
.dropdown-item.active:focus {
    background: linear-gradient(90deg, rgba(138, 43, 226, 0.25), rgba(138, 43, 226, 0.15)) !important;
    color: #8a2be2 !important;
}

/* Profile Dropdown Button Enhancement */
.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Navbar Toggler Enhancement */
.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
}

.navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
}

/* Mobile navigation active state */
@media (max-width: 991px) {
    .nav-active {
        border: none !important;
        border-left: 4px solid #8a2be2 !important;
        padding-left: calc(1rem - 4px) !important;
        background: linear-gradient(90deg, rgba(138, 43, 226, 0.2), rgba(138, 43, 226, 0.1)) !important;
        box-shadow: -4px 0 8px rgba(138, 43, 226, 0.2) !important;
    }

    .nav-active::after {
        display: none;
    }

    .nav-active-brand::after {
        display: none;
    }

    .nav-active-brand {
        border-left: 4px solid #8a2be2 !important;
        padding-left: calc(0.5rem - 4px) !important;
    }
}

/* Fix for main container overflow - ensure it respects viewport width */
main.container-fluid {
    width: 100% !important;
    max-width: min(1600px, 100%) !important;
    box-sizing: border-box !important;
}

/* Ensure content-wrapper constrains its children */
.content-wrapper {
    overflow-x: hidden;
    width: 100%;
}

/* Ensure card and table-responsive properly contain overflow */
.card {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure table-responsive allows horizontal scrolling when needed */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Override mobile rule for credits-debts tables - they need scrolling on desktop */
@media (min-width: 768px) {

    .table-responsive table.credits-debts-table,
    .table-responsive table.account-credits-debts-table {
        min-width: 0;
    }

    .card .table-responsive {
        overflow-x: auto !important;
    }
}