/* =========================================================
   RVR Dashboard UI Kit
   Generic reusable styles for dashboard pages
   ========================================================= */

/* =========================================================
   01) Force LTR + left sidebar layout
   ========================================================= */

.dark-layout .form-control[type="file"]::file-selector-button {
    background-color: #283046;
}

html,
body,
html[dir="rtl"],
body[dir="rtl"] {
    direction: ltr !important;
}

/* Sidebar fixed left */
.main-menu.menu-fixed,
.vertical-layout .main-menu.menu-fixed,
.vertical-menu-modern .main-menu.menu-fixed,
body.vertical-layout.vertical-menu-modern .main-menu.menu-fixed {
    left: 0 !important;
    right: auto !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Content offsets */
/* body.vertical-layout.vertical-menu-modern.menu-expanded .app-content,
body.vertical-layout.vertical-menu-modern.menu-expanded .content,
body.vertical-layout.vertical-menu-modern.menu-expanded .footer {
    margin-left: 260px !important;
    margin-right: 0 !important;
} */

/* body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
body.vertical-layout.vertical-menu-modern.menu-collapsed .content,
body.vertical-layout.vertical-menu-modern.menu-collapsed .footer {
    margin-left: 80px !important;
    margin-right: 0 !important;
} */

/* Navbar offsets */
body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar,
body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.floating-nav {
    left: 260px !important;
    right: 2rem !important;
    margin-left: 2rem !important;
    margin-right: 0 !important;
    width: calc(100vw - 260px - 4rem) !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar,
body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.floating-nav {
    left: 80px !important;
    right: 2rem !important;
    margin-left: 2rem !important;
    margin-right: 0 !important;
    width: calc(100vw - 80px - 4rem) !important;
}

/* Menu alignment */
.main-menu .navigation,
.main-menu .navigation li,
.main-menu .navigation li a,
.main-menu .menu-title,
.content-header,
.content-header * {
    direction: ltr !important;
    text-align: left !important;
}

.main-menu .navigation > li > a svg,
.main-menu .navigation > li > a i {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

.main-menu .navigation li a .menu-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.content-header .content-header-title {
    float: left !important;
}

.content-header .breadcrumb {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.content-header .breadcrumb-item + .breadcrumb-item {
    padding-left: 0.5rem !important;
    padding-right: 0 !important;
}

.content-header .breadcrumb-item + .breadcrumb-item::before {
    float: left !important;
    padding-right: 0.5rem !important;
    padding-left: 0 !important;
}

/* =========================================================
   02) Theme variables
   ========================================================= */

:root {
    /* Brand */
    --rvr-primary: #0e9888;
    --rvr-primary-hover: #087d70;
    --rvr-primary-soft: rgba(122, 226, 207, 0.1);
    --rvr-primary-soft-2: #effcf9;

    --rvr-sidebar-bg: #232b34;

    /* Accents */
    --rvr-purple: #8b5cf6;
    --rvr-purple-soft: #f4efff;

    --rvr-blue: #1d8cf8;
    --rvr-blue-soft: #eef7ff;

    --rvr-cyan: #0ea5e9;
    --rvr-cyan-soft: #eafaff;

    --rvr-orange: #f59e0b;
    --rvr-orange-soft: #fff4e8;

    --rvr-danger: #cf3448;
    --rvr-danger-hover: #b92c3e;
    --rvr-danger-soft: #fff1f2;
    --rvr-danger-soft-2: #fde7ea;

    --rvr-success: #0e9888;
    --rvr-success-soft: #e9fbf4;

    --rvr-warning: #f59e0b;
    --rvr-warning-soft: #fff6df;

    /* Surfaces */
    --rvr-page-bg: #f4f4f4;
    --rvr-card-bg: #ffffff;
    --rvr-field-bg: #ffffff;
    --rvr-field-soft-bg: #fafbfc;
    --rvr-table-head-bg: #eefbf7;

    /* Text */
    --rvr-text: #111827;
    --rvr-text-2: #1f2937;
    --rvr-muted: #6b7280;
    --rvr-muted-2: #9ca3af;
    --rvr-placeholder: #aeb7c2;

    /* Borders */
    --rvr-border: #eef0f3;
    --rvr-border-2: #dbe2ea;
    --rvr-border-dashed: #d8dee8;

    /* Radius */
    --rvr-radius-xs: 6px;
    --rvr-radius-sm: 8px;
    --rvr-radius-md: 12px;
    --rvr-radius-lg: 16px;
    --rvr-radius-xl: 20px;
    --rvr-radius-pill: 999px;

    /* Shadows */
    --rvr-shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06);
    --rvr-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.055);
    --rvr-shadow-lg: 0 14px 34px rgba(15, 23, 42, 0.12);

    /* Sizes */
    --rvr-page-gap: 18px;
    --rvr-card-padding: 24px;
    --rvr-field-height: 48px;
    --rvr-filter-field-height: 44px;

    /* Asset placeholders */
    --rvr-placeholder-avatar: url("/admin/images/placeholders/avatar.svg");
    --rvr-placeholder-image: url("/admin/images/placeholders/image.svg");

    /* Sidebar Variables */
    --ai-sidebar-width: 240px;
    --ai-sidebar-collapsed-width: 76px;
    --ai-sidebar-bg: #1f2933;
    --ai-sidebar-bg-2: #18222c;
    --ai-sidebar-border: rgba(255, 255, 255, 0.06);
    --ai-sidebar-text: #9aa6b2;
    --ai-sidebar-text-active: #ffffff;
    --ai-sidebar-muted: #7e8a96;
    --ai-sidebar-hover-bg: rgba(255, 255, 255, 0.055);
    --ai-sidebar-active-bg: rgba(255, 255, 255, 0.085);
    --ai-sidebar-primary: #0e9888;
    --ai-sidebar-primary-2: #37d1b5;
    --ai-sidebar-radius: 12px;
}

/* =========================================================
   03) Base page utilities
   ========================================================= */

.rvr-page,
.admin-create-page,
.admin-edit-page,
.student-edit-page,
.settings-page,
.tools-page,
.presets-page,
.ai-task-page {
    width: 100%;
    direction: ltr !important;
    text-align: left !important;
}

.rvr-page *,
.admin-create-page *,
.admin-edit-page *,
.student-edit-page *,
.settings-page *,
.tools-page *,
.presets-page *,
.ai-task-page * {
    box-sizing: border-box;
}

.rvr-section {
    margin-bottom: var(--rvr-page-gap);
}

.rvr-page-title-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.rvr-page-title {
    margin: 0;
    color: var(--rvr-muted);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.rvr-page-title.is-active {
    color: var(--rvr-text);
    font-weight: 700;
}

.rvr-title-divider {
    width: 1px;
    height: 32px;
    background: #d7dce2;
    flex-shrink: 0;
}

.rvr-welcome-title {
    margin: 0 0 4px;
    color: var(--rvr-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}

.rvr-welcome-subtitle {
    margin: 0;
    color: var(--rvr-text);
    font-size: 12px;
    font-weight: 500;
}

.rvr-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.rvr-actions.is-between {
    justify-content: space-between;
}

/* =========================================================
   04) Cards
   ========================================================= */

.rvr-card,
.card.rvr-card,
.app-user-list > .card {
    background: var(--rvr-card-bg) !important;
    border: 1px solid var(--rvr-border) !important;
    border-radius: var(--rvr-radius-lg) !important;
    box-shadow: var(--rvr-shadow-md) !important;
    overflow: hidden;
    direction: ltr !important;
    text-align: left !important;
}

.rvr-card-body {
    padding: var(--rvr-card-padding);
}

.rvr-card-header,
.rvr-table-card-header,
.rvr-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--rvr-border);
    background: var(--rvr-card-bg);
}

.rvr-card-title,
.card .card-title,
.rvr-table-title,
.rvr-form-title {
    margin: 0;
    color: var(--rvr-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.rvr-form-title {
    font-size: 18px;
}

.rvr-card-subtitle {
    margin-top: 4px;
    color: var(--rvr-muted-2);
    font-size: 12px;
    font-weight: 500;
}

/* =========================================================
   05) Stats cards
   ========================================================= */

.rvr-stats-grid,
.tools-stats-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
    direction: ltr !important;
}

.rvr-stat-card,
.tools-stat-card {
    min-height: 136px;
    padding: 22px 20px 18px;
    background: var(--rvr-card-bg);
    border: 1px solid var(--rvr-border);
    border-radius: var(--rvr-radius-lg);
    box-shadow: var(--rvr-shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rvr-stat-card:hover,
.tools-stat-card:hover {
    border-color: var(--rvr-border-2);
    box-shadow: var(--rvr-shadow-sm);
    transform: translateY(-1px);
}

.rvr-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.rvr-stat-icon,
.rvr-icon-box {
    width: 42px;
    height: 42px;
    border-radius: var(--rvr-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rvr-stat-icon svg,
.rvr-stat-icon i,
.rvr-icon-box svg,
.rvr-icon-box i {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2 !important;
}

.rvr-stat-icon.is-purple,
.rvr-icon-box.is-purple {
    background: var(--rvr-purple-soft);
    color: var(--rvr-purple);
}

.rvr-stat-icon.is-primary,
.rvr-icon-box.is-primary,
.rvr-stat-icon.is-green,
.rvr-icon-box.is-green {
    background: var(--rvr-primary-soft);
    color: var(--rvr-primary);
}

.rvr-stat-icon.is-blue,
.rvr-icon-box.is-blue {
    background: var(--rvr-blue-soft);
    color: var(--rvr-blue);
}

.rvr-stat-icon.is-orange,
.rvr-icon-box.is-orange {
    background: var(--rvr-orange-soft);
    color: var(--rvr-orange);
}

.rvr-stat-icon.is-danger,
.rvr-icon-box.is-danger {
    background: var(--rvr-danger-soft);
    color: var(--rvr-danger);
}

.rvr-trend,
.rvr-badge {
    height: 22px;
    padding: 0 10px;
    border-radius: var(--rvr-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rvr-primary);
    background: var(--rvr-primary-soft);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.rvr-trend.is-purple,
.rvr-badge.is-purple {
    background: #f3eaff;
    color: var(--rvr-purple);
}

.rvr-trend.is-blue,
.rvr-badge.is-blue {
    background: #eff6ff;
    color: var(--rvr-cyan);
}

.rvr-trend.is-danger,
.rvr-badge.is-danger {
    background: var(--rvr-danger-soft);
    color: var(--rvr-danger);
}

.rvr-trend.is-warning,
.rvr-badge.is-warning {
    background: var(--rvr-warning-soft);
    color: var(--rvr-warning);
}

.rvr-stat-value,
.tools-stat-value {
    color: var(--rvr-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.rvr-stat-label,
.tools-stat-label {
    margin-top: 8px;
    color: var(--rvr-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.rvr-stat-value .sub-text,
.tools-stat-value .sub-text {
    color: var(--rvr-muted);
    font-size: 13px;
    font-weight: 500;
}

.rvr-stat-card.is-solid-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.rvr-stat-card.is-solid-purple .rvr-stat-value,
.rvr-stat-card.is-solid-purple .rvr-stat-label {
    color: #ffffff !important;
}

.rvr-stat-card.is-solid-purple .rvr-stat-icon {
    background: #fff;
    color: #ffffff !important;
}

.rvr-stat-card.is-solid-purple .rvr-trend {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

/* =========================================================
   06) Generic filters
   Layout is controlled by Bootstrap .row and .col-* classes
   ========================================================= */

.rvr-filter-card {
    background: var(--rvr-card-bg);
    border: 1px solid var(--rvr-border);
    border-radius: var(--rvr-radius-lg);
    box-shadow: var(--rvr-shadow-md);
    padding: 20px 24px;
    margin-bottom: 18px;
}

.rvr-filter-card .row {
    align-items: center;
}

.rvr-filter-item {
    width: 100%;
    min-width: 0;
}

.rvr-filter-control,
.rvr-filter-card .form-control,
.rvr-filter-card .form-select {
    width: 100% !important;
    height: var(--rvr-filter-field-height) !important;
    min-height: var(--rvr-filter-field-height) !important;
    border: 1px solid var(--rvr-border) !important;
    border-radius: var(--rvr-radius-sm) !important;
    background: var(--rvr-field-soft-bg) !important;
    color: var(--rvr-muted) !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

.rvr-filter-card .form-control:focus,
.rvr-filter-card .form-select:focus {
    border-color: var(--rvr-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 152, 136, 0.08) !important;
}

.rvr-search-box {
    position: relative;
    width: 100%;
}

.rvr-search-box svg,
.rvr-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px !important;
    height: 16px !important;
    transform: translateY(-50%);
    color: var(--rvr-muted-2) !important;
    pointer-events: none;
}

.rvr-search-box .form-control {
    padding-left: 55px !important;
}

.rvr-show-control {
    width: 100%;
    min-height: var(--rvr-filter-field-height);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--rvr-muted);
    font-size: 14px;
    white-space: nowrap;
}

.rvr-show-control .form-select {
    width: 100% !important;
}

.rvr-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.rvr-filter-actions .rvr-btn {
    width: 100%;
}

/* Legacy support: if old pages still use .rvr-filter-row, keep it generic */
.rvr-filter-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.rvr-filter-row > * {
    min-width: 0;
}

/* =========================================================
   07) Forms + Select2
   ========================================================= */

.rvr-form-card {
    background: var(--rvr-card-bg);
    border: 1px solid var(--rvr-border);
    border-radius: var(--rvr-radius-lg);
    box-shadow: var(--rvr-shadow-md);
    overflow: hidden;
}

.rvr-form-body {
    padding: 24px;
}

.rvr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.rvr-form-grid.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rvr-form-grid .is-full {
    grid-column: 1 / -1;
}

.rvr-label,
.admin-field-label,
.student-field-label,
.settings-field-label,
.tools-field-label,
.preset-field-label,
.form-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 8px !important;
    color: var(--rvr-text-2) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

.rvr-required,
.rvr-label .text-danger {
    color: var(--rvr-danger) !important;
}

.rvr-control,
.rvr-form .form-control,
.rvr-form .form-select,
.rvr-modal .form-control,
.rvr-modal .form-select,
.admin-create-page .form-control,
.admin-edit-page .form-control,
.student-edit-page .form-control,
.student-edit-page .form-select,
.settings-page .form-control,
.settings-page .form-select,
.tools-page .form-control,
.tools-page .form-select,
.presets-page .form-control,
.presets-page .form-select {
    display: block !important;
    width: 100% !important;
    min-height: var(--rvr-field-height);
    padding: 0 14px !important;
    border: 1px solid var(--rvr-border-2) !important;
    border-radius: var(--rvr-radius-sm) !important;
    background: var(--rvr-field-bg) !important;
    color: var(--rvr-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    direction: ltr !important;
    text-align: left !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.rvr-control::placeholder,
.rvr-form .form-control::placeholder,
.rvr-modal .form-control::placeholder {
    color: var(--rvr-placeholder) !important;
}

.rvr-control:focus,
.rvr-form .form-control:focus,
.rvr-form .form-select:focus,
.rvr-modal .form-control:focus,
.rvr-modal .form-select:focus {
    border-color: var(--rvr-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 152, 136, 0.08) !important;
}

.rvr-help-text,
.settings-help-text,
.form-text {
    display: block;
    margin-top: 7px;
    color: var(--rvr-muted);
    font-size: 12px;
    font-weight: 400;
}

.rvr-error,
.invalid-feedback,
.text-danger {
    color: var(--rvr-danger) !important;
    font-size: 12px;
    margin-top: 6px;
    text-align: left;
}

.is-invalid,
.rvr-control.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--rvr-danger) !important;
}

.is-invalid ~ .invalid-feedback,
.invalid-feedback.d-block {
    display: block !important;
}

/* Input groups */
.rvr-form .input-group,
.rvr-modal .input-group,
.admin-create-page .input-group,
.admin-edit-page .input-group,
.student-edit-page .input-group {
    direction: ltr !important;
}

.rvr-form .input-group .form-control,
.rvr-modal .input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.rvr-form .input-group-text,
.rvr-modal .input-group-text {
    border: 1px solid var(--rvr-border-2) !important;
    border-left: 0 !important;
    background: var(--rvr-card-bg) !important;
    color: var(--rvr-muted-2) !important;
}

/* Select2 */
.rvr-form .select2-container,
.rvr-modal .select2-container,
.student-edit-page .select2-container,
.presets-page .select2-container,
.rvr-filter-card .select2-container {
    width: 100% !important;
    direction: ltr !important;
    text-align: left !important;
}

.rvr-form .select2-container--default .select2-selection--single,
.rvr-modal .select2-container--default .select2-selection--single,
.student-edit-page .select2-container--default .select2-selection--single,
.presets-page .select2-container--default .select2-selection--single,
.rvr-filter-card .select2-container--default .select2-selection--single {
    min-height: var(--rvr-field-height) !important;
    border: 1px solid var(--rvr-border-2) !important;
    border-radius: var(--rvr-radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    background: var(--rvr-card-bg) !important;
}

.rvr-filter-card .select2-container--default .select2-selection--single {
    min-height: var(--rvr-filter-field-height) !important;
    background: var(--rvr-field-soft-bg) !important;
    border-color: var(--rvr-border) !important;
}

.rvr-form .select2-selection__rendered,
.rvr-modal .select2-selection__rendered,
.rvr-filter-card .select2-selection__rendered {
    padding-left: 14px !important;
    padding-right: 34px !important;
    color: var(--rvr-text) !important;
    text-align: left !important;
}

.rvr-form .select2-selection__arrow,
.rvr-modal .select2-selection__arrow,
.rvr-filter-card .select2-selection__arrow {
    height: var(--rvr-field-height) !important;
    right: 10px !important;
    left: auto !important;
}

.rvr-filter-card .select2-selection__arrow {
    height: var(--rvr-filter-field-height) !important;
}

.select2-selection.is-invalid {
    border-color: var(--rvr-danger) !important;
}

/* Input icons */
.rvr-input-wrap {
    position: relative;
    width: 100%;
}

.rvr-input-wrap .form-control {
    height: var(--rvr-field-height) !important;
    min-height: var(--rvr-field-height) !important;
    border-radius: var(--rvr-radius-sm) !important;
}

.rvr-input-wrap.has-left-icon .form-control {
    padding-left: 42px !important;
}

.rvr-input-wrap.has-right-icon .form-control {
    padding-right: 42px !important;
}

.rvr-input-icon,
.rvr-password-toggle {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--rvr-muted-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 0;
    margin: 0;
    box-shadow: none;
    outline: none;
}

.rvr-input-icon {
    left: 6px;
    pointer-events: none;
}

.rvr-password-toggle {
    right: 6px;
    cursor: pointer;
}

.rvr-input-icon svg,
.rvr-input-icon i,
.rvr-password-toggle svg,
.rvr-password-toggle i {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2 !important;
    color: currentColor !important;
}

.rvr-password-toggle:hover {
    color: var(--rvr-primary);
}

/* =========================================================
   08) Uploads
   ========================================================= */

.rvr-upload {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 24px;
}

.rvr-upload-preview {
    width: 130px;
    height: 130px;
    border: 1px dashed var(--rvr-border-dashed);
    border-radius: var(--rvr-radius-md);
    background: #ffffff;
    color: var(--rvr-muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 8px;
    overflow: hidden;
}

.rvr-upload-preview img,
.rvr-upload-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rvr-upload-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.rvr-upload-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--rvr-radius-sm);
    background: var(--rvr-primary-soft);
    color: var(--rvr-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rvr-upload-control,
.custom-file-upload {
    direction: ltr !important;
    text-align: center !important;
}

.rvr-upload-control input[type="file"],
.custom-file-upload input[type="file"],
.custom-file-input {
    display: none !important;
}

.rvr-upload-control label,
.custom-file-upload label {
    width: 100%;
    min-height: var(--rvr-field-height);
    padding: 0 16px;
    border: 1px solid var(--rvr-primary);
    border-radius: var(--rvr-radius-sm);
    background: var(--rvr-primary-soft-2);
    color: var(--rvr-primary);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.rvr-upload-note {
    margin-top: 8px;
    color: var(--rvr-muted);
    font-size: 12px;
}

.progress-container {
    width: 100%;
    height: 8px;
    background: #ebe9f1;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    width: 0;
    height: 100%;
    background: var(--rvr-primary);
    transition: width 0.3s ease;
}

.progress-text {
    display: block;
    margin-top: 5px;
    color: var(--rvr-muted);
    font-size: 12px;
}

/* =========================================================
   09) Buttons + action icons
   ========================================================= */

.rvr-btn,
.btn.rvr-btn,
.save-btn,
.cancel-btn {
    min-height: 44px;
    padding: 0 22px !important;
    border-radius: var(--rvr-radius-sm) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rvr-btn-primary,
.btn.rvr-btn-primary,
.btn-primary,
.save-btn {
    background: var(--rvr-primary) !important;
    border: 1px solid var(--rvr-primary) !important;
    color: #ffffff !important;
}

.rvr-btn-primary:hover,
.btn.rvr-btn-primary:hover,
.btn-primary:hover,
.save-btn:hover {
    background: var(--rvr-primary-hover) !important;
    border-color: var(--rvr-primary-hover) !important;
    color: #ffffff !important;
}

.rvr-btn-outline,
.btn.rvr-btn-outline,
.btn-outline-secondary,
.cancel-btn {
    background: var(--rvr-primary-soft) !important;
    border: 1px solid var(--rvr-primary) !important;
    color: var(--rvr-primary) !important;
}

.rvr-btn-outline:hover,
.btn.rvr-btn-outline:hover,
.btn-outline-secondary:hover,
.cancel-btn:hover {
    background: var(--rvr-primary-soft-2) !important;
    border-color: var(--rvr-primary) !important;
    color: var(--rvr-primary) !important;
}

.rvr-btn-danger,
.btn.rvr-btn-danger,
.btn-danger {
    background: var(--rvr-danger) !important;
    border: 1px solid var(--rvr-danger) !important;
    color: #ffffff !important;
}

.rvr-btn-danger:hover,
.btn.rvr-btn-danger:hover,
.btn-danger:hover {
    background: var(--rvr-danger-hover) !important;
    border-color: var(--rvr-danger-hover) !important;
    color: #ffffff !important;
}

.rvr-btn-block {
    width: 100%;
}

.rvr-icon-btn,
.rvr-action-icon {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--rvr-radius-sm);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.rvr-icon-btn.is-edit,
.rvr-action-icon,
.rvr-action-icon.is-edit {
    background: #f1f7ff !important;
    color: var(--rvr-blue) !important;
}

.rvr-icon-btn.is-delete,
.rvr-action-icon.is-delete {
    background: var(--rvr-danger-soft) !important;
    color: var(--rvr-danger) !important;
}

.rvr-icon-btn.is-view,
.rvr-action-icon.is-view {
    background: var(--rvr-orange-soft) !important;
    color: var(--rvr-orange) !important;
}

.rvr-icon-btn svg,
.rvr-action-icon svg {
    width: 16px !important;
    height: 16px !important;
}

/* =========================================================
   10) Badges + statuses
   ========================================================= */

.rvr-status,
.rvr-status-badge {
    min-width: 68px;
    min-height: 30px;
    padding: 0 14px;
    border-radius: var(--rvr-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.rvr-status.is-active,
.rvr-status.is-completed,
.rvr-status-badge.is-active,
.rvr-status-badge.is-plan-1,
.badge.bg-success {
    background: var(--rvr-success-soft) !important;
    color: var(--rvr-success) !important;
}

.rvr-status.is-inactive,
.rvr-status.is-failed,
.rvr-status-badge.is-inactive,
.badge.bg-danger {
    background: var(--rvr-danger-soft) !important;
    color: var(--rvr-danger) !important;
}

.rvr-status.is-warning,
.rvr-status.is-processing,
.rvr-status-badge.is-warning,
.rvr-status-badge.is-plan-2,
.badge.bg-warning {
    background: var(--rvr-warning-soft) !important;
    color: var(--rvr-warning) !important;
}

.rvr-status.is-muted,
.rvr-status.is-queued,
.rvr-status-badge.is-default,
.badge.bg-secondary {
    background: #f3f4f6 !important;
    color: var(--rvr-muted) !important;
}

.rvr-status-badge.is-starter {
    background: var(--rvr-blue-soft) !important;
    color: #0b74d1 !important;
}

.rvr-badge.is-plan-1 {
    background: var(--rvr-success-soft);
    color: var(--rvr-success);
}

.rvr-badge.is-plan-2 {
    background: var(--rvr-warning-soft);
    color: var(--rvr-warning);
}

/* =========================================================
   11) Tables + DataTables
   ========================================================= */

.rvr-table-card,
.card.rvr-table-card {
    background: var(--rvr-card-bg);
    border: 1px solid var(--rvr-border);
    border-radius: var(--rvr-radius-lg);
    box-shadow: var(--rvr-shadow-md);
    overflow: hidden;
}

.rvr-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rvr-table-scroll .table,
.rvr-table-scroll .rvr-table {
    min-width: 820px;
}

.rvr-table-card .table,
.rvr-table {
    margin-bottom: 0 !important;
    color: var(--rvr-text);
    vertical-align: middle;
}

.rvr-table-card .table thead th,
.rvr-table thead th {
    background: var(--rvr-table-head-bg) !important;
    color: var(--rvr-text) !important;
    border: 0 !important;
    padding: 16px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    white-space: nowrap;
}

.rvr-table-card .table tbody td,
.rvr-table tbody td {
    padding: 18px 24px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: var(--rvr-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: left !important;
    vertical-align: middle;
}

.rvr-table-card .table tbody tr:last-child td,
.rvr-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.rvr-table-card .fw-bold,
.rvr-table .fw-bold {
    color: var(--rvr-text);
    font-weight: 800 !important;
}

.rvr-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    flex-shrink: 0;
}

.rvr-user-cell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rvr-user-name {
    color: var(--rvr-text);
    font-size: 13px;
    font-weight: 700;
}

/* Table checkboxes */
.rvr-table th.rvr-check-column,
.rvr-table td.rvr-check-column {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding-left: 18px !important;
    padding-right: 12px !important;
}

.rvr-row-checkbox,
.rvr-check-all {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 1.5px solid #aeb7c2 !important;
    border-radius: 7px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    cursor: pointer;
}

.rvr-row-checkbox:checked,
.rvr-check-all:checked {
    background-color: var(--rvr-primary) !important;
    border-color: var(--rvr-primary) !important;
}

.rvr-table tbody tr:hover .rvr-row-checkbox {
    border-color: var(--rvr-primary) !important;
}

/* DataTables footer / pagination */
.rvr-dt-footer {
    border-top: 1px solid #f3f4f6;
}

.dataTables_wrapper .dataTables_paginate {
    margin: 0 !important;
}

.dataTables_wrapper .pagination {
    gap: 10px;
    margin: 0 !important;
    align-items: center;
}

.dataTables_wrapper .page-item .page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: var(--rvr-radius-sm) !important;
    background: #f1f3f5 !important;
    color: var(--rvr-muted-2) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none !important;
}

.dataTables_wrapper .page-item.active .page-link {
    background: var(--rvr-primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .page-item.previous .page-link,
.dataTables_wrapper .page-item.next .page-link {
    background: var(--rvr-primary-soft) !important;
    color: var(--rvr-primary) !important;
}

.dataTables_wrapper .page-item.disabled .page-link {
    opacity: 0.45;
    pointer-events: none;
}

.dataTables_wrapper .dataTables_info {
    color: var(--rvr-muted);
    font-size: 13px;
    padding-top: 0 !important;
}

/* Keep old DataTables controls usable if any old page still renders them */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    min-height: 38px !important;
    border: 1px solid var(--rvr-border) !important;
    border-radius: var(--rvr-radius-sm) !important;
    background: var(--rvr-field-soft-bg) !important;
    color: var(--rvr-muted) !important;
    box-shadow: none !important;
}

/* =========================================================
   12) Modals
   ========================================================= */

.rvr-modal .modal-dialog {
    max-width: 600px;
}

.rvr-modal.rvr-modal-lg .modal-dialog {
    max-width: 760px;
}

.rvr-admin-modal .modal-dialog {
    max-width: 600px;
}

.rvr-modal .modal-content,
.modal.rvr-modal .modal-content {
    border: 0 !important;
    border-radius: var(--rvr-radius-xl) !important;
    overflow: hidden;
    box-shadow: var(--rvr-shadow-lg) !important;
    direction: ltr !important;
    text-align: left !important;
}

.rvr-modal .modal-header {
    min-height: 70px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--rvr-border) !important;
    background: #ffffff;
}

.rvr-admin-modal .modal-header {
    min-height: 72px;
}

.rvr-modal .modal-title {
    color: var(--rvr-text);
    font-size: 20px;
    font-weight: 700;
}

.rvr-modal .modal-body {
    padding: 24px;
}

.rvr-admin-modal .modal-body {
    padding-top: 24px;
}

.rvr-modal .modal-footer {
    padding: 0 24px 24px;
    border-top: 0 !important;
    gap: 12px;
}

.rvr-admin-modal .modal-footer {
    display: block;
}

.rvr-modal-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--rvr-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rvr-primary-soft);
    color: var(--rvr-primary);
}

/* Custom close button, independent from Bootstrap .btn-close */
.rvr-modal-close {
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    box-shadow: none;
    outline: none;
    flex-shrink: 0;
}

.rvr-modal-close::before,
.rvr-modal-close::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 1.5px;
    border-radius: var(--rvr-radius-pill);
    background: #8b8f96;
    transition: background-color 0.18s ease;
}

.rvr-modal-close::before {
    transform: rotate(45deg);
}

.rvr-modal-close::after {
    transform: rotate(-45deg);
}

.rvr-modal-close:hover::before,
.rvr-modal-close:hover::after {
    background: #111827;
}

.rvr-modal-close:focus {
    box-shadow: 0 0 0 3px rgba(14, 152, 136, 0.12);
}

/* =========================================================
   13) SweetAlert2
   Use customClass.popup = 'rvr-alert-popup'
   ========================================================= */

.swal2-popup.rvr-alert-popup {
    width: 600px !important;
    max-width: calc(100vw - 32px) !important;
    border-radius: 28px !important;
    padding: 48px 56px 40px !important;
}

.swal2-popup.rvr-alert-popup .swal2-image {
    width: 112px !important;
    height: 112px !important;
    object-fit: contain !important;
    margin: 0 auto 28px !important;
}

.swal2-popup.rvr-alert-popup .swal2-title {
    color: #111111 !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
}

.swal2-popup.rvr-alert-popup .swal2-html-container {
    color: var(--rvr-muted) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.swal2-popup.rvr-alert-popup .swal2-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin: 44px 0 0 !important;
}

.swal2-popup.rvr-alert-popup .swal2-confirm,
.swal2-popup.rvr-alert-popup .swal2-cancel {
    flex: 1 1 0 !important;
    width: 50% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: var(--rvr-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    outline: none !important;
}

.swal2-popup.rvr-alert-popup .swal2-confirm {
    background: var(--rvr-danger) !important;
    border: 1px solid var(--rvr-danger) !important;
    color: #ffffff !important;
}

.swal2-popup.rvr-alert-popup .swal2-cancel {
    background: #fff5f6 !important;
    border: 1px solid var(--rvr-danger) !important;
    color: var(--rvr-danger) !important;
}

.swal2-popup.rvr-alert-popup.rvr-success-alert {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}

.swal2-popup.rvr-alert-popup.rvr-success-alert .swal2-title {
    margin-bottom: 0 !important;
}

.swal2-popup.rvr-alert-popup.rvr-error-alert .swal2-actions {
    justify-content: center !important;
}

.swal2-popup.rvr-alert-popup.rvr-error-alert .swal2-confirm {
    flex: 0 0 auto !important;
    width: 238px !important;
    min-width: 238px !important;
    background: var(--rvr-danger) !important;
    border: 1px solid var(--rvr-danger) !important;
    color: #ffffff !important;
}

/* =========================================================
   14) Switches
   ========================================================= */

.rvr-switch {
    width: 44px;
    height: 24px;
    border-radius: var(--rvr-radius-pill);
    background: #cfd4db;
    border: 0;
    position: relative;
    appearance: none;
    outline: 0;
    cursor: pointer;
}

.rvr-switch::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.18s ease;
}

.rvr-switch:checked {
    background: var(--rvr-primary);
}

.rvr-switch:checked::before {
    transform: translateX(20px);
}

/* Bootstrap switch compatibility */
.form-switch .form-check-input {
    cursor: pointer;
}

.form-switch .form-check-input:checked {
    background-color: var(--rvr-primary) !important;
    border-color: var(--rvr-primary) !important;
}

/* =========================================================
   15) Date picker - Flatpickr
   ========================================================= */

.rvr-datepicker {
    cursor: pointer;
}

.flatpickr-calendar.rvr-datepicker-calendar {
    padding: 22px 16px 16px !important;
    border: 0 !important;
    border-radius: 0 0 14px 14px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
    font-family: inherit !important;
}

.flatpickr-calendar.rvr-datepicker-calendar::before,
.flatpickr-calendar.rvr-datepicker-calendar::after {
    display: none !important;
}

.rvr-datepicker-calendar .flatpickr-months {
    height: 34px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.rvr-datepicker-calendar .flatpickr-month {
    height: 34px !important;
}

.rvr-datepicker-calendar .flatpickr-current-month {
    height: 34px !important;
    padding: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
}

.rvr-datepicker-calendar .cur-month,
.rvr-datepicker-calendar .numInputWrapper {
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.rvr-datepicker-calendar .flatpickr-prev-month,
.rvr-datepicker-calendar .flatpickr-next-month {
    top: 22px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 6px !important;
    color: #9ca3af !important;
    fill: #9ca3af !important;
}

.rvr-datepicker-calendar .flatpickr-time {
    order: 2;
    height: 38px !important;
    max-height: 38px !important;
    border: 0 !important;
    margin-bottom: 14px !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
}

.rvr-datepicker-calendar .flatpickr-time input,
.rvr-datepicker-calendar .flatpickr-time .flatpickr-am-pm {
    height: 38px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--rvr-radius-sm) !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.rvr-datepicker-calendar .flatpickr-time input {
    padding: 0 12px !important;
}

.rvr-datepicker-calendar .flatpickr-time .numInputWrapper {
    width: 90px !important;
}

.rvr-datepicker-calendar .flatpickr-time .flatpickr-am-pm {
    width: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rvr-datepicker-calendar .flatpickr-time .flatpickr-time-separator {
    display: none !important;
}

.rvr-datepicker-calendar .flatpickr-innerContainer {
    order: 3;
    display: block !important;
}

.rvr-datepicker-calendar .flatpickr-weekdays {
    height: 32px !important;
    margin-bottom: 4px !important;
}

.rvr-datepicker-calendar span.flatpickr-weekday {
    color: #8b8f96 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.rvr-datepicker-calendar .flatpickr-days,
.rvr-datepicker-calendar .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.rvr-datepicker-calendar .flatpickr-day {
    width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    border-radius: 9px !important;
    border: 0 !important;
    color: #8b8f96 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.rvr-datepicker-calendar .flatpickr-day.prevMonthDay,
.rvr-datepicker-calendar .flatpickr-day.nextMonthDay {
    color: #d1d5db !important;
}

.rvr-datepicker-calendar .flatpickr-day:hover {
    background: var(--rvr-primary-soft) !important;
    color: var(--rvr-primary) !important;
}

.rvr-datepicker-calendar .flatpickr-day.today {
    border: 0 !important;
}

.rvr-datepicker-calendar .flatpickr-day.selected,
.rvr-datepicker-calendar .flatpickr-day.startRange,
.rvr-datepicker-calendar .flatpickr-day.endRange {
    background: var(--rvr-primary) !important;
    color: #ffffff !important;
}

.rvr-datepicker-confirm {
    width: 100%;
    height: 44px;
    margin-top: 18px;
    border: 0;
    border-radius: var(--rvr-radius-sm);
    background: var(--rvr-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.rvr-datepicker-confirm:hover {
    background: var(--rvr-primary-hover);
}

/* =========================================================
   16) Charts + dashboard blocks
   ========================================================= */

.rvr-dashboard-page {
    min-height: calc(100vh - 120px);
}

.rvr-dashboard-shell {
    width: 100%;
}

.rvr-chart-card {
    padding: 24px;
    margin-bottom: 18px;
    overflow: visible !important;
}

.rvr-chart-card.is-flat {
    border-radius: var(--rvr-radius-lg);
}

.rvr-chart-body {
    width: 100%;
    overflow: visible !important;
}

.rvr-chart-body .apexcharts-canvas,
.rvr-chart-body .apexcharts-svg {
    overflow: visible !important;
}

.rvr-pill {
    height: 24px;
    padding: 0 14px;
    border-radius: var(--rvr-radius-pill);
    background: var(--rvr-primary-soft);
    color: var(--rvr-primary);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.rvr-tools-usage-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
    min-height: 260px;
}

.rvr-legend-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 520px;
}

.rvr-legend-row {
    display: grid;
    grid-template-columns: 1fr 70px;
    align-items: center;
    gap: 16px;
    color: var(--rvr-muted);
    font-size: 13px;
    font-weight: 500;
}

.rvr-legend-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rvr-legend-percent {
    color: var(--rvr-text);
    font-weight: 800;
    font-size: 12px;
    text-align: right;
}

.rvr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.rvr-dot.is-purple {
    background: var(--rvr-purple);
}

.rvr-dot.is-primary {
    background: var(--rvr-primary);
}

.rvr-dot.is-blue {
    background: #6aa8f2;
}

.rvr-dot.is-teal {
    background: #7ae2cf;
}

.rvr-donut-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rvr-donut-chart {
    width: 340px;
    min-height: 260px;
}

/* Tools helpers */
.rvr-subtools-link {
    color: var(--rvr-muted);
    font-weight: 800;
    text-decoration: none;
}

.rvr-subtools-link:hover {
    color: var(--rvr-primary);
}

.rvr-subtool-item {
    border: 1px solid var(--rvr-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================================================
   17) Responsive
   ========================================================= */

@media (max-width: 1199.98px) {
    .rvr-stats-grid,
    .tools-stats-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rvr-tools-usage-body {
        grid-template-columns: 1fr;
    }

    .rvr-legend-list {
        max-width: 100%;
    }
}

@media (max-width: 991.98px) {
    .rvr-form-grid,
    .rvr-form-grid.is-3 {
        grid-template-columns: 1fr;
    }

    .rvr-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .rvr-actions .rvr-btn,
    .rvr-actions .btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .rvr-page-title-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .rvr-stats-grid,
    .tools-stats-wrapper {
        grid-template-columns: 1fr;
    }

    .rvr-filter-card {
        padding: 16px;
    }

    .rvr-filter-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .rvr-filter-actions .rvr-btn {
        width: 100%;
    }

    .rvr-upload {
        grid-template-columns: 1fr;
    }

    .rvr-upload-preview {
        width: 100%;
        max-width: 160px;
    }

    .rvr-modal .modal-body,
    .rvr-modal .modal-header,
    .rvr-modal .modal-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .rvr-chart-card {
        padding: 18px;
    }

    .rvr-chart-body {
        min-height: 260px;
    }

    .rvr-tools-usage-body {
        gap: 16px;
    }

    .rvr-donut-chart {
        width: 260px;
    }
}

@media (max-width: 575.98px) {
    .rvr-card-header,
    .rvr-table-card-header,
    .rvr-form-header {
        flex-direction: column;
        align-items: stretch;
    }

    .rvr-card-body,
    .rvr-form-body {
        padding: 18px;
    }

    .rvr-stat-card {
        min-height: 120px;
    }

    .rvr-stat-value {
        font-size: 22px;
    }

    .rvr-modal .modal-dialog {
        margin: 12px;
    }

    .swal2-popup.rvr-alert-popup {
        width: calc(100vw - 24px) !important;
        padding: 38px 24px 28px !important;
        border-radius: 22px !important;
    }

    .swal2-popup.rvr-alert-popup .swal2-actions {
        flex-direction: column !important;
    }

    .swal2-popup.rvr-alert-popup .swal2-confirm,
    .swal2-popup.rvr-alert-popup .swal2-cancel {
        width: 100% !important;
    }

    .flatpickr-calendar.rvr-datepicker-calendar {
        width: calc(100vw - 32px) !important;
        left: 16px !important;
        right: 16px !important;
    }

    .rvr-datepicker-calendar .flatpickr-day {
        width: 14.285% !important;
        max-width: 14.285% !important;
    }
}

/* Move search text away from the icon */
.rvr-search-box .form-control,
.rvr-search-box .rvr-filter-control {
    padding-left: 40px !important;
}

.rvr-search-box svg,
.rvr-search-box i {
    left: 18px !important;
}

/* Preset Styles */
.rvr-table-thumb {
    width: 62px !important;
    height: 41px !important;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}

.rvr-preset-add-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: var(--rvr-primary-soft);
    color: var(--rvr-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.rvr-preset-add-btn svg {
    width: 16px !important;
    height: 16px !important;
}

.rvr-preset-active-row {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--rvr-border-2);
    border-radius: var(--rvr-radius-sm);
    background: var(--rvr-field-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--rvr-muted);
    font-size: 14px;
}

/* Fix Select2 direction inside RVR modals */
.rvr-modal .select2-container {
    direction: ltr !important;
    text-align: left !important;
    width: 100% !important;
}

.rvr-modal .select2-container--default .select2-selection--single {
    height: 48px !important;
    border: 1px solid var(--rvr-border) !important;
    border-radius: var(--rvr-radius-sm) !important;
    background: var(--rvr-field-bg) !important;
    direction: ltr !important;
}

.rvr-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: left !important;
    direction: ltr !important;
    padding-left: 14px !important;
    padding-right: 42px !important;
    line-height: 48px !important;
    color: var(--rvr-muted) !important;
}

.rvr-modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--rvr-muted-2) !important;
}

.rvr-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 14px !important;
    left: auto !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
}

/* =========================================================
   RVR Task View Modal
   ========================================================= */

.rvr-task-view-modal .modal-dialog {
    max-width: 600px;
}

.rvr-readonly-field {
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--rvr-border);
    border-radius: var(--rvr-radius-sm);
    background: var(--rvr-field-bg);
    color: var(--rvr-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.rvr-user-email {
    color: var(--rvr-muted-2);
    font-size: 13px;
    margin-top: 2px;
}

.rvr-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rvr-primary-soft);
    color: var(--rvr-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.rvr-task-images-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rvr-task-image-card {
    border-radius: 8px;
    overflow: hidden;
    background: #f7f9fb;
}

.rvr-task-image-title {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--rvr-muted);
    text-transform: uppercase;
}

.rvr-task-image-card.is-before .rvr-task-image-title {
    background: #c8c8cb;
}

.rvr-task-image-card.is-after .rvr-task-image-title {
    background: #32cbbb;
    color: #111827;
}

.rvr-task-image-body {
    height: 232px;
    background: #eef9f7;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rvr-task-image-card.is-before .rvr-task-image-body {
    background: #f1f1f2;
}

.rvr-task-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rvr-task-image-placeholder {
    color: var(--rvr-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rvr-task-image-placeholder svg {
    width: 32px !important;
    height: 32px !important;
    color: #32cbbb !important;
}

.rvr-task-image-card.is-before .rvr-task-image-placeholder svg {
    color: #b9bec8 !important;
}

@media (max-width: 575.98px) {
    .rvr-task-images-grid {
        grid-template-columns: 1fr;
    }

    .rvr-task-image-body {
        height: 200px;
    }
}

/* =========================================================
   RVR Plans Page
   ========================================================= */

.rvr-plan-hero {
    min-height: 156px;
    border-radius: 14px;
    background: linear-gradient(115deg, #0b9788 0%, #14b99f 100%);
    padding: 24px;
    margin-bottom: 20px;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    box-shadow: var(--rvr-card-shadow);
}

.rvr-plan-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff7e6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.rvr-plan-hero-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.rvr-plan-hero h2 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
}

.rvr-plan-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.rvr-switch-row {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--rvr-border);
    border-radius: var(--rvr-radius-sm);
    background: var(--rvr-field-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--rvr-muted);
    font-size: 14px;
}

@media (max-width: 575.98px) {
    .rvr-plan-hero {
        flex-direction: column;
        min-height: auto;
    }
}


/* =========================================================
   Prevent dashboard content flicker behind sidebar on reload
   ========================================================= */

html.rvr-preload .app-content,
html.rvr-preload .content.app-content,
html.rvr-preload .content-wrapper,
html.rvr-preload .header-navbar,
html.rvr-preload .footer {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.rvr-preload .main-menu {
    transition: none !important;
    animation: none !important;
}

html.rvr-preload .app-content,
html.rvr-preload .content.app-content,
html.rvr-preload .content-wrapper,
html.rvr-preload .header-navbar,
html.rvr-preload .footer,
html.rvr-preload .navbar-container {
    transition: none !important;
    animation: none !important;
}

/* Disable Vuexy sliding transition between sidebar/content states */
.vertical-layout.vertical-menu-modern .app-content,
.vertical-layout.vertical-menu-modern .content.app-content,
.vertical-layout.vertical-menu-modern .content-wrapper,
.vertical-layout.vertical-menu-modern .header-navbar,
.vertical-layout.vertical-menu-modern .footer,
.vertical-layout.vertical-menu-modern .main-menu {
    transition: none !important;
}

/* =========================================================
   RVR Sidebar
   ========================================================= */

/* Layout width */
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu,
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-fixed,
.main-menu.ai-main-sidebar {
    width: var(--ai-sidebar-width) !important;
    left: 0 !important;
    right: auto !important;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .app-content,
body.vertical-layout.vertical-menu-modern.menu-expanded .content,
body.vertical-layout.vertical-menu-modern.menu-expanded .footer {
    margin-left: var(--ai-sidebar-width) !important;
    margin-right: 0 !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.menu-fixed {
    width: var(--ai-sidebar-collapsed-width) !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
body.vertical-layout.vertical-menu-modern.menu-collapsed .content,
body.vertical-layout.vertical-menu-modern.menu-collapsed .footer {
    margin-left: var(--ai-sidebar-collapsed-width) !important;
    margin-right: 0 !important;
}

/* Navbar alignment with sidebar */
body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar:not(.ai-admin-navbar),
body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.floating-nav:not(.ai-admin-navbar) {
    left: var(--ai-sidebar-width) !important;
    right: 2rem !important;
    margin-left: 2rem !important;
    margin-right: 0 !important;
    width: calc(100vw - var(--ai-sidebar-width) - 4rem) !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar:not(.ai-admin-navbar),
body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.floating-nav:not(.ai-admin-navbar) {
    left: var(--ai-sidebar-collapsed-width) !important;
    right: 2rem !important;
    margin-left: 2rem !important;
    margin-right: 0 !important;
    width: calc(100vw - var(--ai-sidebar-collapsed-width) - 4rem) !important;
}

/* Main sidebar */
.ai-main-sidebar {
    min-height: 100vh !important;
    height: 100vh !important;
    background: var(--ai-sidebar-bg) !important;
    border-right: 1px solid var(--ai-sidebar-border) !important;
    border-left: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    direction: ltr !important;
    text-align: left !important;
    z-index: 1040 !important;
}

.ai-main-sidebar.menu-light,
.ai-main-sidebar.menu-dark {
    background: var(--ai-sidebar-bg) !important;
}

.ai-main-sidebar .shadow-bottom {
    display: none !important;
}

/* Logo */
.ai-sidebar-logo-wrap {
    min-height: 116px;
    padding: 28px 26px 18px;
    border-bottom: 1px solid var(--ai-sidebar-border);
    background: var(--ai-sidebar-bg);
    position: relative;
}

.ai-sidebar-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
}

.ai-sidebar-logo img {
    width: 112px;
    max-width: 112px;
    height: auto;
    display: block;
    object-fit: contain;
}

.ai-sidebar-menu-label {
    margin-top: 16px;
    color: var(--ai-sidebar-muted);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

/* Close button mobile */
.ai-sidebar-close {
    display: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 18px;
    right: 16px;
    padding: 0;
}

.ai-sidebar-close svg {
    width: 18px !important;
    height: 18px !important;
}

/* Content */
.ai-sidebar-content,
.ai-main-sidebar .main-menu-content {
    height: calc(100vh - 116px) !important;
    padding: 22px 12px 22px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--ai-sidebar-bg) !important;
}

.ai-sidebar-content::-webkit-scrollbar,
.ai-main-sidebar .main-menu-content::-webkit-scrollbar {
    width: 4px;
}

.ai-sidebar-content::-webkit-scrollbar-track,
.ai-main-sidebar .main-menu-content::-webkit-scrollbar-track {
    background: transparent;
}

.ai-sidebar-content::-webkit-scrollbar-thumb,
.ai-main-sidebar .main-menu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}

/* Navigation reset */
.ai-main-sidebar .navigation,
.ai-main-sidebar .navigation.navigation-main {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    direction: ltr !important;
    overflow: visible !important;
}

.ai-main-sidebar .navigation > li {
    list-style: none !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Main item */
.ai-main-sidebar .navigation > li > a,
.ai-main-sidebar .ai-sidebar-link {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px 0 16px !important;
    margin: 0 !important;
    border-radius: var(--ai-sidebar-radius) !important;
    background: transparent !important;
    color: var(--ai-sidebar-text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    direction: ltr !important;
    text-align: left !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ai-main-sidebar .navigation > li > a:hover {
    background: var(--ai-sidebar-hover-bg) !important;
    color: var(--ai-sidebar-text-active) !important;
}

/* Active item */
.ai-main-sidebar .navigation > li.active > a,
.ai-main-sidebar .navigation > li.open > a {
    background: var(--ai-sidebar-active-bg) !important;
    color: var(--ai-sidebar-text-active) !important;
    font-weight: 700 !important;
}

.ai-main-sidebar .navigation > li.active > a::before,
.ai-main-sidebar .navigation > li.open > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--ai-sidebar-primary-2), var(--ai-sidebar-primary));
}

.ai-main-sidebar .navigation > li.active > a::after,
.ai-main-sidebar .navigation > li.open > a::after,
.ai-main-sidebar .navigation li.has-sub > a::after {
    display: none !important;
}

/* Icon */
.ai-sidebar-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.ai-sidebar-icon svg,
.ai-sidebar-icon i,
.ai-main-sidebar .navigation > li > a svg:not(.ai-sidebar-chevron svg) {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    color: currentColor !important;
    stroke-width: 1.8 !important;
    margin: 0 !important;
}

.ai-menu-image-icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    opacity: 0.9;
}

.ai-main-sidebar .navigation > li.active > a .ai-menu-image-icon,
.ai-main-sidebar .navigation > li.open > a .ai-menu-image-icon {
    opacity: 1;
}

/* Title */
.ai-main-sidebar .navigation > li > a .menu-title {
    color: currentColor !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    flex: 1;
    direction: ltr !important;
    text-align: left !important;
}

.ai-main-sidebar .navigation > li.active > a .menu-title,
.ai-main-sidebar .navigation > li.open > a .menu-title {
    font-weight: 700 !important;
}

/* Chevron */
.ai-sidebar-chevron {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-left: auto !important;
    color: currentColor !important;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.16s ease;
}

.ai-sidebar-chevron svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2 !important;
}

.ai-main-sidebar .navigation > li.open > a .ai-sidebar-chevron {
    transform: rotate(90deg);
}

/* Submenu */
.ai-main-sidebar .navigation .menu-content {
    background: transparent !important;
    padding: 7px 0 0 !important;
    margin: 0 !important;
    direction: ltr !important;
}

.ai-main-sidebar .navigation li.has-sub:not(.open) > .menu-content {
    display: none !important;
}

.ai-main-sidebar .navigation li.has-sub.open > .menu-content {
    display: block !important;
}

.ai-main-sidebar .navigation .menu-content li {
    margin: 0 0 5px !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

.ai-main-sidebar .navigation .menu-content li a {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px 0 46px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--ai-sidebar-text) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    direction: ltr !important;
    text-align: left !important;
}

.ai-main-sidebar .navigation .menu-content li a:hover,
.ai-main-sidebar .navigation .menu-content li.active > a {
    background: rgba(255, 255, 255, 0.055) !important;
    color: var(--ai-sidebar-text-active) !important;
    box-shadow: none !important;
}

.ai-main-sidebar .navigation .menu-content li.active > a {
    font-weight: 700 !important;
}

.ai-main-sidebar .navigation .menu-content li a .ai-menu-image-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    margin: 0 !important;
}

/* Collapsed desktop */
body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .ai-sidebar-logo-wrap {
    padding: 20px 10px !important;
    min-height: 96px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .ai-sidebar-logo img {
    width: 42px !important;
    max-width: 42px !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .ai-sidebar-menu-label {
    display: none !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .main-menu-content {
    height: calc(100vh - 96px) !important;
    padding: 18px 10px !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .menu-title,
body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .ai-sidebar-chevron {
    display: none !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .navigation > li > a {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .navigation > li.active > a::before,
body.vertical-layout.vertical-menu-modern.menu-collapsed .ai-main-sidebar .navigation > li.open > a::before {
    left: 0;
    top: 10px;
    bottom: 10px;
}





/* Overlay */
.ai-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

/* Tablet / Mobile */
@media (max-width: 1199.98px) {

    .ai-sidebar-close {
        display: inline-flex;
    }

    body.vertical-layout.vertical-menu-modern.menu-expanded .app-content,
    body.vertical-layout.vertical-menu-modern.menu-expanded .content,
    body.vertical-layout.vertical-menu-modern.menu-expanded .footer,
    body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
    body.vertical-layout.vertical-menu-modern.menu-collapsed .content,
    body.vertical-layout.vertical-menu-modern.menu-collapsed .footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.vertical-layout.vertical-menu-modern .header-navbar,
    body.vertical-layout.vertical-menu-modern .header-navbar.floating-nav {
        left: 74px !important;
        right: 16px !important;
        width: calc(100vw - 90px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-menu.ai-main-sidebar {
        width: 280px !important;
        transform: translateX(-105%) !important;
        transition: transform 0.2s ease !important;
        box-shadow: 18px 0 48px rgba(15, 23, 42, 0.24) !important;
    }

    /* body.ai-sidebar-open .main-menu.ai-main-sidebar,
    body.menu-open .main-menu.ai-main-sidebar {
        transform: translateX(0) !important;
    } */

    /* body.ai-sidebar-open .ai-sidebar-overlay,
    body.menu-open .ai-sidebar-overlay {
        display: block;
        opacity: 1;
        visibility: visible;
    } */

    .ai-sidebar-overlay {
        display: block;
    }
}

@media (max-width: 575.98px) {

    .main-menu.ai-main-sidebar {
        width: min(82vw, 290px) !important;
    }

    body.vertical-layout.vertical-menu-modern .header-navbar,
    body.vertical-layout.vertical-menu-modern .header-navbar.floating-nav {
        left: 62px !important;
        right: 12px !important;
        width: calc(100vw - 74px) !important;
    }

    .ai-sidebar-logo-wrap {
        padding: 24px 22px 16px;
    }

    .ai-sidebar-content,
    .ai-main-sidebar .main-menu-content {
        padding: 18px 10px 20px !important;
    }
}

/* =========================================================
   Sidebar / Navbar responsive fixes
   ========================================================= */

/* remove submenu shadows completely */
.ai-main-sidebar .navigation .menu-content,
.ai-main-sidebar .navigation .menu-content li,
.ai-main-sidebar .navigation .menu-content li a,
.ai-main-sidebar .navigation .menu-content li.active > a,
.ai-main-sidebar .navigation .menu-content li a:hover,
.main-menu .navigation > li.open,
.main-menu .navigation > li.open > a,
.main-menu .navigation > li.has-sub.open,
.main-menu .navigation > li.has-sub.open > a {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
}

/* full green left border for active/open parent item */
.ai-main-sidebar .navigation > li.active > a::before,
.ai-main-sidebar .navigation > li.open > a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 5px !important;
    height: 100% !important;
    border-radius: 0 8px 8px 0 !important;
    background: linear-gradient(180deg, #0E9888 0%, #4DD9B7 100%) !important;
    display: block !important;
    pointer-events: none !important;
}

.ai-main-sidebar .navigation > li.active > a::after,
.ai-main-sidebar .navigation > li.open > a::after,
.ai-main-sidebar .navigation li.has-sub > a::after {
    display: none !important;
}

/* navbar menu button inside navbar */
.ai-navbar-menu-btn {
    display: none;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 0;
    border-radius: 12px;
    background: #effcf9;
    color: #0e9888;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.ai-navbar-menu-btn svg,
.ai-navbar-menu-btn i {
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2.2 !important;
}

/* mobile/tablet navbar full width */
@media (max-width: 1199.98px) {
    .ai-navbar-menu-btn {
        display: inline-flex !important;
    }

    body.vertical-layout.vertical-menu-modern .header-navbar.ai-admin-navbar,
    body.vertical-layout.vertical-menu-modern .header-navbar.ai-admin-navbar.floating-nav,
    body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.ai-admin-navbar,
    body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.ai-admin-navbar.floating-nav,
    body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.ai-admin-navbar,
    body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.ai-admin-navbar.floating-nav {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ai-admin-navbar .navbar-container {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ai-navbar-card {
        width: 100% !important;
        max-width: none !important;
        min-height: 62px !important;
        height: auto !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    .ai-navbar-search {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        order: 0 !important;
    }

    .ai-navbar-actions {
        width: auto !important;
        flex-shrink: 0 !important;
        order: 0 !important;
        gap: 10px !important;
    }

    .ai-navbar-divider {
        display: none !important;
    }

    .main-menu.ai-main-sidebar {
        transform: translateX(-105%) !important;
        transition: transform 0.2s ease !important;
    }

    /* body.ai-sidebar-open .main-menu.ai-main-sidebar,
    body.menu-open .main-menu.ai-main-sidebar {
        transform: translateX(0) !important;
    } */
}

@media (max-width: 575.98px) {
    .ai-admin-navbar .navbar-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ai-navbar-card {
        padding: 9px 8px !important;
        gap: 8px !important;
    }

    .ai-navbar-menu-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 11px;
    }

    .ai-navbar-search {
        height: 36px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ai-navbar-user-meta {
        display: none !important;
    }

    .ai-navbar-avatar,
    .ai-navbar-avatar img {
        width: 32px !important;
        height: 32px !important;
    }
}


/* =========================================================
   Navbar Styles
   ========================================================= */

    .ai-admin-navbar.header-navbar {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 68px !important;
    height: 68px !important;
    direction: ltr !important;
    max-width: none !important;
}

/* خلي النافبار ياخد نفس مساحة الصفحة بعد السايدبار */
body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.ai-admin-navbar,
body.vertical-layout.vertical-menu-modern.menu-expanded .header-navbar.ai-admin-navbar.floating-nav {
    left: var(--ai-sidebar-width) !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: calc(100vw - var(--ai-sidebar-width)) !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.ai-admin-navbar,
body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.ai-admin-navbar.floating-nav {
    left: var(--ai-sidebar-collapsed-width) !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: calc(100vw - var(--ai-sidebar-collapsed-width)) !important;
}

/* مهم: مفيش padding هنا عشان مايدخلش لجوه زيادة */
.ai-admin-navbar .navbar-container {
    width: 100% !important;
    max-width: var(--page-max-width, 1440px) !important;
    height: 68px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    direction: ltr !important;
}
    .ai-navbar-card {
        width: 100%;
        height: 56px;
        min-height: 56px;
        background: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 2px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
        gap: 22px;
    }

    .ai-navbar-search {
        flex: 1;
        height: 34px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fafbfc;
        border: 1px solid #f2f3f5;
        border-radius: 8px;
        padding: 0 14px;
        color: #a3adb9;
        min-width: 0;
    }

    .ai-navbar-search svg,
    .ai-navbar-search i {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        color: #a3adb9 !important;
        stroke-width: 2 !important;
    }

    .ai-navbar-search input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #6b7280;
        font-size: 13px;
        font-weight: 400;
        box-shadow: none !important;
    }

    .ai-navbar-search input::placeholder {
        color: #aeb7c2;
    }

    .ai-navbar-divider {
        width: 1px;
        height: 30px;
        background: #edf0f2;
        flex-shrink: 0;
    }

    .ai-navbar-actions {
        display: flex;
        align-items: center;
        gap: 22px;
        flex-shrink: 0;
    }

    .ai-navbar-user {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ai-navbar-user .dropdown-user-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #111827 !important;
        text-decoration: none !important;
    }

    .ai-navbar-user .dropdown-user-link::after {
        display: none !important;
    }

    .ai-navbar-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        background: #f4f4f5;
    }

    .ai-navbar-avatar img {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block;
    }

    .ai-navbar-user-meta {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-width: 0;
    }

    .ai-navbar-user-name {
        font-size: 12px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 4px;
        white-space: nowrap;
    }

    .ai-navbar-user-email {
        font-size: 11px;
        font-weight: 400;
        color: #a1a9b3;
        white-space: nowrap;
    }

    .ai-lang-btn {
        height: 34px;
        min-width: 74px;
        border-radius: 4px;
        border: 0;
        background: #effcf9;
        color: #0ca889;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-size: 11px;
        font-weight: 500;
        text-decoration: none !important;
        padding: 0 13px;
        white-space: nowrap;
    }

    .ai-lang-btn:hover {
        color: #0ca889;
        background: #e7faf6;
        text-decoration: none !important;
    }

    .ai-lang-btn svg,
    .ai-lang-btn i {
        width: 13px !important;
        height: 13px !important;
        min-width: 13px !important;
        stroke-width: 2 !important;
    }

    .ai-admin-navbar .dropdown-menu {
        margin-top: 12px !important;
        border-radius: 8px !important;
        border: 1px solid #eef0f3 !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
    }

    @media (max-width: 991.98px) {
    body.vertical-layout.vertical-menu-modern .header-navbar.ai-admin-navbar,
    body.vertical-layout.vertical-menu-modern .header-navbar.ai-admin-navbar.floating-nav {
        left: 0 !important;
        right: auto !important;
        width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ai-admin-navbar.header-navbar {
        height: auto !important;
        min-height: 64px !important;
    }

    .ai-admin-navbar .navbar-container {
        height: auto !important;
        max-width: 100% !important;
        /* padding-left: 16px !important;
        padding-right: 16px !important; */
    }

    .ai-navbar-card {
        min-height: 64px;
        height: auto;
        padding: 12px;
        gap: 12px;
    }

    .ai-navbar-search {
        height: 36px;
    }

    .ai-navbar-actions {
        gap: 12px;
    }
}

    @media (max-width: 575.98px) {
        .ai-navbar-card {
            flex-wrap: wrap;
        }

        .ai-navbar-search {
            flex: 0 0 100%;
            order: 2;
        }

        .ai-navbar-divider {
            display: none;
        }

        .ai-navbar-actions {
            width: 100%;
            justify-content: space-between;
            order: 1;
        }

        .ai-navbar-user-email {
            display: none;
        }
    }


/* =========================================================
   Manage Profile Page
   ========================================================= */

.manage-profile-page {
    width: 100%;
}

.manage-profile-card {
    overflow: hidden;
}

.manage-profile-header {
    min-height: 76px;
}

.manage-profile-view {
    padding: 36px 32px 38px;
}

.manage-profile-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 34px;
}

.manage-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.manage-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    align-items: center;
}

.manage-profile-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.manage-profile-info-label {
    color: var(--rvr-muted-2);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}

.manage-profile-info-value {
    color: var(--rvr-text);
    font-size: 15px;
    font-weight: 600;
    word-break: break-word;
}

.manage-profile-form {
    width: 100%;
}

/* Edit form layout */
.manage-profile-form .rvr-form-body {
    padding: 0 32px 30px !important;
}

.manage-profile-form .rvr-upload {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 26px !important;
}

.manage-profile-form .rvr-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 18px;
}

/* Labels exactly like screenshot */
.manage-profile-form .rvr-label {
    margin-bottom: 7px !important;
    color: #1f2937 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* Inputs */
.manage-profile-form .form-control,
.manage-profile-form .form-select {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    border: 1px solid #dbe5ef !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

.manage-profile-form .form-control::placeholder {
    color: #9aa7b8 !important;
}

.manage-profile-form .form-control:focus,
.manage-profile-form .form-select:focus {
    border-color: #b8c6d6 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

/* Icon inputs */
.manage-profile-form .rvr-input-wrap {
    position: relative;
    width: 100%;
}

.manage-profile-form .rvr-input-wrap.has-left-icon .form-control {
    padding-left: 36px !important;
}

.manage-profile-form .rvr-input-icon {
    left: 11px !important;
    width: 16px !important;
    height: 16px !important;
    color: #9aa7b8 !important;
    background: transparent !important;
}

.manage-profile-form .rvr-input-icon svg,
.manage-profile-form .rvr-input-icon i {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 1.8 !important;
}

/* Keep upload area same page style */
.manage-profile-form .rvr-upload-control label {
    background-color: #ffffff !important;
}

/* Responsive */
@media (max-width: 991.98px) {
    .manage-profile-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .manage-profile-form .rvr-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .manage-profile-view {
        padding: 28px 20px 30px;
    }

    .manage-profile-header {
        gap: 12px;
        align-items: center;
    }

    .manage-profile-header .rvr-btn {
        min-width: 130px;
    }

    .manage-profile-form .rvr-form-body {
        padding: 0 20px 24px !important;
    }
}


/* =========================================================
   RVR Login Page
   ========================================================= */

.rvr-login-page {
    min-height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 50.8% 49.2%;
    background: #11141b;
    color: #ffffff;
    overflow: hidden;
    font-family: inherit;
}

.rvr-login-left {
    min-height: 100vh;
    background: #1e2121;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 72px;
}

.rvr-login-form-wrap {
    width: 100%;
    max-width: 472px;
}

.rvr-login-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 24px;
}

.rvr-login-logo img {
    width: 104px;
    height: auto;
    display: block;
    object-fit: contain;
}

.rvr-login-heading {
    margin-bottom: 34px;
}

.rvr-login-heading h1 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    /* line-height: 1.2; */
}

.rvr-login-heading p {
    margin: 0;
    color: #6B7280;
    font-size: 16px;
    font-weight: 700;
}

.rvr-login-alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.08);
    color: #ff9aa4;
    font-size: 13px;
    font-weight: 500;
}

.rvr-login-form {
    width: 100%;
}

.rvr-login-field {
    margin-bottom: 22px;
}

.rvr-login-field label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.rvr-login-input-wrap {
    width: 100%;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
}

.rvr-login-input-wrap input {
    width: 100%;
    height: 48px;
    padding: 0 48px 0 42px;
    border: 1px solid #FFFFFF1A;
    border-radius: 22px;
    background: #13151A80;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    box-shadow: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.rvr-login-input-wrap input::placeholder {
    color: #6B7280;
    opacity: 1;
}

.rvr-login-input-wrap input:focus {
    border-color: rgba(190, 83, 255, 0.75);
    background: rgba(255, 255, 255, 0.025);
}

.rvr-login-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #6f7788;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.rvr-login-input-icon svg,
.rvr-login-input-icon i {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2 !important;
}

.rvr-login-password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6f7788;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 2;
}

.rvr-login-password-toggle svg,
.rvr-login-password-toggle i {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2 !important;
}

.rvr-login-password-toggle:hover {
    color: #ffffff;
}

.rvr-login-error {
    margin-top: 7px;
    color: #fb7185;
    font-size: 12px;
    font-weight: 600;
}

.rvr-login-options {
    margin: 2px 0 22px;
}

.rvr-login-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.rvr-login-check input {
    display: none;
}

.rvr-login-check span {
    width: 20px;
    height: 20px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.13);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rvr-login-check span::after {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
    opacity: 0;
    margin-top: -2px;
}

.rvr-login-check input:checked + span {
    background: linear-gradient(135deg, #d537ee 0%, #8758ff 100%);
    border-color: transparent;
}

.rvr-login-check input:checked + span::after {
    opacity: 1;
}

.rvr-login-check b {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.rvr-login-submit {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(90deg, #d538ee 0%, #8758ff 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.rvr-login-submit:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.rvr-login-right {
    min-height: 100vh;
    position: relative;
    background-image: var(--rvr-login-bg-image);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 64px;
    overflow: hidden;
}

.rvr-login-right-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(17, 20, 27, 0.84) 0%, rgba(17, 20, 27, 0.58) 42%, rgba(17, 20, 27, 0.62) 100%),
        rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.rvr-login-right::before,
.rvr-login-right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    z-index: 2;
}

.rvr-login-right::before {
    left: 0;
}

.rvr-login-right::after {
    left: 50%;
}

.rvr-login-feature-card {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 520px;
    margin-left: 0;
}

.rvr-login-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, #d538ee 0%, #8758ff 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
}

.rvr-login-feature-icon svg,
.rvr-login-feature-icon i {
    width: 31px !important;
    height: 31px !important;
    stroke-width: 2 !important;
}

.rvr-login-feature-card h2 {
    margin: 0 0 26px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.2;
}

.rvr-login-feature-subtitle {
    margin: 0 0 34px;
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
}

.rvr-login-feature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rvr-login-feature-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 22px;
    align-items: start;
}

.rvr-login-feature-item > span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #9810FA33;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.rvr-login-feature-item > span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C27AFF;
}

.rvr-login-feature-item h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.rvr-login-feature-item p {
    margin: 0;
    color: #6B7280;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
}

/* Vuexy auth reset */
.blank-page .content.app-content,
html .blank-page .content.app-content {
    margin: 0 !important;
    padding: 0 !important;
}

.blank-page .content-wrapper,
.blank-page .content-body {
    padding: 0 !important;
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .rvr-login-page {
        grid-template-columns: 1fr;
    }

    .rvr-login-right {
        display: none;
    }

    .rvr-login-left {
        padding: 42px 24px;
    }

    .rvr-login-form-wrap {
        max-width: 480px;
    }
}

@media (max-width: 575.98px) {
    .rvr-login-left {
        padding: 32px 18px;
        align-items: flex-start;
    }

    .rvr-login-form-wrap {
        padding-top: 34px;
    }

    .rvr-login-heading h1 {
        font-size: 20px;
    }

    .rvr-login-heading p {
        font-size: 14px;
    }

    .rvr-login-input-wrap input {
        font-size: 15px;
    }
}