/* Admin redesign: shared styles for sidebar and dashboard widgets */

/* Global button palette override (admin + superadmin + auth) */
body.app-default,
body.auth-redesign-page {
    --rd-primary: #1f2937;
    --rd-primary-hover: #111827;
    --rd-primary-focus: rgba(31, 41, 55, 0.22);
    --rd-light-bg: #edf1f6;
    --rd-light-bg-hover: #e3e9f0;
    --rd-light-border: #dce3eb;
    --rd-light-border-hover: #cfd8e3;
}

body.app-default .btn-primary,
body.auth-redesign-page .btn-primary {
    background-color: var(--rd-primary) !important;
    border-color: var(--rd-primary) !important;
    color: #ffffff !important;
}

body.app-default .btn.btn-primary,
body.auth-redesign-page .btn.btn-primary {
    background-color: var(--rd-primary) !important;
    border-color: var(--rd-primary) !important;
    color: #ffffff !important;
}

body.app-default .btn-primary:hover,
body.app-default .btn-primary:focus,
body.app-default .btn-primary:active,
body.app-default .btn-primary.active,
body.auth-redesign-page .btn-primary:hover,
body.auth-redesign-page .btn-primary:focus,
body.auth-redesign-page .btn-primary:active,
body.auth-redesign-page .btn-primary.active {
    background-color: var(--rd-primary-hover) !important;
    border-color: var(--rd-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem var(--rd-primary-focus) !important;
}

body.app-default .btn.btn-primary:hover,
body.app-default .btn.btn-primary:focus,
body.app-default .btn.btn-primary:active,
body.app-default .btn.btn-primary.active,
body.auth-redesign-page .btn.btn-primary:hover,
body.auth-redesign-page .btn.btn-primary:focus,
body.auth-redesign-page .btn.btn-primary:active,
body.auth-redesign-page .btn.btn-primary.active {
    background-color: var(--rd-primary-hover) !important;
    border-color: var(--rd-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem var(--rd-primary-focus) !important;
}

body.app-default .btn-light-primary,
body.auth-redesign-page .btn-light-primary {
    background-color: var(--rd-light-bg) !important;
    border-color: var(--rd-light-border) !important;
    color: #1f2937 !important;
}

body.app-default .btn.btn-light-primary,
body.auth-redesign-page .btn.btn-light-primary {
    background-color: var(--rd-light-bg) !important;
    border-color: var(--rd-light-border) !important;
    color: #1f2937 !important;
}

body.app-default .btn-light-primary:hover,
body.app-default .btn-light-primary:focus,
body.app-default .btn-light-primary:active,
body.app-default .btn-light-primary.active,
body.auth-redesign-page .btn-light-primary:hover,
body.auth-redesign-page .btn-light-primary:focus,
body.auth-redesign-page .btn-light-primary:active,
body.auth-redesign-page .btn-light-primary.active {
    background-color: var(--rd-light-bg-hover) !important;
    border-color: var(--rd-light-border-hover) !important;
    color: #111827 !important;
    box-shadow: none !important;
}

body.app-default .btn.btn-light-primary:hover,
body.app-default .btn.btn-light-primary:focus,
body.app-default .btn.btn-light-primary:active,
body.app-default .btn.btn-light-primary.active,
body.auth-redesign-page .btn.btn-light-primary:hover,
body.auth-redesign-page .btn.btn-light-primary:focus,
body.auth-redesign-page .btn.btn-light-primary:active,
body.auth-redesign-page .btn.btn-light-primary.active {
    background-color: var(--rd-light-bg-hover) !important;
    border-color: var(--rd-light-border-hover) !important;
    color: #111827 !important;
    box-shadow: none !important;
}

body.app-default .link-primary,
body.auth-redesign-page .link-primary {
    color: #1f2937 !important;
}

body.app-default .link-primary:hover,
body.auth-redesign-page .link-primary:hover {
    color: #111827 !important;
}

#kt_app_sidebar {
    background: linear-gradient(180deg, #101826 0%, #111d2c 100%);
    border-right: 1px solid #1f2c3d;
}

#kt_app_sidebar .app-sidebar-logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#kt_app_sidebar .dashboard-company-switcher {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 4px 8px 12px;
}

#kt_app_sidebar .dashboard-company-label {
    color: #7f8ca4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

#kt_app_sidebar .dashboard-company-value {
    color: #f4f7fb;
    font-size: 13px;
    font-weight: 700;
}

#kt_app_sidebar .dashboard-company-select {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f4f7fb;
}

#kt_app_sidebar .dashboard-company-select:focus {
    border-color: rgba(216, 255, 31, 0.75);
    box-shadow: 0 0 0 0.2rem rgba(216, 255, 31, 0.18);
}

#kt_app_sidebar .dashboard-company-select option {
    background-color: #101826;
    color: #f4f7fb;
}

#kt_app_sidebar .menu {
    gap: 2px;
}

#kt_app_sidebar .menu-link {
    border-radius: 10px;
    min-height: 42px;
    transition: all 0.2s ease;
}

#kt_app_sidebar .menu-link .menu-icon i,
#kt_app_sidebar .menu-link .menu-title,
#kt_app_sidebar .menu-link .menu-arrow:after {
    color: #9aa7bb;
}

#kt_app_sidebar .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

#kt_app_sidebar .menu-link.active,
#kt_app_sidebar .menu-item.here > .menu-link,
#kt_app_sidebar .menu-link.show {
    background-color: #d8ff1f;
}

#kt_app_sidebar .menu-link.active .menu-icon i,
#kt_app_sidebar .menu-link.active .menu-title,
#kt_app_sidebar .menu-item.here > .menu-link .menu-icon i,
#kt_app_sidebar .menu-item.here > .menu-link .menu-title,
#kt_app_sidebar .menu-link.show .menu-icon i,
#kt_app_sidebar .menu-link.show .menu-title,
#kt_app_sidebar .menu-link.active .menu-arrow:after,
#kt_app_sidebar .menu-item.here > .menu-link .menu-arrow:after,
#kt_app_sidebar .menu-link.show .menu-arrow:after {
    color: #111827;
}

#kt_app_sidebar .menu-sub .menu-link {
    min-height: 34px;
    border-radius: 8px;
}

#kt_app_sidebar .app-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
}

#kt_app_sidebar .dashboard-user-tile {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
}

#kt_app_sidebar .dashboard-user-tile .text-gray-500,
#kt_app_sidebar .dashboard-user-tile .text-gray-800 {
    color: #d3dbe7 !important;
}

#kt_app_sidebar .btn-phase-link {
    background-color: #d8ff1f !important;
    border-color: #d8ff1f !important;
    color: #111827 !important;
    font-weight: 700;
}

#kt_app_sidebar .btn-phase-link i,
#kt_app_sidebar .btn-phase-link span {
    color: #111827 !important;
}

#kt_app_sidebar .btn-phase-link:hover,
#kt_app_sidebar .btn-phase-link:focus,
#kt_app_sidebar .btn-phase-link:active,
#kt_app_sidebar .btn-phase-link.active,
#kt_app_sidebar .btn-phase-link:focus-visible {
    background-color: #c3ea16 !important;
    border-color: #c3ea16 !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 0.2rem rgba(216, 255, 31, 0.22) !important;
}

#kt_app_sidebar .btn-phase-link:hover i,
#kt_app_sidebar .btn-phase-link:focus i,
#kt_app_sidebar .btn-phase-link:active i,
#kt_app_sidebar .btn-phase-link:hover span,
#kt_app_sidebar .btn-phase-link:focus span,
#kt_app_sidebar .btn-phase-link:active span {
    color: #0f172a !important;
}

.dashboard-shell {
    background: linear-gradient(180deg, #f7f8fb 0%, #f0f2f7 100%);
    border-radius: 18px;
    padding: 18px;
}

.dashboard-toolbar {
    background-color: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    padding: 14px 18px;
}

.dashboard-card {
    border: 1px solid #e6e8ec;
    border-radius: 16px;
}

.dashboard-card .card-header {
    min-height: auto;
}

.dashboard-card.card {
    box-shadow: 0 8px 20px rgba(31, 41, 55, 0.05) !important;
}

.performance-hero {
    border-radius: 14px;
    padding: 22px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.performance-hero--today {
    background: linear-gradient(120deg, #101826 0%, #1d2a3d 100%);
}

.performance-hero--month {
    background: linear-gradient(120deg, #d8ff1f 0%, #bfe61b 100%);
    color: #1f2937;
}

.performance-hero .hero-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
}

.performance-hero--month .hero-badge {
    background-color: #1f2937;
    opacity: 0.9;
}

.metric-box {
    border: 1px solid #eceef2;
    border-radius: 12px;
    padding: 14px;
}

.stat-mini-card {
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
}

.stat-mini-card:hover {
    background-color: #f9fafb !important;
}

.loyalty-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.loyalty-summary-three {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.loyalty-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e4e8ef;
    background-color: #f8fafc;
    border-radius: 10px;
    padding: 10px 12px;
    color: #1f2937;
}

.loyalty-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 10px;
}

.loyalty-item-new .loyalty-dot {
    background-color: #1f2937;
}

.loyalty-item-returning .loyalty-dot {
    background-color: #d8ff1f;
}

.loyalty-item-bsj .loyalty-dot {
    background-color: #50cd89;
}

.loyalty-item-tiktok .loyalty-dot {
    background-color: #7239ea;
}

.loyalty-item-other .loyalty-dot {
    background-color: #a1a5b7;
}

.loyalty-count {
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
}

.loyalty-label {
    font-weight: 700;
    font-size: 12px;
    color: #4b5563;
}

.loyalty-percentage {
    margin-left: auto;
    font-weight: 800;
    font-size: 12px;
    color: #111827;
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.leaderboard-rank {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.metric-pill {
    border-radius: 999px;
    border: 1px solid #d5dae1;
    padding: 8px 12px;
    background: #ffffff;
}

.btn-view-all {
    background-color: #edf1f6;
    border: 1px solid #dce3eb;
    color: #293241;
    border-radius: 999px;
    padding: 0.52rem 1rem;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
}

.btn-view-all:hover,
.btn-view-all:focus {
    background-color: #e3e9f0;
    border-color: #cfd8e3;
    color: #111827;
    box-shadow: none;
}

.qr-management-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.qr-management-hero {
    border-radius: 18px;
    padding: 22px;
    background: linear-gradient(120deg, #101826 0%, #162236 55%, #1f2937 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(16, 24, 38, 0.14);
}

.qr-management-hero::after {
    content: "";
    position: absolute;
    inset: auto -80px -70px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(216, 255, 31, 0.24) 0%,
        rgba(216, 255, 31, 0) 72%
    );
    pointer-events: none;
}

.qr-management-hero-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.qr-management-hero-text {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0;
}

.qr-management-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.09);
    color: #f4f7fb;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.qr-management-chip i {
    color: #d8ff1f;
}

.qr-management-card {
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.05) !important;
    overflow: hidden;
}

.qr-management-card .card-header {
    min-height: auto;
    padding-top: 18px;
    padding-bottom: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.qr-management-card .card-body {
    padding-top: 0;
}

.qr-management-stat {
    border: 1px solid #e8edf2;
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    height: 100%;
    box-shadow: 0 8px 20px rgba(31, 41, 55, 0.04);
}

.qr-management-stat-label {
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.qr-management-stat-value {
    color: #111827;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.qr-management-stat-subtext {
    color: #6b7280;
    font-size: 12px;
    margin-top: 6px;
}

.qr-management-search {
    position: relative;
}

.qr-management-search .ki-magnifier {
    color: #8c98ab;
}

.qr-management-search .form-control {
    border-radius: 999px;
    border-color: #dbe2ea;
    background-color: #f8fafc;
    padding-left: 2.8rem;
    min-width: 260px;
}

.qr-management-search .form-control:focus {
    background-color: #ffffff;
    border-color: #b9c5d6;
    box-shadow: 0 0 0 0.2rem rgba(31, 41, 55, 0.08);
}

.qr-management-table {
    margin-bottom: 0;
}

.qr-management-table thead th {
    border-bottom: 1px solid #edf1f5;
    color: #6b7280;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.qr-management-table tbody tr {
    transition: background-color 0.2s ease;
}

.qr-management-table tbody tr:hover {
    background-color: #fafbfc;
}

.qr-management-batch-symbol {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1f2937 0%, #324156 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
}

.qr-management-batch-symbol i {
    color: #d8ff1f !important;
}

.qr-management-batch-link {
    color: #111827;
    font-weight: 800;
    line-height: 1.25;
}

.qr-management-batch-link:hover {
    color: #1f2937;
}

.qr-management-empty {
    padding: 28px 20px;
}

.qr-management-empty .qr-management-empty-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: #f3f6fb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.qr-management-empty .qr-management-empty-icon i {
    color: #8c98ab;
}

.qr-create-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.qr-create-hero {
    border-radius: 18px;
    padding: 22px;
    background: linear-gradient(120deg, #101826 0%, #162236 55%, #1f2937 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(16, 24, 38, 0.14);
}

.qr-create-hero::after {
    content: "";
    position: absolute;
    inset: auto -90px -90px auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(216, 255, 31, 0.22) 0%,
        rgba(216, 255, 31, 0) 72%
    );
    pointer-events: none;
}

.qr-create-hero-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.qr-create-hero-text {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0;
}

.qr-create-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.09);
    color: #f4f7fb;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.qr-create-chip i {
    color: #d8ff1f;
}

.qr-create-card {
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.05) !important;
    overflow: hidden;
}

.qr-create-card .card-header {
    min-height: auto;
    padding-top: 18px;
    padding-bottom: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.qr-create-card .card-body {
    padding-top: 0;
}

.qr-create-canvas-panel {
    border: 1px solid #e5e9f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 14px;
}

.qr-create-canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid #d9e1ea;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.qr-create-help {
    margin-top: 10px;
    color: #6b7280;
    font-size: 12px;
}

.qr-create-tab.nav-tabs {
    border-bottom: 0;
    gap: 8px;
}

.qr-create-tab .nav-link {
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #f8fafc;
    color: #374151;
    font-weight: 700;
    padding: 10px 14px;
}

.qr-create-tab .nav-link:hover {
    background: #edf1f6;
    color: #111827;
}

.qr-create-tab .nav-link.active {
    background: #1f2937;
    border-color: #1f2937;
    color: #ffffff;
}

.qr-create-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: #111827;
}

.qr-create-summary {
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e6e8ec;
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.04);
}

.qr-create-summary-item {
    border: 1px solid #e8edf2;
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    height: 100%;
}

.qr-create-summary-label {
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.qr-create-summary-value {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
}

.qr-create-summary-note {
    color: #6b7280;
    font-size: 12px;
    margin-top: 6px;
}

.qr-create-presets {
    border-top: 1px dashed #d9e1ea;
    padding-top: 12px;
    margin-top: 12px;
}

.qr-create-preset-btn {
    border-radius: 999px;
    border: 1px solid #dbe2ea;
    background: #f8fafc;
    color: #111827;
    font-weight: 700;
}

.qr-create-preset-btn:hover,
.qr-create-preset-btn:focus {
    background: #edf1f6;
    border-color: #cfd8e3;
    color: #111827;
    box-shadow: none;
}

.qr-create-action {
    display: flex;
    justify-content: flex-end;
}

.qr-create-action .btn {
    min-width: 220px;
}

body.sidebar-collapsed #kt_app_sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Sidebar right-edge click zone */
.sidebar-edge-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
    pointer-events: auto;
    transition:
        background-color 0.2s ease,
        width 0.2s ease;
}

.sidebar-edge-toggle:hover {
    width: 8px;
    background-color: rgba(59, 130, 246, 0.3);
}

/* Sidebar expand button (visible when collapsed) */
.sidebar-expand-btn {
    position: fixed !important;
    left: 0;
    top: 74px;
    z-index: 1095;
    width: 30px;
    height: 72px;
    border-radius: 0 16px 16px 0;
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 0 !important;
    color: #ffffff !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    box-shadow: 8px 0 20px rgba(17, 24, 39, 0.12);
    transition:
        background-color 0.2s ease,
        opacity 0.2s ease;
}

body.sidebar-collapsed .sidebar-expand-btn {
    display: inline-flex !important;
}

.sidebar-expand-btn:hover,
.sidebar-expand-btn:focus,
.sidebar-expand-btn:active {
    background: #111827 !important;
    color: #ffffff !important;
    transform: none;
}

.sidebar-expand-btn i {
    color: #ffffff !important;
}

body.sidebar-collapsed #kt_app_main {
    margin-left: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    padding-left: 0 !important;
}

body.sidebar-collapsed #kt_app_wrapper {
    gap: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

body.sidebar-collapsed .app-main {
    width: 100% !important;
    flex: 1 1 auto !important;
}

body.sidebar-collapsed .app-content,
body.sidebar-collapsed .app-container.container-xxl {
    max-width: 100% !important;
    width: 100% !important;
}

body.sidebar-collapsed #kt_app_page {
    width: 100% !important;
    margin-left: 0 !important;
}

body.sidebar-collapsed .app-header {
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
}

body.sidebar-collapsed .sidebar-expand-btn {
    display: inline-flex !important;
    left: 0;
}

body.sidebar-collapsed .sidebar-expand-btn i {
    color: #ffffff;
}

@media (max-width: 991.98px) {
    body.sidebar-collapsed #kt_app_sidebar {
        display: block !important;
        width: 250px !important;
        min-width: auto !important;
        flex: initial !important;
        padding: initial !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    body.sidebar-collapsed #kt_app_main {
        margin-left: 0 !important;
        padding-left: initial !important;
    }

    body.sidebar-collapsed .app-content,
    body.sidebar-collapsed .app-container.container-xxl {
        max-width: initial !important;
        width: initial !important;
    }

    body.sidebar-collapsed .sidebar-expand-btn {
        display: none !important;
    }

    .sidebar-expand-btn {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .dashboard-shell {
        padding: 12px;
    }

    #kt_app_sidebar .dashboard-company-switcher {
        margin-left: 2px;
        margin-right: 2px;
    }
}

@media (max-width: 575.98px) {
    .loyalty-summary {
        grid-template-columns: 1fr;
    }
}

/* Auth redesign */
.auth-redesign-page {
    background: radial-gradient(
        circle at 15% 20%,
        #eef2ff 0%,
        #f6f8fc 36%,
        #eef1f7 100%
    );
}

.auth-brand-panel {
    position: relative;
    background-color: transparent;
}

.auth-brand-panel::before {
    content: none;
}

.auth-brand-logo {
    width: min(62%, 420px);
    height: auto;
    object-fit: contain;
    filter: none;
}

.auth-redesign-panel {
    position: relative;
    z-index: 1;
    background-color: #ffffff;
}

.auth-redesign-box {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 1.25rem;
}

.auth-redesign-box .form-control.form-control-solid {
    background-color: #f7f9fc;
    border: 1px solid #dce3eb;
}

.auth-redesign-box .form-control.form-control-solid:focus {
    border-color: #1f2937;
    box-shadow: 0 0 0 0.2rem rgba(31, 41, 55, 0.1);
    background-color: #fff;
}

.auth-heading {
    letter-spacing: -0.02em;
}

.auth-link-primary,
.auth-redesign-box .link-primary {
    color: #1f2937;
}

.auth-link-primary:hover,
.auth-redesign-box .link-primary:hover {
    color: #111827;
}

.btn-auth-primary {
    background-color: #d8ff1f !important;
    border-color: #d8ff1f !important;
    color: #111827 !important;
    font-weight: 700;
    border-radius: 12px;
}

.btn-auth-primary:hover,
.btn-auth-primary:focus,
.btn-auth-primary:active {
    background-color: #c3ea16 !important;
    border-color: #c3ea16 !important;
    color: #111827 !important;
}

.btn-auth-secondary {
    border-radius: 12px;
    background-color: #edf1f6 !important;
    border-color: #dce3eb !important;
    color: #1f2937 !important;
    font-weight: 700;
}

.btn-auth-secondary:hover,
.btn-auth-secondary:focus,
.btn-auth-secondary:active,
.btn-auth-secondary.active,
.btn-auth-secondary:focus-visible {
    background-color: #e3e9f0 !important;
    border-color: #cfd8e3 !important;
    color: #111827 !important;
    box-shadow: 0 0 0 0.2rem rgba(163, 175, 191, 0.2) !important;
}

.btn-auth-secondary i,
.btn-auth-secondary span,
.btn-auth-secondary:hover i,
.btn-auth-secondary:hover span,
.btn-auth-secondary:focus i,
.btn-auth-secondary:focus span {
    color: inherit !important;
}

.auth-back-btn {
    background-color: #edf1f6 !important;
    border: 1px solid #dce3eb !important;
}

.auth-back-btn:hover,
.auth-back-btn:focus {
    background-color: #e3e9f0 !important;
    border-color: #cfd8e3 !important;
}

.auth-otp-input {
    border: 1px solid #dce3eb !important;
    background-color: #f7f9fc !important;
    border-radius: 12px;
    font-weight: 700;
    color: #1f2937;
}

.auth-otp-input:focus {
    border-color: #1f2937 !important;
    box-shadow: 0 0 0 0.2rem rgba(31, 41, 55, 0.1) !important;
    background-color: #ffffff !important;
}

@media (max-width: 575.98px) {
    .otp-boxes-row {
        flex-wrap: nowrap !important;
        gap: 6px;
    }

    .otp-boxes-row .otp-input.auth-otp-input {
        width: auto !important;
        max-width: 52px;
        flex: 1 1 0;
        min-width: 0;
        height: 48px !important;
        font-size: 1.375rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 340px) {
    .otp-boxes-row .otp-input.auth-otp-input {
        height: 42px !important;
        font-size: 1.125rem !important;
    }
}

@media (max-width: 991.98px) {
    .auth-redesign-box {
        border-radius: 14px;
        padding: 1rem 1rem 0.75rem;
    }
}

/* Premium Utility Classes */
.premium-card {
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.04);
    margin-bottom: 24px;
}

.premium-card--hidden {
    overflow: hidden;
}

.premium-header {
    padding: 24px 30px;
    border-bottom: 1px solid #f1f2f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 767.98px) {
    .premium-header {
        flex-wrap: wrap;
        row-gap: 14px;
        padding: 20px 16px;
    }
}

/* User management "Filter Role" select2 — select2 is initialized app-wide with
   no theme (see scripts.bundle.js KTApp.init, plain `$(e).select2()`), so it
   renders its own default box instead of the app's rounded-pill input style.
   This override makes it match the adjacent search box, scoped to this
   toolbar only (not a global select2 theme change). */
.user-mgmt-toolbar .select2-container--default .select2-selection--single {
    height: 40px;
    border: 0;
    border-radius: 50rem;
    background-color: var(--bs-dark-light);
    display: flex;
    align-items: center;
}

.user-mgmt-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 1.25rem;
    padding-right: 2rem;
    line-height: 1;
    font-size: .95rem;
    font-weight: 700;
    color: var(--bs-text-gray-700);
}

.user-mgmt-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 10px;
}

.user-mgmt-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--bs-text-gray-700) transparent transparent transparent;
}

.user-mgmt-toolbar .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--bs-text-gray-700) transparent;
}

/* User management toolbar (search + role filter + action buttons) — stacks
   into full-width rows on mobile instead of overflowing the card, since the
   search box, select and buttons all have fixed desktop widths. */
@media (max-width: 767.98px) {
    .user-mgmt-toolbar {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .user-mgmt-toolbar > div {
        width: 100%;
    }

    .user-mgmt-toolbar input[data-kt-user-table-filter="search"] {
        width: 100% !important;
    }

    .user-mgmt-toolbar .select2-container {
        width: 100% !important;
    }

    .user-mgmt-toolbar [data-kt-user-table-toolbar="base"] {
        flex-direction: column;
        gap: 8px;
    }

    .user-mgmt-toolbar [data-kt-user-table-toolbar="base"] .btn {
        width: 100%;
        white-space: nowrap;
    }
}

/* Integrations toolbar (platform filter + status filter + search) — this one
   is forced flex-nowrap for desktop, which on mobile pushes the search box
   straight off the edge of the screen with no way to reach it. Force it to
   wrap and stack each control full-width instead. */
@media (max-width: 767.98px) {
    .integration-toolbar {
        flex-wrap: wrap !important;
        width: 100%;
        row-gap: 10px;
    }

    .integration-toolbar > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .integration-toolbar input[data-kt-integration-table-filter="search"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Tenant management toolbar (search + Add Tenant) — stack full-width on mobile
   instead of the fixed 220px search box squeezing the button off to the side. */
@media (max-width: 767.98px) {
    .tenant-mgmt-toolbar {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .tenant-mgmt-toolbar > div,
    .tenant-mgmt-toolbar > a {
        width: 100%;
    }

    .tenant-mgmt-toolbar input[data-kt-tenant-table-filter="search"] {
        width: 100% !important;
    }

    .tenant-mgmt-toolbar > a {
        justify-content: center;
    }
}

/* Marketplace management search — a fixed 350px box that overflows the card
   (and the whole page) on any phone-width screen. */
@media (max-width: 767.98px) {
    .marketplace-mgmt-search,
    .marketplace-mgmt-search > div {
        width: 100%;
    }

    .marketplace-mgmt-search input {
        width: 100% !important;
    }
}

/* Funnel page — top action bar (Import/Elementor/Create/Tracking buttons)
   and card search+status filter, both fixed-width and non-wrapping.
   On mobile the text labels wrapped to 2 lines (buttons too narrow to fit
   "Import Funnel"/"Elementor Sync"), making them taller than the square
   settings icon next to them and looking uneven. Fix: collapse every button
   to a uniform 40x40 icon-only square (labels hidden via .funnel-btn-label)
   in one row — the buttons carry px-4/px-5 !important utilities in the
   markup, so the override here needs !important too or it's a no-op. */
@media (max-width: 767.98px) {
    .funnel-actions-toolbar {
        flex-wrap: nowrap;
        width: 100%;
        gap: 10px;
        justify-content: center;
    }

    .funnel-btn-create,
    .funnel-btn-import,
    .funnel-btn-elementor,
    .funnel-btn-settings {
        flex: 0 0 40px !important;
        width: 40px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .funnel-btn-create .funnel-btn-label,
    .funnel-btn-import .funnel-btn-label,
    .funnel-btn-elementor .funnel-btn-label {
        display: none;
    }

    /* .btn>i has a baked-in padding-right: .35rem (icon-to-label spacing);
       with the label hidden that leftover space pushes the glyph off-center
       inside the flex-centered box. .btn-icon (the settings button) already
       zeroes this — mirror it here for the other three. */
    .funnel-btn-create > i,
    .funnel-btn-import > i,
    .funnel-btn-elementor > i {
        padding-right: 0 !important;
    }

    .funnel-search-toolbar {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .funnel-search-toolbar > * {
        width: 100% !important;
    }

    .funnel-search-toolbar input#kt_funnel_search {
        width: 100% !important;
    }
}

/* Transaction history page — top action bar has 4-5 items (Add Transaction,
   Export dropdown, Print, Payment Reminder [admin only], TikTok Logistics
   dropdown). Two of them share "primary" styling (Add Transaction + Payment
   Reminder on admin), and with the old wrap-then-stack treatment those two
   ended up sharing a row with wrapped 2-line labels — same unevenness the
   Funnel page had. Same fix: one row, every button collapses to a uniform
   40x40 icon-only square (label hidden via .transaction-btn-label, dropdown
   caret hidden too since there's no room for icon+label+caret at 40px). */
@media (max-width: 767.98px) {
    .transaction-actions-toolbar {
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
        justify-content: center;
    }

    .transaction-btn-primary,
    .transaction-btn-secondary {
        flex: 0 0 40px !important;
        width: 40px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .transaction-btn-primary .transaction-btn-label,
    .transaction-btn-secondary .transaction-btn-label {
        display: none;
    }

    /* .btn>i has a baked-in padding-right: .35rem (icon-to-label spacing);
       with the label hidden that leftover space pushes the glyph off-center. */
    .transaction-btn-primary > i,
    .transaction-btn-secondary > i,
    .transaction-btn-secondary.btn-group > .btn > i {
        padding-right: 0 !important;
    }

    .transaction-btn-secondary.btn-group > .btn {
        width: 100% !important;
        height: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .transaction-btn-secondary.btn-group .dropdown-toggle::after {
        display: none;
    }

    .transaction-bulk-toolbar {
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
    }

    .transaction-bulk-toolbar .vr {
        display: none;
    }

    .transaction-bulk-toolbar .btn {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 30px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .transaction-bulk-toolbar .btn .bulk-btn-label {
        display: none;
    }

    .transaction-bulk-toolbar .btn > i {
        padding-right: 0 !important;
    }
}

/* Abandoned Carts page — top page-header toolbar (affiliate select [admin
   only] + date-range button) squeezed a w-200px select and a long date-range
   label ("Apr 18, 2026 - Jul 16, 2026") into one no-wrap row, so the date
   button shrank and wrapped its text across 3 lines. Stack both full-width
   instead. */
@media (max-width: 767.98px) {
    .abandoned-top-toolbar {
        flex-wrap: wrap;
        width: 100%;
        row-gap: 8px;
    }

    .abandoned-top-toolbar > form {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .abandoned-top-marketer,
    .abandoned-top-marketer > div,
    #kt_abandoned_daterangepicker {
        width: 100% !important;
    }

    #kt_abandoned_daterangepicker {
        justify-content: center;
        white-space: nowrap;
    }
}

/* Abandoned Carts page — card-header toolbar (bulk-purge bar + Export Global
   dropdown), quick filter tabs (All/No Phone/Has Phone), and the main filter
   row (status select + search + submit + reset icon) all assume desktop
   width with no wrap. Same treatment as the transaction pages: stack the
   toolbar/bulk bar, let the quick filter tabs share equal width, and grid
   the main filter row so the reset icon button keeps its own fixed column
   instead of getting stretched full-width. */
@media (max-width: 767.98px) {
    .abandoned-card-toolbar {
        flex-wrap: wrap;
        width: 100%;
        row-gap: 8px;
    }

    .abandoned-bulk-toolbar {
        width: 100%;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .abandoned-card-toolbar > a,
    .abandoned-card-toolbar > .btn-group {
        width: 100%;
    }

    .abandoned-card-toolbar .btn-group > .btn {
        width: 100%;
    }

    .abandoned-quick-filters {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .abandoned-quick-filters > button {
        flex: 1 1 0;
    }

    .abandoned-filter-row {
        display: grid;
        grid-template-columns: 1fr 40px;
        gap: 10px;
    }

    .abandoned-filter-row > div.w-150px,
    .abandoned-filter-row > div.w-200px,
    .abandoned-filter-row > div.min-w-200px {
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
    }

    .abandoned-filter-submit {
        grid-column: 1 / 2;
        width: 100% !important;
    }

    .abandoned-filter-reset {
        grid-column: 2 / 3;
    }
}

/* Transaction history filter row — each field is a fixed w-150px/w-200px box,
   so plain flex-wrap paired them up or split them one-per-row at random
   depending on how much width happened to be left over. A 2-column grid
   makes every row pair up consistently, with the search box and submit
   button spanning the full width since they're the "do it" actions. */
@media (max-width: 767.98px) {
    .transaction-filter-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .transaction-filter-row > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    .transaction-filter-row .select2-container {
        width: 100% !important;
    }

    .transaction-filter-row > div.min-w-200px,
    .transaction-filter-row > button[type="submit"] {
        grid-column: 1 / -1;
    }
}

.premium-title {
    display: flex;
    align-items: center;
}

.form-control-premium {
    background-color: #f7f9fc !important;
    border: 1px solid #dce3eb !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.25rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    transition: all 0.2s ease !important;
}

.form-control-premium:focus {
    border-color: #1f2937 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(31, 41, 55, 0.08) !important;
}

.input-group-premium {
    background-color: #f7f9fc !important;
    border: 1px solid #dce3eb !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.2s ease !important;
}

.input-group-premium:focus-within {
    border-color: #1f2937 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(31, 41, 55, 0.08) !important;
}

.input-group-premium .input-group-text {
    background-color: transparent !important;
    border: 0 !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    padding-left: 1rem !important;
    padding-right: 0.25rem !important;
}

.input-group-premium .form-control {
    background-color: transparent !important;
    border: 0 !important;
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    padding-left: 0.25rem !important;
    padding-right: 1rem !important;
}

.input-group-premium .form-control:focus {
    box-shadow: none !important;
    background-color: transparent !important;
}

.table-premium {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-premium tbody {
    min-height: 200px;
}

.table-premium thead th {
    background-color: rgba(31, 41, 55, 0.02) !important;
    color: #1f2937 !important;
    font-weight: 800 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #e6e8ec !important;
    border-top: none !important;
    white-space: normal !important;
    vertical-align: middle !important;
}

.table-premium tbody td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    transition: background-color 0.2s ease;
    white-space: normal !important;
    word-break: break-word !important;
}

.table-premium tbody tr:hover td {
    background-color: #fcfdfe !important;
}

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

.table-premium-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: #f1f5f9;
    color: #475569;
}

.table-responsive-premium,
.dataTables_wrapper,
.card-body {
    overflow: visible !important;
}

/* Force dropdowns to show even if parent has overflow */
.dropdown-menu {
    z-index: 1060 !important;
}

@media (max-width: 991.98px) {
    .table-responsive-premium,
    .dataTables_wrapper {
        overflow-x: auto !important;
    }
}

.modal-content-premium {
    border-radius: 20px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modal-header-premium {
    background-color: #1f2937;
    padding: 24px 30px;
    border-bottom: none;
}

.modal-header-premium .modal-title {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.modal-body-premium {
    background-color: #ffffff;
    padding: 30px;
}

.text-lime {
    color: #d8ff1f !important;
}

.bg-lime {
    background-color: #d8ff1f !important;
}

.bg-light-lime {
    background-color: #d8ff1f15 !important;
}

.text-hover-lime:hover {
    color: #d8ff1f !important;
}

.text-hover-primary:hover {
    color: var(--rd-primary) !important;
}

.ls-n1 {
    letter-spacing: -0.01em !important;
}

.ls-n2 {
    letter-spacing: -0.02em !important;
}

.fw-boldest {
    font-weight: 800 !important;
}

/* Custom Badge Overrides */
.badge-light-lime {
    background-color: #d8ff1f20 !important;
    color: #799100 !important;
    font-weight: 800 !important;
}

.btn-active-light-lime:hover {
    background-color: #d8ff1f15 !important;
}

/* Pagination Redesign */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 0;
}

.pagination .page-item .page-link {
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #4b5563;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 8px 14px;
    border-radius: 10px !important;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

.pagination .page-item.active .page-link {
    background-color: #d8ff1f !important;
    border-color: #d8ff1f !important;
    color: #111827 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(216, 255, 31, 0.25) !important;
}

.pagination .page-item:not(.active):hover .page-link {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #1f2937;
}

.pagination .page-item.disabled .page-link {
    background-color: #f8fafc;
    border-color: #f1f5f9;
    color: #cbd5e1;
    opacity: 0.6;
}

/* DataTables Pagination Specifics */
.dataTables_paginate .pagination {
    justify-content: flex-end;
}

/* Mobile: collapse DataTables pager to a compact window so it never overflows.
   The bootstrap5 renderer emits plain <li.page-item> with no prev/next class —
   prev is always the first <li>, next the last, current has .active. We keep
   only: prev arrow, next arrow, the current page, and its immediate neighbors
   (one left via :has, one right via +). Everything else (first/last page shortcut,
   ellipses) is hidden on small screens. Degrades safely where :has is absent. */
@media (max-width: 767.98px) {
    .dt-paging .pagination,
    .dataTables_paginate .pagination {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .dt-paging .pagination .page-item,
    .dataTables_paginate .pagination .page-item {
        display: none;
    }

    .dt-paging .pagination .page-item:first-child,
    .dt-paging .pagination .page-item:last-child,
    .dt-paging .pagination .page-item.active,
    .dt-paging .pagination .page-item.active + .page-item,
    .dataTables_paginate .pagination .page-item:first-child,
    .dataTables_paginate .pagination .page-item:last-child,
    .dataTables_paginate .pagination .page-item.active,
    .dataTables_paginate .pagination .page-item.active + .page-item {
        display: block;
    }

    /* Left neighbor of current — kept in its own rule so that browsers without
       :has() support simply skip it (rather than dropping the rule above too). */
    .dt-paging .pagination .page-item:has(+ .page-item.active) {
        display: block;
    }
    .dataTables_paginate .pagination .page-item:has(+ .page-item.active) {
        display: block;
    }
}

/* NOTE: current DataTables build renders dt-* classes (dt-info, dt-length,
   dt-search, dt-paging) instead of the legacy dataTables_* names. Both are
   kept here since some pages still load an older DataTables build. */
.dataTables_info,
.dt-info {
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.dataTables_length label,
.dt-length label {
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
}

.dataTables_length select,
.dt-length select {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px 8px;
    font-weight: 700;
    color: #1f2937 !important;
    margin: 0 6px;
    min-width: 56px;
}

/* New Modernization Utilities */
.badge-auth-lime {
    background-color: #d8ff1f !important;
    color: #111827 !important;
    font-weight: 900 !important;
    border-radius: 6px !important;
}

.bg-light-soft {
    background-color: #f8fafc !important;
}

.transition-all {
    transition: all 0.2s ease-in-out !important;
}

.scale-hover:hover {
    transform: scale(1.025) !important;
}

.hover-bg-white:hover {
    background-color: #ffffff !important;
}

/* Custom Checkbox/Switch Lime Theme */
.form-check-lime .form-check-input:checked {
    background-color: #d8ff1f !important;
    border-color: #d8ff1f !important;
}

.form-check-custom.form-check-lime .form-check-input:checked {
    background-color: #d8ff1f !important;
}

.form-check-lime .form-check-input:focus {
    border-color: #d8ff1f !important;
    box-shadow: 0 0 0 0.25rem rgba(216, 255, 31, 0.25) !important;
}

/* Custom Checkbox Danger Red Theme (Indeterminate / Unselect All) */
.form-check-danger .form-check-input:checked,
.form-check-danger .form-check-input:indeterminate,
.form-check-custom.form-check-danger .form-check-input:checked,
.form-check-custom.form-check-danger .form-check-input:indeterminate,
.form-check-input.form-check-input-danger:indeterminate,
.form-check-input.form-check-input-danger:checked {
    background-color: #f1416c !important;
    border-color: #f1416c !important;
}

/* Typography Helpers */
.fw-black {
    font-weight: 900 !important;
}

.ls-1 {
    letter-spacing: 0.05em !important;
}

.fs-10 {
    font-size: 0.65rem !important;
}

.fs-11 {
    font-size: 0.55rem !important;
}

/* ====== Analytics Premium UI ====== */
.analytics-hero {
    background: linear-gradient(135deg, #101826 0%, #1a2639 100%);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(16, 24, 38, 0.15);
}

.analytics-hero::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    background: radial-gradient(
        circle,
        rgba(216, 255, 31, 0.15) 0%,
        transparent 70%
    );
}

.analytics-card {
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 18px;
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.analytics-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(31, 41, 55, 0.08);
    border-color: rgba(216, 255, 31, 0.5);
}

.analytics-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.analytics-icon-box.lime {
    background: rgba(216, 255, 31, 0.2);
    color: #799100;
}

.analytics-icon-box.dark {
    background: #f1f5f9;
    color: #1f2937;
}

.analytics-value {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #111827;
    line-height: 1.1;
    margin-bottom: 4px;
}

.analytics-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    color: #64748b;
}

.analytics-chart-box {
    background: #ffffff;
    border: 1px solid #e3e8f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.analytics-chart-box .card-header {
    border-bottom: 1px dashed #e3e8f0;
}

.card-title.flex-column,
.card-header .card-title.flex-column {
    display: flex !important;
    flex-direction: column !important;
}

.analytics-chart-box .card-toolbar .select2-container {
    width: auto !important;
    min-width: 100px;
}

.analytics-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.analytics-badge-up {
    background: rgba(80, 205, 137, 0.1);
    color: #50cd89;
    border: 1px solid rgba(80, 205, 137, 0.2);
}

.analytics-badge-down {
    background: rgba(241, 65, 108, 0.1);
    color: #f1416c;
    border: 1px solid rgba(241, 65, 108, 0.2);
}

/* QR Analytics Styles - Batch Summary, Product Summary, Scan History */
.qr-analytics-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.qr-analytics-hero {
    border-radius: 18px;
    padding: 22px;
    background: linear-gradient(120deg, #101826 0%, #162236 55%, #1f2937 100%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(16, 24, 38, 0.14);
}

.qr-analytics-hero::after {
    content: "";
    position: absolute;
    inset: auto -90px -90px auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(216, 255, 31, 0.22) 0%,
        rgba(216, 255, 31, 0) 72%
    );
    pointer-events: none;
}

.qr-analytics-hero h1,
.qr-analytics-hero h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.qr-analytics-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    position: relative;
    z-index: 1;
}

.qr-analytics-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.qr-analytics-chip i {
    font-size: 0.9rem;
}

.qr-analytics-card {
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
    transition: all 0.3s ease;
}

.qr-analytics-card:hover {
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.1);
    border-color: #d8ff1f;
}

.qr-analytics-stat {
    padding: 18px;
    border-radius: 12px;
    background: #f8fafb;
    border: 1px solid #e6e8ec;
    text-align: center;
    transition: all 0.3s ease;
}

.qr-analytics-stat:hover {
    background: #ffffff;
    border-color: #d8ff1f;
    box-shadow: 0 4px 12px rgba(216, 255, 31, 0.15);
}

.qr-analytics-stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8c98ab;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.qr-analytics-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
}

.qr-analytics-search {
    position: relative;
}

.qr-analytics-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8c98ab;
    pointer-events: none;
}

.qr-analytics-search input {
    padding-left: 40px;
}

.qr-analytics-table {
    border-collapse: separate;
    border-spacing: 0;
}

.qr-analytics-table thead tr {
    background-color: #f8fafb;
}

.qr-analytics-table thead th {
    border-bottom: 2px solid #e6e8ec;
    color: #1f2937;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px;
    white-space: normal !important;
    vertical-align: middle !important;
}

.qr-analytics-table tbody tr {
    border-bottom: 1px solid #e6e8ec;
    transition: all 0.2s ease;
}

.qr-analytics-table tbody tr:hover {
    background-color: #f8fafb;
}

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

.qr-analytics-table tbody td {
    padding: 14px 16px;
    color: #1f2937;
    font-size: 0.95rem;
    white-space: normal !important;
    word-break: break-word !important;
    vertical-align: middle !important;
}

.qr-analytics-batch-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(31, 41, 55, 0.1);
}

.qr-analytics-batch-symbol i {
    font-size: 1.25rem;
    color: #1f2937;
}

.qr-analytics-batch-link {
    color: #1f2937;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.qr-analytics-batch-link:hover {
    color: #d8ff1f;
}

.qr-analytics-empty {
    text-align: center;
    padding: 60px 20px;
}

.qr-analytics-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: rgba(31, 41, 55, 0.08);
    margin: 0 auto 16px;
}

.qr-analytics-empty-icon i {
    font-size: 2.5rem;
    color: #8c98ab;
}

.badge-light-premium {
    background-color: #f1f5f9 !important;
    color: #1f2937 !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 700 !important;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* ====== Period Toggle ====== */
.period-toggle-group {
    border: 1px solid #e3e8f0;
    gap: 2px;
}

.period-toggle-btn {
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.period-toggle-btn:hover {
    background-color: #f1f5f9;
    color: #1f2937;
}

.period-toggle-btn.active {
    background-color: #1f2937;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.15);
}

.period-toggle-btn.active i {
    color: #d8ff1f;
}

@media (max-width: 575.98px) {
    .period-toggle-group {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .period-toggle-group::-webkit-scrollbar {
        display: none;
    }

    .period-toggle-btn {
        padding: 7px 14px;
        font-size: 0.75rem;
    }
}
/* Send to NinjaVan Button Hover States */
.btn-light-lime {
    background-color: rgba(216, 255, 31, 0.1) !important;
    border-color: rgba(216, 255, 31, 0.2) !important;
    color: #1f2937 !important;
    transition: all 0.2s ease;
}

.btn-light-lime:hover {
    background-color: #d8ff1f !important;
    border-color: #d8ff1f !important;
    color: #111827 !important;
    box-shadow: 0 4px 12px rgba(216, 255, 31, 0.2) !important;
}

.btn-auth-lime {
    background-color: #d8ff1f !important;
    border-color: #d8ff1f !important;
    color: #111827 !important;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-auth-lime:hover {
    background-color: #c3ea16 !important;
    border-color: #c3ea16 !important;
    color: #111827 !important;
}

/* Bootstrap 5 doesn't ship a .min-w-0 utility (only .mw-100 for max-width).
   It's used throughout the mobile card/list layouts in this app to let a
   flex child shrink below its content size so text-truncate can actually
   clip long names instead of the row overflowing horizontally — without
   this, flex items default to min-width:auto and just push past the
   viewport edge. Single global fix for every place that already opted in
   via this class name. */
.min-w-0 {
    min-width: 0 !important;
}

/* Order Analytics — Payment Method Analysis rows (label + progress bar +
   amount + %) use fixed inline min-widths (180/120/65/42px) sized for
   desktop; on a ~340px mobile card those alone nearly fill the width,
   squeezing the progress bar to nothing. Shrink them at mobile — the
   !important is required since inline styles otherwise win. */
@media (max-width: 767.98px) {
    .pma-label {
        min-width: 96px !important;
    }

    .pma-label span:not(.bullet) {
        font-size: 0.65rem !important;
    }

    .pma-amount {
        min-width: 70px !important;
        font-size: 0.75rem !important;
    }

    .pma-pct {
        min-width: 30px !important;
        margin-left: 0.5rem !important;
    }
}