/* =====================================================
   Global Z-Index System
   Ensures consistent layering across all components
   ===================================================== */

/* Z-Index Scale (Bootstrap standard + Custom):
   - Dropdowns: 1000
   - Sticky: 1020
   - Fixed: 1030
   - Modal Backdrop: 1040
   - Modal: 1050
   - Popover: 1060
   - Tooltip: 1070
   - SweetAlert: 2000
   
   Custom High Values (for modal overlays):
   - Select2 Container: 10050
   - Select2 Dropdown: 10055
   - Dropdown Menus: 10050-10060
   - Datepicker/Calendar: 10070
   - Datepicker in Modals: 10080
*/

/* Prevent layout shift when modal opens (scrollbar compensation) */
body.modal-open {
    padding-right: 0 !important;
    overflow: hidden !important;
}

/* Prevent padding adjustments on all elements when modal opens */
body.modal-open .navbar,
body.modal-open .fixed-top,
body.modal-open .fixed-bottom,
body.modal-open .sticky-top,
body.modal-open .is-fixed {
    padding-right: inherit !important;
}

/* Prevent Select2 containers from shifting and hide when modal is open */
body.modal-open .select2-container {
    width: 100% !important;
}

/* Hide Select2 dropdowns when modal is open (they are appended to body) */
body.modal-open > .select2-container--open {
    display: none !important;
}

/* Ensure form elements behind modal don't appear through */
body.modal-open .card,
body.modal-open .modern-task-card,
body.modal-open .task-view-container,
body.modal-open .task-view-section,
body.modal-open .task-view-sidebar,
body.modal-open .card-body {
    z-index: auto !important;
}

body.modal-open .select2-container:not(.modal .select2-container) {
    z-index: 1 !important;
}

/* Modal z-index - standard Bootstrap values */
.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

/* Dropdown menus - standard dropdowns */
.dropdown-menu {
    z-index: 1000 !important;
}

/* Dropdown menus in tables - must appear above thead */
.table .dropdown-menu,
.table-responsive .dropdown-menu,
tbody .dropdown-menu {
    z-index: 1060 !important;
}

/* When dropdown is open, ensure parent row has higher z-index */
.table tbody tr:has(.dropdown.show),
.table tbody tr:has(.dropdown-menu.show) {
    z-index: 100;
}

/* Dropdown menus inside modals - higher than modal */
.modal .dropdown-menu {
    z-index: 1060 !important;
}

/* Select2 dropdowns - must be lower than datepicker */
.select2-container--open .select2-dropdown {
    z-index: 10055 !important;
}

/* Hide Select2 dropdowns when mobile sidebar is open */
@media (max-width: 991px) {
    .modern-sidebar.show ~ .modern-main-panel .select2-container,
    body:has(.modern-sidebar.show) .select2-container--open,
    body:has(.modern-sidebar.show) .select2-dropdown {
        z-index: 1 !important;
    }
}
.daterangepicker td.in-range {
    background-color: #ebf4f8 !important;
    color: #000 !important;
    border-radius: 0 !important;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #357ebd !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Datepicker / Calendar - higher than Select2 to appear on top */
.datepicker,
.datepicker-dropdown,
.bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget.dropdown-menu,
.flatpickr-calendar,
.ui-datepicker,
.daterangepicker,
.picker,
.picker__holder {
    z-index: 10070 !important;
}

/* Datepickers inside modals - highest priority */
.modal .datepicker,
.modal .datepicker-dropdown,
.modal .bootstrap-datetimepicker-widget,
.modal .bootstrap-datetimepicker-widget.dropdown-menu,
.modal .flatpickr-calendar,
.modal .ui-datepicker,
.modal .daterangepicker {
    z-index: 10080 !important;
}

/* Datepicker appended to body (when using container: 'body') */
body > .bootstrap-datetimepicker-widget,
body > .datepicker-dropdown,
body > .flatpickr-calendar,
body > .ui-datepicker,
body > .daterangepicker {
    z-index: 10070 !important;
}

/* =====================================================
   Datepicker Table Reset - Prevent custom table styles from affecting calendar
   ===================================================== */
.bootstrap-datetimepicker-widget table,
.bootstrap-datetimepicker-widget .table,
.datepicker table,
.datepicker-dropdown table,
.daterangepicker table,
.ui-datepicker table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

.bootstrap-datetimepicker-widget table thead,
.bootstrap-datetimepicker-widget .table thead,
.datepicker table thead,
.datepicker-dropdown table thead,
.daterangepicker table thead,
.ui-datepicker table thead {
    background: transparent !important;
    border-bottom: none !important;
}

.bootstrap-datetimepicker-widget table thead tr th,
.bootstrap-datetimepicker-widget .table thead tr th,
.datepicker table thead tr th,
.datepicker-dropdown table thead tr th,
.daterangepicker table thead tr th,
.ui-datepicker table thead tr th {
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 8px !important;
    color: inherit !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    white-space: normal !important;
}

.bootstrap-datetimepicker-widget table tbody tr,
.bootstrap-datetimepicker-widget .table tbody tr,
.datepicker table tbody tr,
.datepicker-dropdown table tbody tr,
.daterangepicker table tbody tr,
.ui-datepicker table tbody tr {
    transition: none !important;
    background: transparent !important;
    border-bottom: none !important;
}

.bootstrap-datetimepicker-widget table tbody tr:hover,
.bootstrap-datetimepicker-widget .table tbody tr:hover,
.datepicker table tbody tr:hover,
.datepicker-dropdown table tbody tr:hover,
.daterangepicker table tbody tr:hover,
.ui-datepicker table tbody tr:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.bootstrap-datetimepicker-widget table tbody tr td,
.bootstrap-datetimepicker-widget .table tbody tr td,
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget .table td,
.datepicker table tbody tr td,
.datepicker-dropdown table tbody tr td,
.daterangepicker table tbody tr td,
.ui-datepicker table tbody tr td {
    padding: 8px !important;
    font-size: inherit !important;
    color: inherit !important;
    vertical-align: middle !important;
    border: none !important;
    background: transparent !important;
    font-weight: normal !important;
    border-radius: 0 !important;
}

.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget .table th,
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget .table td,
.datepicker table th,
.datepicker table td,
.datepicker-dropdown table th,
.datepicker-dropdown table td,
.daterangepicker table th,
.daterangepicker table td,
.ui-datepicker table th,
.ui-datepicker table td {
    border: none !important;
    box-shadow: none !important;
}

.bootstrap-datetimepicker-widget table > :not(caption) > * > *,
.datepicker table > :not(caption) > * > *,
.datepicker-dropdown table > :not(caption) > * > *,
.daterangepicker table > :not(caption) > * > *,
.ui-datepicker table > :not(caption) > * > * {
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Reset first/last child special padding for datepicker cells */
.bootstrap-datetimepicker-widget table tbody tr td:first-child,
.bootstrap-datetimepicker-widget table tbody tr td:last-child,
.datepicker table tbody tr td:first-child,
.datepicker table tbody tr td:last-child,
.daterangepicker table tbody tr td:first-child,
.daterangepicker table tbody tr td:last-child,
.ui-datepicker table tbody tr td:first-child,
.ui-datepicker table tbody tr td:last-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-weight: normal !important;
}

.bootstrap-datetimepicker-widget table thead tr th:first-child,
.bootstrap-datetimepicker-widget table thead tr th:last-child,
.datepicker table thead tr th:first-child,
.datepicker table thead tr th:last-child,
.daterangepicker table thead tr th:first-child,
.daterangepicker table thead tr th:last-child,
.ui-datepicker table thead tr th:first-child,
.ui-datepicker table thead tr th:last-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 0 !important;
}

/* =====================================================
   End Datepicker Table Reset
   ===================================================== */

/* Tooltips and Popovers */
.tooltip {
    z-index: 1070 !important;
}

.popover {
    z-index: 1060 !important;
}

/* Toast / Notifications */
.toast,
.notify,
.notification {
    z-index: 1080 !important;
}

/* SweetAlert2 - above everything */
.swal2-container {
    z-index: 2000 !important;
}

/* =====================================================
   End Global Z-Index System
   ===================================================== */

/* =====================================================
   CKEditor Text Visibility Fix
   ===================================================== */

/* Fix for text visibility in CKEditor content area */
.ck-editor__editable,
.ck-content,
.ck.ck-editor__editable:not(.ck-editor__nested-editable),
.ck.ck-editor__editable_inline {
    color: #000000 !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    min-height: 250px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
}

/* CKEditor container default size */
.ck-editor {
    min-height: 300px !important;
}

/* Ensure typed text is visible */
.ck-content p,
.ck-content span,
.ck-content div,
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6,
.ck-content li,
.ck-content td,
.ck-content th {
    color: inherit !important;
}

/* Placeholder text color */
.ck.ck-editor__editable.ck-placeholder::before {
    color: #999999 !important;
}

/* Selection color */
.ck-content ::selection {
    background-color: #b4d7ff !important;
    color: #000000 !important;
}

/* =====================================================
   End CKEditor Fix
   ===================================================== */

.form-control {
    border: 1px solid #dddddd;
    background-image: none;
    padding-left: 10px;
}

.table .table {
    background-color: transparent;
}

@media only screen and (max-width: 576px) {
    .card-header > h4.card-title {
        font-size: 1rem;
    }
}

[ng-popover] .popover {
    display: none;
}
/*---------------------- table -------------------------- */

/* Ultra Modern Table Styling - Using Agency Theme Colors */
.table {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.table thead {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
    position: relative;
    z-index: 1;
    border-bottom: none;
}

/* Override any framework defaults */
.table > thead,
.table-bordered > thead,
.table-striped > thead,
table.table > thead {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
}

.table thead::after {
    display: none;
}

.table thead tr th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 18px;
    color: #ffffff !important;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    background: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Override framework styles for all table types */
.table > thead > tr > th,
.table-bordered > thead > tr > th,
.table-striped > thead > tr > th,
table.table > thead > tr > th {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px 18px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.table thead tr th:first-child {
    padding-left: 24px;
    border-top-left-radius: 12px;
}

.table thead tr th:last-child {
    padding-right: 24px;
    border-top-right-radius: 12px;
}

/* Table header input styling */
.table thead input,
.table thead .form-control,
.table thead input[type="text"],
.table thead input[type="search"],
.table thead input[type="email"],
.table thead input[type="number"] {
    border: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    color: #374151 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    transition: all 0.15s ease !important;
}

.table thead input:focus,
.table thead .form-control:focus,
.table thead input[type="text"]:focus,
.table thead input[type="search"]:focus,
.table thead input[type="email"]:focus,
.table thead input[type="number"]:focus {
    border-color: #2563eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    outline: none !important;
}

.table thead input::placeholder {
    color: #9ca3af !important;
}

.table tbody tr {
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid #f0f1f3;
}

.table tbody tr::after {
    display: none;
}

.table tbody tr:hover {
    background: #f8f9fb;
    transform: none !important;
    box-shadow: none;
}

.table tbody tr td {
    padding: 13px 18px;
    font-size: 0.85rem;
    color: #374151;
    vertical-align: middle;
    border: none;
    background: transparent;
}

.table th,
.table td {
    border: none !important;
    box-shadow: none !important;
}

.table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.table > :not(caption) > * > * {
    border-bottom: none !important;
    box-shadow: none !important;
}

.table tbody tr td:first-child {
    padding-left: 24px;
    font-weight: 600;
    color: #475569;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.table tbody tr td:last-child {
    padding-right: 24px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Table links styling */
.table a,
.table td a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.table a:hover,
.table td a:hover {
    color: #1e40af;
    text-decoration: underline;
}

/* Input rows styling */
.table tbody .inputs td {
    font-size: 0.85rem;
    padding: 10px 16px 14px;
    background-color: transparent;
}

.table tbody .inputs td input,
.table tbody .inputs td select {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 12px;
    transition: all 0.2s ease;
    width: 100%;
    font-size: 0.85rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.table tbody .inputs td input:focus,
.table tbody .inputs td select:focus {
    border-color: #0d6efd;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* Striped rows - subtle */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #fbfcfd;
}

.table-striped tbody tr:nth-of-type(even):hover,
.table-striped tbody tr:nth-of-type(odd):hover {
    background: #f8f9fb;
    transform: none;
    box-shadow: none;
}

/* Bordered table variant */
.table-bordered {
    border: 1px solid #e9ecef;
}

.table-bordered thead tr th {
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
}

.table-bordered thead tr th:last-child {
    border-right: none !important;
}

.table-bordered,
.table-bordered thead,
.table-bordered tbody,
.table-bordered tfoot {
    border: none !important;
}

.table-bordered tbody tr td,
.table-bordered thead tr th {
    border-right: none !important;
    border-left: none !important;
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto !important;
    /* overflow-y: hidden !important; */
    -webkit-overflow-scrolling: touch;
}

/* Fix for dropdowns in tables */
.table-responsive:has(.dropdown-wrapper.open),
.card-body:has(.dropdown-wrapper.open),
div:has(> .table-responsive .dropdown-wrapper.open),
div:has(> .table .dropdown-wrapper.open) {
    overflow: visible !important;
}

/* Modern table enhancements */
.table tbody tr:first-child td:first-child {
    border-top-left-radius: 0;
}

.table tbody tr:first-child td:last-child {
    border-top-right-radius: 0;
}

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0;
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0;
}

/* Enhanced row dividers for clarity */
.table tbody tr {
    border-bottom: 1px solid #f0f1f3;
}

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

/* Modern table container */
.table-container {
    background: white;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Full width container */
.full-width-container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
    max-width: none !important;
}

/* Badge & Number Styling */
.badge-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
    color: white;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

/* Status Badge Styling */
.badge {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Status badge variants */
.badge-primary {
    background-color: #cfe2ff;
    color: #084298;
}

.badge-secondary {
    background-color: #e2e3e5;
    color: #41464b;
}

.badge-success {
    background-color: #d1e7dd;
    color: #0f5132;
}

.badge-info {
    background-color: #cff4fc;
    color: #055160;
}

.badge-warning {
    background-color: #fff3cd;
    color: #664d03;
}

.badge-danger {
    background-color: #f8d7da;
    color: #842029;
}

.badge-light {
    background-color: #f8f9fa;
    color: #212529;
}

.badge-dark {
    background-color: #d3d3d4;
    color: #212529;
}

/* Default count badge (e.g., list headers) */
.badge-default,
.badge.badge-default {
    background-color: #e7f1ff;
    color: #0d6efd;
    border: 1px solid #cfe2ff;
    font-weight: 600;
}

/* Custom status badges for lead stages */
.stage-badge {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
    text-align: center;
}

.stage-new {
    background-color: #e7f1ff;
    color: #084298;
    border: 1px solid #b6d4fe;
}

.stage-contacted {
    background-color: #cff4fc;
    color: #055160;
    border: 1px solid #b6effb;
}

.stage-qualified {
    background-color: #f3e5ff;
    color: #6a1b9a;
    border: 1px solid #e1bee7;
}

.stage-proposal {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
}

.stage-negotiation {
    background-color: #ffe0b2;
    color: #e65100;
    border: 1px solid #ffccbc;
}

.stage-won {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.stage-lost {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

/* Filter Row */
.filter-row {
    background: linear-gradient(135deg, #f8f9fa 0%, #f3f5f8 100%);
    border-bottom: 1px solid #e5e7eb;
}

.filter-row td {
    padding: 14px 16px;
    border: none;
}

.filter-row td:first-child {
    padding-left: 24px;
}

.filter-row td:last-child {
    padding-right: 24px;
}

/* Filter inputs styling */
.filter-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: #ffffff;
    color: #374151;
}

.filter-input::placeholder {
    color: #9ca3af;
}

.filter-input:focus {
    outline: none;
    border-color: #2563eb;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.filter-input:hover:not(:focus) {
    border-color: #d1d5db;
    background-color: #f9fafb;
}

/* Filter action buttons */
.filter-row .btn,
.filter-row .btn-icon {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.filter-row .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
}

.filter-row .btn-primary:hover {
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Loader Row in Table */
.loader-row {
    background: #ffffff;
    border: none;
}

.loader-row td {
    padding: 40px 24px !important;
    border: none !important;
    text-align: center;
    background: #ffffff;
}

.loader-row:hover {
    background: #ffffff;
}

.loader-row #table-loader {
    width: 100%;
    padding: 30px 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* No data state row */
.no-data-row {
    background: #ffffff;
    border: none;
    text-align: center;
}

.no-data-row td {
    padding: 60px 24px !important;
    border: none !important;
    color: #9ca3af;
    font-size: 0.95rem;
    font-weight: 500;
    background: #ffffff;
}

.no-data-row::before {
    display: none;
}

.no-data-row:hover {
    background: #ffffff;
}

/* No data icon styling */
.no-data-row .no-data-icon {
    font-size: 48px;
    color: #d1d5db;
    margin-bottom: 16px;
    display: block;
}

.no-data-row .no-data-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.no-data-row .no-data-text {
    font-size: 1.05rem;
    color: #6b7280;
    font-weight: 600;
}

.no-data-row .no-data-hint {
    font-size: 0.875rem;
    color: #a0aec0;
    font-weight: 400;
}

/* Filter in action column */
.filter-row td.action-filter {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 24px !important;
}

.filter-row .btn-icon:hover {
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
    background-color: #1d4ed8 !important;
}

.filter-row .filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-row .filter-clear-btn,
.filter-row .filter-search-btn {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-clear-btn {
    background-color: #f3f4f6;
    color: #6b7280;
}

.filter-clear-btn:hover {
    background-color: #e5e7eb;
    color: #374151;
}

/* Mobile filter responsiveness */
@media (max-width: 768px) {
    .filter-row {
        display: none;
    }
    
    .filter-row.show-mobile {
        display: table-row;
        background: linear-gradient(135deg, #f8f9fa 0%, #f3f5f8 100%);
    }
    
    .filter-row td {
        display: block;
        padding: 12px 16px;
        text-align: right;
    }
    
    .filter-row td:before {
        content: attr(data-label);
        display: inline-block;
        font-weight: 600;
        color: #475569;
        margin-right: 12px;
        min-width: 100px;
    }
    
    .filter-row .filter-input {
        display: inline-block;
        width: calc(100% - 120px);
    }
    
    .filter-row td.action-filter {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 8px;
    }
    
    .filter-row .filter-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .filter-row .filter-clear-btn,
    .filter-row .filter-search-btn {
        width: 100%;
    }
}
.td-actions,
.table tbody tr td:has(.dropdown-wrapper) {
    position: relative !important;
    overflow: visible !important;
}

.table tbody tr:has(.dropdown-wrapper.open) {
    z-index: 10000 !important;
    position: relative;
}

.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-wrapper.open {
    z-index: 10001 !important;
}

.more-icon {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #6c757d;
}

.more-icon:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
}

.lead-actions-dropdown {
    position: fixed !important;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 999999 !important;
    min-width: 200px;
    padding: 8px 0;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lead-actions-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
    background: white;
}

.lead-actions-dropdown .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
}

.lead-actions-dropdown .dropdown-item i.material-icons {
    margin-right: 12px;
    font-size: 20px;
    color: #6c757d;
}

.lead-actions-dropdown .dropdown-item:hover i.material-icons {
    color: #0d6efd;
}

/* Small table variant */
.table-sm tbody tr td,
.table-sm thead tr th {
    padding: 12px 15px;
    font-size: 0.813rem;
}

/* Compact table */
.table-compact tbody tr td,
.table-compact thead tr th {
    padding: 10px 12px;
    font-size: 0.813rem;
}

/* Action buttons in tables */
.table tbody tr td .btn-sm,
.table tbody tr td .btn {
    padding: 6px 12px;
    font-size: 0.813rem;
    margin: 0 3px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.table tbody tr td .btn-sm:hover,
.table tbody tr td .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Status badges in tables */
.table tbody tr td .badge {
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

/* Toggle switches in tables */
.table tbody tr td .custom-switch,
.table tbody tr td .switch {
    display: inline-block;
}

/* Icon buttons in action column */
.table tbody tr td a[class*="text-"],
.table tbody tr td button[class*="text-"] {
    padding: 6px 8px;
    margin: 0 3px;
    border-radius: 5px;
    transition: all 0.2s ease;
    display: inline-block;
}

.table tbody tr td a[class*="text-"]:hover,
.table tbody tr td button[class*="text-"]:hover {
    transform: translateY(-2px) scale(1.1);
    opacity: 0.8;
}

/* Empty state */
.table tbody tr.empty-state td {
    padding: 40px 20px;
    text-align: center;
    color: #b2bec3;
    font-style: italic;
}

/* Loading state */
.table.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Hover effect for entire row */
.table tbody tr {
    cursor: pointer;
}

.table tbody tr:hover td {
    color: #2d3436;
    background: transparent;
}

/*---------------------- table -------------------------- */

/*---------------------- width --------------------------*/
.px140 {
    width: 140px;
}

.px130 {
    width: 130px;
}

.px120 {
    width: 120px;
}

.px110 {
    width: 110px;
}

.px100 {
    width: 100px;
}

.px90 {
    width: 90px;
}

.px80 {
    width: 80px;
}

.px70 {
    width: 70px;
}

.px60 {
    width: 60px;
}

.px50 {
    width: 50px;
}

.px40 {
    width: 40px;
}

/*---------------------- End of width --------------------------*/

/*--------------------- Modern Spinner/Loader ---------------------- */

/* Modern rotating border spinner */
@keyframes spinner-border {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Modern pulse spinner */
@keyframes pulse-spinner {
    0%, 100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Dot bounce animation */
@keyframes dot-bounce {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Modern blue spinner border */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 3px solid #e7f1ff;
    border-right-color: #0d6efd;
    border-radius: 50%;
    animation: spinner-border 0.8s linear infinite;
}

.spinner-border.text-primary {
    border-color: #e7f1ff;
    border-right-color: #0d6efd;
}

.spinner-border-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
}

/* Modern grow spinner */
@keyframes spinner-grow {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}

.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
    border-radius: 50%;
    opacity: 0.5;
    animation: spinner-grow 1s ease-in-out infinite;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

.spinner-grow-sm {
    width: 1.5rem;
    height: 1.5rem;
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    z-index: 999;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e7f1ff;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: spinner-border 0.8s linear infinite;
    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.1);
}

/*------------------- end of spinner ---------------------*/
.close:focus {
    outline: 0;
}

/*------------------- Important ----------------------*/
.table .form-check .form-check-sign.inline {
    top: 0px;
}

.date-holder {
    display: none;
}

tr input,
tr select {
    width: 100%;
    height: 30px;
}

/*------------------- End of Important ----------------------*/
.message.card .card-actions {
    top: 0px;
    left: auto;
    right: 0px;
    text-align: right;
    width: fit-content;
}

.own {
    background-color: #e6e6e6;
}

.ghostwhite {
    background-color: ghostwhite;
}

.lightpink {
    background-color: #e7f1ff;
}

.lavender {
    background-color: lavender;
}

.lightgray {
    background-color: lightgray;
}

.lightblue {
    background-color: lightblue;
}

.box-tools {
    top: 0px;
    left: auto;
    right: 0px;
    text-align: right;
    position: absolute;
    z-index: 1;
    /* width: calc(100% - 30px); */
}

.box-tools .material-icons {
    color: #fff !important;
    padding: 0.5rem !important;
}

/* ---------------- Timeline --------------- */
.timeline li .user-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: 16px;
    z-index: 100;
    position: absolute;
    overflow: hidden;
}

.timeline li .user-photo img {
    width: 100%;
}

.timeline-panel .card-footer {
    border-top: 1px solid #e7e7e7;
    padding: 0px;
    margin: 0px;
    margin-top: 0.25rem !important;
}

.timeline-panel .card-title {
    text-align: left;
    font-size: 0.9em;
    color: crimson;
    margin-bottom: 0px;
}

.timeline-panel > .timestamp {
    color: #999;
    font-size: 12px;
    line-height: 7px;
    text-align: right;
    margin-top: 2px;
}

.timeline-panel .timeline-body {
    text-align: left;
}

.timeline-panel > .timeline-body > p > span {
    color: #17c9e2;
}

/* ---------------- End of Timeline --------------- */

.card-profile p {
    color: #999;
    margin-bottom: 0rem;
}

/* table.table-bordered thead tr {
    border-top: 1px solid #ddd;
} */

/* ---------------- responsive issues --------------- */

@media screen and (max-width: 576px) {
    .main-panel > .content {
        padding: 5px;
        /* margin-top: 35px; */
    }

    .container-fluid {
        padding-right: 8px;
        padding-left: 8px;
    }

    .card [class*="card-header-"] .card-icon {
        padding: 4px;
        font-size: x-large;
    }

    .card .card-body {
        padding: 14px 12px;
    }

    .card .card-body .form-group {
        margin: 1px 0 0;
    }

    .card .card-body + .card-footer,
    .card .card-footer {
        padding-top: 3px;
    }

    .card
        [class*="card-header-"]:not(.card-header-icon):not(
            .card-header-text
        ):not(.card-header-image) {
        padding: 10px;
    }

    .table > tbody > tr > td,
    .table > thead > tr > th {
        padding: 6px 6px;
    }

    .form-group {
        padding-bottom: 5px;
    }
}

.dash-icon {
    border-radius: 50%;
    background-color: white;
}

/*------------------------- table-card -------------------------------*/

/*------------------------- Table-card (Mobile View) - Modern Design -------------------------------*/
@media (max-width: 576px) {
    .table-card > thead {
        display: none;
    }

    .table-card,
    .table-card > tbody,
    .table-card > tbody > tr,
    .table-card > tbody > tr > td {
        display: block;
    }

    .table-card > tbody > tr > td::before {
        content: attr(label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 18px;
        text-align: left;
        font-weight: 600;
        font-size: 0.82rem;
        color: #475569;
        text-transform: none;
    }

    .table-card > tbody > tr > td {
        text-align: left;
        padding-left: 50% !important;
        padding-right: 18px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        border: none;
        border-bottom: 1px solid #f0f1f3;
        min-height: 40px;
        font-size: 0.875rem;
        color: #374151;
        display: flex;
        align-items: center;
        background: transparent;
    }

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

    .table-card > tbody > tr {
        /* Modern card styling for mobile */
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
        background-color: white;
        border-radius: 12px;
        margin: 10px 0;
        padding: 0;
        border: none;
        overflow: hidden;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .table-card > tbody > tr:hover {
        background-color: #f8f9fb;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }

    .table-card > tbody > tr:first-child {
        margin-top: 0;
    }

    .table-card > tbody > tr:last-child {
        margin-bottom: 0;
    }

    /* Status toggle in mobile cards */
    .table-card > tbody > tr > td input[type="checkbox"] {
        margin: 0;
        cursor: pointer;
    }

    /* Action buttons in mobile cards */
    .table-card > tbody > tr > td .btn,
    .table-card > tbody > tr > td .btn-sm {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/*------------------------- End of Table-card - Mobile View -------------------------------*/

/* ---------------- Utility: hide on mobile only -------------------- */
@media (max-width: 576px) {
    .d-none-mob {
        display: none !important;
    }
}
@media (min-width: 577px) {
    .d-none-mob {
        display: revert !important; /* keep normal layout on larger screens */
    }
}
@media (max-width: 576px) {
    .d-only-mob {
        display: table-row !important;
    }
}
@media (min-width: 577px) {
    .d-only-mob {
        display: none !important;
    }
}
/* --------------- End Utility ------------------------------------- */

/*------------ Bottom Right Modal ----------------------*/
.modal.bottom-right-modal > .modal-dialog {
    width: 95%;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    margin-right: 5px !important;
    margin-left: 15px !important;
    margin-bottom: 5px !important;
}

.modal.bottom-right-modal > .modal-dialog .modal-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 15px !important;
    background-color: #fff !important;
    color: #333 !important;
    font-weight: 400;
}

.s-place {
    width: 100%;
    position: absolute;
    top: 61px;
    border-radius: 10px;
    background: #fff;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(104, 104, 104, 0.5);
    padding: 20px;
}

.s-place a {
    display: block;
    border-bottom: 1px dashed #b3b3b3;
    text-align: left;
    padding: 10px !important;
    transition: 0.3s all ease-in-out;
}

.s-place a:hover {
    background: #ebebeb;
}

.s-place a:last-child {
    border-bottom: none;
}

/*---------- End of Bottom Right Modal -------------------*/

.call_icon {
    width: 50px;
    height: 50px;
    float: left;
    padding: 15px;
}

.call_number {
    height: 50px;
    float: left;
    font-size: 14px;
    color: black;
    padding: 15px;
}

.card1 {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
}

.form-control:read-only {
    background-image: none;
}

/* ============================================================
   MODERN SIDEBAR STYLES - Beautiful & Mobile Responsive
   ============================================================ */

/* CSS Variables for Sidebar */
:root {
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --header-height: 64px;
    --sidebar-bg: #ffffff;
    --sidebar-hover: rgba(13, 110, 253, 0.08);
    --sidebar-active: rgba(13, 110, 253, 0.15);
    --sidebar-text: #5e5873;
    --sidebar-text-active: #0d6efd;
    --sidebar-icon: #6e6b7b;
    --sidebar-icon-active: #0d6efd;
    --header-bg: #ffffff;
    --header-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --transition-speed: 0.3s;
    --border-radius: 8px;
}

/* Main Sidebar Container */
.modern-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    z-index: 10060;
    transition: all var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.modern-sidebar .sidebar-header {
    padding: 16px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    min-height: 64px;
}

.modern-sidebar .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    overflow: hidden;
    padding-left: 4px;
}

.modern-sidebar .sidebar-logo img {
    height: 36px;
    width: 36px;
    min-width: 36px;
    object-fit: contain;
    border-radius: 8px;
    padding: 4px;
}

.modern-sidebar .sidebar-logo-text {
    font-size: 16px;
    font-weight: 700;
    color: #2c2c2c;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    transition: opacity 0.3s ease, width 0.3s ease;
}

.modern-sidebar .sidebar-toggle-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(13, 110, 253, 0.08);
    border-radius: 8px;
    color: #0d6efd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modern-sidebar .sidebar-toggle-btn:hover {
    background: rgba(13, 110, 253, 0.12);
}

.modern-sidebar .sidebar-toggle-btn i {
    font-size: 18px;
}

/* User Profile Section */
.modern-sidebar .sidebar-user {
    padding: 20px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.modern-sidebar .user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0d6efd, #6ea8fe) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
}

.modern-sidebar .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

.modern-sidebar .user-avatar img[src=""],
.modern-sidebar .user-avatar img:not([src]) {
    display: none;
}

.modern-sidebar .user-info {
    flex: 1;
    min-width: 0;
}

.modern-sidebar .user-name {
    font-size: 14px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-sidebar .user-role {
    font-size: 12px;
    color: #6e6b7b;
}

/* Sidebar Navigation */
.modern-sidebar .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
}

.modern-sidebar .sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.modern-sidebar .sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.modern-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.modern-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.modern-sidebar .nav-section {
    margin-bottom: 16px;
}

.modern-sidebar .nav-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sidebar-text);
    padding: 8px 12px;
    margin-bottom: 4px;
}

.modern-sidebar .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modern-sidebar .nav-item {
    margin-bottom: 2px;
}

.modern-sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--border-radius);
    color: var(--sidebar-text);
    text-decoration: none;
    transition: all 0.2s ease;
    gap: 12px;
    position: relative;
}

.modern-sidebar .nav-link:hover {
    background: var(--sidebar-hover);
    color: #0d6efd;
}

.modern-sidebar .nav-link:hover .nav-icon {
    color: #0d6efd;
}

.modern-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.08) 100%);
    color: #0d6efd;
    box-shadow: none;
    font-weight: 600;
    border-left: 3px solid #0d6efd;
    padding-left: 13px;
}

.modern-sidebar .nav-link.active .nav-icon {
    color: #0d6efd;
}

/* Parent menu active state when submenu item is active */
.modern-sidebar .nav-link.active-parent {
    background: linear-gradient(90deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.08) 100%);
    color: #0d6efd;
    box-shadow: none;
    font-weight: 600;
    border-left: 3px solid #0d6efd;
    padding-left: 13px;
}

.modern-sidebar .nav-link.active-parent .nav-icon {
    color: #0d6efd;
}

.modern-sidebar .nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-icon);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.modern-sidebar .nav-icon i,
.modern-sidebar .nav-icon .material-icons {
    font-size: 20px;
}

.modern-sidebar .nav-text {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-sidebar .nav-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #0d6efd;
    color: #ffffff;
    font-weight: 600;
}

.modern-sidebar .nav-arrow {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.modern-sidebar .nav-arrow i {
    font-size: 18px;
}

.modern-sidebar .nav-item.open > .nav-link .nav-arrow {
    transform: rotate(90deg);
}

/* Submenu Styles */
.modern-sidebar .nav-submenu {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.modern-sidebar .nav-item.open > .nav-submenu {
    max-height: 1000px;
}

.modern-sidebar .nav-submenu .nav-link {
    padding: 10px 16px 10px 24px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sidebar-text);
}

.modern-sidebar .nav-submenu .nav-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modern-sidebar .nav-submenu .nav-icon i {
    font-size: 18px;
    color: var(--sidebar-icon);
    transition: color 0.2s ease;
}

.modern-sidebar .nav-submenu .nav-link.active .nav-icon i {
    color: #0d6efd;
}

.modern-sidebar .nav-submenu .nav-link:hover .nav-icon i {
    color: #0d6efd;
}

.modern-sidebar .nav-submenu .nav-link.active {
    background: linear-gradient(90deg, rgba(13, 110, 253, 0.2) 0%, rgba(13, 110, 253, 0.1) 100%);
    color: #0d6efd;
    box-shadow: none;
    font-weight: 600;
    border-left: 3px solid #0d6efd;
    padding-left: 21px;
}

.modern-sidebar .nav-submenu .nav-link:hover {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}

/* =====================================================
   HEADER / NAVBAR STYLES
   ===================================================== */

.modern-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background: var(--header-bg);
    box-shadow: var(--header-shadow);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    transition: left var(--transition-speed) ease;
}

.modern-header .header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modern-header .mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #5e5873;
    transition: all 0.2s ease;
}

.modern-header .mobile-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.modern-header .mobile-toggle i {
    font-size: 24px;
}

/* Sidebar Collapse Toggle in Header */
.modern-header .sidebar-collapse-toggle {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5e5873;
    transition: all 0.2s ease;
}

.modern-header .sidebar-collapse-toggle:hover {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}

.modern-header .sidebar-collapse-toggle i {
    font-size: 24px;
    transition: transform 0.3s ease;
}

body.sidebar-collapsed .modern-header .sidebar-collapse-toggle i {
    transform: rotate(180deg);
}

.modern-header .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
}

/* Ensure dropdowns in header-right don't overflow */
.modern-header .header-right .header-dropdown {
    position: relative;
}

.modern-header .header-action {
    position: relative;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5e5873;
    transition: all 0.2s ease;
}

.modern-header .header-action:hover {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}

.modern-header .header-action i {
    font-size: 22px;
}

.modern-header .header-action .action-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ea5455;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Header Dropdown Menus */
.modern-header .header-dropdown {
    position: relative;
}

.modern-header .dropdown-menu {
    display: block !important;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
    border: none;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 1060;
}

.modern-header .header-dropdown.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.modern-header .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #5e5873;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
}

.modern-header .dropdown-menu .dropdown-item:hover {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}

.modern-header .dropdown-menu .dropdown-item i {
    font-size: 18px;
    width: 20px;
}

.modern-header .dropdown-divider {
    margin: 8px 0;
    border-color: #ebe9f1;
}

/* Header User Profile */
.modern-header .header-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    background: #f8f8f8;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.modern-header .header-user:hover {
    background: #f0f0f0;
}

.modern-header .header-user .user-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background-color: #0d6efd !important;
    background-image: linear-gradient(135deg, #0d6efd, #6ea8fe) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    line-height: 36px !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    position: relative !important;
}

.modern-header .header-user .user-avatar .avatar-text {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

.modern-header .header-user .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modern-header .header-user .user-info {
    text-align: left;
}

.modern-header .header-user .user-name {
    font-size: 14px;
    font-weight: 600;
    color: #5e5873;
    line-height: 1.2;
}

.modern-header .header-user .user-role {
    font-size: 12px;
    color: #b9b9c3;
}

.modern-header .header-user i.chevron {
    font-size: 18px;
    color: #b9b9c3;
    transition: transform 0.2s ease;
}

.modern-header .header-dropdown.show .header-user i.chevron {
    transform: rotate(180deg);
}

/* User Profile Dropdown - ensure it doesn't overflow viewport */
#userDropdown .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 180px;
}

/* =====================================================
   MAIN CONTENT AREA
   ===================================================== */

.modern-main-panel {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding-top: var(--header-height);
    background: #f8f8f8;
    transition: margin-left var(--transition-speed) ease;
}

.modern-main-panel .content {
    padding: 24px;
}

/* =====================================================
   SIDEBAR OVERLAY (Mobile)
   ===================================================== */

.modern-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

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

/* =====================================================
   MOBILE RESPONSIVE STYLES
   ===================================================== */

@media (max-width: 1199px) {
    .modern-header .header-search {
        width: 220px;
    }
}

/* =====================================================
   MOBILE SIDEBAR CLOSE BUTTON
   ===================================================== */

.modern-sidebar .sidebar-close-btn {
    display: none;
    position: absolute;
    top: 16px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    color: #5e5873;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.modern-sidebar .sidebar-close-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

.modern-sidebar .sidebar-close-btn i {
    font-size: 20px;
}

@media (max-width: 991px) {
    .modern-sidebar {
        transform: translateX(-100%);
    }

    .modern-sidebar.show {
        transform: translateX(0);
    }

    .modern-sidebar .sidebar-close-btn {
        display: flex;
    }

    .modern-header {
        left: 0 !important;
    }

    .modern-header .mobile-toggle {
        display: flex;
    }

    .modern-header .header-search {
        display: none;
    }

    .modern-main-panel {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .modern-header .header-user .user-info {
        display: none;
    }

    .modern-header .header-user {
        padding: 6px;
        border-radius: 50%;
    }
}

@media (max-width: 767px) {
    .modern-header {
        padding: 0 16px;
    }

    .modern-header .header-right {
        gap: 4px;
    }

    .modern-header .header-action {
        width: 38px;
        height: 38px;
    }

    .modern-header .header-action i {
        font-size: 20px;
    }

    .modern-main-panel .content {
        padding: 16px;
    }

    .modern-sidebar {
        width: 100%;
        max-width: 300px;
    }

    .modern-header .dropdown-menu {
        position: fixed;
        top: var(--header-height);
        left: 16px;
        right: 16px;
        width: auto;
    }
}

@media (max-width: 575px) {
    .modern-header {
        height: 56px;
        padding: 0 12px;
    }

    :root {
        --header-height: 56px;
    }

    .modern-header .header-left {
        gap: 8px;
    }

    .modern-header .mobile-toggle {
        width: 36px;
        height: 36px;
    }

    .modern-header .header-user .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* =====================================================
   COLLAPSED SIDEBAR (Desktop)
   ===================================================== */

body.sidebar-collapsed .modern-sidebar {
    width: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .modern-sidebar .sidebar-logo-text,
body.sidebar-collapsed .modern-sidebar .user-info,
body.sidebar-collapsed .modern-sidebar .nav-text,
body.sidebar-collapsed .modern-sidebar .nav-arrow,
body.sidebar-collapsed .modern-sidebar .nav-section-title,
body.sidebar-collapsed .modern-sidebar .nav-badge {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

body.sidebar-collapsed .modern-sidebar .nav-link {
    justify-content: center;
    padding: 12px 16px;
    gap: 0;
}

body.sidebar-collapsed .modern-sidebar .nav-icon {
    margin: 0;
}

body.sidebar-collapsed .modern-sidebar .nav-submenu {
    display: none;
}

body.sidebar-collapsed .modern-sidebar .sidebar-user {
    justify-content: center;
    padding: 16px;
}

body.sidebar-collapsed .modern-sidebar .sidebar-header {
    justify-content: center;
    padding: 16px 12px;
}

body.sidebar-collapsed .modern-sidebar .sidebar-logo {
    padding-left: 0;
}

body.sidebar-collapsed .modern-header {
    left: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .modern-main-panel {
    margin-left: var(--sidebar-collapsed-width);
}

/* Hover to expand when collapsed */
@media (min-width: 992px) {
    body.sidebar-collapsed .modern-sidebar:hover {
        width: var(--sidebar-width);
        z-index: 10070;
    }

    body.sidebar-collapsed .modern-sidebar:hover .sidebar-logo-text,
    body.sidebar-collapsed .modern-sidebar:hover .user-info,
    body.sidebar-collapsed .modern-sidebar:hover .nav-text,
    body.sidebar-collapsed .modern-sidebar:hover .nav-arrow,
    body.sidebar-collapsed .modern-sidebar:hover .nav-section-title,
    body.sidebar-collapsed .modern-sidebar:hover .nav-badge {
        opacity: 1;
        width: auto;
    }

    body.sidebar-collapsed .modern-sidebar:hover .nav-link {
        justify-content: flex-start;
        padding: 12px 16px;
        gap: 12px;
    }

    body.sidebar-collapsed .modern-sidebar:hover .nav-submenu .nav-link {
        padding: 10px 16px 10px 24px;
    }

    body.sidebar-collapsed .modern-sidebar:hover .nav-submenu {
        display: block;
    }

    body.sidebar-collapsed .modern-sidebar:hover .sidebar-user {
        justify-content: flex-start;
        padding: 20px;
    }

    body.sidebar-collapsed .modern-sidebar:hover .sidebar-header {
        justify-content: space-between;
    }
}

/* =====================================================
   NOTIFICATION DROPDOWN STYLES
   ===================================================== */

.modern-header .notification-dropdown {
    width: 360px;
    max-height: 400px;
    padding: 0;
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(0);
}

.modern-header .header-dropdown.show .notification-dropdown {
    transform: translateX(-50%) translateY(0);
}

.modern-header .notification-dropdown .notification-header {
    padding: 16px;
    border-bottom: 1px solid #ebe9f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modern-header .notification-dropdown .notification-header h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #5e5873;
}

.modern-header .notification-dropdown .notification-header a {
    font-size: 13px;
    color: #0d6efd;
    text-decoration: none;
}

.modern-header .notification-dropdown .notification-list {
    max-height: 280px;
    overflow-y: auto;
}

.modern-header .notification-dropdown .notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f2f7;
    transition: all 0.2s ease;
}

.modern-header .notification-dropdown .notification-item:hover {
    background: #f8f8f8;
}

.modern-header .notification-dropdown .notification-item:last-child {
    border-bottom: none;
}

.modern-header .notification-dropdown .notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modern-header .notification-dropdown .notification-icon.primary {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.modern-header .notification-dropdown .notification-icon.success {
    background: rgba(40, 199, 111, 0.12);
    color: #28c76f;
}

.modern-header .notification-dropdown .notification-icon.warning {
    background: rgba(255, 159, 67, 0.12);
    color: #ff9f43;
}

.modern-header .notification-dropdown .notification-icon.danger {
    background: rgba(234, 84, 85, 0.12);
    color: #ea5455;
}

.modern-header .notification-dropdown .notification-content {
    flex: 1;
    min-width: 0;
}

.modern-header .notification-dropdown .notification-title {
    font-size: 14px;
    font-weight: 500;
    color: #5e5873;
    margin-bottom: 2px;
}

.modern-header .notification-dropdown .notification-text {
    font-size: 13px;
    color: #b9b9c3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-header .notification-dropdown .notification-time {
    font-size: 11px;
    color: #b9b9c3;
}

.modern-header .notification-dropdown .notification-footer {
    padding: 12px 16px;
    border-top: 1px solid #ebe9f1;
    text-align: center;
}

.modern-header .notification-dropdown .notification-footer a {
    font-size: 14px;
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-block;
}

.modern-header .notification-dropdown .notification-footer a:hover {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

@media (max-width: 767px) {
    .modern-header .notification-dropdown {
        position: fixed;
        top: 60px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        transform: none;
        max-height: calc(100vh - 80px);
    }
    
    .modern-header .header-dropdown.show .notification-dropdown {
        transform: none;
    }
}

/* =====================================================
   BRANCH SELECTOR DROPDOWN
   ===================================================== */

.modern-header .branch-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f8f8f8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    color: #5e5873;
    font-size: 14px;
}

.modern-header .branch-selector:hover {
    background: #f0f0f0;
}

.modern-header .branch-selector i {
    font-size: 18px;
    color: #0d6efd;
}

.modern-header .branch-selector .branch-name {
    font-weight: 500;
}

@media (max-width: 991px) {
    .modern-header .branch-selector .branch-name {
        display: none;
    }
    
    .modern-header .branch-selector {
        padding: 8px;
        border-radius: 10px;
    }
}

/* =====================================================
   QUICK LINKS DROPDOWN
   ===================================================== */

.modern-header .quick-links-dropdown {
    width: 280px;
    padding: 0;
}

.modern-header .quick-links-dropdown .quick-links-header {
    padding: 16px;
    border-bottom: 1px solid #ebe9f1;
}

.modern-header .quick-links-dropdown .quick-links-header h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #5e5873;
}

.modern-header .quick-links-dropdown .quick-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 16px;
}

.modern-header .quick-links-dropdown .quick-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.modern-header .quick-links-dropdown .quick-link-item:hover {
    background: rgba(13, 110, 253, 0.08);
}

.modern-header .quick-links-dropdown .quick-link-item i {
    font-size: 24px;
    color: #0d6efd;
}

.modern-header .quick-links-dropdown .quick-link-item span {
    font-size: 13px;
    color: #5e5873;
    text-align: center;
}

/* =====================================================
   ANIMATION UTILITIES
   ===================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* =====================================================
   SCROLLBAR STYLING
   ===================================================== */

.modern-main-panel ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.modern-main-panel ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.modern-main-panel ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.modern-main-panel ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {
    .modern-sidebar,
    .modern-header,
    .modern-sidebar-overlay {
        display: none !important;
    }

    .modern-main-panel {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
}

/* ============================================================
   MODERN NAVBAR / HEADER STYLES
   ============================================================ */

.main-panel > .navbar {
    background: #ffffff !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0 20px;
    min-height: 64px;
    transition: all 0.3s ease;
}

.main-panel > .navbar .container-fluid {
    padding: 0;
}

/* Navbar wrapper - left side */
.navbar .navbar-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Minimize/Toggle Button */
.navbar .navbar-minimize {
    margin: 0;
}

/* Hide minimize button on desktop - not needed */
.navbar .navbar-minimize {
    display: none !important;
}

.navbar .navbar-minimize button,
.navbar #minimizeSidebar {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.navbar .navbar-minimize button i,
.navbar #minimizeSidebar i {
    color: #fff !important;
}

/* Show minimize button only on mobile - it opens sidebar */
@media (max-width: 991px) {
    .navbar .navbar-minimize {
        display: block !important;
    }
}

.navbar .navbar-minimize button:hover,
.navbar #minimizeSidebar:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.navbar .navbar-minimize button i,
.navbar #minimizeSidebar i {
    color: #495057 !important;
    font-size: 20px !important;
}

/* Actionbar Navigation - right side */
.actionbar-nav {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.actionbar-nav .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
}

/* Nav Items */
.actionbar-nav .nav-item {
    margin: 0 !important;
}

.actionbar-nav .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border-radius: 12px;
    background: transparent;
    color: #495057 !important;
    transition: all 0.3s ease;
    position: relative;
}

.actionbar-nav .nav-link:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1 !important;
    transform: translateY(-2px);
}

.actionbar-nav .nav-link i {
    font-size: 22px !important;
}

/* Notification Badge */
.actionbar-nav .nav-link .notification,
.navbar .notification {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    border: 2px solid #fff;
}

/* Branch Dropdown */
.actionbar-nav .nav-item.dropdown .nav-link {
    width: auto;
    padding: 8px 14px !important;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1 !important;
}

.actionbar-nav .nav-item.dropdown .nav-link:hover {
    background: rgba(99, 102, 241, 0.15);
}

.actionbar-nav .nav-item.dropdown .nav-link i {
    font-size: 18px !important;
}

/* Quick Links Dropdown */
.actionbar-nav .dropdown .dropdown-toggle.material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
    background: transparent;
    color: #495057 !important;
    font-size: 22px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none !important;
}

.actionbar-nav .dropdown .dropdown-toggle.material-icons:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1 !important;
}

/* Profile Dropdown */
.profile-dropdown .nav-link {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
}

.profile-dropdown .nav-link:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.profile-dropdown .nav-link i {
    color: #fff !important;
    font-size: 20px !important;
}

/* Dropdown Menus */
.navbar .dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 10px;
    margin-top: 10px;
    min-width: 180px;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar .dropdown-menu .dropdown-item {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    transition: all 0.2s ease;
    margin: 2px 0;
}

.navbar .dropdown-menu .dropdown-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    transform: translateX(4px);
}

.navbar .dropdown-menu .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    vertical-align: middle;
}

.navbar .dropdown-menu .dropdown-divider {
    margin: 8px 0;
    border-color: rgba(0, 0, 0, 0.08);
}

/* Profile Menu Specific */
.profile-menu {
    min-width: 200px;
}

.profile-menu .dropdown-item.text-danger {
    color: #ef4444 !important;
}

.profile-menu .dropdown-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626 !important;
}

/* Navbar Toggler - Mobile */
.navbar .navbar-toggler {
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
}

.navbar .navbar-toggler .icon-bar {
    width: 20px;
    height: 2px;
    background: #495057;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile Responsive Navbar */
@media (max-width: 991px) {
    .main-panel > .navbar {
        padding: 10px 15px;
        min-height: 58px;
    }
    
    .actionbar-nav {
        gap: 4px;
    }
    
    .actionbar-nav .nav-link {
        width: 38px;
        height: 38px;
    }
    
    .actionbar-nav .nav-link i {
        font-size: 20px !important;
    }
    
    .profile-dropdown .nav-link {
        width: 38px !important;
        height: 38px !important;
    }
    
    /* Dropdown on mobile */
    .navbar .dropdown .dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 14px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }
}

/* ============================================================
   END MODERN NAVBAR STYLES
   ============================================================ */

.btn-custom {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.9) 0%, rgba(8, 66, 152, 0.9) 100%);
    color: #ffffff;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    margin: 0px;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.25);
    backdrop-filter: blur(8px);
}

.form-control {
    border-radius: 5px;
    background-color: #fff;
}

.searchmain .bmd-form-group {
    display: flex;
    width: 100%;
}

.searchmain {
    display: flex;
    width: 100%;
    max-width: 400px;
    z-index: 9;
}

.searchmainbg {
    background: #ccc;
    height: 150px;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    align-items: flex-end;
    background-size: 100%;
    border-radius: 6px;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.searchmainbg::after {
    background-color: #00000075;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.salesvisitmain {
    display: flex;
    width: 100%;
    max-width: 400px;
    z-index: 9;
}

.salesvisitmainbg {
    background-color: #ffffff;
    padding: 1px;
}

.salesvisitheaderbg {
    background-color: #ffffff;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.form-control:focus {
    background-color: #fff;
}

.card-stats .card-icon {
    margin-top: 0px !important;
    box-shadow: none !important;
    padding: 0px !important;
    background: none !important;
}

.card-stats .card-header.card-header-icon i {
    font-size: 40px;
    width: 36px;
}

.card-stats {
    padding: 15px 0px;
    margin-top: 0px;
}

.stats {
    font-size: 12px;
    color: #6a6a6a;
}

.stats i {
    font-size: 14px;
}

.newhd_stat {
    text-align: left;
    font-weight: 500;
    color: #494949 !important;
    font-size: 1rem !important;
}

.hd-card-icon {
    border-radius: 3px;
    background-color: #0d6efd;
    padding: 10px;
    margin-right: 15px;
    width: 46px;
    color: #fff;
    height: 46px;
    line-height: 22px;
    text-align: center;
}

.hd-card-icon i {
    font-size: 19px;
    line-height: 28px;
}

.common-headings {
    display: flex;
    border-bottom: #d5d5d5 solid 1px;
    font-size: 1.3rem;
    font-weight: 400;
    padding-bottom: 7px;
    align-items: center;
    padding-bottom: 5px;
    color: #494949;
    margin-bottom: 0px;
}

/* Sidebar styles moved to modern sidebar section above */

.table tbody tr td {
    font-size: 14px;
    color: #494949;
    font-weight: 400;
    line-height: 150%;
}

.table tbody tr td i {
    font-size: 18px;
}

.table tbody tr td .form-control {
    height: 26px !important;
    color: #494949;
}

/* Removed duplicate table thead style - using modern style from line 34 */

select,
select.form-control {
    color: #494949;
    height: 30px !important;
}

.checkbox-radios {
    text-align: left;
}

tags-input .tags .tag-item {
    background: #e4e4e4;
    color: #999999;
}

tags-input .tags .tag-item .remove-button {
    color: #999999;
}

.card .card-body .col-form-label {
    text-align: left;
    font-size: 14px;
    padding: 5px 5px 0px 17px;
    color: #494949;
}

.checkbox-label {
    display: flex;
    font-size: 14px;
    text-align: left;
    padding: 4px;
}

/* Old form-check-input style removed - using modern style from Form Design System */

.common_sub_head {
    font-size: 1.1rem;
    font-weight: 400;
    border-bottom: #d5d5d5 solid 1px;
    color: #494949;
    padding-bottom: 5px;
}

.btn-custom {
    display: flex;
    align-items: center;
}

.btn-custom-secondary {
    background-color: #fff !important;
    border: #494949 solid 1px;
    color: #494949 !important;
    height: 35px;
    display: flex;
    align-items: center;
    margin: 0px;
}

.btn.btn-default.focus,
.btn.btn-default:focus,
.btn.btn-default:hover,
.btn.focus,
.btn:focus,
.btn:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.primarycolor {
    color: #0d6efd;
}

.card [class*="card-header-"] {
    padding: 0px 20px;
    margin: 0px;
}

.nav-item.active .nav-item.active .nav-link {
    background-color: hsla(0, 0%, 78%, 0.2);
}

.main-panel > .content {
    background: #efefef;
}

/* Sidebar logo text color moved to modern sidebar section */

.nav-item.active .nav-link.nosub {
    background-color: hsla(0, 0%, 78%, 0.2);
}

.select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid #dddddd !important;
}

.select2-container .select2-selection--multiple {
    min-height: 40px !important;
    border: 1px solid #dddddd !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b {
    margin-top: 2px !important;
}

.hdname {
    font-weight: 300;
    color: #494949;
    font-size: 1.2rem;
}
.step{
    text-align: center;
    background-color: whitesmoke;
    align-items: center;
    justify-content: center;
}

.detailsp {
    font-size: 14px;
    font-weight: 400;
    color: #494949;
}

.prdtname {
    color: #494949;
    font-size: 1.3rem;
    font-weight: 400;
}

.blockstyle p span {
    font-size: 14px;
    font-weight: 400;
    color: #494949;
}

.blockstyle p b {
    font-size: 14px;
    font-weight: 500;
    color: #494949;
}

.bookref {
    font-size: 18px;
    font-weight: 400;
    color: #494949;
}

.blockstyle p {
    margin-bottom: 0px;
}

.nolabel label {
    display: none;
}

#map {
    margin-top: 0px !important;
}

body {
    font-weight: 400;
    color: #494949;
}
.newstylestab {
    border-bottom: #d5d5d5 solid 1px;
}
.nav-tabs .nav-item .nav-link {
    color: #494949 !important;
}
.nav-tabs .nav-item .nav-link:hover {
    background-color: #0d6efd !important;
    color: #fff !important;
}

.nav-tabs .nav-link.active {
    background-color: #0d6efd !important;
    color: #fff !important;
}
.main-panel {
    background: #efefef;
}

.country-list .country-name {
    color: #494949;
}
.iconimg {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

/*:root {*/
/*    --primary-color: #0d6efd;*/
/*}*/

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 36px !important;
}
.select2-container--default.select2-container--focus
    .select2-selection--multiple {
    height: 60px !important;
    border: 1px solid #dddddd !important;
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid #dddddd !important;
}
.select2-container--default .select2-selection--multiple {
    height: 36px !important;
}
.btn-custom-secondary .material-icons {
    color: #0d6efd;
}
/*---------- multilevel dropdown-------------------*/
.multilevel .dropdown-submenu {
    position: relative;
}

.multilevel .dropdown-submenu .dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: auto;
    right: 100%;
    margin-top: -6px;
    margin-right: 0;
}

/* Show submenu on hover (desktop) */
.multilevel .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* Show submenu on click (mobile) */
.multilevel .dropdown-submenu.show > .dropdown-menu,
.multilevel .dropdown-submenu > .dropdown-menu.show {
    display: block !important;
}

.multilevel .dropdown-item:hover + .dropdown-menu,
.multilevel .dropdown-submenu .dropdown-menu:hover {
    display: block;
    opacity: 1;
    transform: scale(1);
}

.multilevel.dropdown-menu,
.multilevel .dropdown-menu {
    min-width: 14rem;
    overflow: visible !important;
}

.multilevel .dropdown-submenu > .dropdown-item {
    padding-right: 40px;
    position: relative;
    cursor: pointer;
}

/* Material icons in submenu items (call_made, call_received) */
.multilevel .dropdown-submenu > .dropdown-item .material-icons {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

/* Active state for clicked submenu parent */
.multilevel .dropdown-submenu.show > .dropdown-item {
    background-color: #f8f9fa;
}

/* Mobile responsive - open submenu to the right instead of left */
@media (max-width: 768px) {
    .multilevel .dropdown-submenu .dropdown-menu {
        left: 100% !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/*---------- End multilevel dropdown-------------------*/

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
    float: left;
}
.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    margin-bottom: 15px;
}

tags-input .tags .tag-item {
    color: #494949 !important;
}
.custom_w {
    width: 120px;
}
.pop_siz {
    font-size: 1rem;
}

.custom_accordion {
    width: 100%;
}
.custom_accordion .left_section .icon_acc {
    margin-right: 10px;
}
.custom_accordion .left_section .icon_acc img {
    max-width: 16px;
}
.custom_accordion .left_section .heading_acc {
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: capitalize;
    color: #494949;
    line-height: normal;
}
.custom_accordion .left_section {
    display: flex;
    width: 100%;
    align-items: center;
}
.custom_accordion .left_section .contants_acc {
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: capitalize;
    color: #909090;
    line-height: normal;
    margin-left: 20px;
}
.right_section {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.right_section .stat_acc {
    font-size: 0.8rem;
    text-transform: uppercase;
    background: #efefef;
    line-height: normal;
    padding: 4px 8px;
    border-radius: 20px;
    font-weight: 500;
    margin-right: 20px;
}
.right_section .cur_acc {
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    width: 100%;
    display: block;
}
.right_section .price_acc {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: normal;
    width: 100%;
    display: block;
    color: #0d6efd;
}

.head_acc {
    padding: 10px 20px;
    border-radius: 6px;
}
.head_acc.collapsed {
    border: none;
}

.custom_accordion .collapse.show {
    border-top: #d5d5d5 solid 1px;
}

/* new css */

.action-btns-list-wrapper ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: column;
}
.action-btns-list-wrapper ul li {
    width: 100%;
}
.action-btns-list-wrapper ul li .btn {
    width: 100%;
    background-color: #fff !important;
    border: #494949 solid 1px;
    color: #494949 !important;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-transform: capitalize;
    margin: 0px;
}
.action-btns-list-wrapper ul li .btn:hover {
    border-color: #0d6efd;
}
.action-btns-list-wrapper ul li .btn i,
.action-btns-list-wrapper ul li .btn .material-icons {
    padding-right: 5px;
    color: #0d6efd;
}
@media (max-width: 767px) {
    .action-btns-list-wrapper ul {
        flex-direction: row;
    }
    .action-btns-list-wrapper ul li,
    .action-btns-list-wrapper ul li .btn {
        max-width: 190px;
    }
}
@media (max-width: 414px) {
    .action-btns-list-wrapper ul li,
    .action-btns-list-wrapper ul li .btn {
        max-width: inherit;
    }
}
.form-control,select.form-control {
    height: 40px !important;
}
.member-list-wrapper {
    margin: 10px 0px;
}
.member-list-wrapper h6 {
    font-size: 12px;
    font-weight: 600;
    color: #101010;
    margin-bottom: 10px;
    text-transform: capitalize;
}
.member-list-wrapper ul li {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}
.member-list-wrapper ul li .member-img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
}
.member-list-wrapper ul li .member-img .member-empty-img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
}
.member-list-wrapper ul li .member-img .member-empty-img h5 {
    font-size: 12px;
    font-weight: bold;
    justify-content: center;
    text-transform: uppercase;
    margin-bottom: 0px;
    color: #ffffff;
}
.member-list-wrapper ul li p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
}
.watchersModal .modal-dialog,
/*.attachmentsModal .modal-dialog,*/
.assigneesModal .modal-dialog,
.verifiersModal .modal-dialog
{
    max-width: 400px;
    margin: auto;
}
.attachment-wrapper h5 {
    color: #494949;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.attachment-control-wrapper input {
    display: none;
}
.attachment-wrapper label {
    color: #494949;
    font-size: 14px;
    font-weight: 400;
}
.attachment-control-wrapper label {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dddddd;
    color: #494949;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    cursor: pointer;
    height: 40px;
}
.attachment-control-wrapper label:hover {
    background-color: #dddddd42;
}
.recently-viewed-list-wrapper h4 {
    color: #494949;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.recently-viewed-list-wrapper ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.recently-viewed-list-wrapper ul li {
    display: flex;
    gap: 5px;
    align-items: flex-start;
}
.recently-viewed-list-wrapper ul li h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #494949;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 5px;
    line-height: 1;
}
.recently-viewed-list-wrapper ul li p {
    font-size: 12px;
    color: #494949a6;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0px;
}
.check-list-wrapper .form-check {
    width: 25px;
    margin-top: 3px;
}
.check-list-wrapper .checklist-name {
    width: 100%;
}
.label-details-wrapper h6 {
    font-size: 12px;
    font-weight: 600;
    color: #494949;
    text-transform: capitalize;
}
.label-details-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.label-details-wrapper .label-list .label-color-btn {
    max-width: 100%;
    min-width: 48px;
}
/* .label-details-wrapper .label-list .label-content-btn {
} */
.label-details-wrapper .label-list .btn {
    height: 32px;
    border-radius: 3px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
}
.label-details-wrapper .label-list .btn i {
    font-weight: 400;
}
.watch-btn {
    height: 32px;
    border-radius: 3px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    margin: 0px;
}

.watch-btn .watch-check {
    display: none;
    color: #ffffff;
    background-color: #0000003d;
    height: 20px;
    width: 20px;
    justify-content: center;
    align-items: center;
}
.watch-btn .watch-check i {
    font-size: 12px !important;
    font-weight: 300;
}
.watch-btn.watch-btn-active .watch-check {
    display: flex;
}
.attachments-list-wrapper {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.attachments-list-wrapper > li {
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0px 1px 5px #0d6efd1a;
    border-radius: 5px;
    padding: 10px;
    flex-grow: 1;
    flex-wrap: wrap;
}
.attachments-list-wrapper > li img {
    width: 112px;
    height: 80px;
    border-radius: 5px;
    border: 1px solid #dddddd;
}
.attachments-list-wrapper > li h6 {
    font-size: 14px;
    font-weight: 700;
    color: #1d2125;
    margin-bottom: 0px;
    text-transform: capitalize;
}
.attachments-list-wrapper > li .btn {
    border-radius: 0px !important;
    background: none !important;
    box-shadow: none !important;
    margin: 0;
    color: #1d2125 !important;
    font-size: 14px;
    margin-left: 10px;
}
.attachments-list-wrapper > li .btn i {
    margin: 0px !important;
}
.attachments-list-wrapper > li .attachments-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.attachments-list-wrapper > li .attachments-actions p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
    color: #494949;
}
.attachments-list-wrapper > li .attachments-actions ul {
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    list-style: none;
    gap: 15px;
}
.attachments-list-wrapper > li .attachments-actions ul li {
    position: relative;
    padding-left: 10px;
}
.attachments-list-wrapper > li .attachments-actions ul li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50px;
    background-color: #494949;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.attachments-list-wrapper > li .attachments-actions ul li a {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
    color: #494949;
    text-decoration: underline;
}
/* Action icon pills (table actions) */
@media (max-width: 576px) {
    .btn-round {
        border: 1px solid #0d6efd;;
        color: #0d6efd;
        background: #fff;
        border-radius: 10px;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* box-shadow: 0 2px 6px rgba(181,130,4,0.25); */
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .btn-round i.material-icons { font-size: 18px; }
    /* .btn-round:hover { background: #fff7e3; box-shadow: 0 4px 10px rgba(181,130,4,0.35); } */
}
.chat-view-list ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.chat-view-list ul li {
    display: flex;
    justify-content: flex-start;
}
.chat-view-list ul li .form-group {
    margin: 0px !important;
}
.chat-view-list ul li .avathar-wrapper {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
.chat-view-list ul li .avathar-wrapper h5 {
    font-size: 12px;
    font-weight: bold;
    justify-content: center;
    text-transform: uppercase;
    margin-bottom: 0px;
    color: #ffffff;
}
.flex-grow-1 {
    flex-grow: 1;
}
.chat-view-list ul li h5 {
    font-size: 14px;
    font-weight: 700;
    color: #1d2125;
    margin-bottom: 0px;
    text-transform: capitalize;
}
.chat-view-list ul li p {
    font-size: 12px;
    font-weight: 400;
    color: #494949;
    margin-bottom: 0px;
    text-transform: capitalize;
}
.chat-view-list ul li .btn {
    height: 30px;
    padding: 5px 10px;
    text-transform: capitalize;
    margin: 0px;
}
.progress-bar-wrapper {
    display: flex;
    gap: 15px;
    align-items: center;
}
.progress-bar-wrapper p {
    font-size: 12px;
    font-weight: 400;
    color: #494949;
    margin-bottom: 0px;
}
.progress-bar-wrapper .progress {
    height: 8px;
    border-radius: 5px;
    margin: 0px;
    flex-grow: 1;
}
.progress-bar-wrapper .progress .progress-bar {
    background-color: #0d6efd;
}
/******* custome checkbox  start *******/
.custom-check-box [type="checkbox"]:focus:checked + label::before,
.custom-check-box [type="checkbox"]:focus:not(:checked) + label::before {
    box-shadow: none !important;
}
.custom-check-box [type="checkbox"]:checked,
.custom-check-box [type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
    border: none;
    display: none;
}
.custom-check-box [type="checkbox"]:checked + label,
.custom-check-box [type="checkbox"]:not(:checked) + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #101010;
    font-size: 14px;
    font-weight: 400;
}
.custom-check-box [type="checkbox"]:checked + label::before,
.custom-check-box [type="checkbox"]:not(:checked) + label::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db;
    box-sizing: border-box;
    border-radius: 4px;
}

.custom-check-box [type="checkbox"]:checked + label::before {
    border-color: #0d6efd;
}
.custom-check-box [type="checkbox"]:checked + label::after,
.custom-check-box [type="checkbox"]:not(:checked) + label::after {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    width: 20px;
    height: 20px;
    background-color: #0d6efd !important;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid #0d6efd;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-image: none !important;
}
.custom-check-box [type="checkbox"]:not(:checked) + label::before {
    background-color: #ffffff !important;
}
.custom-check-box [type="checkbox"]:not(:checked) + label::after {
    background-color: #ffffff !important;
    display: none;
}
.custom-check-box [type="checkbox"]:not(:checked) + label:hover::before {
    border-color: #0d6efd;
    background-color: #e7f1ff !important;
}

.check-list-wrapper {
    list-style: none;
    margin: 0px;
    padding: 0;
}

/*alert*/
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-heading {
    color: inherit;
}

.alert-link {
    font-weight: 500;
}

.alert-dismissible {
    padding-right: 4rem;
}

.alert-dismissible .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
}

.alert-primary {
    color: #114e7e;
    background-color: #d3eafd;
    border-color: #c1e2fc;
}

.alert-primary hr {
    border-top-color: #a9d7fb;
}

.alert-primary .alert-link {
    color: #0b3251;
}

.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.alert-secondary hr {
    border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
    color: #202326;
}

.alert-success {
    color: #285b2a;
    background-color: #dbefdc;
    border-color: #cde9ce;
}

.alert-success hr {
    border-top-color: #bbe1bd;
}

.alert-success .alert-link {
    color: #18381a;
}

.alert-info {
    color: #00626e;
    background-color: #ccf2f6;
    border-color: #b8ecf3;
}

.alert-info hr {
    border-top-color: #a2e6ef;
}

.alert-info .alert-link {
    color: #00353b;
}

.alert-warning {
    color: #857a1f;
    background-color: #fffbd8;
    border-color: #fff9c8;
}

.alert-warning hr {
    border-top-color: #fff6af;
}

.alert-warning .alert-link {
    color: #5c5415;
}

.alert-danger {
    color: #7f231c;
    background-color: #fdd9d7;
    border-color: #fccac7;
}

.alert-danger hr {
    border-top-color: #fbb3af;
}

.alert-danger .alert-link {
    color: #551713;
}

.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.alert-light hr {
    border-top-color: #ececf6;
}

.alert-light .alert-link {
    color: #686868;
}

.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

.alert-dark hr {
    border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
    color: #040505;
}
.alert {
    border: 0;
    border-radius: 3px;
    position: relative;
    padding: 20px 15px;
    line-height: 20px;
}

.alert b {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
}

.alert,
.alert.alert-default {
    background-color: white;
    color: #555555;
}

.alert a,
.alert .alert-link,
.alert.alert-default a,
.alert.alert-default .alert-link {
    color: #555555;
}

.alert.alert-inverse {
    background-color: #292929;
    color: #fff;
}

.alert.alert-inverse a,
.alert.alert-inverse .alert-link {
    color: #fff;
}

.alert.alert-primary {
    background-color: #0d6efd;
    color: #ffffff;
}

/* Legacy Alert Link Styles */
.alert.alert-primary a,
.alert.alert-primary .alert-link,
.alert.alert-success a,
.alert.alert-success .alert-link,
.alert.alert-info a,
.alert.alert-info .alert-link,
.alert.alert-warning a,
.alert.alert-warning .alert-link,
.alert.alert-danger a,
.alert.alert-danger .alert-link,
.alert.alert-rose a,
.alert.alert-rose .alert-link {
    color: #ffffff !important;
    text-decoration: underline;
    font-weight: 600;
}

.alert-default a,
.alert-default .alert-link {
    color: rgba(0, 0, 0, 0.87);
}

.alert span {
    display: block;
    max-width: 89%;
}

.alert.alert-with-icon {
    padding-left: 66px;
}

.alert.alert-with-icon i[data-notify="icon"] {
    font-size: 30px;
    display: block;
    left: 15px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    color: #fff;
}

.alert .close {
    line-height: .5;
}

.alert .close i {
    color: #fff;
    font-size: 11px;
}

.alert i[data-notify="icon"] {
    display: none;
}

.alert .alert-icon {
    display: block;
    float: left;
    margin-right: 1.071rem;
}

.alert .alert-icon i {
    margin-top: -7px;
    top: 5px;
    position: relative;
}

.alert [data-notify="dismiss"] {
    margin-right: 5px;
}
/*input[type=date],input[type=datetime-local],input[type=month],input[type=time] {*/
/*    -webkit-appearance: listbox*/
/*}*/

/* ---------------- Utility: hide on mobile only -------------------- */
@media (max-width: 576px) {
    .d-none-mob {
        display: none !important;
    }
}
@media (max-width: 576px) {
    .d-only-mob {
        display: block !important;
    }
}
/* --------------- End Utility ------------------------------------- */

/* Action icon pills (table actions) */
@media (max-width: 576px) {
    .btn-round {
        border: 1px solid #0d6efd;;
        color: #0d6efd;
        background: #fff;
        border-radius: 10px;
        padding: 5px;
        align-items: center;
        box-shadow: 0 14px 26px -12px hsla(0, 0%, 60%, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px hsla(0, 0%, 60%, .2);
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .btn-round i.material-icons { 
        font-size: 18px; 
        color: #0d6efd;
    }
    .btn-round:hover { 
        /* background: #fff7e3;  */
        box-shadow: 0 14px 26px -12px hsla(0, 0%, 60%, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px hsla(0, 0%, 60%, .2);
     }
    /* .btn-round:hover { background: #fff7e3; box-shadow: 0 4px 10px rgba(181,130,4,0.35); } */
}

/* ============================================================
   Modern SweetAlert2 Customization
   ============================================================ */

/* Modal Container - Enhanced backdrop */
.swal2-container {
    z-index: 9999;
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Main Popup - Modern card design */
.swal2-popup {
    border-radius: 20px !important;
    padding: 2.5rem 2rem 2rem !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 
                0 10px 30px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    animation: swalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Force white background on all SweetAlert components */
.swal2-popup,
.swal2-modal,
.swal2-show {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

@keyframes swalSlideIn {
    from {
        transform: scale(0.9) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Icon Container - Modern styling */
.swal2-icon {
    margin: 1.5rem auto 1.5rem !important;
    border-width: 5px !important;
    width: 90px !important;
    height: 90px !important;
    position: relative;
}

/* Warning Icon - Enhanced */
.swal2-icon.swal2-warning {
    border-color: #ff9800 !important;
    color: #ff9800 !important;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    box-shadow: 0 8px 24px rgba(255, 152, 0, 0.25);
}

.swal2-icon.swal2-warning .swal2-icon-content {
    font-size: 3.5rem !important;
    font-weight: 700;
}

/* Success Icon - Enhanced */
.swal2-icon.swal2-success {
    border-color: #4caf50 !important;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.25);
}

.swal2-success-ring {
    border: 5px solid rgba(76, 175, 80, 0.3) !important;
}

.swal2-success-line-tip,
.swal2-success-line-long {
    background-color: #4caf50 !important;
}

/* Error Icon - Enhanced */
.swal2-icon.swal2-error {
    border-color: #f44336 !important;
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    box-shadow: 0 8px 24px rgba(244, 67, 54, 0.25);
}

.swal2-x-mark-line-left,
.swal2-x-mark-line-right {
    background-color: #f44336 !important;
}

/* Info Icon - Enhanced */
.swal2-icon.swal2-info {
    border-color: #2196f3 !important;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.25);
}

.swal2-icon.swal2-info .swal2-icon-content {
    color: #2196f3 !important;
}

/* Question Icon - Enhanced */
.swal2-icon.swal2-question {
    border-color: #0d6efd !important;
    background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
    box-shadow: 0 8px 24px rgba(13, 110, 253, 0.25);
}

.swal2-icon.swal2-question .swal2-icon-content {
    color: #0d6efd !important;
}

/* Title - Modern typography */
.swal2-title {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin: 1rem 0 0.75rem !important;
    padding: 0 1rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px;
}

/* Force dark text color on white background */
.swal2-title,
.swal2-html-container,
.swal2-content {
    color: #333333 !important;
}

/* HTML Content / Description */
.swal2-html-container {
    font-size: 1rem !important;
    color: #546e7a !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 0.5rem 0 1.5rem !important;
    padding: 0 1rem !important;
}

/* Actions Container */
.swal2-actions {
    margin: 1.5rem 0 0 !important;
    padding: 0 !important;
    gap: 1rem !important;
    flex-wrap: wrap;
    justify-content: center !important;
}

/* Confirm Button - Modern green design */
.swal2-confirm {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.875rem 2.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.35),
                0 4px 12px rgba(76, 175, 80, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    min-width: 140px;
}

.swal2-confirm:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(76, 175, 80, 0.4),
                0 6px 16px rgba(76, 175, 80, 0.3) !important;
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%) !important;
}

.swal2-confirm:active {
    transform: translateY(0) !important;
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.3) !important;
}

.swal2-confirm:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3),
                0 8px 20px rgba(76, 175, 80, 0.35) !important;
}

/* Cancel Button - Modern red/gray design */
.swal2-cancel {
    background: linear-gradient(135deg, #f44336 0%, #e53935 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.875rem 2.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 8px 20px rgba(244, 67, 54, 0.3),
                0 4px 12px rgba(244, 67, 54, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
    min-width: 140px;
}

.swal2-cancel:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(244, 67, 54, 0.35),
                0 6px 16px rgba(244, 67, 54, 0.25) !important;
    background: linear-gradient(135deg, #e53935 0%, #d32f2f 100%) !important;
}

.swal2-cancel:active {
    transform: translateY(0) !important;
    box-shadow: 0 6px 16px rgba(244, 67, 54, 0.25) !important;
}

.swal2-cancel:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.25),
                0 8px 20px rgba(244, 67, 54, 0.3) !important;
}

/* Deny Button */
.swal2-deny {
    background: linear-gradient(135deg, #ff9800 0%, #fb8c00 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.875rem 2.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 8px 20px rgba(255, 152, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.swal2-deny:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(255, 152, 0, 0.35) !important;
}

/* Close Button */
.swal2-close {
    color: #90a4ae !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    top: 1rem !important;
    right: 1rem !important;
}

.swal2-close:hover {
    color: #546e7a !important;
    background: rgba(0, 0, 0, 0.05) !important;
    transform: rotate(90deg);
}

.swal2-close:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(144, 164, 174, 0.3) !important;
}

/* Input Fields */
.swal2-input,
.swal2-textarea {
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    padding: 0.875rem 1rem !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1),
                0 4px 12px rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
    background: #ffffff !important;
}

/* Validation Message */
.swal2-validation-message {
    background: #ffebee !important;
    color: #c62828 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    margin-top: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-left: 4px solid #f44336 !important;
}

/* Progress Steps */
.swal2-progress-steps {
    margin: 0 0 1.5rem !important;
}

.swal2-progress-step {
    background: #e0e0e0 !important;
    color: #757575 !important;
    font-weight: 600 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.swal2-progress-step.swal2-active-progress-step {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

.swal2-progress-step-line {
    background: #e0e0e0 !important;
}

/* Timer Progress Bar */
.swal2-timer-progress-bar {
    background: rgba(0, 0, 0, 0.2) !important;
    height: 4px !important;
}

.swal2-timer-progress-bar-container {
    height: 4px !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Loading State */
.swal2-loading .swal2-actions {
    opacity: 0.4;
}

.swal2-loader {
    border-color: #2563eb transparent #2563eb transparent !important;
    border-width: 3px !important;
}

/* ============================================================
   MODERN TOAST NOTIFICATIONS - Enhanced Design
   ============================================================ */

/* Base Toast Container */
.alert {
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: currentColor;
    opacity: 0.8;
}

.alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Success Toast - Modern Green */
.alert.alert-success,
.alert-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid #047857 !important;
}

.alert.alert-success::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.alert.alert-success i {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 24px !important;
    vertical-align: middle;
    margin-right: 8px;
}

.alert.alert-success .close {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.alert.alert-success .close:hover {
    opacity: 1;
}

/* Error/Danger Toast - Modern Red */
.alert.alert-danger,
.alert-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid #b91c1c !important;
}

.alert.alert-danger::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.alert.alert-danger i {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 24px !important;
    vertical-align: middle;
    margin-right: 8px;
}

.alert.alert-danger .close {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.alert.alert-danger .close:hover {
    opacity: 1;
}

/* Warning Toast - Modern Amber */
.alert.alert-warning,
.alert-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid #b45309 !important;
}

.alert.alert-warning::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.alert.alert-warning i {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 24px !important;
    vertical-align: middle;
    margin-right: 8px;
}

/* Info Toast - Modern Blue */
.alert.alert-info,
.alert-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid #1d4ed8 !important;
}

.alert.alert-info::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.alert.alert-info i {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 24px !important;
    vertical-align: middle;
    margin-right: 8px;
}

/* Primary Toast */
.alert.alert-primary,
.alert-primary {
    background: linear-gradient(135deg, #0d6efd 0%, color-mix(in srgb, #0d6efd 85%, black) 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid color-mix(in srgb, #0d6efd 70%, black) !important;
}

.alert.alert-primary::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.alert.alert-primary i {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Rose Toast */
.alert.alert-rose,
.alert-rose {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    color: #ffffff !important;
    border-left: 4px solid #be185d !important;
}

.alert.alert-rose::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.alert.alert-rose i {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* jQuery Notify Plugin Styles Override */
[data-notify="container"] {
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 45px 14px 20px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    min-width: 300px !important;
    max-width: 500px !important;
    display: flex !important;
    align-items: center !important;
    position: fixed !important;
    z-index: 6000 !important;
}

[data-notify="container"].alert-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-left: 4px solid #047857 !important;
}

[data-notify="container"].alert-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-left: 4px solid #b91c1c !important;
}

[data-notify="container"].alert-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-left: 4px solid #b45309 !important;
}

[data-notify="container"].alert-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-left: 4px solid #1d4ed8 !important;
}

[data-notify="message"] {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    flex: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

[data-notify="icon"] {
    font-size: 20px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

button[data-notify="dismiss"] {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ffffff !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    padding: 4px !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

button[data-notify="dismiss"]:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
}

/* Animation for toast entry */
@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

[data-notify="container"] {
    animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive Design */
@media (max-width: 576px) {
    [data-notify="container"] {
        min-width: 280px !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 16px !important;
    }
    
    .alert {
        font-size: 0.875rem !important;
        padding: 14px 16px !important;
    }
    
    [data-notify="icon"],
    .alert i {
        font-size: 20px !important;
    }
}

/* Toast Notifications */
.swal2-toast {
    border-radius: 12px !important;
    padding: 1rem 1.5rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.swal2-toast .swal2-title {
    font-size: 1rem !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

.swal2-toast .swal2-icon {
    width: 32px !important;
    height: 32px !important;
    margin: 0 1rem 0 0 !important;
}

/* Responsive Design */
@media (max-width: 576px) {
    .swal2-popup {
        width: calc(100% - 2rem) !important;
        padding: 2rem 1.5rem 1.5rem !important;
        border-radius: 16px !important;
    }

    .swal2-title {
        font-size: 1.5rem !important;
    }

    .swal2-html-container {
        font-size: 0.938rem !important;
    }

    .swal2-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .swal2-confirm,
    .swal2-cancel,
    .swal2-deny {
        width: 100% !important;
        margin: 0 !important;
    }

    .swal2-icon {
        width: 70px !important;
        height: 70px !important;
        margin: 1rem auto !important;
    }
}

/* Force Light Theme Always - Override Dark Mode */
@media (prefers-color-scheme: dark) {
    .swal2-popup {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #333333 !important;
    }

    .swal2-title {
        color: #2c3e50 !important;
    }

    .swal2-html-container {
        color: #546e7a !important;
    }

    .swal2-input,
    .swal2-textarea {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-color: #e0e0e0 !important;
        color: #333333 !important;
    }

    .swal2-close {
        color: #90a4ae !important;
    }

    .swal2-close:hover {
        color: #546e7a !important;
        background: rgba(0, 0, 0, 0.05) !important;
    }
}

/* Animation enhancements */
@keyframes swalPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.swal2-icon.swal2-warning {
    animation: swalPulse 2s ease-in-out infinite;
}

/* ============================================================
   FINAL OVERRIDE - Force White Theme Always
   ============================================================ */
.swal2-popup,
.swal2-modal,
div:where(.swal2-container) div:where(.swal2-popup) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

.swal2-popup *,
.swal2-title,
.swal2-html-container,
.swal2-content {
    color: #333333 !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* ============================================================
   End Modern SweetAlert2 Customization
   ============================================================ */

/* ============================================================
   Global Dropdown Fix - Ensure Dropdowns Are Fully Visible
   ============================================================ */

/* Fix modal to allow dropdowns but constrain them properly */
.modal-dialog {
    overflow: visible !important;
}

.modal-content {
    overflow: visible !important;
}

.modal-body {
    overflow-y: auto !important;
    overflow-x: visible !important;
    max-height: calc(100vh - 200px);
}

.modal-header {
    overflow: visible !important;
}

.modal-footer {
    overflow: visible !important;
}

/* Ensure bootstrap-select dropdowns appear above modal */
.bootstrap-select .dropdown-menu {
    z-index: 10060 !important;
    position: absolute !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

.bootstrap-select.bs-container {
    position: absolute !important;
    z-index: 10060 !important;
}

.bootstrap-select.bs-container .dropdown-menu {
    z-index: 10060 !important;
}

/* Fix bootstrap-select inside modals specifically */
.modal .bootstrap-select .dropdown-menu {
    position: absolute !important;
    z-index: 10060 !important;
    will-change: transform;
}

/* Make bootstrap-select container use body for better positioning */
.modal .bootstrap-select {
    z-index: auto;
}

.modal .bootstrap-select.open {
    z-index: 10055;
}

/* Fix for select2 dropdowns in modals */
.select2-container {
    z-index: 10050 !important;
}

.select2-dropdown {
    z-index: 10055 !important;
}

.select2-container--open {
    z-index: 10055 !important;
}

/* Ensure regular dropdown menus are visible in modals */
.dropdown-menu {
    z-index: 10050 !important;
}

.modal .dropdown-menu {
    z-index: 10060 !important;
    position: absolute !important;
}

/* Fix for modal backdrop to not interfere with dropdowns */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

/* Specific fix for forms inside modals */
.modal .form-group,
.modal .row {
    overflow: visible !important;
    position: relative;
}

.modal .col-md-12,
.modal .col-12,
.modal .col-sm-9 {
    overflow: visible !important;
}

/* Fix for table cells with dropdowns in modals */
.modal .table td,
.modal .table th {
    overflow: visible !important;
}

/* Prevent scrollable modals from clipping dropdowns */
.modal-dialog-scrollable {
    overflow: visible !important;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto !important;
    overflow-x: visible !important;
}

.modal-dialog-scrollable .modal-content {
    overflow: visible !important;
    max-height: calc(100vh - 100px);
}

/* Bootstrap select specific fixes */
.bootstrap-select .dropdown-toggle {
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/* Ensure dropdown menu inner content scrolls properly */
.bootstrap-select .dropdown-menu .inner {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* Fix positioning for dropdowns near bottom of viewport */
.modal .bootstrap-select.dropup .dropdown-menu {
    bottom: 100%;
    top: auto;
    margin-bottom: 2px;
}

/* Bootstrap select dropdowns should stay within bounds */
body > .bootstrap-select.bs-container .dropdown-menu {
    position: fixed !important;
    z-index: 10060 !important;
}

/* ============================================================
   End Global Dropdown Fix
   ============================================================ */

/* ============================================================
   Modern Light Modal UI
   Clean, minimal, and elegant modal styling
   ============================================================ */

/* Modern Modal Backdrop - Lighter, cleaner blur effect */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.modal-backdrop.show {
    opacity: 1 !important;
}

/* Modal Container Animation */
.modal.fade .modal-dialog {
    transform: translateY(-30px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* Modern Modal Content - Clean white with subtle shadow */
.modal-content {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.08),
        0 20px 25px -5px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.03) !important;
}

/* Modern Modal Header - Light and minimal */
.modal-header {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 20px 24px !important;
    border-radius: 16px 16px 0 0 !important;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

/* Modal Title - Clean typography */
.modal-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

/* Modern Close Button */
.modal-header .close,
.modal-header .btn-close,
.modal-header [data-dismiss="modal"],
.modal-header [data-bs-dismiss="modal"] {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: #f5f5f7 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
    position: relative;
    font-size: 1.25rem !important;
    color: #6b7280 !important;
    line-height: 1 !important;
}

.modal-header .close:hover,
.modal-header .btn-close:hover,
.modal-header [data-dismiss="modal"]:hover,
.modal-header [data-bs-dismiss="modal"]:hover {
    background: #e5e5ea !important;
    color: #374151 !important;
    transform: scale(1.05);
}

.modal-header .close:active,
.modal-header .btn-close:active {
    transform: scale(0.95);
}

.modal-header .close span {
    font-size: 1.5rem;
    line-height: 1;
}

/* Modern Modal Body */
.modal-body {
    padding: 24px !important;
    background: #ffffff !important;
    color: #374151;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Form elements inside modal */
.modal-body .form-control {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 0.9375rem !important;
    transition: all 0.2s ease !important;
    color: #1f2937 !important;
}

.modal-body .form-control:focus {
    background: #ffffff !important;
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
    outline: none !important;
}

.modal-body .form-control::placeholder {
    color: #9ca3af;
}

/* Labels in modal */
.modal-body label,
.modal-body .form-label {
    font-weight: 500;
    color: #4b5563;
    font-size: 0.875rem;
    margin-bottom: 6px;
}

/* Select elements in modal */
.modal-body select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    background-size: 12px !important;
    padding-right: 44px !important;
}

/* Modern Modal Footer */
.modal-footer {
    background: #fafafa !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 16px 24px !important;
    border-radius: 0 0 16px 16px !important;
    gap: 12px;
}

/* Modern Buttons in Modal Footer */
.modal-footer .btn {
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    transition: all 0.2s ease !important;
    border: none !important;
    min-width: 100px;
}

.modal-footer .btn-secondary,
.modal-footer .btn-default,
.modal-footer .btn-light,
.modal-footer [data-dismiss="modal"].btn,
.modal-footer [data-bs-dismiss="modal"].btn {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-default:hover,
.modal-footer .btn-light:hover,
.modal-footer [data-dismiss="modal"].btn:hover,
.modal-footer [data-bs-dismiss="modal"].btn:hover {
    background: #e5e7eb !important;
    color: #1f2937 !important;
    transform: translateY(-1px);
}

.modal-footer .btn-primary {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-footer .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.modal-footer .btn:active {
    transform: translateY(0) !important;
}

/* Larger Modal Sizes - Maintain consistency */
.modal-lg .modal-content,
.modal-xl .modal-content {
    border-radius: 20px !important;
}

.modal-lg .modal-header,
.modal-xl .modal-header {
    border-radius: 20px 20px 0 0 !important;
    padding: 24px 28px !important;
}

.modal-lg .modal-body,
.modal-xl .modal-body {
    padding: 28px !important;
}

.modal-lg .modal-footer,
.modal-xl .modal-footer {
    border-radius: 0 0 20px 20px !important;
    padding: 20px 28px !important;
}

/* Small Modal */
.modal-sm .modal-content {
    border-radius: 14px !important;
}

.modal-sm .modal-header {
    border-radius: 14px 14px 0 0 !important;
    padding: 16px 20px !important;
}

.modal-sm .modal-body {
    padding: 20px !important;
}

.modal-sm .modal-footer {
    border-radius: 0 0 14px 14px !important;
    padding: 14px 20px !important;
}

/* Modal with colored header variant */
.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-info,
.modal-header.bg-warning,
.modal-header.bg-danger {
    border-bottom: none !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-success .modal-title,
.modal-header.bg-info .modal-title,
.modal-header.bg-danger .modal-title {
    color: #ffffff !important;
}

.modal-header.bg-warning .modal-title {
    color: #1a1a2e !important;
}

.modal-header.bg-primary .close,
.modal-header.bg-success .close,
.modal-header.bg-info .close,
.modal-header.bg-danger .close,
.modal-header.bg-primary .btn-close,
.modal-header.bg-success .btn-close,
.modal-header.bg-info .btn-close,
.modal-header.bg-danger .btn-close {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.modal-header.bg-primary .close:hover,
.modal-header.bg-success .close:hover,
.modal-header.bg-info .close:hover,
.modal-header.bg-danger .close:hover,
.modal-header.bg-primary .btn-close:hover,
.modal-header.bg-success .btn-close:hover,
.modal-header.bg-info .btn-close:hover,
.modal-header.bg-danger .btn-close:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Scrollable Modal Body Styling */
.modal-dialog-scrollable .modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Centered Modal Enhancement */
.modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
}

/* Cards inside Modal */
.modal-body .card {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* Tables inside Modal */
.modal-body .table {
    border-radius: 10px;
    overflow: hidden;
}

.modal-body .table thead th {
    background: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-weight: 600;
    color: #4b5563;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.modal-body .table td {
    border-color: #f3f4f6 !important;
    padding: 12px 16px;
}

/* Alert/Notice boxes in Modal */
.modal-body .alert {
    border-radius: 10px !important;
    border: none !important;
    padding: 14px 18px !important;
}

/* Loading state for modal */
.modal-body.loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fullscreen modal adjustments */
.modal-fullscreen .modal-content {
    border-radius: 0 !important;
}

.modal-fullscreen .modal-header {
    border-radius: 0 !important;
}

.modal-fullscreen .modal-footer {
    border-radius: 0 !important;
}

/* Animation for modal content entrance */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal.show .modal-body > *:first-child {
    animation: modalSlideIn 0.3s ease-out 0.1s both;
}

/* Focus trap indicator for accessibility */
.modal:focus-visible {
    outline: none;
}

.modal-content:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* ============================================================
   End Modern Light Modal UI
   ============================================================ */

/* ============================================================
   Improved International Telephone Input Styling
   ============================================================ */

/* Country list dropdown improvements */
.intl-tel-input .country-list {
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e0e0e0 !important;
    max-height: 280px !important;
    z-index: 10060 !important;
    overflow-x: hidden !important;
    width: 300px !important;
    min-width: 300px !important;
}

/* Individual country item styling */
.intl-tel-input .country-list .country {
    padding: 10px 15px !important;
    font-size: 14px !important;
    transition: background-color 0.15s ease !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.intl-tel-input .country-list .country:last-child {
    border-bottom: none !important;
}

/* Country name styling */
.intl-tel-input .country-list .country-name {
    color: #333 !important;
    font-weight: 500 !important;
    margin-right: 8px !important;
}

/* Dial code styling */
.intl-tel-input .country-list .country .dial-code {
    color: #888 !important;
    font-weight: 400 !important;
}

/* Hover state */
.intl-tel-input .country-list .country:hover,
.intl-tel-input .country-list .country.highlight {
    background-color: #f8f9fa !important;
}

/* Active/selected state */
.intl-tel-input .country-list .country.active {
    background-color: #e3f2fd !important;
}

/* Flag styling in list */
.intl-tel-input .country-list .flag {
    margin-right: 10px !important;
    transform: scale(1.2);
}

/* Selected flag container */
.intl-tel-input .selected-flag {
    border-radius: 6px 0 0 6px !important;
    background-color: #f8f9fa !important;
    padding: 0 8px 0 10px !important;
    width: 52px !important;
}

.intl-tel-input .selected-flag:hover {
    background-color: #e9ecef !important;
}

/* Arrow indicator */
.intl-tel-input .selected-flag .arrow {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #666 !important;
    right: 6px !important;
}

/* Input field with tel input */
.intl-tel-input input,
.intl-tel-input input[type=text],
.intl-tel-input input[type=tel] {
    padding-left: 58px !important;
    border-radius: 6px !important;
}

/* Modal specific - ensure dropdown appears above modal */
.modal .intl-tel-input .country-list {
    z-index: 10070 !important;
}

/* Scrollbar styling for country list */
.intl-tel-input .country-list::-webkit-scrollbar {
    width: 6px;
}

.intl-tel-input .country-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.intl-tel-input .country-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.intl-tel-input .country-list::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Country search input styling */
.intl-tel-input .country-list .country-search {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1;
    display: block !important;
}

.intl-tel-input .country-list .country-search::before,
.intl-tel-input .country-list .country-search .flag,
.intl-tel-input .country-list .country-search .iti-flag {
    display: none !important;
}

.intl-tel-input .country-list .country-search input {
    width: 100%;
    padding: 8px 12px !important;
    padding-left: 12px !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin: 0 !important;
    text-indent: 0 !important;
}

.intl-tel-input .country-list .country-search input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.intl-tel-input .country-list .country-search input::placeholder {
    color: #aaa;
}

/* Hide countries that don't match search */
.intl-tel-input .country-list .country.search-hidden {
    display: none !important;
}

/* Show dial code next to country name */
.intl-tel-input .country-list .country .dial-code {
    color: #666 !important;
    font-size: 13px !important;
    margin-left: auto !important;
    padding-left: 10px !important;
}

/* Flex layout for country items */
.intl-tel-input .country-list .country {
    display: flex !important;
    align-items: center !important;
}

.intl-tel-input .country-list .country .country-name {
    flex: 1 !important;
}

/* ============================================================
   End International Telephone Input Styling
   ============================================================ */

/* ============================================================
   Modern Dropdown Menu Styling
   ============================================================ */

/* Base dropdown menu styles */
.dropdown-menu {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    min-width: 180px !important;
    background: #fff !important;
    animation: dropdownSlideIn 0.2s ease-out;
    overflow: hidden;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown items */
.dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    margin: 2px 0 !important;
    background: transparent !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: #e7f1ff !important;
    color: #0d6efd !important;
    transform: none;
}

.dropdown-menu .dropdown-item:active {
    transform: scale(0.98);
}

/* Icons in dropdown items */
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item .material-icons {
    font-size: 20px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:hover .material-icons,
.dropdown-menu .dropdown-item:focus i,
.dropdown-menu .dropdown-item:focus .material-icons {
    color: #0d6efd !important;
}

/* Font Awesome icons */
.dropdown-menu .dropdown-item .fa {
    font-size: 16px !important;
    width: 24px !important;
    text-align: center !important;
    color: #6b7280 !important;
    transition: all 0.2s ease !important;
}

.dropdown-menu .dropdown-item:hover .fa,
.dropdown-menu .dropdown-item:focus .fa {
    color: #0d6efd !important;
}

/* Dropdown divider */
.dropdown-menu .dropdown-divider {
    margin: 8px 0 !important;
    border-color: #e5e7eb !important;
}

/* More icon trigger */
.more-icon {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #6b7280;
}

.more-icon:hover {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

/* Dropdown header */
.dropdown-menu .dropdown-header {
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #9ca3af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Danger/Delete item styling */
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item[ng-click*="delete"],
.dropdown-menu .dropdown-item:has(.material-icons:contains("delete")) {
    color: #ef4444 !important;
}

.dropdown-menu .dropdown-item.text-danger i,
.dropdown-menu .dropdown-item.text-danger .material-icons,
.dropdown-menu .dropdown-item[ng-click*="delete"] i,
.dropdown-menu .dropdown-item[ng-click*="delete"] .material-icons {
    color: #ef4444 !important;
}

.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item[ng-click*="delete"]:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
}

.dropdown-menu .dropdown-item.text-danger:hover i,
.dropdown-menu .dropdown-item.text-danger:hover .material-icons,
.dropdown-menu .dropdown-item[ng-click*="delete"]:hover i,
.dropdown-menu .dropdown-item[ng-click*="delete"]:hover .material-icons {
    color: #fff !important;
}

/* Table dropdown specific adjustments */
.table .dropdown-menu,
tbody .dropdown-menu {
    min-width: 160px !important;
}

/* Dropup animation */
.dropup .dropdown-menu {
    animation: dropdownSlideUp 0.2s ease-out;
}

@keyframes dropdownSlideUp {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   End Modern Dropdown Menu Styling
   ============================================================ */

/* ============================================================
   Sidebar User Dropdown Menu
   ============================================================ */
.sidebar .user .user-info.dropdown {
    position: relative;
}

.sidebar .user .user-info .dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar .user .user-info .dropdown-toggle::after {
    display: none; /* Hide default Bootstrap caret, using custom .caret */
}

.sidebar .user .user-info .dropdown-toggle > span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.sidebar .user .user-info .caret {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: 5px;
    flex-shrink: 0;
}

.sidebar .user .user-dropdown-menu {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 8px 0;
    margin-left: 10px;
    z-index: 1050;
}

.sidebar .user .user-dropdown-menu .dropdown-item {
    color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.sidebar .user .user-dropdown-menu .dropdown-item:hover,
.sidebar .user .user-dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sidebar .user .user-dropdown-menu .dropdown-item .sidebar-mini {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    opacity: 0.7;
}

.sidebar .user .user-dropdown-menu .dropdown-item .sidebar-normal {
    flex: 1;
}

.sidebar .user .user-dropdown-menu .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Responsive: On smaller screens, dropdown appears below */
@media (max-width: 991px) {
    .sidebar .user .user-dropdown-menu {
        left: 0;
        top: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}
/* ============================================================
   End Sidebar User Dropdown Menu
   ============================================================ */

/* ============================================================
   Modern Form Design System
   Clean, minimal, and professional form styling
   ============================================================ */

/* Form Group Container */
.form-group {
    margin-bottom: 1rem;
    position: relative;
}

/* Modern Label Styling */
.form-group label,
.col-form-label,
label:not(.btn):not(.custom-control-label):not(.form-check-label) {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: inline-block;
    letter-spacing: 0.3px;
    text-transform: none;
}

/* Required field indicator */
.form-group label.required::after,
label.required::after {
    content: " *";
    color: #ef4444;
    font-weight: 700;
}

/* Modern Input/Textarea/Select Base Styles */
.form-control {
    height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #1f2937;
    background-color: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-control::placeholder {
    color: #9ca3af;
    font-weight: 400;
    opacity: 1;
}

/* Input Focus State */
.form-control:focus {
    border-color: #0d6efd;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15),
                0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}

/* Input Hover State */
.form-control:hover:not(:focus):not(:disabled):not([readonly]) {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

/* Disabled/Readonly State */
.form-control:disabled,
.form-control[readonly] {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Textarea Specific */
textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: 14px 16px;
    resize: vertical;
    line-height: 1.6;
}

/* Modern Select Styling */
select.form-control {
    height: 44px !important;
    padding-right: 40px !important;
    cursor: pointer;
    /* Remove default arrow */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* Remove any background images */
    background-image: none !important;
    background: #fff !important;
    position: relative;
}

/* Create arrow using wrapper - add .select-wrapper class to parent div */
.select-wrapper {
    position: relative;
    display: block;
}

.select-wrapper::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    z-index: 1;
}

/* For selects without wrapper - use outline arrow style */
select.form-control:not([multiple]) {
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    background-size: 12px !important;
}

/* Hide default arrow in IE */
select.form-control::-ms-expand {
    display: none !important;
}

/* Small Input Variant */
.form-control-sm {
    height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
}

/* Large Input Variant */
.form-control-lg {
    height: 52px;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 12px;
}

/* Input with Icon */
.input-icon-wrapper {
    position: relative;
}

.input-icon-wrapper .form-control {
    padding-left: 44px;
}

.input-icon-wrapper .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 18px;
    pointer-events: none;
    transition: color 0.25s ease;
}

.input-icon-wrapper .form-control:focus + .input-icon,
.input-icon-wrapper .form-control:focus ~ .input-icon {
    color: #0d6efd;
}

/* Input with Right Icon (Search, Clear, etc.) */
.input-icon-wrapper.icon-right .form-control {
    padding-left: 16px;
    padding-right: 44px;
}

.input-icon-wrapper.icon-right .input-icon {
    left: auto;
    right: 14px;
}

/* Validation States */
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #10b981;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 44px;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #ef4444;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 44px;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

/* Validation Messages */
.valid-feedback {
    display: none;
    font-size: 12px;
    color: #10b981;
    margin-top: 6px;
    font-weight: 500;
}

.invalid-feedback {
    display: none;
    font-size: 12px;
    color: #ef4444;
    margin-top: 6px;
    font-weight: 500;
}

.was-validated .form-control:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback {
    display: block;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Help Text */
.form-text,
.help-block {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
    line-height: 1.5;
}

/* Modern Input Group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-prepend,
.input-group-append {
    display: flex;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    white-space: nowrap;
    background-color: #f9fafb;
    border: 1.5px solid #e5e7eb;
    transition: all 0.25s ease;
}

.input-group-prepend .input-group-text {
    border-right: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.input-group-append .input-group-text {
    border-left: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.input-group:focus-within .input-group-text {
    border-color: #0d6efd;
    color: #0d6efd;
}

/* Modern Checkbox Styling */
/* Hide native checkbox - universal approach */
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

/* Style the custom checkbox indicator (.form-check-sign .check) */
.form-check .form-check-sign .check {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    background-color: #ffffff;
    position: relative;
    vertical-align: middle;
    margin-right: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.form-check .form-check-sign .check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
}

/* Checked state */
.form-check input[type="checkbox"]:checked + .form-check-sign .check,
.form-check input[type="checkbox"]:checked ~ .form-check-sign .check,
.form-check-label input[type="checkbox"]:checked + .form-check-sign .check,
.form-check-label input[type="checkbox"]:checked ~ .form-check-sign .check {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check input[type="checkbox"]:checked + .form-check-sign .check::after,
.form-check input[type="checkbox"]:checked ~ .form-check-sign .check::after,
.form-check-label input[type="checkbox"]:checked + .form-check-sign .check::after,
.form-check-label input[type="checkbox"]:checked ~ .form-check-sign .check::after {
    transform: rotate(45deg) scale(1);
}

/* Hover state */
.form-check .form-check-sign:hover .check,
.form-check-label:hover .form-check-sign .check {
    border-color: #0d6efd;
}

/* Focus state */
.form-check input[type="checkbox"]:focus + .form-check-sign .check,
.form-check input[type="checkbox"]:focus ~ .form-check-sign .check {
    box-shadow: 0 0 0 3px color-mix(in srgb, #0d6efd 20%, transparent);
}

/* Form check label styling */
.form-check-label {
    position: relative;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
    font-weight: 400;
    line-height: 22px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    padding-left: 0;
}

/* Inline form checks */
.form-check.form-check-inline,
.form-check-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 16px;
}

/* Form check container */
.form-check {
    position: relative;
    padding-left: 0;
    margin-bottom: 8px;
    min-height: 22px;
    display: flex;
    align-items: center;
}

/* Modern Radio Button Styling */
.form-check .form-check-sign .circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    background-color: #ffffff;
    position: relative;
    vertical-align: middle;
    margin-right: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.form-check .form-check-sign .circle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: transform 0.2s ease;
}

/* Radio checked state */
.form-check input[type="radio"]:checked + .form-check-sign .circle,
.form-check input[type="radio"]:checked ~ .form-check-sign .circle,
.form-check-label input[type="radio"]:checked + .form-check-sign .circle,
.form-check-label input[type="radio"]:checked ~ .form-check-sign .circle {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check input[type="radio"]:checked + .form-check-sign .circle::after,
.form-check input[type="radio"]:checked ~ .form-check-sign .circle::after,
.form-check-label input[type="radio"]:checked + .form-check-sign .circle::after,
.form-check-label input[type="radio"]:checked ~ .form-check-sign .circle::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Modern Switch/Toggle */
.custom-switch {
    padding-left: 48px;
}

.custom-switch .custom-control-label::before {
    left: -48px;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background-color: #e5e7eb;
    border: none;
    transition: all 0.3s ease;
}

.custom-switch .custom-control-label::after {
    left: -46px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #0d6efd;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(18px);
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.3);
}

/* Modern File Input */
.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 44px;
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 44px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    background-color: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.25s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-weight: 500;
    color: #374151;
    content: "Browse";
    background-color: #f3f4f6;
    border-left: 1.5px solid #e5e7eb;
    border-radius: 0 9px 9px 0;
    transition: all 0.25s ease;
}

.custom-file-input:hover ~ .custom-file-label {
    border-color: #0d6efd;
}

.custom-file-input:hover ~ .custom-file-label::after {
    background-color: #0d6efd;
    color: #ffffff;
}

.custom-file-input:focus ~ .custom-file-label {
    border-color: #0d6efd;
    box-shadow: 0 0 0 4px color-mix(in srgb, #0d6efd 15%, transparent);
}

/* Drag and Drop File Upload Zone */
.file-drop-zone {
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    background-color: #fafafa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-drop-zone:hover,
.file-drop-zone.dragover {
    border-color: #0d6efd;
    background-color: color-mix(in srgb, #0d6efd 5%, transparent);
}

.file-drop-zone .drop-icon {
    font-size: 48px;
    color: #9ca3af;
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.file-drop-zone:hover .drop-icon {
    color: #0d6efd;
}

.file-drop-zone .drop-text {
    font-size: 16px;
    color: #374151;
    font-weight: 500;
    margin-bottom: 8px;
}

.file-drop-zone .drop-subtext {
    font-size: 13px;
    color: #6b7280;
}

/* Modern Select2 Styling */
.select2-container .select2-selection--single {
    height: 44px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    transition: all 0.25s ease !important;
}

.select2-container .select2-selection--single:hover {
    border-color: #0d6efd !important;
    background-color: #e7f1ff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    padding-left: 16px !important;
    color: #1f2937 !important;
    font-size: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6b7280 transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-top: 0 !important;
}

.select2-container--open .select2-selection--single {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, #0d6efd 15%, transparent) !important;
}

.select2-container .select2-selection--multiple {
    min-height: 44px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 4px 8px !important;
    background-color: #ffffff !important;
    transition: all 0.25s ease !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: color-mix(in srgb, #0d6efd 10%, transparent) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    margin: 4px !important;
    color: #0d6efd !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #0d6efd !important;
    margin-right: 6px !important;
    font-weight: 700 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ef4444 !important;
}

.select2-dropdown {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #0d6efd !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15) !important;
}

.select2-results__option {
    padding: 10px 16px !important;
    font-size: 14px !important;
    transition: all 0.15s ease !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: color-mix(in srgb, #0d6efd 10%, transparent) !important;
    color: #0d6efd !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Modern Button Styling */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 10px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    white-space: nowrap;
}

.btn:focus,
.btn.focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Primary Button */
.btn-primary,
.btn-custom {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.9) 0%, rgba(8, 66, 152, 0.9) 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.25);
    backdrop-filter: blur(8px);
}

.btn-primary:hover,
.btn-custom:hover {
    background: linear-gradient(135deg, rgba(13, 110, 253, 1) 0%, rgba(8, 66, 152, 1) 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.35);
}

.btn-primary:active,
.btn-custom:active {
    transform: translateY(0);
}

/* Secondary/Outline Button */
.btn-secondary,
.btn-outline-primary,
.btn-custom-secondary {
    background: rgba(13, 110, 253, 0.08) !important;
    color: #0d6efd !important;
    border: 1px solid rgba(13, 110, 253, 0.4) !important;
    backdrop-filter: blur(6px);
}

.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-custom-secondary:hover {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.25);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Info Button */
.btn-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

.btn-info:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Light Button */
.btn-light {
    background-color: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

.btn-light:hover {
    background-color: #e5e7eb;
    color: #1f2937;
    transform: translateY(-2px);
}

/* Dark Button */
.btn-dark {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    color: #ffffff;
    border-color: transparent;
}

.btn-dark:hover {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 41, 55, 0.4);
}

/* Button Sizes */
.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 8px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 12px;
}

/* Button with Icon */
.btn .material-icons,
.btn i {
    font-size: 18px;
    line-height: 1;
}

.btn-sm .material-icons,
.btn-sm i {
    font-size: 16px;
}

/* Icon-only Button */
.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
}

.btn-icon.btn-sm {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

/* Button Loading State */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spinner 0.6s linear infinite;
}

@keyframes btn-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Button Group */
.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.btn-group .btn:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Modern Card Form */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    background-color: #ffffff;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #f3f5f8 100%);
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 24px;
    font-weight: 600;
    color: #1f2937;
}

.card-body {
    padding: 24px;
}

/* Remove horizontal padding for card-body containing tables */
.card-body:has(.table),
.card-body:has(table) {
    padding-left: 0;
    padding-right: 0;
    padding-top: 24px;
    padding-bottom: 24px;
}

.card-footer {
    background-color: #ffffff;
    border-top: none;
    padding: 16px 24px;
}

/* Form Row Spacing */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
}

/* Floating Labels */
.form-floating {
    position: relative;
}

.form-floating .form-control {
    height: 56px;
    padding: 24px 16px 8px;
}

.form-floating label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 16px;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
    color: #6b7280;
    font-weight: 400;
}

.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Form Section Divider */
.form-section {
    margin-bottom: 32px;
}

.form-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-title .material-icons,
.form-section-title i {
    color: #0d6efd;
    font-size: 20px;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #f3f4f6;
}

.form-actions.centered {
    justify-content: center;
}

.form-actions.spread {
    justify-content: space-between;
}

/* Responsive Form Adjustments */
@media (max-width: 768px) {
    .form-control {
        height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 15px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    .card {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .card-header {
        padding: 16px 18px;
        font-size: 0.95rem;
    }
    
    .card-body {
        padding: 16px;
    }

    .card-footer {
        padding: 12px 16px;
    }
}

/* ============================================================
   End Modern Form Design System
   ============================================================ */

/* ============================================================
   Task Form Custom Styles
   ============================================================ */

/* Disabled Input Forms and Select Styling */
.form-control:disabled,
.form-control[disabled],
.form-control[readonly],
input:disabled,
input[disabled],
textarea:disabled,
textarea[disabled],
select:disabled,
select[disabled] {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Disabled Select2 Styling */
.select2-container.select2-container--disabled .select2-selection--single,
.select2-container.select2-container--disabled .select2-selection--multiple,
.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #dee2e6 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.select2-container--disabled .select2-selection__rendered {
    color: #6c757d !important;
}

/* Select2 Arrow Positioning - Fixed for proper alignment */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    right: 10px !important;
    width: 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6c757d transparent transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    height: 0 !important;
    left: 50% !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
    position: absolute !important;
    top: 50% !important;
    width: 0 !important;
}

/* Select2 for 40px height containers */
.select2-container .select2-selection--single {
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

/* Select2 for 48px height containers (modern forms) */
.modern-task-card .select2-container .select2-selection--single,
.modern-task-card .select2-container .select2-selection--multiple {
    min-height: 48px !important;
}

.modern-task-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
}

.modern-task-card .select2-container .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
}

/* ============================================================
   End Task Form Custom Styles
   ============================================================ */

/* ============================================================
   List Header Wrapper Styles
   Used in: agencies, companies, leads, and other list pages
   ============================================================ */
.list-header,
.client-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.list-header-title,
.client-title {
    flex: 1;
    min-width: 200px;
}

.list-header-actions,
.client-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.list-header-actions .btn,
.client-actions .btn {
    margin: 0 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 576px) {
    .list-header,
    .client-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .list-header-title,
    .client-title {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .list-header-actions,
    .client-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================================
   Toggle Button/Switch Styles
   Used in: agencies, companies, and other list pages
   ============================================================ */
.button-container {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.toggle-button {
    width: 52px;
    height: 28px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.toggle-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 50px;
    opacity: 0.5;
}

.toggle-button.active {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    box-shadow: 0 2px 12px rgba(13, 110, 253, 0.4), 0 0 0 4px rgba(13, 110, 253, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.toggle-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-button.active:hover {
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.5), 0 0 0 4px rgba(13, 110, 253, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-slider {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
}

.toggle-slider.active {
    left: 27px;
    box-shadow: 0 3px 12px rgba(13, 110, 253, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/* ============================================================
   Delete Button Style
   Used in: list pages for delete actions
   ============================================================ */
.btn-delete,
.btn-custom.btn-delete {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.btn-delete:hover,
.btn-custom.btn-delete:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #fff !important;
}

/* Calender */
.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 22em;
}
/* End Calender */