/*#content {
    margin-top: 56px;*/ /* Adjust this value as needed */
/*}*/
body {
    padding-top: 54px; /* Match your navbar height */
}

/* Header Customization */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--bs-success); /* Primary theme color */
    color: #fff;
}

    .modal-header.alert-danger {
        background: var(--bs-danger); /* Danger theme color */
    }

    .modal-header i {
        font-size: 1.5rem; /* Icon size */
    }

    .modal-header h5 {
        margin: 0;
        flex-grow: 1;
    }
/* Dialog Customization */
.modal-content {
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Prevent overflow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Box shadow */
}

.modal-body {
    padding: 1.5rem; /* Extra padding */
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.navbar {
    font-size: 1.1rem;
}
/* Text Area Enhancements */
textarea.form-control {
    border-radius: 5px;
    transition: border-color 0.2s ease-in-out;
}

    textarea.form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

.air-datepicker {
    z-index: 2000; /* Adjust this value based on your dialog's z-index */
}

.btn-delete:hover {
    color: white;
    background-color: red;
    border-color: red;
}
/* Common styles for both themes */
.notes-container {
    /* Uses Bootstrap's background variable instead of hardcoded color */
    background-color: var(--bs-body-bg);
}

.note-item {
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-card-bg, var(--bs-body-bg));
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(var(--bs-body-color-rgb), 0.05);
    transition: all 0.2s ease;
}

    .note-item:hover {
        box-shadow: 0 4px 8px rgba(var(--bs-body-color-rgb), 0.1);
    }

.note-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bs-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

.note-content {
    margin-left: 52px;
    padding: 0 16px 12px;
}

.note-content_local {
    margin-left: 0px;
    padding: 0 0px 0px;
}

.note-title {
    font-weight: bold;
    margin-bottom: 2px;
    color: var(--bs-heading-color, var(--bs-body-color));
}

.note-preview {
    color: var(--bs-secondary-color, var(--bs-body-color));
    margin-bottom: 8px;
}

.note-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.meta-item {
    display: flex;
    align-items: center;
    margin-right: 16px;
    margin-bottom: 4px;
}

    .meta-item i {
        margin-right: 4px;
    }

.note-actions {
    margin-top: 8px;
    display: flex;
    gap: 12px;
}

/* Dark theme specific adjustments */
[data-bs-theme="dark"] .note-item {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .user-avatar {
    background-color: var(--bs-dark-bg-subtle);
    color: var(--bs-light);
}

/* Add a subtle glow effect on hover for dark mode */
[data-bs-theme="dark"] .note-item:hover {
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.no-wrap {
    white-space: nowrap;
}

.dynamic-row {
    background-color: #ffefc1; /* light yellow highlight */
}






/* Responsive adjustments for DataTables toolbar */
@media (max-width: 767.98px) {
    .dt-layout-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .dt-layout-cell {
        width: 100% !important;
        text-align: left;
    }

    .dt-length,
    .dataTables_filter,
    .dt-search {
        width: 100%;
        margin-bottom: 0.5rem;
    }

        .dt-length label,
        .dataTables_filter label,
        .dt-search label {
            display: block;
            width: 100%;
            margin-bottom: 0.25rem;
            font-size: 0.875rem;
        }

        .dt-length select,
        .dataTables_filter input,
        .dt-search input {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            padding: 0.375rem 0.75rem;
        }

        .dataTables_filter label,
        .dt-search label {
            display: flex;
            flex-direction: column;
        }

        .dataTables_filter input,
        .dt-search input {
            margin-top: 0.25rem;
        }

    #daterange {
        width: 100% !important;
    }

    .dt-length select {
        width: auto;
        display: inline-block;
    }
}
/* =========================================================
   THEME-AWARE PRODUCT CARDS (cards with list area)
   - Unused space inside the card gets a subtle surface color
   - List items stay on the main surface (better contrast)
   - Shadows adapt to light/dark
   ========================================================= */

/* If you can add class="product-card" to your product cards, these will scope nicely. */
.card.product-card,
/* Fallback: apply to any card that contains a .list-group (your product cards) */
.card:has(> .list-group) {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-card-bg);
    border-color: var(--bs-border-color);
}

    /* Make the <ul> fill leftover height and paint the "unused" area with a
   neutral surface that adapts to theme (light gray in light, soft dark in dark). */
    .card.product-card > .list-group,
    .card > .list-group {
        flex: 1 1 auto;
        background-color: var(--bs-tertiary-bg); /* Bootstrap 5.3 semantic surface */
    }

        /* Keep actual list items readable: use the main surface color for items. */
        .card.product-card > .list-group > .list-group-item,
        .card > .list-group > .list-group-item {
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            border-color: var(--bs-border-color);
        }

            /* Muted text stays theme-aware */
            .card.product-card > .list-group > .list-group-item small,
            .card > .list-group > .list-group-item small {
                color: var(--bs-secondary-color);
            }

/* Subtle shadows that look good in both themes */
[data-bs-theme="light"] .card.product-card,
[data-bs-theme="light"] .card:has(> .list-group) {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .15);
}

[data-bs-theme="dark"] .card.product-card,
[data-bs-theme="dark"] .card:has(> .list-group) {
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .4);
}

    /* Optional: slightly soften list-item separators in dark mode */
    [data-bs-theme="dark"] .card.product-card > .list-group > .list-group-item,
    [data-bs-theme="dark"] .card > .list-group > .list-group-item {
        border-color: var(--bs-border-color-translucent);
    }

/* =========================================================
   NOTES – small cleanup for dark mode
   Use theme variables so you don't need hardcoded dark colors.
   ========================================================= */
[data-bs-theme="dark"] .note-item {
    background-color: var(--bs-card-bg); /* was var(--bs-dark) */
    border-color: var(--bs-border-color-translucent);
}











.datatables-bg {
    /* Background and text color */
    background-color: #afaff2 !important; /* Dark background */
}






















/* Custom Navbar Styling */
.app-topnav {
    /* Background and text color */
    background-color: #2c3e50 !important; /* Dark background */
    --bs-navbar-brand-color: #ecf0f1 !important;
    --bs-navbar-color: #ecf0f1 !important;
    --bs-navbar-active-color: #3498db !important;
    --bs-navbar-hover-color: #ecf0f1 !important;
    /* Border and shadow */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    /* Padding and height */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Navbar brand/logo */
.navbar-brand img {
    filter: brightness(0) invert(1); /* Invert logo for light text */
}

/* Nav links */
.nav-link {
    /*font-weight: 500;*/
    margin: 0 0.3rem;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 0.25rem;
    /*padding: 0.5rem 0.75rem;*/
}

    /* Hover and active states */
    .nav-link:hover,
    .nav-link:focus {
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--bs-navbar-active-color) !important;
    }

/* Dropdown menus */
.dropdown-menu {
    background-color: #34495e;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
}

.dropdown-item {
    color: #ecf0f1;
    padding: 0.5rem 1rem;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1);
        color: #3498db;
    }

/* Badge styling */
.badge {
    font-size: 0.75rem;
    padding: 0.25em 0.4em;
}

/* Navbar toggler */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(236, 240, 241, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* User dropdown and theme toggle */
#userDropdown,
#toggleTheme {
    color: #ecf0f1 !important;
    font-size: 1.1rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .navbar-nav {
        padding-top: 0.5rem;
    }

    .nav-link {
        padding: 0.5rem 0.75rem;
    }
}
.dropdown-menu {
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transform-origin: top center;
}

@media (prefers-reduced-motion: no-preference) {
    .dropdown-menu {
        transform: scale(0.98);
    }

        .dropdown-menu.show {
            transform: scale(1);
        }
}