/* AdminLTE 4 - sidebar breakpoint for push-menu (fixes getComputedStyle error) */
.sidebar-expand-md::before {
    content: "992px";
    display: none;
}

/* AdminLTE 4 - small-box gradient backgrounds */
.small-box.bg-gradient-indigo {
    background: linear-gradient(135deg, #3a57e8 0%, #6c5ce7 100%) !important;
}

.small-box.bg-gradient-teal {
    background: linear-gradient(135deg, #0cad8f 0%, #10b981 100%) !important;
}

.small-box.bg-gradient-cyan {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important;
}

.small-box.bg-gradient-purple {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
}

.small-box.bg-gradient-orange {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
}

.small-box.bg-gradient-rose {
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%) !important;
}

/* AdminLTE 4 - small box text and footer colors */
.small-box[class*="bg-gradient-"] .inner,
.small-box[class*="bg-gradient-"] .small-box-footer,
.small-box[class*="bg-gradient-"] .icon {
    color: #fff;
}

.small-box .small-box-footer {
    color: #fff !important;
    opacity: 1;
}

.small-box .small-box-footer:hover {
    color: #fff !important;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2) !important;
}

/* Dashboard small-box: elegant size, beautiful shadows */
.content-wrapper .small-box {
    position: relative;
    border-radius: 2px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.content-wrapper .small-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.content-wrapper .small-box>.inner {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.25rem 1rem;
}

.content-wrapper .small-box h3 {
    font-size: 2rem;
    margin: 0 0 0.25rem 0;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.content-wrapper .small-box p {
    font-size: 0.9rem;
    margin: 0;
    font-weight: 500;
    opacity: 0.9;
}

/* Stunning Cron Button Style */
.stunning-btn-setup {
    background: transparent;
    border: 1.5px solid #206bc4;
    color: #206bc4 !important;
    border-radius: 4px !important;
    padding: 0.45rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.stunning-btn-setup:hover {
    background: #206bc4;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.25);
    transform: translateY(-1px);
}

/* Beautiful top-right accent icon */
.content-wrapper .small-box .icon {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 2.25rem;
    opacity: 0.25;
    z-index: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.content-wrapper .small-box:hover .icon {
    opacity: 0.4;
    transform: scale(1.1) rotate(5deg);
}

.content-wrapper .small-box>.small-box-footer {
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.08) !important;
    transition: background 0.3s ease, padding-left 0.3s ease;
    display: block;
    text-align: right;
}

.content-wrapper .small-box>.small-box-footer:hover {
    background: rgba(0, 0, 0, 0.15) !important;
    padding-right: 1rem;
}

.content-wrapper .small-box>.small-box-footer i {
    margin-left: 0.35rem;
    transition: transform 0.3s ease;
}

.content-wrapper .small-box>.small-box-footer:hover i {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .content-wrapper .small-box .icon {
        font-size: 2rem;
        top: 1rem;
        right: 1rem;
    }
}

/* AdminLTE 4 - card outline (Bootstrap 5 compatible) */
.card-outline.card-info {
    border-top: 3px solid var(--bs-info);
}

/* AdminLTE 4 - app header navbar (dark top bar, light text) */
.app-header.navbar {
    margin-top: 0 !important;
    background-color: #2D323E !important;
    border-bottom: none !important;
}

.app-header.navbar .nav-link,
.app-header.navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.app-header.navbar .nav-link:hover,
.app-header.navbar .navbar-nav .nav-link:hover {
    color: #fff !important;
}

.app-header.navbar .user-menu-name,
.app-header.navbar .user-menu-trigger {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Toggle bar – flush to left corner: white hamburger on dark bar */
.app-header .container-fluid {
    padding-left: 0 !important;
    max-width: 100%;
}

.app-header.navbar {
    padding-left: 0 !important;
}

.app-header .navbar-nav:first-child {
    margin-left: 0 !important;
    margin-right: 0;
    padding-left: 0 !important;
}

.app-header .navbar-nav>.nav-item:first-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex;
}

.header-toggle-bar {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    background: transparent;
    border: none;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.app-header .header-toggle-bar .sidebar-toggle-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem 0.75rem 1rem;
    color: #fff !important;
    text-decoration: none;
    border: none;
    margin-left: 0 !important;
}

.app-header .header-toggle-bar .sidebar-toggle-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08);
}

.app-header .header-toggle-bar .sidebar-toggle-link i.fa-bars {
    font-size: 1.25rem;
}

.app-header .header-brand-text {
    color: #fff !important;
    font-weight: 500;
    padding-left: 0;
    padding-right: 1rem;
}

.app-header .header-brand-text:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 767px) {
    .app-header.navbar {
        margin-top: 0 !important;
    }
}

a {
    text-decoration: none;
}

.user-menu .dropdown-toggle::after {
    display: none;
}

.f-12 {
    font-size: 12px;
}

.f-14 {
    font-size: 14px;
    line-height: 1.428;
}

.f-18 {
    font-size: 18px;
}

.img-circle {
    border-radius: 50%;
}

.date-parent label {
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 6px;
}

.date-parent button {
    font-size: 14px;
}

.date-parent .form-control,
.date-parent span {
    font-size: 14px !important;
}

.w-60 {
    width: 60px;
}

.dataTables_filter {
    margin-top: 0px;
}

/* DataTables Responsive Toggle Icons - General Centering */
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child::before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child::before,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control::before,
table.dataTable.dtr-column>tbody>tr>td.control::before,
table.dataTable.dtr-column>tbody>tr>th.control::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    line-height: normal !important;
    border-color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #03AE74 !important;
    /* Default Green for collapsed */
}

/* Red color when OPENED (expanded) */
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child::before,
table.dataTable.dtr-column>tbody>tr.parent td.control::before,
table.dataTable.dtr-column>tbody>tr.parent th.control::before {
    background-color: #dc3545 !important;
    /* Elite Red when opened */
    content: '-' !important;
}

/* Ensure the cell itself doesn't have conflicting padding/alignment */
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {
    vertical-align: middle !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    line-height: normal !important;
}

.filters-parent .dataTables_filter {
    margin-top: unset !important;
}

.filters-parent .dataTables_length {
    margin-bottom: 10px !important;
}

.dt-responsive>tbody tr td a {
    padding: 2px 7px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.dt-responsive>tbody tr td a i {
    font-size: 12px;
    line-height: 1.5;
}

.parent-table .table>tbody>tr>td {
    border: unset !important;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

/* AdminLTE 4 - navbar structure updated */
.navbar-nav .user-menu .nav-link {
    padding: 0.5rem 1rem;
}

/* Header – logged-in user box: standard dark block with red initial + name/email */
.user-menu-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem 0.5rem 0.5rem !important;
    margin-right: 0.25rem;
    background: transparent;
    color: inherit !important;
    font-size: 0.9375rem;
    border-radius: 0.25rem;
    box-shadow: none;
    transition: background 0.2s ease;
}

.user-menu-trigger:hover {
    color: inherit !important;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: none;
}

.user-menu-trigger .user-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: #dc3545;
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.user-menu-trigger .user-menu-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
}

.user-menu-trigger .user-menu-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: inherit !important;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.user-menu-trigger .user-menu-email {
    font-size: 0.8125rem;
    color: inherit !important;
    opacity: 0.75;
    line-height: 1.25;
    word-break: break-all;
}

.user-menu-trigger .user-menu-chevron {
    font-size: 0.65rem;
    opacity: 0.9;
    transition: transform 0.2s ease;
}

.user-menu.show .user-menu-trigger .user-menu-chevron {
    transform: rotate(180deg);
}

.panel-body {
    padding: 15px;
}

.btn-margin>.dropdown-toggle::after {
    display: none;
}

select:not(.form-select) {
    -webkit-appearance: listbox !important;
    appearance: listbox !important;
}

.panel-primary {
    border: 1px solid #337ab7;
}

.wysihtml5-toolbar .dropdown>.dropdown-menu>li>a {
    display: block;
    padding: 0 0 0 20px;
    font-size: 14px;
    line-height: 27px;
}

ul.wysihtml5-toolbar>li a {
    font-size: 14px;
}

ul.wysihtml5-toolbar {
    margin: 17px 0 5px 0 !important;
}

.dt-responsive>tbody tr td button {
    padding: 2px 7px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.dt-responsive>tbody tr td button i {
    font-size: 12px;
    line-height: 1.5;
}

.close {
    font-size: 21px !important;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    background: unset;
    border: unset;
    opacity: 0.2;
    cursor: pointer;
}

.close:hover {
    color: #2c2c2c;
}

.bootstrap-wysihtml5-insert-link-target {
    margin-left: 0 !important;
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
    }
}

.nav-tabs-custom>.nav-tabs>li.active {
    border-top-color: #3c8dbc;
}

.nav-tabs>li>a:hover {
    border-bottom: 1px solid #02a9f4;
    background: #fff;
    border-top: 0 none;
    border-left: 0 none;
    border-right: 0 none;
    cursor: pointer;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    border-color: #ddd;
}

.panel-default {
    border-color: #ddd;
}

.dTfont {
    position: absolute !important;
    bottom: 0 !important;
}

.fa-star:before {
    color: #D1C44C;
}

@media screen and (max-width:768px) {
    span.dtr-data {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* AdminLTE 4 - sidebar menu compatibility (Font Awesome icons) */
.sidebar-menu .nav-link {
    display: flex;
    align-items: center;
}

.sidebar-menu .nav-link .nav-icon {
    margin-right: 0.5rem;
}

.sidebar-menu .nav-link .fa-angle-left,
.sidebar-menu .nav-link .right {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.sidebar-menu .nav-item.menu-open>.nav-link .fa-angle-left,
.sidebar-menu .nav-item.menu-open>.nav-link .right {
    transform: rotate(-90deg);
}


/* AdminLTE 4 - utilities and user-friendly polish */
.text-20 {
    font-size: 1.25rem;
    font-weight: 600;
}

.content-wrapper {
    padding-bottom: 1rem;
    overflow-x: hidden;
    max-width: 100%;
}

.content-header .breadcrumb {
    background: transparent;
    padding: 0;
}

.app-footer {
    background-color: #f8fafc;
    border-top: 1px solid #eef2f6;
    padding: 1.5rem 2rem;
    color: #94a3b8;
    font-size: 0.9rem;
    /* Increased for better readability */
    font-weight: 500;
    position: relative;
}

.app-footer a {
    color: #64748b;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.app-footer a:hover {
    color: #6366f1;
}

.app-footer .footer-v {
    font-weight: 700;
    color: #64748b;
}

/* Profile dropdown – beautiful, light, high-contrast */
.navbar .user-menu .dropdown-menu.user-dropdown-menu {
    background: #fff !important;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0;
    min-width: 17rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-top: 0.5rem;
    overflow: hidden;
}



.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-header {
    padding: 0;
    margin: 0;
    background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 100%);
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-header-inner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem 1.5rem;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-avatar {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-info {
    min-width: 0;
    padding-left: 0.125rem;
    text-align: left;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-name {
    font-weight: 700;
    font-size: 1rem;
    color: #1e293b;
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin-bottom: 0.125rem;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-email {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0;
    line-height: 1.3;
    word-break: break-all;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-divider {
    border-color: #e2e8f0;
    margin: 0.25rem 1rem;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-divider+.user-dropdown-item-wrap {
    padding-top: 0.375rem;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-item-wrap {
    padding: 0.125rem 0.75rem;
    margin-bottom: 0.125rem;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-item-wrap:last-child {
    padding-bottom: 0.75rem;
    margin-bottom: 0;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.25;
    color: #334155 !important;
    border-radius: 0.5rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    width: 1.25em;
    min-width: 1.25em;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-item:hover,
.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-item:focus {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-item:hover i {
    color: #0d9488;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-signout {
    color: #dc2626 !important;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-signout i {
    color: #dc2626;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-signout:hover,
.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-signout:focus {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

.navbar .user-menu .dropdown-menu.user-dropdown-menu .user-dropdown-signout:hover i {
    color: #b91c1c;
}

/* Login page - AdminLTE 4 */
body.login-page {
    background-color: #F8F9FA;
    min-height: 100vh;
}

.login-page .login-box {
    max-width: 400px;
    margin: 0 auto;
    padding: 1.5rem 0 2rem;
}

.login-page .login-logo {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.login-page .login-logo a {
    color: #444;
}

.login-page .card {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .08);
    border-radius: 0.5rem;
    border: 0;
}

.login-page .card-body {
    padding: 1.5rem 1.75rem;
}

.login-page .card-body .login-card-title,
.login-page .card-body .login-card__title {
    color: #343a40;
    font-size: 1.35rem;
    font-weight: 600;
}

.login-page .card-body .login-card-subtitle,
.login-page .card-body .login-card__subtitle {
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
    line-height: 1.4;
}

.login-page .card-body .form-control {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
}

.login-page .card-body .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.login-page .card-body .form-check-input:checked {
    background-color: #36D69B;
    border-color: #36D69B;
}

.login-page .card-body .forgot-password,
.login-page .card-body .login-form__forgot {
    color: #6c757d;
}

.login-page .card-body .forgot-password:hover,
.login-page .card-body .login-form__forgot:hover {
    color: #495057;
    text-decoration: underline !important;
}

.login-page .card-body .btn-login-primary {
    background-color: #36D69B;
    border-color: #36D69B;
    color: #fff;
    font-weight: 600;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
}

.login-page .card-body .btn-login-primary:hover {
    background-color: #2ec58a;
    border-color: #2ec58a;
    color: #fff;
}

/* Login page - Professional and Elegant (Follows user image) */
body.login-page--fancy {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.login-page--fancy .login-box {
    width: 100%;
    max-width: 560px;
    padding: 1.5rem;
}

.login-page--fancy .login-card {
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    background: #fff;
    overflow: hidden;
}

.login-page--fancy .login-card .card-body {
    padding: 1.5rem 1rem !important;
}

.login-header-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: #111;
}

.login-header-icon i {
    font-size: 2.75rem;
}

.login-page--fancy .login-card__title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111;
    margin-top: 2rem;
    margin-bottom: 3.5rem;
    letter-spacing: -0.02em;
}

/* Form Styles */
.login-form__group {
    position: relative;
    margin-bottom: 1.5rem;
}

.login-form__group.password-group {
    margin-bottom: 1rem;
}

.login-form__input-wrapper {
    position: relative;
    width: 100%;
}

.login-form__input-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    font-size: 1.1rem;
    z-index: 5;
    pointer-events: none;
}

.login-page--fancy .form-control.login-form__input {
    height: 56px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 4px !important;
    padding: 0 1rem 0 3.25rem !important;
    font-size: 1rem !important;
    background-color: #fff !important;
    transition: all 0.2s ease !important;
    color: #111 !important;
    line-height: normal !important;
}

.login-page--fancy .form-control.login-form__input::placeholder {
    color: #9CA3AF !important;
    opacity: 1;
}

.login-page--fancy .form-control.login-form__input:focus {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 4px rgba(32, 107, 196, 0.1) !important;
}

.btn-phone-instead {
    display: block;
    text-align: right;
    font-size: 0.875rem;
    color: #6B7280;
    font-weight: 600;
    margin-top: 0.5rem;
    text-decoration: none;
    transition: color 0.2s;
}

.btn-phone-instead:hover {
    color: #111;
}

.login-password-toggle {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    cursor: pointer;
    font-size: 1.1rem;
    z-index: 5;
    transition: color 0.2s;
}

.login-password-toggle:hover {
    color: #6B7280;
}

/* Options row */
.login-form__options {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    font-size: 0.9375rem;
}

.login-form__remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111;
    font-weight: 600;
}

.login-form__checkbox {
    width: 18px !important;
    height: 18px !important;
    border-radius: 3px !important;
    border: 2px solid #111 !important;
    background-color: #fff !important;
    accent-color: #206bc4 !important;
    cursor: pointer;
    margin: 0 !important;
}

.login-form__forgot {
    color: #6B7280;
    font-weight: 600;
    text-decoration: none;
}

.login-form__forgot:hover {
    text-decoration: underline;
    color: #111;
}

/* Elite Action Button (Backend Styled) */
body.login-page--fancy .btn-login-primary {
    width: 100% !important;
    height: 42px !important;
    background: linear-gradient(135deg, #206bc4 0%, #1a569d 100%) !important;
    border: none !important;
    border-radius: 3px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0 24px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
}

body.login-page--fancy .btn-login-primary:hover {
    background: linear-gradient(135deg, #1a569d 0%, #206bc4 100%) !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.3) !important;
    transform: translateY(-1px) !important;
}

.login-form__footer {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9375rem;
    color: #6B7280;
}

.login-form__footer a {
    color: #6B7280;
    font-weight: 700;
    text-decoration: underline;
}

.login-form__footer a:hover {
    color: #111;
}

@media (max-width: 575.98px) {
    .login-page--fancy .login-box {
        padding: 0.25rem !important;
    }

    .login-page--fancy .login-card .card-body {
        padding: 2rem 0.75rem !important;
    }
}



/* Card header with action button */
.card-header.d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Form labels in date-parent and filters */
.date-parent label,
.filters-parent label {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Profile page - AdminLTE 4 */
.profile-card {
    border-radius: 0.75rem;
    overflow: hidden;
}

.profile-avatar-wrap {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.profile-avatar-wrap:hover {
    border-color: var(--bs-info);
    transform: scale(1.05);
}

.profile-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-card .card-footer {
    border-top: 1px solid #e9ecef;
}

/* Prevent horizontal scrollbar across the entire admin layout; no gap next to sidebar; light body */
.app-main {
    overflow-x: hidden;
    padding-left: 0 !important;
    background-color: #F8F9FA;
}

.content-wrapper {
    background-color: #F8F9FA;
}

/* No gap: remove sidebar shadow so content abuts sidebar */
.app-sidebar.shadow {
    box-shadow: none !important;
}

/* Sidebar flush with header and content (no gap to top or right); menu flush left for full-width selection */
.app-sidebar .sidebar-wrapper {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.app-sidebar .sidebar-nav-no-gap,
.app-sidebar nav.sidebar-nav-no-gap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.app-sidebar .sidebar-brand {
    padding-top: 0.5rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: 1rem !important;
}

.app-sidebar .sidebar-menu {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: 0 !important;
}

.app-sidebar .sidebar-menu>.nav-item {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

.app-sidebar .sidebar-menu .nav-link {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 0.75rem !important;
    padding-top: 0.825rem !important;
    padding-bottom: 0.825rem !important;
    font-size: 0.9375rem !important;
}

.app-sidebar .sidebar-menu .nav-link p {
    margin-bottom: 0 !important;
    letter-spacing: 0.015em;
}

.app-sidebar .sidebar-menu .nav-item>.nav-link {
    width: 100%;
}

.app-sidebar .sidebar-menu .nav-link.active {
    margin-left: 0 !important;
}

/* Main content flush against sidebar (no gap) */
.app-main .content-wrapper {
    padding-left: 0 !important;
}

/* Elite Sidebar Width & Background - Professional height and width */
:root {
    --lte-sidebar-width: 270px !important;
}

.app-sidebar {
    background-color: #2D323E !important;
    border-radius: 0 !important;
    padding-right: 0 !important;
    height: 100vh !important;
}

.app-sidebar .sidebar-brand .brand-link,
.app-sidebar .sidebar-brand .brand-text,
.app-sidebar .nav-link,
.app-sidebar .sidebar-menu .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}


.app-sidebar .nav-link:hover,
.app-sidebar .sidebar-menu .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.app-sidebar .nav-link.active,
.app-sidebar .sidebar-menu .nav-link.active {
    background-color: #206bc4 !important;
    color: #fff !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: none !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    padding-left: 1rem !important;
}

/* Remove any right-edge white strip; selection is full-width blue to the left (like reference design) */
.app-sidebar .nav-link.active::after,
.app-sidebar .sidebar-menu .nav-link.active::after,
.app-sidebar .nav-link.active::before,
.app-sidebar .sidebar-menu .nav-link.active::before {
    display: none !important;
}

/* Straight edge: no curve style on sidebar links (match design – sharp vertical boundary) */
.app-sidebar .sidebar-menu .nav-link,
.app-sidebar .sidebar-menu .nav-item>.nav-link,
.app-sidebar .sidebar-menu .nav-item.menu-open>.nav-link {
    border-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.app-sidebar .sidebar-menu .nav-treeview .nav-link {
    border-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.app-sidebar .nav-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}

.app-sidebar .nav-link.active .nav-icon {
    color: #fff !important;
}

.app-sidebar .nav-treeview .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 0 !important;
    padding-left: 2.75rem !important;
    font-size: 0.9rem !important;
}

.app-sidebar .nav-treeview .nav-link.active {
    padding-left: 2.75rem !important;
}

.app-sidebar .nav-arrow {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* DataTable responsive overflow fix */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive>.table {
    table-layout: auto;
    word-break: break-word;
}

/* DataTable search/length controls – stack on small screens */
.dataTables_wrapper .dataTables_length {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        float: none !important;
        margin-top: 0 !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        float: none !important;
        margin-top: 0.5rem;
    }
}

/* Bootstrap 5 form-select inside date-parent */
.date-parent .form-select {
    font-size: 14px !important;
}

/* Customer detail tabs – scrollable on small screens, no wrapping */
.nav-tabs.flex-nowrap {
    scrollbar-width: thin;
    -ms-overflow-style: none;
}

.nav-tabs.flex-nowrap::-webkit-scrollbar {
    height: 3px;
}

.nav-tabs.flex-nowrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.nav-tabs.flex-nowrap .nav-link {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: #475569;
    border: 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-tabs.flex-nowrap .nav-link:hover {
    color: #0d9488;
    border-bottom-color: #0d9488;
}

.nav-tabs.flex-nowrap .nav-link.active {
    color: #0d9488;
    border-bottom-color: #0d9488;
    font-weight: 600;
    background: transparent;
}

/* Horizontal form – label alignment for Bootstrap 5 col-form-label */
.col-form-label {
    font-size: 0.875rem;
}

/* ── Flash Toast Notifications ── */
.flash-toast-wrapper {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    width: 100%;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .flash-toast-wrapper {
        right: 10px !important;
        left: 10px !important;
        top: 15px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 9999 !important;
    }
}

.flash-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    animation: flashToastSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (max-width: 575.98px) {
    .flash-toast {
        padding: 10px 12px;
    }
}

.flash-toast.flash-toast-hiding {
    animation: flashToastSlideOut 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.flash-toast-success {
    background: linear-gradient(135deg, #198754 0%, #157347 100%);
}

.flash-toast-danger {
    background: linear-gradient(135deg, #dc3545 0%, #bb2d3b 100%);
}

.flash-toast-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #1a1a2e;
}

.flash-toast-info {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
}

.flash-toast-icon {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.9;
}

.flash-toast-body {
    flex: 1;
    line-height: 1.4;
}

.flash-toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.flash-toast-close:hover {
    opacity: 1;
}

.flash-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.35);
    animation: flashToastProgress 5s linear forwards;
    border-radius: 0 0 8px 8px;
}

.flash-toast-warning .flash-toast-close,
.flash-toast-warning .flash-toast-icon {
    color: #1a1a2e;
}

.flash-toast-warning .flash-toast-progress {
    background: rgba(0, 0, 0, 0.15);
}

@keyframes flashToastSlideIn {
    from {
        opacity: 0;
        transform: translateX(60px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes flashToastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(60px) scale(0.95);
    }
}

@keyframes flashToastProgress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* ── Listing Steps Sidebar (Wizard) ── */
.listing-steps-card {
    border: 0;
    border-radius: 0.75rem;
    overflow: hidden;
}

.listing-steps-header {
    background: linear-gradient(135deg, #0d9488 0%, #10b981 100%);
    color: #fff;
    padding: 1rem 1.25rem;
    border: 0;
}

.listing-steps-header .card-title {
    color: #fff;
    font-size: 1.05rem;
}

.listing-steps-icon-wrap {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.listing-steps-progress {
    height: 3px;
    background: #e2e8f0;
}

.listing-steps-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #0d9488, #10b981);
    transition: width 0.4s ease;
    border-radius: 0 3px 3px 0;
}

.listing-steps-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.listing-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
    text-decoration: none;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
}

.listing-step:hover {
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
}

.listing-step-indicator {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid #cbd5e1;
    background: #fff;
    color: #94a3b8;
    transition: all 0.25s ease;
}

.listing-step-content {
    flex: 1;
    min-width: 0;
}

.listing-step-label {
    display: block;
    line-height: 1.3;
}

.listing-step-trail-icon {
    font-size: 0.85rem;
    color: #cbd5e1;
    transition: color 0.2s ease;
}

/* Done state */
.listing-step.is-done .listing-step-indicator {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
}

.listing-step.is-done {
    color: #334155;
}

.listing-step.is-done .listing-step-trail-icon {
    color: #0d9488;
    opacity: 0.5;
}

/* Active state */
.listing-step.is-active {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.08) 0%, transparent 100%);
    color: #0d9488;
    font-weight: 600;
}

.listing-step.is-active .listing-step-indicator {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15);
}

.listing-step.is-active .listing-step-trail-icon {
    color: #0d9488;
}

.listing-step.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 3px;
    background: #0d9488;
    border-radius: 0 3px 3px 0;
}

/* Pending state */
.listing-step.is-pending {
    color: #94a3b8;
}

.listing-step.is-pending:hover .listing-step-indicator {
    border-color: #94a3b8;
    color: #64748b;
}

/* Responsive – horizontal scroll on very small screens */
@media (max-width: 991.98px) {
    .listing-steps-nav {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: thin;
        padding: 0.5rem;
        gap: 0.25rem;
    }

    .listing-step {
        flex-direction: column;
        text-align: center;
        padding: 0.6rem 0.75rem;
        min-width: 5.5rem;
        gap: 0.35rem;
        border-radius: 0.5rem;
    }

    .listing-step::before {
        display: none !important;
    }

    .listing-step-trail-icon {
        display: none;
    }

    .listing-step-label {
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

/* Stunning Professional Breadcrumb */
.stunning-breadcrumb-wrapper {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: inline-flex;
    align-items: center;
    margin: 0;
    backdrop-filter: blur(10px);
}

.stunning-breadcrumb-wrapper .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.stunning-breadcrumb-wrapper .breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.stunning-breadcrumb-wrapper .breadcrumb-item a:hover {
    color: #3a57e8;
    transform: translateY(-1px);
}

.stunning-breadcrumb-wrapper .breadcrumb-item.active {
    color: #343a40;
    font-weight: 600;
    text-shadow: none;
}

.stunning-breadcrumb-wrapper .breadcrumb-item+.breadcrumb-item::before {
    content: '\f285';
    font-family: 'bootstrap-icons';
    font-weight: 900;
    color: #adb5bd;
    font-size: 0.75rem;
    margin: 0 0.5rem;
    padding-right: 0;
    float: none;
}

.stunning-breadcrumb-wrapper .breadcrumb-item a i {
    margin-right: 0.35rem;
    font-size: 1.05rem;
    color: #6c5ce7;
    transition: transform 0.3s ease;
}

.stunning-breadcrumb-wrapper .breadcrumb-item a:hover i {
    transform: scale(1.15) rotate(-5deg);
}

.stunning-breadcrumb-wrapper .breadcrumb-item:last-child {
    color: #3a57e8;
}

/* Stunning Dashboard Table Styling */
.stunning-table-card {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    background: #fff !important;
    margin-bottom: 2rem !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.stunning-table-card .card-header {
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 1rem 1.25rem !important;
    /* Removed left padding */
}

.stunning-table-card .card-title,
.stunning-page-title {
    font-weight: 700 !important;
    color: #1e293b !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.01em !important;

    /* Removed left margin */
}

.stunning-table-wrapper {
    border-radius: 2px !important;
    /* Matches card radius */
    overflow-x: auto !important;
}

/* Professional Highlighted Action Buttons */
.stunning-table-card .btn-xs {
    padding: 0 !important;
    height: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    font-size: 0.85rem !important;
    border-radius: 5px !important;
    /* Compact professional radius */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
    margin-right: 4px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    border: none !important;
}

/* Workbench Table Aesthetic - Based on Reference Image */
.workbench-table thead th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 1rem 1rem !important;
    border: none !important;
    border-bottom: 1.5px solid #eef2f6 !important;
    text-transform: none !important;
}

.workbench-table tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.15s ease;
}

.workbench-table tbody tr:hover {
    background-color: #f8fafc !important;
}

.workbench-table tbody td {
    padding: 1rem 1rem !important;
    border: none !important;
    color: #334155 !important;
    vertical-align: middle !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
}

/* Bold ID and Name columns */
.workbench-table tbody td:first-child,
.workbench-table tbody td.bold-column,
.workbench-table tbody td:first-child a,
.workbench-table tbody td.bold-column a {
    font-weight: 600 !important;
    color: #1e293b !important;
}

.workbench-table tbody td a {
    color: #64748b !important;
    /* Muted slate/gray-blue */
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.workbench-table tbody td a:hover {
    color: #2563eb !important;
    /* Blue on hover */
    text-decoration: none !important;
}

/* Workbench Square Action Buttons */
.workbench-table .btn-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    margin-right: 4px;
}

.workbench-table .btn-action i {
    font-size: 0.85rem !important;
    color: #ffffff !important;
}

.workbench-table .btn-action-edit {
    background-color: #2563eb !important;
    /* Professional Blue */
}

.workbench-table .btn-action-edit:hover {
    background-color: #1d4ed8 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.workbench-table .btn-action-delete {
    background-color: #ef4444 !important;
    /* Professional Red */
}

.workbench-table .btn-action-delete:hover {
    background-color: #dc2626 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
}

/* Badges for Workbench Table */
.workbench-table .badge {
    font-weight: 600 !important;
    padding: 0.4em 0.8em !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
}

/* DataTables elements alignment for Workbench */
.settings-form-card .dataTables_info {
    padding: 1.25rem 1.5rem !important;
    color: #64748b !important;
    font-size: 0.8125rem !important;
}

.settings-form-card .dataTables_paginate {
    padding: 1rem 1.5rem !important;
}

.stunning-table-wrapper .table thead th {
    background: #f8fafc !important;
    /* Cleaner, professional off-white */
    color: #64748b !important;
    /* Subtle gray-blue for headers */
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
    padding: 0.875rem 1rem !important;
    border: none !important;
    white-space: nowrap !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.stunning-table-wrapper .table thead th:first-child {
    border-top-left-radius: 0px !important;
    /* Rounded by container */
}

.stunning-table-wrapper .table thead th:last-child {
    border-top-right-radius: 0px !important;
}

.stunning-table-wrapper .table tbody tr {
    transition: background-color 0.2s ease !important;
}

.stunning-table-wrapper .table tbody tr:hover {
    background-color: #f1f5f9 !important;
    /* Slightly more visible hover */
}

.stunning-table-wrapper .table tbody td {
    padding: 0.875rem 1rem !important;
    /* Slightly increased for better breathability */
    vertical-align: middle !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    /* Closer to black for better contrast/premium feel */
    border-top: 1px solid rgba(0, 0, 0, 0.03) !important;
    /* Extremely subtle borders */
    border-bottom: none !important;
}

/* Prevent wrapping on columns that should stay on one line */
.stunning-table-wrapper .table td:nth-last-child(2),
.stunning-table-wrapper .table td:last-child,
.stunning-table-wrapper .table th:nth-last-child(2),
.stunning-table-wrapper .table th:last-child {
    white-space: nowrap !important;
}

/* Ensure long titles can wrap slightly if needed, but not excessively */
.stunning-table-wrapper .table td:first-child {
    min-width: 150px;
}

.stunning-table-wrapper .table tbody tr:last-child td {
    border-bottom: none !important;
}

.stunning-table-wrapper .table tbody td a {
    color: #1e293b !important;
    /* Consistent blackish color */
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.stunning-table-wrapper .table tbody td a:hover {
    color: #10b981 !important;
    /* Premium green accent */
    text-decoration: none !important;
    /* Simpler look without underline */
    opacity: 0.8;
}

.stunning-table-wrapper .table tbody td .badge {
    padding: 0.5em 0.8em !important;
    font-weight: 500 !important;
}

/* Sharp-edged button utility */
.btn-sharp {
    border-radius: 2px !important;
}

/* Stunning Form Elements Refinement */
.form-control:not(textarea),
.form-select,
.btn:not(.rounded-pill) {
    border-radius: 2px !important;
    display: inline-flex;
    align-items: center;
}

textarea.form-control {
    display: block;
}



.btn {
    padding-top: 0;
    padding-bottom: 0;
}

/* Stunning Form Elements */
.stunning-input,
.stunning-select {
    height: 42px !important;
    border-radius: 4px !important;
    border: 1px solid #d1d5db !important;
    font-size: 0.9rem !important;
    padding: 0.5rem 1rem !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

.stunning-input:focus,
.stunning-select:focus {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.15) !important;
    outline: 0 !important;
}

.h-42 {
    height: 34px !important;
}

/* Select2 Stunning Refinement */
.select2-container--default .select2-selection--single {
    height: 38px !important;
    border-radius: 4px !important;
    border: 1px solid #dee2e6 !important;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: normal !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

/* Professional Header and Form Aesthetics */
.stunning-table-card .card-header {
    padding-left: 15px !important;
}

.form-control,
.form-select,
.select2-container--default .select2-selection--single {
    border: 1px solid #d1d5db !important;
    background-color: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.15) !important;
    background-color: #fff !important;
    outline: 0 !important;
}

/* Stunning DataTable Toolbar - Flex container for dom:'<datatable-toolbar lBf>' */
.datatable-toolbar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: 100% !important;
}

.datatable-toolbar .dataTables_length,
.datatable-toolbar .dt-buttons {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 42px !important;
}

.datatable-toolbar .dataTables_filter {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    height: 34px !important;
}

.dataTables_wrapper .dataTables_length label {
    font-size: 0 !important;
    /* Hide "Show" and "entries" */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 34px !important;
}

.dataTables_wrapper .dataTables_filter label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    /* Updated to blackish for consistency */
    font-size: 0.85rem !important;
    white-space: nowrap !important;
    height: 34px !important;
}

.dataTables_wrapper .dataTables_length select {
    width: 60px !important;
    height: 34px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 2px !important;
    background-color: #f3f4f6 !important;
    padding: 0 12px !important;
    font-weight: 400 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    appearance: auto !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Custom Pagination Styling for Stunning Tables */
.dataTables_wrapper .dataTables_paginate {
    padding: 1.5rem 1.25rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}

.dataTables_wrapper .dataTables_info {
    padding: 1.5rem 1.25rem !important;
    color: #64748b !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: #f0f7ff !important;
    border-color: #206bc4 !important;
    color: #206bc4 !important;
    transform: translateY(-1px) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #206bc4 !important;
    border-color: #206bc4 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(32, 107, 196, 0.2) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
    border-color: #f1f5f9 !important;
}

.dataTables_wrapper .dataTables_filter input {
    width: 280px !important;
    height: 34px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 2px !important;
    background-color: #ffffff !important;
    padding: 0 10px !important;
    color: #1f2937 !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.12) !important;
    outline: none !important;
}

/* Stunning Action Buttons */
.dataTables_wrapper .dt-buttons {
    display: flex !important;
    gap: 12px !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons button,
.dataTables_wrapper .dt-button,
.stunning-table-card .card-header .btn {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 0.12rem !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #1f2937 !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    border-radius: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Hide unused default DataTables buttons to prevent ghost borders */
.dataTables_wrapper .dt-button.buttons-create,
.dataTables_wrapper .dt-button.buttons-print,
.dataTables_wrapper .dt-button.buttons-reset,
.dataTables_wrapper .dt-buttons .buttons-create,
.dataTables_wrapper .dt-buttons .buttons-print,
.dataTables_wrapper .dt-buttons .buttons-reset {
    display: none !important;
}

.dataTables_wrapper .dt-button:hover,
.stunning-table-card .card-header .btn:hover {
    background: #f0f7ff !important;
    border-color: #206bc4 !important;
    color: #206bc4 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.15) !important;
}

/* Ensure uniform widths in filter row */
@media (min-width: 1200px) {
    .date-parent .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Lucrative Page Header Styling */
.stunning-header-container {
    background: #ffffff;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.stunning-header-title-wrap {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.stunning-header-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(32, 107, 196, 0.1) 0%, rgba(32, 107, 196, 0.05) 100%);
    color: #206bc4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
    border: 1px solid rgba(32, 107, 196, 0.15);
    box-shadow: 0 4px 10px rgba(32, 107, 196, 0.05);
}

.stunning-page-title {
    font-size: 1.35rem !important;
    margin-bottom: 0 !important;
    color: #0f172a !important;
}

/* Sharp Edges Utility */
.btn-sharp {
    border-radius: 2px !important;
}

/* Global Form Elements */
.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.input-group-text {
    border-radius: 4px !important;
}

.stunning-page-title small {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
}

.stunning-btn-primary {
    background: #206bc4 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    border-radius: 4px !important;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.25) !important;
    text-decoration: none !important;
}

.stunning-btn-primary:hover {
    background: #1a569d !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(32, 107, 196, 0.35) !important;
    color: #fff !important;
}

.stunning-btn-secondary {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #475569 !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    border-radius: 2px !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.stunning-btn-secondary:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    transform: translateY(-1px) !important;
}

/* Professional Neutral Button (for Reset) */
.btn-outline-neutral {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.btn-outline-neutral:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    transform: translateY(-1px) !important;
}

.stunning-btn-primary i {
    font-size: 1rem;
}

/* Stunning DateRangePicker Buttons */
.daterangepicker .drp-buttons {
    padding: 12px 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
}

.daterangepicker .drp-buttons .btn {
    margin: 0 !important;
    padding: 6px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
    /* Sharp edges */
    text-shadow: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Apply Button - Stunning Brand Blue */
.daterangepicker .drp-buttons .applyBtn {
    background-color: #206bc4 !important;
    border: 1px solid #206bc4 !important;
    color: #ffffff !important;
}

.daterangepicker .drp-buttons .applyBtn:hover {
    background-color: #1a569d !important;
    border-color: #1a569d !important;
    transform: translateY(-1px) !important;
}

/* Cancel Button - Clean Neutral */
.daterangepicker .drp-buttons .cancelBtn {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #475569 !important;
}

.daterangepicker .drp-buttons .cancelBtn:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

/* Fix for Date Display text */
.daterangepicker .drp-selected {
    font-size: 0.85rem !important;
    color: #64748b !important;
    margin-right: auto !important;
    font-weight: 500 !important;
}

/* =============================================
   Addons Module — Workbench Aesthetic V2
   ============================================= */

/* --- Tabs --- */
.addons-tab {
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 2px !important;
    font-size: 0.85rem;
}

.addons-tab.addons-active {
    background: linear-gradient(135deg, #206bc4 0%, #1a569d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.2) !important;
    border-color: transparent !important;
}

.addons-tab:hover:not(.addons-active) {
    background: #f1f5f9;
    color: #0f172a;
}

.addons-hide {
    display: none !important;
}

/* --- Search --- */
.search-input-group {
    position: relative;
    width: 100%;
}

.search-input-group .search-box {
    padding-left: 15px !important;
    border: 1px solid rgba(32, 107, 196, 0.2) !important;
    background: #f8fafc !important;
    border-radius: 2px !important;
    height: 42px !important;
    font-size: 0.9rem !important;
    transition: all 0.25s ease !important;
    width: 100%;
}

.search-input-group .search-box:focus {
    background: #ffffff !important;
    border-color: #206bc4 !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.1) !important;
    color: #0f172a !important;
}

/* --- Upload Panel --- */
.addon-wb-upload-panel {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.addon-wb-upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, rgba(32, 107, 196, 0.03) 0%, rgba(32, 107, 196, 0.01) 100%);
}

.addon-wb-upload-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(32, 107, 196, 0.12) 0%, rgba(32, 107, 196, 0.05) 100%);
    color: #206bc4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.25rem;
    border: 1px solid rgba(32, 107, 196, 0.15);
}

.addon-wb-upload-close {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.addon-wb-upload-close:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

.addon-wb-upload-body {
    padding: 24px;
}

.addon-wb-upload-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}

/* --- Form Fields --- */
.addon-wb-field-label {
    display: block;
    font-size: 0.825rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.addon-wb-input-wrap {
    position: relative;
}

.addon-wb-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
}

.addon-wb-input {
    padding-left: 40px !important;
    height: 44px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 2px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
}

.addon-wb-input:focus {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.1) !important;
}

/* --- Custom File Input --- */
.addon-wb-file-wrap {
    position: relative;
}

.addon-wb-file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.addon-wb-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px;
    border: 1px dashed #d1d5db;
    border-radius: 2px;
    background: #fafbfc;
    color: #64748b;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.addon-wb-file-label:hover {
    border-color: #206bc4;
    background: #f0f7ff;
    color: #206bc4;
}

.addon-wb-file-label.addon-wb-file-selected {
    border-color: #10b981;
    background: #ecfdf5;
    color: #059669;
    border-style: solid;
}

/* --- Alert --- */
.addon-wb-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.addon-wb-alert-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.addon-wb-alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.addon-wb-alert-icon {
    font-size: 1.15rem;
}

.addon-wb-alert-close {
    margin-left: auto;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.2s;
    line-height: 1;
}

.addon-wb-alert-close:hover {
    opacity: 1;
}

/* --- Table --- */
.addon-wb-table-wrap {
    overflow-x: auto;
}

.addon-wb-table {
    width: 100%;
    border-collapse: collapse;
}

.addon-wb-table thead th {
    background: #f8fafc;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.addon-wb-table tbody td {
    padding: 18px 20px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.addon-wb-table tbody tr {
    transition: background 0.15s ease;
}

.addon-wb-table tbody tr:hover {
    background: #fafbfe;
}

/* --- Image --- */
.addon-wb-img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    padding: 6px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    object-fit: contain;
}

/* --- Name --- */
.addon-wb-name {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
}

/* --- Action Links --- */
.addon-wb-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.addon-wb-action-link {
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
    padding: 2px 6px;
    border-radius: 3px;
}

.addon-wb-activate {
    color: #10b981 !important;
}

.addon-wb-activate:hover {
    background: #ecfdf5;
    color: #059669 !important;
}

.addon-wb-deactivate {
    color: #f59e0b !important;
}

.addon-wb-deactivate:hover {
    background: #fffbeb;
    color: #d97706 !important;
}

.addon-wb-settings-link {
    color: #64748b !important;
}

.addon-wb-settings-link:hover {
    color: #206bc4 !important;
    background: #f0f7ff;
}

.addon-wb-separator {
    color: #d1d5db;
    padding: 0 2px;
    font-size: 0.75rem;
}

/* --- Badges --- */
.addon-wb-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 2px;
    white-space: nowrap;
}

.addon-wb-badge-active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.addon-wb-badge-inactive {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.addon-wb-badge-installed {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    cursor: default;
}

/* --- Description & Version --- */
.addon-wb-description {
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.addon-wb-version {
    margin-top: 6px;
}

.addon-wb-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Buy Button --- */
.addon-wb-buy-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 7px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.2) !important;
    white-space: nowrap;
}

.addon-wb-buy-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.3) !important;
    color: #ffffff !important;
}

/* --- Empty State --- */
.addon-wb-empty {
    text-align: center;
    padding: 60px 24px;
}

.addon-wb-empty-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: #206bc4;
    border: 2px solid rgba(32, 107, 196, 0.1);
}

.addon-wb-empty h5 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.addon-wb-empty p {
    font-size: 0.9rem;
    max-width: 320px;
    margin: 0 auto;
}

/* Reporting Spacing Utilities */
.report-section-gap {
    margin-bottom: 35px !important;
}

.report-content-mt {
    margin-top: 25px !important;
}

/* --- Email Workbench V2 --- */
.workbench-container {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.workbench-sidebar {
    flex: 0 0 260px;
}

.workbench-main {
    flex: 1;
    min-width: 0;
}

.workbench-right {
    flex: 0 0 280px;
}

/* Workbench Sidebar Menu */
.workbench-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workbench-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #475569 !important;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    border-left: 3px solid transparent;
}

.workbench-menu-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    opacity: 0.7;
}

.workbench-menu-item:hover {
    background: #f1f5f9;
    color: #0f172a !important;
}

.workbench-menu-item.active {
    background: #ffffff;
    color: #206bc4 !important;
    border-left-color: #206bc4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.workbench-menu-item.active i {
    opacity: 1;
}

/* Workbench Reference Panel */
.workbench-ref-card {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.workbench-ref-header {
    background: #f8fafc;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
}

.workbench-ref-body {
    padding: 12px;
}

.ref-badge {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.ref-badge:hover {
    border-color: #206bc4;
    background: #f0f7ff;
}

.ref-badge code {
    font-size: 0.825rem;
    color: #206bc4;
    font-weight: 700;
    background: transparent !important;
    padding: 0 !important;
}

.ref-badge-label {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
    margin-top: 2px;
}

/* Editor Refinement */
.workbench-editor-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.workbench-editor-subject {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.premium-input-subject {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 0 !important;
    color: #0f172a !important;
    background: transparent !important;
    box-shadow: none !important;
}

.premium-input-subject::placeholder {
    color: #cbd5e1;
}

@media (max-width: 1200px) {
    .workbench-container {
        flex-direction: column;
    }

    .workbench-sidebar,
    .workbench-right {
        flex: 1;
        width: 100%;
    }
}

/* Dashboard: centered content column with equal left/right space (match reference image) */
.app-main .content-wrapper.dashboard-page-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Global Content Padding System — Professional Scale */
.dashboard-content-inner {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 768px) {
    .dashboard-content-inner {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 992px) {
    .dashboard-content-inner {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1400px) {
    .dashboard-content-inner {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}


/* =====================================================
   HARD OVERRIDE: FULL-WIDTH MOBILE/TABLET RESPONSIVENESS
   Targeting all admin forms and tables for edge-to-edge bleed
   ===================================================== */
@media (max-width: 991px) {

    /* 1. Global Reset for Dashboard Containers */
    body.layout-fixed .content-wrapper.dashboard-page-wrapper,
    body.layout-fixed .dashboard-content-inner,
    body.layout-fixed .content,
    body.layout-fixed .container-fluid,
    body.layout-fixed .row,
    body.layout-fixed .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 2. Card Docking: Bleed to screen edges */
    body.layout-fixed .settings-form-card,
    body.layout-fixed .stunning-table-card,
    body.layout-fixed .card.stunning-table-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #e8ecf1 !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. Internal Form Layout: Stacked Labels Above Inputs */
    body.layout-fixed .settings-field-row {
        flex-direction: column !important;
        display: flex !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    body.layout-fixed .settings-field-row:last-child {
        border-bottom: none !important;
    }

    body.layout-fixed .settings-field-label {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        font-weight: 600 !important;
        font-size: 0.8125rem !important;
        color: #374151 !important;
        margin-bottom: 0.25rem !important;
        padding-top: 0 !important;
        padding-right: 0 !important;
        min-width: unset !important;
    }

    body.layout-fixed .settings-section-label {
        margin-top: 0.25rem !important;
    }

    body.layout-fixed .settings-field-input {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* All inputs and selects full width */
    body.layout-fixed .settings-field-input .form-control,
    body.layout-fixed .settings-field-input .form-select,
    body.layout-fixed .settings-field-input .settings-input,
    body.layout-fixed .settings-field-input .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.layout-fixed .settings-field-input .select2-container--default .select2-selection--single {
        width: 100% !important;
    }

    /* 4. Footer & Header Padding Refinement */
    body.layout-fixed .settings-form-header,
    body.layout-fixed .settings-form-footer {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* 5. Card-body gets consistent horizontal breathing room */
    body.layout-fixed .card-body {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Zero out inner wrappers so field-rows own their spacing */
    body.layout-fixed .settings-form-body,
    body.layout-fixed .settings-section,
    body.layout-fixed .workbench-main,
    body.layout-fixed .workbench-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 6. Inputs – consistent border radius */
    body.layout-fixed .settings-input,
    body.layout-fixed .settings-phone-input,
    body.layout-fixed .form-control,
    body.layout-fixed .form-select,
    body.layout-fixed .select2-container--default .select2-selection--single,
    body.layout-fixed .select2-container--default .select2-selection--multiple {
        border-radius: 6px !important;
    }

    /* 7. Remove sidebar gap */
    .settings_bar_gap {
        margin-bottom: 0 !important;
    }

    /* 8. Force narrow col-lg-8 wrappers to full width on tablet/mobile */
    body.layout-fixed .col-lg-8.mx-auto {
        max-width: 100% !important;
        width: 100% !important;
    }
}





@media (max-width: 575px) {

    /* DataTable Toolbar Layout Optimization */
    /* DataTables Toolbar Alignment — Flush Layout */
    .datatable-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 0 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 1. Length menu (Left) */
    .dataTables_length {
        order: 1 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    /* 2. Export / Buttons (Right) */
    .dt-buttons,
    #exportArea {
        order: 2 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }

    /* 3. Search area (Flexible row sharing) */
    div.dataTables_filter,
    #dataTableBuilder_filter {
        order: 3 !important;
        flex: 1 1 auto !important;
        min-width: 180px !important;
        /* Prevents squishing on very small screens */
        margin: 0 !important;
        text-align: right !important;
        display: flex !important;
        justify-content: flex-end !important;
        float: none !important;
    }

    div.dataTables_filter label,
    #dataTableBuilder_filter label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        /* Override legacy negative margin */
        gap: 8px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        padding: 0 5px !important;
    }

    div.dataTables_filter input,
    #dataTableBuilder_filter input {
        margin: 0 !important;
        flex: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        border: 1.5px solid #cbd5e1 !important;
        /* Sharper Visibility */
        background-color: #fff !important;
        border-radius: 8px !important;
        padding: 0.5rem 0.875rem !important;
        font-size: 0.875rem !important;
        box-shadow: none !important;
    }

    /* Reset horizontal gutters inside all filter form rows for mobile */
    .settings-form-body .row,
    .settings-form-body .row.g-3,
    .settings-form-body .row.g-4 {
        --bs-gutter-x: 1rem !important;
    }


    /* Global: Force two-column layout for ALL card headers on mobile */
    .settings-form-header .d-flex {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }

    /* Compact the "Add" button in card headers on mobile */
    .settings-form-header .btn.settings-btn-save.flex-shrink-0 {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.75rem !important;
        white-space: nowrap !important;
    }

    /* Compact the icon text block so title wraps cleanly */
    .settings-form-header .settings-form-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.15rem !important;
    }

    .settings-form-header .settings-form-subtitle {
        font-size: 0.75rem !important;
    }


    /* Global: Filter/Reset button row — full-width & centered on mobile */
    .settings-form-body .d-flex.gap-2 {
        flex-wrap: wrap !important;
    }

    .settings-form-body .d-flex.gap-2>.btn.settings-btn-save,
    .settings-form-body .d-flex.gap-2>.btn.settings-btn-cancel {
        flex: 1 1 0 !important;
        justify-content: center !important;
        text-align: center !important;
        min-width: 0 !important;
    }


    /* Standardize Workbench Layout (Sidebar/Main) for mobile */
    .workbench-container {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .workbench-sidebar {
        padding: 0.5rem !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        margin-bottom: 0.5rem !important;
        text-align: left !important;
        /* Ensure content starts from left */
    }

    .workbench-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        align-items: stretch !important;
    }

    .workbench-menu-item {
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 10px 12px !important;
    }

    .workbench-main {
        padding: 0.25rem !important;
        /* Standardize internal comfort gap */
    }

    /* Standardize Settings Form Footer Buttons for mobile */
    .settings-form-footer .d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .settings-form-footer .d-flex>.btn.settings-btn-save,
    .settings-form-footer .d-flex>.btn.settings-btn-cancel,
    .settings-form-footer .d-flex>a.settings-btn-cancel {
        flex: 1 1 0 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* DataTable Responsive Detail Alignment (Left-Aligned List) */
    table.dataTable>tbody>tr.child ul.dtr-details {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 0.25rem !important;
        list-style-type: none !important;
        margin: 0 !important;
    }

    table.dataTable>tbody>tr.child li {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        gap: 1rem !important;
    }

    table.dataTable>tbody>tr.child li:last-child {
        border-bottom: none !important;
    }

    table.dataTable>tbody>tr.child span.dtr-title {
        min-width: 110px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        flex-shrink: 0 !important;
        font-size: 0.8125rem !important;
    }

    table.dataTable>tbody>tr.child span.dtr-data {
        flex: 1 !important;
        text-align: left !important;
        font-size: 0.8125rem !important;
        color: #1e293b !important;
        word-break: break-all !important;
    }
}

/* Align DataTable toolbar elements in a single row (500px to 767px) */
@media (min-width: 500px) and (max-width: 767px) {
    .datatable-toolbar {
        flex-wrap: nowrap !important;
        gap: 15px !important;
        justify-content: space-between !important;
    }

    /* 1. Length menu stays left */
    .dataTables_length {
        order: 1 !important;
        margin: 0 !important;
    }

    /* 2. Buttons/Export area follows */
    .dt-buttons,
    #exportArea {
        order: 2 !important;
        margin: 0 !important;
    }

    /* 3. Search area follows on the same line */
    div.dataTables_filter,
    #dataTableBuilder_filter {
        order: 3 !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        width: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    div.dataTables_filter label,
    #dataTableBuilder_filter label {
        width: 100% !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        gap: 8px !important;
    }

    div.dataTables_filter input,
    #dataTableBuilder_filter input {
        width: 100% !important;
        max-width: 250px !important;
        /* Keep it sleek and professional */
        height: 38px !important;
        margin: 0 !important;
    }
}

/* Fix DataTable toolbar at tablet widths — keep on single row, no overflow */
@media (min-width: 768px) and (max-width: 991px) {
    .datatable-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Let the search area flex-grow to fill remaining space */
    div.dataTables_filter,
    #dataTableBuilder_filter {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    div.dataTables_filter label,
    #dataTableBuilder_filter label {
        display: inline-flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }

    /* Prevent input from exceeding available width */
    div.dataTables_filter input,
    #dataTableBuilder_filter input {
        flex: 1 !important;
        width: 100% !important;
        min-width: 120px !important;
        max-width: none !important;
        margin: 0 !important;
        height: 36px !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 8px !important;
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
        background-color: #fff !important;
    }
}

@media (min-width: 1200px) {
    .dashboard-content-inner {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Dashboard page header - DASHBOARD title + Manage Widgets button */
.dashboard-page-header {
    padding: 1.5rem 0 0 0;
    margin-bottom: 1.5rem;
}

.dashboard-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem 0;
}

.dashboard-page-title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    margin: 0;
}

.btn-manage-widgets {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.btn-manage-widgets i {
    font-size: 1rem;
}

/* Dashboard info alert */
.alert-dashboard-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    color: #0369a1;
    padding: 1rem 1.25rem;
}

.alert-dashboard-info-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.alert-dashboard-info-body {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Dashboard widget cards row */
.dashboard-widgets-row {
    margin-bottom: 1.5rem;
}

.dashboard-widget-card {
    position: relative;
    border-radius: 4px;
    padding: 1.5rem 1.25rem;
    color: #fff;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.dashboard-widget-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.95;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.dashboard-widget-value {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.dashboard-widget-bg-icon {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: 3.5rem;
    opacity: 0.2;
    z-index: 0;
}

/* Dark variant (optional) */
.dashboard-widget-purple {
    background: #7C4DBA;
}

.dashboard-widget-teal {
    background: #36C2C2;
}

.dashboard-widget-red {
    background: #F45857;
}

.dashboard-widget-blue {
    background: #3E92E5;
}

/* Dashboard widget cards - 5 colors with white text */
.dashboard-widget-card.dashboard-widget-light {
    color: #fff;
}

.dashboard-widget-light .dashboard-widget-title {
    color: rgba(255, 255, 255, 0.95);
    opacity: 1;
}

.dashboard-widget-light .dashboard-widget-value {
    color: #fff;
}

.dashboard-widget-light .dashboard-widget-bg-icon {
    opacity: 0.15;
    color: #fff;
}

.dashboard-widget-light-purple {
    background: #8E44AD;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dashboard-widget-light-teal {
    background: #32C5D2;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dashboard-widget-light-coral {
    background: #4D89D0;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dashboard-widget-light-amber {
    background: #E7505A;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dashboard-widget-light-blue {
    background: #3598DC;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Dashboard latest tables - clean list style (white bg, grey header, alternating rows, green status badges) */
.dashboard-latest-card.stunning-table-card .card-header {
    border-left-color: transparent !important;
}

.dashboard-latest-table .table-dashboard-latest thead th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 0.875rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.dashboard-latest-table .table-dashboard-latest tbody tr:nth-child(odd) {
    background-color: transparent !important;
    /* Simpler, non-striped look */
}

.dashboard-latest-table .table-dashboard-latest tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease;
}

.dashboard-latest-table .table-dashboard-latest tbody tr:hover {
    background-color: #f1f5f9 !important;
    box-shadow: inset 3px 0 0 #10b981 !important;
}

.dashboard-latest-table .table-dashboard-latest tbody td {
    padding: 1rem 1rem !important;
    border: none !important;
    color: #6b7280 !important;
    vertical-align: middle !important;
    font-size: 0.9rem !important;
}

.dashboard-latest-table .table-dashboard-latest tbody td a {
    color: #64748b !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.dashboard-latest-table .table-dashboard-latest tbody td a:hover {
    color: #2563eb !important;
    text-decoration: none !important;
}

.dashboard-latest-table .table-dashboard-latest tbody td.text-muted {
    color: #6b7280 !important;
}

.dashboard-latest-table .badge-dashboard-status {
    display: inline-block;
    background: #28a745 !important;
    color: #fff !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.35em 0.65em !important;
    border: none !important;
}

/* =====================================================
   Settings Form – Professional Design System
   ===================================================== */

/* Card container */
.settings-form-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8ecf1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

/* Data Table containers — Unified Compact Padding */
/* Data Table containers — Unified Compact Padding (Professional Reset) */
.settings-form-card .settings-form-body,
.settings-form-card .parent-table,
.settings-form-card .table-responsive,
.stunning-table-card .card-body,
[class*="p-4"].settings-form-body,
[class*="px-4"].settings-form-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure the table itself is flush and responsive */
.table-responsive {
    margin-bottom: 0 !important;
}


table.dataTable {
    margin: 0 !important;
    width: 100% !important;
}

/* Professional DataTable Column Alignment (Global Workbench Elite) */
table.dataTable thead th:first-child,
table.dataTable tbody td:first-child {
    text-align: left !important;
    width: 60px !important;
    min-width: 60px !important;
    padding-left: 1rem !important;
}

table.dataTable thead th:last-child {
    text-align: right !important;
    padding-right: 35px !important;
    /* Space for the sorting icon */
    min-width: 110px !important;
}

table.dataTable tbody td:last-child {
    text-align: right !important;
    padding-right: 1rem !important;
}

/* Force override of legacy text-center for ID and Action columns */
table.dataTable thead th.text-center:first-child,
table.dataTable tbody td.text-center:first-child {
    text-align: left !important;
}

table.dataTable thead th.text-center:last-child,
table.dataTable tbody td.text-center:last-child {
    text-align: right !important;
}

/* Maintain sorting icon position for right-aligned headers */
table.dataTable thead .sorting:last-child,
table.dataTable thead .sorting_asc:last-child,
table.dataTable thead .sorting_desc:last-child {
    background-position: center right 10px !important;
}



/* Header — Unified Compact Padding */
.settings-form-header {
    padding: .5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e8ecf1;
}

.settings-form-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #206bc4 0%, #1a569d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    /* Increased from 1.1rem */
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(32, 107, 196, 0.25);
}

.settings-form-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.settings-form-subtitle {
    font-size: 0.8125rem;
    color: #94a3b8;
    margin: 0.125rem 0 0;
    font-weight: 400;
}

/* Form body — Unified Compact Padding (Hard Override) */
.settings-form-body,
.settings-form-body.p-4,
.settings-form-body.px-4,
.settings-form-body.py-4 {
    padding: 0.5rem 0 !important;
}


@media (max-width: 991px) {

    .settings-form-body,
    .settings-form-body.p-4,
    .settings-form-body.px-4,
    .settings-form-body.py-4 {
        padding: 0 !important;
    }
}


/* Global: Compact horizontal gutters for all filter/form rows */
.settings-form-body .row,
.settings-form-body .row.g-3,
.settings-form-body .row.g-4 {
    --bs-gutter-x: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Section grouping — Unified Compact Padding */

.settings-section:last-child {
    border-bottom: none;
}

.settings-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    padding-bottom: 0px;
}

.settings-section-label i {
    font-size: 0.75rem;
    color: #cbd5e1;
}

/* Horizontal field row (Desktop Elite) */
.settings-field-row {
    display: flex;
    align-items: flex-start;
    padding: 0.875rem 0;
    gap: 1.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.settings-field-row:last-child {
    border-bottom: none;
}

.settings-field-label {
    flex: 0 0 180px;
    max-width: 180px;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    padding-top: 0.65rem;
    line-height: 1.4;
}



@media (max-width: 991px) {
    .settings-field-row {
        flex-direction: column !important;
        gap: 0.25rem !important;
        padding: 0.65rem 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        align-items: flex-start !important;
    }

    .settings-field-row:last-child {
        border-bottom: none !important;
    }

    .settings-field-label {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        font-weight: 600 !important;
        font-size: 0.8125rem !important;
        color: #374151 !important;
        padding-top: 0 !important;
        padding-right: 0 !important;
        min-width: unset !important;
        margin-bottom: 0.2rem !important;
    }

    .settings-field-input {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .settings-field-input .form-control,
    .settings-field-input .form-select,
    .settings-field-input .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .settings-section-label {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .settings-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}




.settings-field-input {
    flex: 1;
    min-width: 0;
}

/* Input styling — Global 4px Radius for Elite Design */
.settings-input,
.settings-phone-input,
.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding-top: 0.5rem;
    padding-right: 0.875rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #334155;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    height: auto !important;
}


/* Ensure Select2 selection height and alignment matches standard inputs */
.select2-container .select2-selection--single {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}


textarea.settings-input {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
    display: block;
}

/* CKEditor 5 Professional Elite Styling */
.ck.ck-editor {
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.ck.ck-editor__editable {
    min-height: 300px !important;
    border: none !important;
    padding: 1.5rem !important;
    font-size: 0.9375rem !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    background: #fff !important;
}

.ck.ck-toolbar {
    background: #f8fafc !important;
    border: none !important;
    border-bottom: 1px solid #eef2f6 !important;
    padding: 0.5rem 0.75rem !important;
}

.ck.ck-editor__editable.ck-focused {
    box-shadow: none !important;
    outline: none !important;
}

.ck.ck-editor.ck-focused {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.12) !important;
}



.settings-input {
    padding-left: 0.875rem;
}

.settings-phone-input {
    padding-left: 0;
    /* Let ITI library classes/inline styles handle it */
}

/* International Tel Input Fix (V13 Compatibility) 
   CRITICAL: Do not override .selected-flag display as it breaks library layout */
.intl-tel-input,
.iti {
    display: block !important;
    width: 100% !important;
}

/* Ensure ITI inputs in settings-field-input have enough room for dial codes.
   We use !important to be absolutely sure this wins against any base styles. */
.settings-field-input .intl-tel-input input,
.settings-field-input .iti input {
    padding-left: 90px !important;
}

.settings-field-input .intl-tel-input.separate-dial-code input,
.settings-field-input .iti.separate-dial-code input {
    padding-left: 95px !important;
}


.settings-input:focus,
.settings-phone-input:focus {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    outline: none !important;
}

.settings-input::placeholder {
    color: #cbd5e1 !important;
    font-weight: 400;
}

/* Upload zone */
.settings-upload-zone {
    position: relative;
}

.settings-upload-zone .settings-input[type="file"] {
    cursor: pointer;
}

.settings-upload-zone .settings-input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    margin-right: 0.75rem;
    transition: all 0.2s ease;
}

.settings-upload-zone .settings-input[type="file"]::file-selector-button:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #1e293b;
}

/* Preview area */
.settings-preview-area {
    margin-top: 0.625rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #e2e8f0;
    display: inline-block;
    min-width: 60px;
    min-height: 36px;
}

.settings-preview-area img {
    max-height: 48px;
    border-radius: 4px;
}

/* Footer — Unified Compact Padding */
.settings-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.875rem;
    background: #f8fafc;
    border-top: 1px solid #e8ecf1;
}

@media (max-width: 991px) {
    .settings-form-footer {
        padding: 0.875rem !important;
        gap: 0.625rem !important;
    }

    .settings-form-footer .d-flex {
        width: 100% !important;
        gap: 0.625rem !important;
    }

    /* Submit and Cancel buttons — equal-width side-by-side */
    .settings-form-footer .btn.settings-btn-save,
    .settings-form-footer .btn.settings-btn-cancel,
    .settings-form-footer a.settings-btn-cancel {
        flex: 1 1 0 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Hide the "required fields" hint on mobile */
    .settings-form-footer>small {
        display: none !important;
    }
}


@media (max-width: 767px) {
    .settings-form-footer {
        padding: 1rem;
    }

    .settings-form-footer .d-flex {
        width: 100%;
        gap: 10px !important;
    }

    .settings-btn-save,
    .settings-btn-cancel {
        flex: 1;
        justify-content: center;
        text-align: center;
    }
}


.settings-btn-save {
    background: linear-gradient(135deg, #206bc4 0%, #1a569d 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(32, 107, 196, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.settings-btn-save:hover {
    background: linear-gradient(135deg, #1a569d 0%, #206bc4 100%) !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.35) !important;
    transform: translateY(-1px);
}

.settings-btn-cancel {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-transform: none;
    letter-spacing: 0.01em;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
}

.settings-btn-cancel:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px);
}

.settings-btn-export {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-btn-export:hover {
    background: #ffffff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;
}

.settings-btn-outline {
    background: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-btn-outline:hover {
    background: #f8fafc !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}


/* Responsive — Layout Specifics only */
@media (max-width: 767px) {
    .settings-field-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .settings-field-label {
        flex: none;
        max-width: none;
        text-align: left;
        padding-top: 0;
        margin-bottom: 0.25rem;
    }

    .settings-form-footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
}

/* Professional Navigation Tabs (Workbench Aesthetic) */
.settings-nav-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    padding: 0.5rem;
}

.settings-nav-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
}

.settings-nav-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.settings-nav-item {
    flex: 0 0 auto;
}

.settings-nav-link {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.settings-nav-link:hover {
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
}

.settings-nav-link.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

/* User Profile Title styling */
.customer-profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0.5rem 0 1.5rem 0.25rem;
    letter-spacing: -0.01em;
}

.settings-input::placeholder {
    color: #cbd5e1 !important;
    font-weight: 400;
}

/* Upload zone */
.settings-upload-zone {
    position: relative;
}

.settings-upload-zone .settings-input[type="file"] {
    cursor: pointer;
}

.settings-upload-zone .settings-input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    margin-right: 0.75rem;
    transition: all 0.2s ease;
}

.settings-upload-zone .settings-input[type="file"]::file-selector-button:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #1e293b;
}

/* Preview area */
.settings-preview-area {
    margin-top: 0.625rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #e2e8f0;
    display: inline-block;
    min-width: 60px;
    min-height: 36px;
}

.settings-preview-area img {
    max-height: 48px;
    border-radius: 4px;
}

/* Footer */
.settings-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: #f8fafc;
    border-top: 1px solid #e8ecf1;
}

.settings-btn-save {
    background: linear-gradient(135deg, #206bc4 0%, #1a569d 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(32, 107, 196, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.settings-btn-save:hover {
    background: linear-gradient(135deg, #1a569d 0%, #206bc4 100%) !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.35) !important;
    transform: translateY(-1px);
}

.settings-btn-cancel {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-transform: none;
    letter-spacing: 0.01em;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
}

.settings-btn-cancel:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px);
}


/* Responsive */
@media (max-width: 767px) {
    .settings-field-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .settings-field-label {
        flex: none;
        max-width: none;
        text-align: left;
        padding-top: 0;
        margin-bottom: 0.25rem;
    }

    .settings-form-footer {
        padding: 1rem 1.25rem;
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
}

/* Professional Navigation Tabs (Workbench Aesthetic) */
.settings-nav-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    padding: 0.5rem;
}

.settings-nav-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
}

.settings-nav-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.settings-nav-item {
    flex: 0 0 auto;
}

.settings-nav-link {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.settings-nav-link:hover {
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
}

.settings-nav-link.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

/* User Profile Title styling */
.customer-profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0.5rem 0 1.5rem 0.25rem;
    letter-spacing: -0.01em;
}

/* Responsive */
@media (max-width: 767px) {
    .settings-nav-card {
        padding: 0.375rem;
    }

    .settings-nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* THE HARD FIX - Force blue background and white text for active pagination */
.dataTables_wrapper .dataTables_paginate div .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dataTables_wrapper .dataTables_paginate .paginate_button.active:hover,
.page-item.active .page-link {
    background: #206bc4 !important;
    background-color: #206bc4 !important;
    color: #ffffff !important;
    border-color: #206bc4 !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Stunning Form Input Elements for true consistency */
.stunning-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    overflow: hidden;
    transition: all 0.2s ease;
}

.stunning-input-group:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

.stunning-input-group-text {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #334155;
    background-color: #f8fafc;
    border-right: 1px solid #cbd5e1;
    white-space: nowrap;
}

.stunning-input-group-text.border-start {
    border-right: none;
    border-left: 1px solid #cbd5e1;
}

.stunning-input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 44px;
    padding: 0 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.stunning-input:focus {
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

select.stunning-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 44px;
}

/* Calendar Redesign - Simplified */
/* Calendar Redesign - Simply Elegant */
.calendar-month .month-nav {
    border: none !important;
    background: #f8fafc !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #3b82f6 !important;
    margin: 0 4px !important;
}

.calendar-month .month-nav:hover {
    background: #eff6ff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.calendar-month .month-nav .calendar-icon-style {
    margin: 0 !important;
    font-size: 0.875rem !important;
}

.calendar-month .current-month-selection h2 {
    font-size: 1.125rem !important;
    font-weight: 800;
    color: #0f172a;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem;
    margin: 0 0 0 12px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.calendar-month .current-month-selection .current-month-arrow {
    font-size: 1rem !important;
    color: #94a3b8;
    transition: color 0.2s;
}

.calendar-month .current-month-selection:hover .current-month-arrow {
    color: #3b82f6;
}

.calenBox .wkText {
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 10px 0;
    /* Compressed from 20px */
    text-align: center;
}

.calenBox {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.03);
}

.calender_box {
    border: 1px solid #f1f5f9 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    min-height: 105px !important;
    /* Balanced height for no-scroll but professional feel */
    height: auto !important;
    padding: 15px !important;
    /* Balanced padding */
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
    background: #fff;
    position: relative;
    cursor: pointer;
}

.calender_box:hover {
    background: #fbfcfe !important;
    z-index: 10;
}

.calender_box .final_day {
    font-size: 1rem;
    font-weight: 500;
    color: #334155;
    display: block;
    margin-bottom: 5px;
    /* Balanced spacing */
}

.calender_box .dTfont {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #2563eb;
    position: absolute;
    bottom: 12px !important;
    /* Compact alignment */
    left: 15px;
    transition: color 0.2s;
}

.dt-not-available {
    background-color: #f1f5f9 !important;
    /* Pronounced muted gray */
    cursor: default !important;
}

.dt-not-available * {
    opacity: 0.5 !important;
    /* Visually "recede" entire cell content */
}

.dt-not-available .final_day {
    color: #64748b !important;
    font-weight: 400 !important;
}

.dt-not-available .dTfont {
    color: #94a3b8 !important;
    font-size: 0.6875rem !important;
}

/* Limit hover to active dates only */
.calender_box:not(.dt-not-available):hover {
    background: #f0f9ff !important;
    /* Subtle blue tint */
    z-index: 10;
}

.calender_box:not(.dt-not-available):hover .dTfont {
    color: #1d4ed8;
}

.dt-today {
    background-color: #fff !important;
    border: 1px solid #2563eb !important;
    z-index: 5;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    /* Stronger glow to match vibrant blue */
}

.dt-today .final_day {
    color: #3b82f6 !important;
    font-weight: 700;
}

.col-md-02:last-child .calender_box {
    border-right: 1px solid #f1f5f9 !important;
}

.calenBox>.margin-top10:last-child .calender_box {
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Custom dropdown for calendar */
#calendar_dropdown {
    border-radius: 0 !important;
    border: 1px solid #e2e8f0;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.settings-btn-save,
.settings-btn-cancel {
    padding: 0.5rem 1.25rem;
    border-radius: 6px !important;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

/* Precise Mockup Buttons */
.calendar-mock-btn {
    background: linear-gradient(135deg, #206bc4 0%, #1a569d 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.625rem 1.5rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 44px !important;
    box-shadow: 0 2px 8px rgba(32, 107, 196, 0.2) !important;
}

.calendar-mock-btn:hover {
    background: linear-gradient(135deg, #1a569d 0%, #206bc4 100%) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.3) !important;
}

.calendar-mock-btn:active {
    transform: translateY(0);
}

/* --- Global Layout Refinement: Remove Breadcrumb Headers --- */
.content-header,
.app-content-header,
.dashboard-page-header {
    display: none !important;
}

/* Ensure content has consistent top breathing room since headers are gone */
.dashboard-content-inner {
    padding-top: 1rem !important;
}

.dashboard-page-wrapper {
    background-color: #f8fafc !important;
    /* Consistent workbench background */
}

/* Stats Card v2 (Bookings, Reports, etc.) */
.stats-card-v2 {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stats-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05) !important;
}

.stats-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.bg-light-success {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

.bg-light-primary {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

.bg-light-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.bg-light-info {
    background-color: rgba(23, 162, 184, 0.1) !important;
}

.border-start-accent-success {
    border-left: 4px solid #28a745 !important;
}

.border-start-accent-primary {
    border-left: 4px solid #007bff !important;
}

.border-start-accent-warning {
    border-left: 4px solid #ffc107 !important;
}

.border-start-accent-info {
    border-left: 4px solid #17a2b8 !important;
}

/* Status Badges */
.status-badge {
    padding: 0.45rem 1.15rem !important;
    border-radius: 50rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
}

.status-badge i {
    font-size: 0.9375rem !important;
    margin-top: 0 !important;
}

.status-accepted {
    background-color: #e6ffed !important;
    color: #1a7f37 !important;
}

.status-pending {
    background-color: #fef9c3 !important;
    color: #854d0e !important;
}

.status-cancelled {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

.status-expired {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.status-processing {
    background-color: #e0f2fe !important;
    color: #075985 !important;
}

.status-host {
    background-color: #f0f4ff !important;
    color: #4a6ee0 !important;
    text-decoration: none !important;
}



.ms-3 {
    margin-left: 0.5rem !important;
}

/* Workbench Premium Dropdown */
.wb-dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    padding: 0.5rem !important;
    min-width: 160px;
    background: #ffffff !important;
    animation: dropdownFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    margin-top: 0.5rem !important;
    z-index: 1050;
    transform-origin: top center;
}

.wb-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    clear: both;
}

.wb-dropdown-item i {
    font-size: 1rem !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease !important;
    width: 16px !important;
    text-align: center !important;
}

.wb-dropdown-item:hover,
.wb-dropdown-item:focus {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

.wb-dropdown-item:hover i {
    color: #3b82f6 !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        margin-top: -0.25rem;
    }

    to {
        opacity: 1;
        margin-top: 0.5rem;
    }
}

/* Calendar Specific Redesign Style */
.calendar-blue-btn {
    background-color: #1d5fb1 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 7px 24px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(29, 95, 177, 0.2) !important;
    text-decoration: none !important;
}

.calendar-blue-btn:hover {
    background-color: #164e91 !important;
    box-shadow: 0 6px 18px rgba(29, 95, 177, 0.3) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.calendar-outline-btn {
    background-color: #ffffff !important;
    color: #1d5fb1 !important;
    border: 1px solid #1d5fb1 !important;
    border-radius: 4px !important;
    padding: 7px 24px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.calendar-outline-btn:hover {
    background-color: #f0f7ff !important;
    color: #164e91 !important;
    border-color: #164e91 !important;
}


/* Calendar Specific Redesign Style */
.calendar-blue-btn {
    background-color: #1d5fb1 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 7px 24px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(29, 95, 177, 0.2) !important;
    text-decoration: none !important;
}

.calendar-blue-btn:hover {
    background-color: #164e91 !important;
    box-shadow: 0 6px 18px rgba(29, 95, 177, 0.3) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.calendar-outline-btn {
    background-color: #ffffff !important;
    color: #1d5fb1 !important;
    border: 1px solid #1d5fb1 !important;
    border-radius: 4px !important;
    padding: 7px 24px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.calendar-outline-btn:hover {
    background-color: #f0f7ff !important;
    color: #164e91 !important;
    border-color: #164e91 !important;
}

/* Workbench Table Modernization */
.workbench-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.workbench-table thead th {
    background-color: #f8fafc !important;
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    padding: 1rem !important;
    padding-right: 2rem !important;
    /* Critical: Protection for sorting icons */
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.workbench-table tbody td {
    padding: 1rem !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
}

/* Action Buttons */
.btn-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.btn-action-edit {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

.btn-action-edit:hover {
    background-color: #2563eb !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* Flexible Column Wrapping */
.workbench-table td:not(:first-child):not(:last-child) {
    min-width: 120px;
    max-width: 400px;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.workbench-table td:first-child,
.workbench-table td:last-child {
    white-space: nowrap !important;
}

.workbench-table td a {
    color: #2563eb;
    font-weight: 500;
}

.workbench-table td a:hover {
    text-decoration: underline;
}

.bold-column {
    font-weight: 600 !important;
    color: #0f172a !important;
}

/* ============================================================
   Workbench Elite V3 — Global Design Tokens & Profile
   ============================================================ */

.settings-input {
    height: 38px !important;
    border-radius: 4px !important;
    border: 1px solid #d1d5db !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.settings-input:focus {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.12) !important;
    outline: none !important;
}

/* Elite Action Buttons */
.settings-btn-save {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1) !important;
}

.settings-btn-save:hover {
    background-color: #1d4ed8 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
    transform: translateY(-1px);
    color: #ffffff !important;
}

.settings-btn-cancel {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.settings-btn-cancel:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Upload Input Group (Modernized) */
.wb-upload-group,
.addon-upload-group {
    border-radius: 8px !important;
    display: flex !important;
}

.addon-upload-input {
    height: 38px !important;
    border-radius: 4px 0 0 4px !important;
    border: 1px solid #d1d5db !important;
    border-right: none !important;
    background: #fff !important;
}

.addon-upload-browse {
    border-radius: 0 4px 4px 0 !important;
    border: 1px solid #d1d5db !important;
    border-left: none !important;
    background: #f8fafc !important;
    font-weight: 600 !important;
    color: #475569 !important;
    height: 38px !important;
}

/* Profile Specific Layouts */
.profile-avatar-container {
    padding: 6px;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.profile-avatar-container img {
    border: 2px solid #fff;
}

/* SMOTHER FIX: Prevent horizontal overflow (bottom bar) across all browsers */
/* We avoid 'html, body' to keep sidebar transitions and sticky elements smooth */

.app-wrapper,
.app-main,
.content-wrapper {
    max-width: 100% !important;
    overflow-x: clip !important;
    /* Clips the bleed-out without creating a new independent scroll container context */
}

@supports not (overflow-x: clip) {

    .app-wrapper,
    .app-main,
    .content-wrapper {
        overflow-x: hidden !important;
    }
}

/* Fix for horizontal scroll caused by Bootstrap .row having -15px margins when inside a .px-0 container */
.container-fluid.px-0>.row,
.container-fluid.px-0>form>.row,
.container-fluid.px-0 .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure footer doesn't overflow */
.app-footer {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Fix for horizontal scroll caused by Bootstrap .row having -15px margins when inside a .px-0 container */
.container-fluid.px-0>.row,
.container-fluid.px-0>form>.row,
.container-fluid.px-0 .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure footer doesn't overflow */
.app-footer {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Star Rating System */
.rating-star-item.fa-star:before {
    color: #1e293b !important;
    /* Force Black by default */
    transition: color 0.2s ease;
}

.rating-star-item.rating-star-active.fa-star:before {
    color: #f59e0b !important;
    /* Yellow/Amber when active */
}

.rating-star-item {
    transition: transform 0.2s ease;
    cursor: pointer;
}

.rating-star-item:hover {
    transform: scale(1.2);
}

.rating-star-item:hover.fa-star:before {
    color: #f59e0b !important;
}

/* View website Link in Topbar - Exact Design Match */
.visit-website-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 15px !important;
    margin-right: 1.25rem;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 38px;
    align-self: center;
    gap: 12px;
    text-decoration: none !important;
}

.visit-website-link:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
}

.visit-website-link i {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

@media (max-width: 575px) {
    .visit-website-link {
        padding: 6px 10px !important;
        margin-right: 0.75rem;
        gap: 0;
    }
}