/* =========================================================
   AdBridges Redesign Theme — Authenticated Modules Only
   Source: AdBridges Redesign.dc.html
   Scope:  body.app  (never touches public/frontend pages)
   ========================================================= */

/* ---------- Roboto Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap');

/* ---------- Design Tokens ---------- */
:root {
    --rb-primary: #0b4181;
    --rb-primary-dark: #072a56;
    --rb-primary-darker: #04152a;
    --rb-primary-light: #f5f9fc;
    --rb-primary-mid: #bed2fb;
    --rb-primary-glow: rgba(11, 65, 129, 0.18);
    --rb-primary-glow-sm: rgba(11, 65, 129, 0.10);

    --rb-accent: #C0396E;
    /* oklch(48% 0.17 340) */
    --rb-accent-bg: #FDE8EF;

    --rb-text: #16151F;
    --rb-text-muted: #6E6A76;
    --rb-text-faint: #9C97A3;
    --rb-text-nav: #4B4854;
    --rb-border: #ECE7E0;
    --rb-border-light: #F1EDE7;
    --rb-bg: #FFFFFF;
    --rb-bg-subtle: #FBFAF8;
    --rb-bg-muted: #F5F3EF;
    --rb-chip: #F1EDE7;
    --rb-nav-label: #B4AFB9;

    --rb-shadow-xs: 0 1px 2px rgba(22, 21, 31, .05);
    --rb-shadow-sm: 0 2px 8px rgba(22, 21, 31, .07);
    --rb-shadow-md: 0 4px 16px rgba(22, 21, 31, .10);
    --rb-shadow-lg: 0 8px 32px rgba(22, 21, 31, .12);
    --rb-shadow-glow: 0 4px 20px rgba(124, 92, 191, .20);
    --rb-radius-sm: 8px;
    --rb-radius: 12px;
    --rb-radius-lg: 16px;
    --rb-radius-xl: 20px;
    --rb-transition: 0.18s cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================
   BASE FONT — Roboto (icon elements explicitly excluded)
   ========================================================= */
.app,
.app div,
.app p,
.app section,
.app article,
.app header,
.app footer,
.app nav,
.app aside,
.app main,
.app ul,
.app ol,
.app li,
.app a,
.app h1,
.app h2,
.app h3,
.app h4,
.app h5,
.app h6,
.app label,
.app input,
.app textarea,
.app select,
.app button,
.app table,
.app thead,
.app tbody,
.app tfoot,
.app tr,
.app th,
.app td,
.app small,
.app strong,
.app em,
.app blockquote,
.app span:not([class*="fa-"]):not([class*="fad "]):not([class*="far "]):not([class*="fas "]):not([class*="fal "]):not([class*="fab "]):not([class*="icon"]):not([class*="feather"]):not([class*="side-menu__icon"]) {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Scrollbar */
.app ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.app ::-webkit-scrollbar-thumb {
    background: var(--rb-border);
    border-radius: 6px;
}

.app ::-webkit-scrollbar-thumb:hover {
    background: var(--rb-primary-mid);
}

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

/* =========================================================
   PAGE / LAYOUT BACKGROUNDS
   ========================================================= */
.app .page,
.app .page-main {
    background: var(--rb-bg) !important;
}

.app .app-content,
.app .side-app {
    background: #f9f8ff !important;
    /* very faint lavender tint — premium feel */
}

.app .app-content .container-fluid {
    background: transparent !important;
    padding-bottom: 60px !important;
}

.app .app-header .container-fluid {
    padding-bottom: 0 !important;
}


/* =========================================================
   SIDEBAR — clean white with subtle border
   ========================================================= */
.app .app-sidebar {
    background: var(--rb-bg) !important;
    border-right: 1px solid var(--rb-border) !important;
    box-shadow: 2px 0 12px rgba(22, 21, 31, .04) !important;
}

.app .app-sidebar__logo {
    border-bottom: none !important;
    background: var(--rb-bg) !important;
    padding-bottom: 8px !important;
}

/* Section labels */
.app .side-item.side-item-category {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: var(--rb-nav-label) !important;
    padding: 14px 14px 4px !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Nav items */
.app .side-menu__item {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--rb-text) !important;
    padding: 8px 12px !important;
    border-radius: var(--rb-radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: background var(--rb-transition), color var(--rb-transition), box-shadow var(--rb-transition) !important;
    margin: 1px 6px !important;
}

.app .side-menu__item:hover {
    background: var(--rb-primary-light) !important;
    color: var(--rb-primary-dark) !important;
}

.app .side-menu__item:hover .side-menu__icon {
    color: var(--rb-primary) !important;
}

.app .side-menu__item.active .side-menu__icon,
.app .is-expanded>.side-menu__item .side-menu__icon,
.app .slide.is-expanded>.side-menu__item .side-menu__icon {
    color: #0b4181 !important;
}

.app .side-menu__item.active,
.app .is-expanded>.side-menu__item,
.app .slide.is-expanded>.side-menu__item {
    background: #f5f9fc !important;
    color: #1e1e2d !important;
    border-left: 4px solid #0b4181 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Sub-items */
.app .slide-item {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--rb-text-muted) !important;
    padding: 6px 12px 6px 36px !important;
    border-radius: 7px !important;
    display: block !important;
    text-decoration: none !important;
    transition: background var(--rb-transition), color var(--rb-transition) !important;
    margin: 1px 6px !important;
}

.app .slide-item:hover,
.app .slide-item.active {
    background: var(--rb-primary-light) !important;
    color: var(--rb-primary-darker) !important;
}

/* Icons */
.app .side-menu__icon {
    color: var(--rb-text-faint) !important;
    font-size: 15px !important;
    width: 20px !important;
    flex: none !important;
    transition: color var(--rb-transition) !important;
}

.app .side-menu__item.active .side-menu__icon,
.app .side-menu__item:hover .side-menu__icon {
    color: var(--rb-primary-dark) !important;
}

.app .angle {
    color: var(--rb-nav-label) !important;
    font-size: 12px !important;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.app .app-header,
.app .main-header {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--rb-border) !important;
    box-shadow: 0 1px 12px rgba(22, 21, 31, .06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.app .app-header .breadcrumb-item,
.app nav .breadcrumb-item {
    font-size: 13px !important;
    color: var(--rb-text-faint) !important;
    font-weight: 400 !important;
}

.app .app-header .breadcrumb-item.active,
.app nav .breadcrumb-item.active {
    color: var(--rb-text) !important;
    font-weight: 600 !important;
}

.app nav .breadcrumb-item+.breadcrumb-item::before {
    color: var(--rb-border) !important;
}

/* =========================================================
   CARDS — shiny with premium shadow + gradient highlight
   ========================================================= */
.app .card {
    background: var(--rb-bg) !important;
    border: 1px solid var(--rb-border) !important;
    border-radius: var(--rb-radius-lg) !important;
    box-shadow: var(--rb-shadow-xs) !important;
    color: var(--rb-text) !important;
    transition: box-shadow var(--rb-transition), transform var(--rb-transition) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Shiny top-edge highlight */
.app .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(124, 92, 191, .30) 50%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.app .card:hover {
    box-shadow: var(--rb-shadow-md) !important;
    transform: translateY(-1px) !important;
}

.app .card .card-header {
    background: var(--rb-bg) !important;
    border-bottom: 1px solid var(--rb-border-light) !important;
    border-radius: var(--rb-radius-lg) var(--rb-radius-lg) 0 0 !important;
    padding: 18px 22px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--rb-text) !important;
}

.app .card .card-body {
    padding: 22px 24px !important;
}

.app .card .card-footer {
    background: var(--rb-bg-subtle) !important;
    border-top: 1px solid var(--rb-border-light) !important;
    border-radius: 0 0 var(--rb-radius-lg) var(--rb-radius-lg) !important;
    padding: 14px 22px !important;
}

.app .card-title,
.app .card h5,
.app .card h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--rb-text) !important;
    margin-bottom: 12px !important;
}

/* =========================================================
   STAT / KPI BOXES (info-box, small stat cards)
   ========================================================= */
.app .info-box,
.app .stat-box {
    background: var(--rb-bg) !important;
    border: 1px solid var(--rb-border) !important;
    border-radius: var(--rb-radius) !important;
    box-shadow: var(--rb-shadow-xs) !important;
    transition: box-shadow var(--rb-transition), transform var(--rb-transition) !important;
}

.app .info-box:hover,
.app .stat-box:hover {
    box-shadow: var(--rb-shadow-sm), 0 0 0 1px var(--rb-primary-mid) !important;
    transform: translateY(-1px) !important;
}

/* =========================================================
   TABLES
   ========================================================= */
.app .table,
.app table {
    font-size: 13.5px !important;
    color: var(--rb-text) !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.app .table thead tr,
.app table thead tr {
    border-bottom: 1.5px solid var(--rb-border) !important;
}

.app .table thead th,
.app table thead th {
    padding: 10px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--rb-text-faint) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background: transparent !important;
    text-align: left !important;
    white-space: nowrap !important;
    border: none !important;
}

.app .table tbody tr {
    border-bottom: 1px solid var(--rb-border-light) !important;
    transition: background var(--rb-transition) !important;
}

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

.app .table tbody tr:hover {
    background: var(--rb-bg-subtle) !important;
}

.app .table tbody td {
    padding: 12px 8px !important;
    vertical-align: middle !important;
    border: none !important;
    color: var(--rb-text) !important;
}

/* =========================================================
   BADGES — pill style
   ========================================================= */
.app .badge,
.app .badge-primary {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
}

.app .badge-primary,
.app .badge.bg-primary {
    background: var(--rb-primary-light) !important;
    color: var(--rb-primary-darker) !important;
    border: 1px solid var(--rb-primary-mid) !important;
}

.app .badge-success,
.app .badge.bg-success {
    background: #E6F9F0 !important;
    color: #1A7A4A !important;
    border: 1px solid #B3E8CE !important;
}

.app .badge-danger,
.app .badge.bg-danger {
    background: var(--rb-accent-bg) !important;
    color: var(--rb-accent) !important;
    border: 1px solid #F5C0D0 !important;
}

.app .badge-warning,
.app .badge.bg-warning {
    background: #FFF7E0 !important;
    color: #9A6800 !important;
    border: 1px solid #FFE99A !important;
}

.app .badge-info,
.app .badge.bg-info {
    background: var(--rb-primary-light) !important;
    color: var(--rb-primary-dark) !important;
    border: 1px solid var(--rb-primary-mid) !important;
}

/* =========================================================
   BUTTONS — polished with glow on primary
   ========================================================= */
.app .btn {
    font-weight: 600 !important;
    border-radius: var(--rb-radius-sm) !important;
    font-size: 13.5px !important;
    padding: 9px 18px !important;
    transition: background var(--rb-transition), box-shadow var(--rb-transition), transform var(--rb-transition) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.app .btn-primary {
    background: var(--rb-primary) !important;
    border-color: var(--rb-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px var(--rb-primary-glow) !important;
}

.app .btn-primary:hover,
.app .btn-primary:focus {
    background: var(--rb-primary-dark) !important;
    border-color: var(--rb-primary-dark) !important;
    box-shadow: 0 4px 16px var(--rb-primary-glow) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

.app .btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px var(--rb-primary-glow-sm) !important;
}

.app .btn-secondary,
.app .btn-outline-secondary,
.app .btn-light,
.app .btn-default {
    background: var(--rb-bg) !important;
    border: 1px solid var(--rb-border) !important;
    color: var(--rb-text-nav) !important;
    box-shadow: var(--rb-shadow-xs) !important;
}

.app .btn-secondary:hover,
.app .btn-light:hover {
    background: var(--rb-bg-subtle) !important;
    border-color: var(--rb-primary-mid) !important;
    box-shadow: var(--rb-shadow-sm) !important;
    color: var(--rb-text) !important;
}

.app .btn-danger {
    background: var(--rb-accent) !important;
    border-color: var(--rb-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(192, 57, 110, .20) !important;
}

.app .btn-danger:hover {
    background: #a8305e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(192, 57, 110, .30) !important;
    color: #fff !important;
}

.app .btn-success {
    background: #1A7A4A !important;
    border-color: #1A7A4A !important;
    color: #fff !important;
}

.app .btn-success:hover {
    background: #145f3a !important;
    color: #fff !important;
}

.app .btn-sm {
    padding: 5px 13px !important;
    font-size: 12.5px !important;
    border-radius: 7px !important;
}

.app .btn-lg {
    padding: 12px 24px !important;
    font-size: 15px !important;
    border-radius: var(--rb-radius) !important;
}

/* =========================================================
   FORMS & INPUTS
   ========================================================= */
.app .form-control,
.app input[type="text"],
.app input[type="email"],
.app input[type="password"],
.app input[type="number"],
.app input[type="search"],
.app input[type="url"],
.app input[type="tel"],
.app input[type="date"],
.app input[type="time"],
.app textarea,
.app select {
    font-size: 13.5px !important;
    color: var(--rb-text) !important;
    background: var(--rb-bg) !important;
    border: 1.5px solid var(--rb-border) !important;
    border-radius: var(--rb-radius-sm) !important;
    padding: 9px 13px !important;
    box-shadow: var(--rb-shadow-xs) !important;
    transition: border-color var(--rb-transition), box-shadow var(--rb-transition) !important;
}

.app .form-control:focus,
.app input:focus,
.app textarea:focus,
.app select:focus {
    border-color: var(--rb-primary) !important;
    box-shadow: 0 0 0 3px var(--rb-primary-glow-sm) !important;
    outline: none !important;
    background: #fff !important;
}

.app .form-control:hover,
.app input:hover,
.app textarea:hover {
    border-color: var(--rb-primary-mid) !important;
}

.app .form-label,
.app label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--rb-text-nav) !important;
    margin-bottom: 5px !important;
    display: block !important;
}

.app .input-group-text {
    background: var(--rb-bg-subtle) !important;
    border: 1.5px solid var(--rb-border) !important;
    color: var(--rb-text-faint) !important;
    font-size: 13px !important;
    border-radius: var(--rb-radius-sm) !important;
}

.app .form-text,
.app .form-hint {
    font-size: 12px !important;
    color: var(--rb-text-faint) !important;
    margin-top: 4px !important;
}

/* =========================================================
   TABS
   ========================================================= */
.app .nav-tabs {
    border-bottom: 1.5px solid var(--rb-border) !important;
    gap: 2px !important;
}

.app .nav-tabs .nav-link {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--rb-text-muted) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    background: transparent !important;
    transition: color var(--rb-transition), border-color var(--rb-transition) !important;
}

.app .nav-tabs .nav-link:hover {
    color: var(--rb-primary) !important;
    border-bottom-color: var(--rb-primary-mid) !important;
}

.app .nav-tabs .nav-link.active {
    font-weight: 700 !important;
    color: var(--rb-primary) !important;
    border-bottom-color: var(--rb-primary) !important;
    background: transparent !important;
}

/* Pill tabs (segmented control) */
.app .nav-pills {
    background: var(--rb-bg-muted) !important;
    border-radius: var(--rb-radius-sm) !important;
    padding: 3px !important;
    gap: 2px !important;
    display: flex !important;
    width: fit-content !important;
}

.app .nav-pills .nav-link {
    padding: 7px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--rb-text-muted) !important;
    background: transparent !important;
    border: none !important;
    transition: background var(--rb-transition), color var(--rb-transition), box-shadow var(--rb-transition) !important;
}

.app .nav-pills .nav-link.active {
    background: var(--rb-text) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(22, 21, 31, .15) !important;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */
.app .dropdown-menu {
    background: var(--rb-bg) !important;
    border: 1px solid var(--rb-border) !important;
    border-radius: var(--rb-radius) !important;
    box-shadow: var(--rb-shadow-lg) !important;
    padding: 6px !important;
    font-size: 13.5px !important;
    animation: rb-dropdown-in 0.12s ease !important;
}

@keyframes rb-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.app .dropdown-item {
    border-radius: 7px !important;
    padding: 8px 12px !important;
    color: var(--rb-text) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    transition: background var(--rb-transition), color var(--rb-transition) !important;
}

.app .dropdown-item:hover,
.app .dropdown-item:focus {
    background: var(--rb-primary-light) !important;
    color: var(--rb-primary-darker) !important;
}

.app .dropdown-item.text-danger:hover {
    background: var(--rb-accent-bg) !important;
    color: var(--rb-accent) !important;
}

.app .dropdown-divider {
    border-color: var(--rb-border) !important;
    margin: 4px 0 !important;
}

/* =========================================================
   MODALS
   ========================================================= */
.app .modal-backdrop {
    backdrop-filter: blur(3px) !important;
}

.app .modal-content {
    background: var(--rb-bg) !important;
    border: 1px solid var(--rb-border) !important;
    border-radius: var(--rb-radius-xl) !important;
    box-shadow: 0 24px 80px rgba(22, 21, 31, .18) !important;
    animation: rb-modal-in 0.2s cubic-bezier(.4, 0, .2, 1) !important;
}

@keyframes rb-modal-in {
    from {
        opacity: 0;
        transform: scale(.96);
    }

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

.app .modal-header {
    border-bottom: 1px solid var(--rb-border-light) !important;
    border-radius: var(--rb-radius-xl) var(--rb-radius-xl) 0 0 !important;
    padding: 22px 26px !important;
    background: var(--rb-bg) !important;
}

.app .modal-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--rb-text) !important;
    letter-spacing: -0.01em !important;
}

.app .modal-body {
    padding: 24px 26px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--rb-text-muted) !important;
}

.app .modal-footer {
    border-top: 1px solid var(--rb-border-light) !important;
    padding: 16px 26px !important;
    border-radius: 0 0 var(--rb-radius-xl) var(--rb-radius-xl) !important;
    gap: 8px !important;
    background: var(--rb-bg-subtle) !important;
}

/* =========================================================
   ALERTS
   ========================================================= */
.app .alert {
    border-radius: var(--rb-radius) !important;
    font-size: 13.5px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
}

.app .alert-primary,
.app .alert-info {
    background: var(--rb-primary-light) !important;
    color: var(--rb-primary-darker) !important;
    border-color: var(--rb-primary-mid) !important;
}

.app .alert-danger {
    background: var(--rb-accent-bg) !important;
    color: var(--rb-accent) !important;
    border-color: #F5C0D0 !important;
}

.app .alert-success {
    background: #E6F9F0 !important;
    color: #1A7A4A !important;
    border-color: #B3E8CE !important;
}

.app .alert-warning {
    background: #FFF7E0 !important;
    color: #9A6800 !important;
    border-color: #FFE99A !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.app .pagination {
    gap: 3px !important;
}

.app .pagination .page-item .page-link {
    border: 1px solid var(--rb-border) !important;
    color: var(--rb-text) !important;
    background: var(--rb-bg) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    transition: all var(--rb-transition) !important;
    box-shadow: var(--rb-shadow-xs) !important;
}

.app .pagination .page-item .page-link:hover {
    background: var(--rb-primary-light) !important;
    border-color: var(--rb-primary-mid) !important;
    color: var(--rb-primary-darker) !important;
}

.app .pagination .page-item.active .page-link {
    background: var(--rb-primary) !important;
    border-color: var(--rb-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px var(--rb-primary-glow) !important;
}

.app .pagination .page-item.disabled .page-link {
    opacity: 0.5 !important;
}

/* =========================================================
   PROGRESS BARS
   ========================================================= */
.app .progress {
    height: 6px !important;
    background: var(--rb-border-light) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 2px rgba(22, 21, 31, .05) !important;
}

.app .progress-bar {
    background: linear-gradient(90deg, var(--rb-primary) 0%, var(--rb-primary-dark) 100%) !important;
    border-radius: 3px !important;
    transition: width 0.6s cubic-bezier(.4, 0, .2, 1) !important;
}

/* =========================================================
   LINKS
   ========================================================= */
.app a {
    color: var(--rb-primary) !important;
    text-decoration: none !important;
    transition: color var(--rb-transition) !important;
}

.app a:hover {
    color: var(--rb-primary-dark) !important;
}

.app a.text-danger,
.app a.link-danger {
    color: var(--rb-accent) !important;
}

.app a.text-danger:hover {
    color: #a8305e !important;
}

.app a.text-muted {
    color: var(--rb-text-faint) !important;
}

.app a.text-muted:hover {
    color: var(--rb-text-muted) !important;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.app h1 {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    color: var(--rb-text) !important;
}

.app h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
    color: var(--rb-text) !important;
}

.app h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--rb-text) !important;
}

.app h4 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--rb-text) !important;
}

.app h5 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--rb-text) !important;
}

.app h6 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--rb-text) !important;
}

/* .app p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--rb-text-muted) !important;
    margin-bottom: 0 !important;
} */

.app small,
.app .text-sm {
    font-size: 12px !important;
    color: var(--rb-text-faint) !important;
}

.app .text-muted {
    color: var(--rb-text-faint) !important;
}

.app .text-secondary {
    color: var(--rb-text-muted) !important;
}

/* =========================================================
   UTILITY COLOR OVERRIDES
   ========================================================= */
.app .text-primary {
    color: var(--rb-primary) !important;
}

.app .text-danger {
    color: var(--rb-accent) !important;
}

.app .text-success {
    color: #1A7A4A !important;
}

.app .text-warning {
    color: #9A6800 !important;
}

.app .bg-primary {
    background: var(--rb-primary) !important;
}

/* Top Dashboard Banner (Welcome Area) */
#user-dashboard-background {
    background-color: #E7F8FF !important;
    background-image: url(/img/files/waves.png) !important;
    background-size: cover !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

#user-dashboard-background .text-primary {
    color: #0b4181 !important;
}

span.btn-primary.yellow {
    background: #FF9D00 !important;
    border-color: #FF9D00 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(255, 157, 0, 0.3) !important;
}

a.btn-primary.yellow {
    background: #0b4181 !important;
    border-color: #0b4181 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(11, 65, 129, 0.3) !important;
}

.app .btn-cancel-black {
    background: #1e1e2d !important;
    border-color: #1e1e2d !important;
    color: #fff !important;
}

/* AI Template Badges */
.app .btn-pro {
    background: #0b4181 !important;
    border-color: #0b4181 !important;
    color: #fff !important;
}

.app .btn-premium {
    background: #ab54eb !important;
    border-color: #ab54eb !important;
    color: #fff !important;
}

.app .btn-free {
    background: #1e1e2d !important;
    border-color: #1e1e2d !important;
    color: #fff !important;
}

/* Statistics Cards */
.user-dashboard-special-box,
.app .user-dashboard-special-box {
    background: #ffffff !important;
    border: 1px solid #f5f9fc !important;
    height: 125px !important;
    box-shadow: none !important;
}

.user-dashboard-special-box:hover {
    border-color: #0b4181 !important;
    box-shadow: 0 4px 16px rgba(11, 65, 129, 0.1) !important;
}

.user-dashboard-special-box .usage-icon i {
    color: #0b4181 !important;
}

/* Timeline / Notification Dots */
.app .timeline-badge.info,
.app .bg-info {
    background: #0b4181 !important;
    color: #fff !important;
}

.app .timeline-badge.success,
.app .bg-success {
    background: #28a745 !important;
    color: #fff !important;
}

.app .timeline-badge.warning,
.app .bg-warning {
    background: #FF9D00 !important;
    color: #fff !important;
}

.app .timeline-badge.danger,
.app .bg-danger {
    background: #dc3545 !important;
    color: #fff !important;
}

.app .bg-light {
    background: var(--rb-bg-subtle) !important;
}

.app .border-primary {
    border-color: var(--rb-primary) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */
.app .main-footer,
.app .footer {
    background: var(--rb-bg) !important;
    border-top: 1px solid var(--rb-border) !important;
    font-size: 12.5px !important;
    color: var(--rb-text-faint) !important;
    padding: 16px 32px !important;
}

/* =========================================================
   TOASTR
   ========================================================= */
#toast-container>.toast-success {
    background-color: var(--rb-primary) !important;
    background-image: none !important;
    border-left: 4px solid var(--rb-primary-dark) !important;
    border-radius: var(--rb-radius) !important;
    box-shadow: var(--rb-shadow-glow) !important;
    font-family: 'Roboto', sans-serif !important;
}

#toast-container>.toast-error {
    background-color: var(--rb-accent) !important;
    background-image: none !important;
    border-left: 4px solid #a8305e !important;
    border-radius: var(--rb-radius) !important;
    font-family: 'Roboto', sans-serif !important;
}

#toast-container>.toast-warning {
    background-image: none !important;
    border-radius: var(--rb-radius) !important;
    font-family: 'Roboto', sans-serif !important;
}

#toast-container>.toast-info {
    background-color: var(--rb-primary-dark) !important;
    background-image: none !important;
    border-radius: var(--rb-radius) !important;
    font-family: 'Roboto', sans-serif !important;
}

/* =========================================================
   SELECTION COLOR
   ========================================================= */
.app ::selection {
    background: var(--rb-primary-light) !important;
    color: var(--rb-primary-darker) !important;
}

/* =========================================================
   DASHBOARD BANNER & HEADERS
   ========================================================= */
.app #user-dashboard-background,
.app .page-header,
.app .banner {
    background: linear-gradient(135deg, var(--rb-primary-light) 0%, var(--rb-bg-subtle) 100%) !important;
    border: 1px solid var(--rb-primary-mid) !important;
    border-radius: var(--rb-radius-lg) !important;
    padding: 24px 32px !important;
    margin-bottom: 24px !important;
    box-shadow: inset 0 2px 20px rgba(255, 255, 255, 0.7), var(--rb-shadow-sm) !important;
    position: relative !important;
    overflow: hidden !important;
}

.app #user-dashboard-background::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle at top right, rgba(124, 92, 191, 0.08) 0%, transparent 60%) !important;
    pointer-events: none !important;
}

.app #user-dashboard-background h4,
.app #user-dashboard-background h6 {
    color: var(--rb-primary-darker) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================
   BUTTON ALIGNMENT & COLOR FIXES
   ========================================================= */
.app .btn {
    justify-content: center !important;
    vertical-align: middle !important;
}

.app .btn-primary.yellow,
.app .btn.yellow {
    background: linear-gradient(135deg, var(--rb-primary) 0%, var(--rb-primary-dark) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: var(--rb-shadow-glow) !important;
}

.app .btn.yellow:hover {
    background: linear-gradient(135deg, var(--rb-primary-dark) 0%, var(--rb-primary-darker) 100%) !important;
    box-shadow: 0 6px 20px var(--rb-primary-glow) !important;
}



/* =========================================================
   CHAT & MODULE BUTTONS FIX
   ========================================================= */
.app .chat-button,
.app #chat-button,
.app #url-process-button {
    background: linear-gradient(135deg, var(--rb-primary) 0%, var(--rb-primary-dark) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: var(--rb-shadow-glow) !important;
    justify-content: center !important;
    align-items: center !important;
    display: inline-flex !important;
    vertical-align: middle !important;
    font-weight: 600 !important;
    border-radius: var(--rb-radius-sm) !important;
    transition: background var(--rb-transition), box-shadow var(--rb-transition), transform var(--rb-transition) !important;
}

.app .chat-button:hover,
.app #chat-button:hover,
.app #url-process-button:hover {
    background: linear-gradient(135deg, var(--rb-primary-dark) 0%, var(--rb-primary-darker) 100%) !important;
    box-shadow: 0 6px 20px var(--rb-primary-glow) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

/* =========================================================
   FIX MASSIVE MODULE MARGINS (mt-24)
   ========================================================= */
.app .mt-24 {
    margin-top: 1.5rem !important;
}



/* =========================================================
   SEARCH BAR FIX
   ========================================================= */
.app .app-header input[type="search"] {
    background: var(--rb-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 12px center !important;
    background-size: 14px 14px !important;
    padding: 8px 12px 8px 36px !important;
    border-radius: 20px !important;
    border: 1px solid var(--rb-border) !important;
    width: 220px !important;
    color: var(--rb-text) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: width 0.3s ease, border-color 0.3s ease !important;
}

.app .app-header input[type="search"]:focus {
    border-color: var(--rb-primary) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px var(--rb-primary-glow) !important;
}



/* =========================================================
   ANALYZE BUTTON ALIGNMENT FIX
   ========================================================= */
.app .chat-message-container .relative .input-box {
    margin-top: 0 !important;
}

.app #url-process-button {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    padding: 6px 20px !important;
}

.app #url-process-button:hover {
    transform: translateY(-50%) scale(1.02) !important;
}