web-mojo 2.1.46

package/dist/core.css

@@ -0,0 +1,1181 @@
+/**
+ * MOJO Framework Core Styles
+ * Essential utilities and animations for MOJO framework
+ * Version: 2.0.0
+ *
+ * Note: This file contains only core MOJO utilities not provided by Bootstrap 5.
+ * Bootstrap 5 is required as a dependency for base styles.
+ */
+
+/* ========================================================================
+   MOJO CSS Custom Properties
+   ======================================================================== */
+
+:root {
+    /* === Core Theme Colors === */
+    --bs-primary: #1a73e8;
+    --bs-secondary: #5f6368;
+    --bs-success: #34a853;
+    --bs-info: #4285f4;
+    --bs-warning: #fbbc05;
+    --bs-danger: #ea4335;
+    --bs-light: #f1f3f4;
+    --bs-dark: #202124;
+
+    /* === Subtle Backgrounds === */
+    --bs-primary-bg-subtle: #e8f0fe;
+    --bs-secondary-bg-subtle: #f1f3f4;
+    --bs-success-bg-subtle: #e6f4ea;
+    --bs-info-bg-subtle: #e8f0fe;
+    --bs-warning-bg-subtle: #fef7e0;
+    --bs-danger-bg-subtle: #fce8e6;
+
+    /* === Subtle Borders === */
+    --bs-primary-border-subtle: #aecbfa;
+    --bs-secondary-border-subtle: #dadce0;
+    --bs-success-border-subtle: #81c995;
+    --bs-info-border-subtle: #aecbfa;
+    --bs-warning-border-subtle: #fad2cf;
+    --bs-danger-border-subtle: #f28b82;
+
+    /* === Text Emphasis === */
+    --bs-primary-text-emphasis: #174ea6;
+    --bs-secondary-text-emphasis: #3c4043;
+    --bs-success-text-emphasis: #0d652d;
+    --bs-info-text-emphasis: #174ea6;
+    --bs-warning-text-emphasis: #b06000;
+    --bs-danger-text-emphasis: #a50e0e;
+
+    --bs-btn-hover-bg: #e8f0fe;
+}
+
+:root[data-bs-theme="ocean"] {
+    --bs-primary: #0077b6;
+    --bs-secondary: #90e0ef;
+    --bs-success: #00b4d8;
+    --bs-info: #48cae4;
+    --bs-warning: #ffd166;
+    --bs-danger: #ef476f;
+    --bs-light: #f1faff;
+    --bs-dark: #03045e;
+
+    --bs-primary-bg-subtle: #caf0f8;
+    --bs-secondary-bg-subtle: #e0fbfc;
+    --bs-success-bg-subtle: #ade8f4;
+    --bs-info-bg-subtle: #caf0f8;
+    --bs-warning-bg-subtle: #fff3cd;
+    --bs-danger-bg-subtle: #fde2e4;
+
+    --bs-primary-text-emphasis: #023e8a;
+    --bs-success-text-emphasis: #0077b6;
+    --bs-danger-text-emphasis: #9d0208;
+}
+
+:root[data-bs-theme="sunrise"] {
+    --bs-primary: #ff6f00;
+    --bs-secondary: #ffb703;
+    --bs-success: #fb8500;
+    --bs-info: #ffb4a2;
+    --bs-warning: #ffd166;
+    --bs-danger: #e63946;
+    --bs-light: #fff3e6;
+    --bs-dark: #432818;
+
+    --bs-primary-bg-subtle: #fff4e1;
+    --bs-secondary-bg-subtle: #fff8dc;
+    --bs-success-bg-subtle: #ffe5b4;
+    --bs-info-bg-subtle: #ffe0d9;
+    --bs-warning-bg-subtle: #fff7d6;
+    --bs-danger-bg-subtle: #fddede;
+
+    --bs-primary-text-emphasis: #9d4b00;
+    --bs-success-text-emphasis: #a85d00;
+    --bs-danger-text-emphasis: #8d0000;
+}
+
+:root[data-bs-theme="forest"] {
+    --bs-primary: #2b9348;
+    --bs-secondary: #95d5b2;
+    --bs-success: #55a630;
+    --bs-info: #76c893;
+    --bs-warning: #ffba08;
+    --bs-danger: #d62828;
+    --bs-light: #f0fdf4;
+    --bs-dark: #081c15;
+
+    --bs-primary-bg-subtle: #d8f3dc;
+    --bs-secondary-bg-subtle: #e9f5eb;
+    --bs-success-bg-subtle: #c7f9cc;
+    --bs-info-bg-subtle: #e9fbee;
+    --bs-warning-bg-subtle: #fff8e1;
+    --bs-danger-bg-subtle: #ffe5e5;
+
+    --bs-primary-text-emphasis: #1a472a;
+    --bs-success-text-emphasis: #2f5233;
+    --bs-danger-text-emphasis: #7a1a1a;
+}
+
+:root[data-bs-theme="midnight"] {
+    --bs-primary: #5a189a;
+    --bs-secondary: #7b2cbf;
+    --bs-success: #06d6a0;
+    --bs-info: #118ab2;
+    --bs-warning: #ffd166;
+    --bs-danger: #ef476f;
+    --bs-light: #f8f9fa;
+    --bs-dark: #03071e;
+
+    --bs-primary-bg-subtle: #e0d4f7;
+    --bs-secondary-bg-subtle: #f1e4ff;
+    --bs-success-bg-subtle: #d0fdf2;
+    --bs-info-bg-subtle: #d0ebff;
+    --bs-warning-bg-subtle: #fff3cd;
+    --bs-danger-bg-subtle: #fbdde2;
+
+    --bs-primary-text-emphasis: #240046;
+    --bs-success-text-emphasis: #056b53;
+    --bs-danger-text-emphasis: #9d001f;
+}
+
+:root[data-bs-theme="corporate"] {
+    /* Core brand accent */
+    --bs-primary: #2a5d9f; /* Corporate blue */
+    --bs-secondary: #6c757d; /* Neutral gray */
+    --bs-success: #4caf50; /* Green for positive states */
+    --bs-info: #17a2b8; /* Teal info */
+    --bs-warning: #f0ad4e; /* Amber warning */
+    --bs-danger: #dc3545; /* Red for errors */
+    --bs-light: #f8f9fa; /* Light background */
+    --bs-dark: #212529; /* Dark text/UI */
+
+    /* Subtle backgrounds */
+    --bs-primary-bg-subtle: #e7f0fa;
+    --bs-secondary-bg-subtle: #f1f3f5;
+    --bs-success-bg-subtle: #eaf6ec;
+    --bs-info-bg-subtle: #e6f7fa;
+    --bs-warning-bg-subtle: #fff4e0;
+    --bs-danger-bg-subtle: #fcebec;
+
+    /* Subtle borders */
+    --bs-primary-border-subtle: #c2d7ed;
+    --bs-secondary-border-subtle: #dee2e6;
+    --bs-success-border-subtle: #c8e6c9;
+    --bs-info-border-subtle: #bde3ea;
+    --bs-warning-border-subtle: #ffe0b2;
+    --bs-danger-border-subtle: #f5c2c7;
+
+    /* Text emphasis */
+    --bs-primary-text-emphasis: #1d3f6e;
+    --bs-secondary-text-emphasis: #495057;
+    --bs-success-text-emphasis: #2e7d32;
+    --bs-info-text-emphasis: #0d6673;
+    --bs-warning-text-emphasis: #a46900;
+    --bs-danger-text-emphasis: #8a1c24;
+}
+
+:root {
+    /* MOJO Framework Colors - Inherit from Bootstrap */
+    --mojo-primary: var(--bs-primary);
+    --mojo-primary-rgb: var(--bs-primary-rgb);
+    --mojo-secondary: var(--bs-secondary);
+    --mojo-secondary-rgb: var(--bs-secondary-rgb);
+    --mojo-success: var(--bs-success);
+    --mojo-success-rgb: var(--bs-success-rgb);
+    --mojo-info: var(--bs-info);
+    --mojo-info-rgb: var(--bs-info-rgb);
+    --mojo-warning: var(--bs-warning);
+    --mojo-warning-rgb: var(--bs-warning-rgb);
+    --mojo-danger: var(--bs-danger);
+    --mojo-danger-rgb: var(--bs-danger-rgb);
+    --mojo-light: var(--bs-light);
+    --mojo-light-rgb: var(--bs-light-rgb);
+    --mojo-dark: var(--bs-dark);
+    --mojo-dark-rgb: var(--bs-dark-rgb);
+
+    /* MOJO Semantic Colors - Use Bootstrap's color system */
+    --mojo-body-bg: var(--bs-body-bg);
+    --mojo-body-color: var(--bs-body-color);
+    --mojo-emphasis-color: var(--bs-emphasis-color);
+    --mojo-secondary-color: var(--bs-secondary-color);
+    --mojo-tertiary-color: var(--bs-tertiary-color);
+
+    /* MOJO Background System */
+    --mojo-bg-primary: var(--bs-body-bg);
+    --mojo-bg-secondary: var(--bs-secondary-bg);
+    --mojo-bg-tertiary: var(--bs-tertiary-bg);
+
+    /* MOJO Border System */
+    --mojo-border-color: var(--bs-border-color);
+    --mojo-border-color-translucent: var(--bs-border-color-translucent);
+
+    /* MOJO Interactive States */
+    --mojo-hover-bg: var(--bs-secondary-bg);
+    --mojo-active-bg: var(--bs-primary);
+    --mojo-focus-color: var(--bs-primary);
+    --mojo-focus-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+
+    /* MOJO Transition defaults */
+    --mojo-transition-fast: 0.15s ease-in-out;
+    --mojo-transition-base: 0.2s ease-in-out;
+    --mojo-transition-slow: 0.3s ease-in-out;
+
+    /* MOJO Border radius - Use Bootstrap system */
+    --mojo-border-radius-sm: var(--bs-border-radius-sm);
+    --mojo-border-radius: var(--bs-border-radius);
+    --mojo-border-radius-lg: var(--bs-border-radius-lg);
+    --mojo-border-radius-xl: var(--bs-border-radius-xl);
+
+    /* MOJO Spacing - Use Bootstrap spacing system */
+    --mojo-spacer-xs: calc(var(--bs-spacer) * 0.25);
+    --mojo-spacer-sm: calc(var(--bs-spacer) * 0.5);
+    --mojo-spacer: var(--bs-spacer);
+    --mojo-spacer-lg: calc(var(--bs-spacer) * 1.5);
+    --mojo-spacer-xl: calc(var(--bs-spacer) * 3);
+
+    /* MOJO Typography - Use Bootstrap font system */
+    --mojo-font-sans-serif: var(--bs-font-sans-serif);
+    --mojo-font-monospace: var(--bs-font-monospace);
+
+    /* MOJO Box Shadows - Use Bootstrap shadow system */
+    --mojo-box-shadow-sm: var(--bs-box-shadow-sm);
+    --mojo-box-shadow: var(--bs-box-shadow);
+    --mojo-box-shadow-lg: var(--bs-box-shadow-lg);
+
+    /* MOJO Z-index layers - Use Bootstrap z-index system */
+    --mojo-zindex-dropdown: var(--bs-zindex-dropdown, 1000);
+    --mojo-zindex-sticky: var(--bs-zindex-sticky, 1020);
+    --mojo-zindex-fixed: var(--bs-zindex-fixed, 1030);
+    --mojo-zindex-modal-backdrop: var(--bs-zindex-modal-backdrop, 1040);
+    --mojo-zindex-offcanvas: var(--bs-zindex-offcanvas, 1045);
+    --mojo-zindex-modal: var(--bs-zindex-modal, 1050);
+    --mojo-zindex-popover: var(--bs-zindex-popover, 1070);
+    --mojo-zindex-tooltip: var(--bs-zindex-tooltip, 1080);
+}
+
+/* =========================================================
+   Primary-driven components (Bootstrap 5.3+)
+   Put this AFTER bootstrap.css. Do not scope it.
+   Switching themes = only change --bs-primary (and optional subtle vars).
+   ========================================================= */
+
+/* Buttons (solid) */
+/* =========================================================
+   Buttons tied to theme tokens (Bootstrap 5.3+)
+   Put AFTER bootstrap.css
+   ========================================================= */
+
+/* Primary */
+.btn-primary {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #000 12%);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 82%, #000 18%);
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, #000 25%);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 72%, #000 28%);
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 13, 110, 253);
+}
+
+/* Success */
+.btn-success {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: var(--bs-success);
+    --bs-btn-border-color: var(--bs-success);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 88%, #000 12%);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 82%, #000 18%);
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 75%, #000 25%);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 72%, #000 28%);
+    --bs-btn-focus-shadow-rgb: var(--bs-success-rgb, 25, 135, 84);
+}
+
+/* Danger */
+.btn-danger {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: var(--bs-danger);
+    --bs-btn-border-color: var(--bs-danger);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 88%, #000 12%);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 82%, #000 18%);
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 75%, #000 25%);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 72%, #000 28%);
+    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb, 220, 53, 69);
+}
+
+/* Warning */
+.btn-warning {
+    --bs-btn-color: #000;
+    --bs-btn-bg: var(--bs-warning);
+    --bs-btn-border-color: var(--bs-warning);
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 88%, #000 12%);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 82%, #000 18%);
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 75%, #000 25%);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 72%, #000 28%);
+    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb, 255, 193, 7);
+}
+
+/* Info */
+.btn-info {
+    --bs-btn-color: #000;
+    --bs-btn-bg: var(--bs-info);
+    --bs-btn-border-color: var(--bs-info);
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 88%, #000 12%);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 82%, #000 18%);
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 75%, #000 25%);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 72%, #000 28%);
+    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb, 13, 202, 240);
+}
+
+/* Secondary */
+.btn-secondary {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: var(--bs-secondary);
+    --bs-btn-border-color: var(--bs-secondary);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 88%, #000 12%);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 82%, #000 18%);
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 75%, #000 25%);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 72%, #000 28%);
+    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb, 108, 117, 125);
+}
+
+/* Buttons (outline) */
+.btn-outline-primary {
+    --bs-btn-color: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: var(--bs-primary);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, #000 25%);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, #000 25%);
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 13, 110, 253);
+}
+
+/* Optional: make the plain .btn use primary by default (comment out if you don't want this) */
+/*
+.btn {
+  --bs-btn-color:              #fff;
+  --bs-btn-bg:                 var(--bs-primary);
+  --bs-btn-border-color:       var(--bs-primary);
+  --bs-btn-hover-color:        #fff;
+  --bs-btn-hover-bg:           color-mix(in srgb, var(--bs-primary) 88%, #000 12%);
+  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 82%, #000 18%);
+  --bs-btn-active-color:       #fff;
+  --bs-btn-active-bg:          color-mix(in srgb, var(--bs-primary) 75%, #000 25%);
+  --bs-btn-active-border-color:color-mix(in srgb, var(--bs-primary) 72%, #000 28%);
+  --bs-btn-focus-shadow-rgb:   var(--bs-primary-rgb, 13,110,253);
+}
+*/
+
+/* Pagination */
+.pagination {
+    --bs-pagination-color: var(--bs-primary);
+    --bs-pagination-hover-color: color-mix(in srgb, var(--bs-primary) 85%, #000 15%);
+    --bs-pagination-focus-color: var(--bs-primary);
+    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem
+        color-mix(in srgb, var(--bs-primary) 25%, transparent);
+    --bs-pagination-active-color: #fff;
+    --bs-pagination-active-bg: var(--bs-primary);
+    --bs-pagination-active-border-color: var(--bs-primary);
+    --bs-pagination-disabled-color: var(--bs-secondary, #6c757d);
+}
+
+/* Badges that use bg-primary */
+.badge.bg-primary {
+    --bs-badge-color: #fff;
+    --bs-badge-bg: var(--bs-primary);
+}
+
+/* Nav pills & tabs */
+.nav-pills {
+    --bs-nav-pills-link-active-bg: var(--bs-primary);
+    --bs-nav-pills-link-active-color: #fff;
+}
+.nav-tabs {
+    --bs-nav-tabs-link-hover-border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent);
+    --bs-nav-tabs-link-active-color: var(--bs-primary);
+    --bs-nav-tabs-link-active-border-color: var(--bs-primary);
+}
+
+.nav-tabs .nav-link {
+    color: var(--bs-secondary);
+}
+
+.nav-tabs .nav-link.active {
+    border-top-color: rgb(26, 115, 232);
+    border-right-color: rgb(26, 115, 232);
+    border-bottom-color: transparent;
+    border-left-color: rgb(26, 115, 232);
+}
+
+/* ========================================================================
+   TabView Component Styles
+   ======================================================================== */
+
+/*
+ * Style for the 'select' mode dropdown in the TabView component.
+ * These styles mimic the appearance of a Bootstrap .form-select element
+ * to provide a consistent look and feel with standard form inputs.
+ */
+.tab-view-select-style {
+    display: inline-flex; /* Use inline-flex to allow the button to size to its content */
+    align-items: center; /* Vertically align the label and chevron */
+
+    /* Mimic Bootstrap .form-select styles for appearance */
+    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+    border-top: 1px solid var(--bs-border-color);
+    border-right: 1px solid var(--bs-border-color);
+    border-left: 1px solid var(--bs-border-color);
+    border-top-left-radius: var(--bs-border-radius);
+    border-top-right-radius: var(--bs-border-radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    transition:
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+/* The .dropdown-toggle class adds its own chevron, which we don't want. */
+/* This rule hides the default Bootstrap chevron so we can use our own background-image version. */
+.tab-view-select-style::after {
+    display: none;
+}
+
+/* Hover state - slightly darken the border like a real input */
+.tab-view-select-style:hover {
+    border-color: var(--bs-secondary-border-subtle);
+}
+
+/* Focus state - mimic Bootstrap's standard focus ring */
+.tab-view-select-style:focus {
+    border-color: var(--bs-primary);
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+}
+
+/* The text label inside the button */
+.tab-view-select-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Alerts (optional, stays tied to primary) */
+.alert-primary {
+    --bs-alert-color: var(
+        --bs-primary-text-emphasis,
+        color-mix(in srgb, var(--bs-primary) 35%, #000)
+    );
+    --bs-alert-bg: var(--bs-primary-bg-subtle, color-mix(in srgb, var(--bs-primary) 10%, #fff));
+    --bs-alert-border-color: var(
+        --bs-primary-border-subtle,
+        color-mix(in srgb, var(--bs-primary) 25%, #fff)
+    );
+}
+
+/* Links (so the whole site “feels” primary) */
+:root {
+    --bs-link-color: var(--bs-primary);
+    --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 85%, #000 15%);
+}
+
+.form-check {
+    margin-top: 0.9rem;
+}
+
+/* ========================================================================
+   MOJO Core Animations
+   ======================================================================== */
+
+@keyframes mojo-fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mojo-slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mojo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes mojo-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.6;
+    }
+}
+
+@keyframes mojo-bounce {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-3px);
+    }
+}
+
+/* ========================================================================
+   MOJO Animation Utility Classes
+   ======================================================================== */
+
+.mojo-fade-in {
+    animation: mojo-fadeIn var(--mojo-transition-slow) ease-in-out;
+}
+
+.mojo-slide-up {
+    animation: mojo-slideUp 0.4s ease-out;
+}
+
+.mojo-spin {
+    animation: mojo-spin 1s linear infinite;
+    display: inline-block;
+}
+
+.mojo-pulse {
+    animation: mojo-pulse 2s ease-in-out infinite;
+}
+
+.mojo-bounce {
+    animation: mojo-bounce 0.5s ease-in-out;
+}
+
+/* Bootstrap Icons animation enhancement */
+.bi-spin {
+    animation: mojo-spin 1s linear infinite;
+    display: inline-block;
+}
+
+/* ========================================================================
+   MOJO Utility Classes
+   ======================================================================== */
+
+/* Text truncation utilities */
+.mojo-text-truncate-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mojo-text-truncate-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Transition utilities */
+.mojo-transition-fast {
+    transition: all var(--mojo-transition-fast);
+}
+
+.mojo-transition {
+    transition: all var(--mojo-transition-base);
+}
+
+.mojo-transition-slow {
+    transition: all var(--mojo-transition-slow);
+}
+
+/* Transform utilities */
+.mojo-transform-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.mojo-transform-center-x {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.mojo-transform-center-y {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* Hover effects */
+.mojo-hover-lift:hover {
+    transform: translateY(-2px);
+    transition: transform var(--mojo-transition-fast);
+}
+
+.mojo-hover-shadow:hover {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    transition: box-shadow var(--mojo-transition-fast);
+}
+
+/* Glass morphism effect */
+.mojo-glass {
+    backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+[data-bs-theme="dark"] .mojo-glass {
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ========================================================================
+   MOJO Loading States
+   ======================================================================== */
+
+.mojo-loading {
+    pointer-events: none;
+    opacity: 0.6;
+    position: relative;
+}
+
+.mojo-loading::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1rem;
+    height: 1rem;
+    margin: -0.5rem 0 0 -0.5rem;
+    border: 2px solid transparent;
+    border-top: 2px solid var(--mojo-primary);
+    border-radius: 50%;
+    animation: mojo-spin 1s linear infinite;
+    z-index: 1;
+}
+
+/* ========================================================================
+   MOJO Focus States
+   ======================================================================== */
+
+.mojo-focus-ring:focus {
+    outline: none;
+    box-shadow: var(--mojo-focus-shadow);
+}
+
+.mojo-focus-ring:focus-visible {
+    outline: 2px solid var(--mojo-focus-color);
+    outline-offset: 2px;
+}
+
+/* Extend Bootstrap font sizes smaller than fs-6 */
+.fs-7 {
+    font-size: 0.75rem !important; /* ~12px */
+}
+.fs-8 {
+    font-size: 0.6875rem !important; /* ~11px */
+}
+.fs-9 {
+    font-size: 0.625rem !important; /* ~10px */
+}
+.fs-10 {
+    font-size: 0.5625rem !important; /* ~9px */
+}
+
+/* ========================================================================
+   MOJO Print Utilities
+   ======================================================================== */
+
+@media print {
+    .mojo-print-hide {
+        display: none !important;
+    }
+
+    .mojo-print-show {
+        display: block !important;
+    }
+
+    .mojo-no-print-shadow {
+        box-shadow: none !important;
+    }
+
+    .mojo-no-print-bg {
+        background: white !important;
+        color: black !important;
+    }
+}
+
+/* ========================================================================
+   MOJO Accessibility Enhancements
+   ======================================================================== */
+
+/* Screen reader only content */
+.mojo-sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+/* Skip link for accessibility */
+.mojo-skip-link {
+    position: absolute;
+    top: -40px;
+    left: 6px;
+    background: var(--mojo-emphasis-color);
+    color: var(--mojo-body-bg);
+    padding: 8px;
+    text-decoration: none;
+    z-index: var(--mojo-zindex-tooltip);
+    border-radius: var(--mojo-border-radius);
+}
+
+.mojo-skip-link:focus {
+    top: 6px;
+}
+
+/* ========================================================================
+   MOJO Reduced Motion Support
+   ======================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+    .mojo-fade-in,
+    .mojo-slide-up,
+    .mojo-spin,
+    .mojo-pulse,
+    .mojo-bounce,
+    .bi-spin,
+    .mojo-loading::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+    }
+
+    .mojo-transition-fast,
+    .mojo-transition,
+    .mojo-transition-slow,
+    .mojo-hover-lift:hover,
+    .mojo-hover-shadow:hover {
+        transition: none !important;
+    }
+}
+
+/* ========================================================================
+   MOJO High Contrast Support
+   ======================================================================== */
+
+@media (prefers-contrast: high) {
+    .mojo-glass {
+        background: var(--mojo-body-bg);
+        border: 2px solid var(--mojo-border-color);
+        backdrop-filter: none;
+    }
+
+    .mojo-focus-ring:focus,
+    .mojo-focus-ring:focus-visible {
+        outline: 3px solid var(--mojo-focus-color);
+        outline-offset: 2px;
+        box-shadow: 0 0 0 0.5rem rgba(var(--mojo-primary-rgb), 0.5);
+    }
+}
+
+/* ========================================================================
+   MOJO Framework Initialization
+   ======================================================================== */
+
+/* Ensure MOJO framework is ready */
+.mojo-app {
+    min-height: 100vh;
+    font-family: var(--mojo-font-sans-serif);
+    background-color: var(--mojo-body-bg);
+    color: var(--mojo-body-color);
+}
+
+.mojo-app.mojo-loading {
+    opacity: 0;
+}
+
+.mojo-app.mojo-ready {
+    opacity: 1;
+    transition: opacity var(--mojo-transition-slow);
+}
+
+/* MOJO component base class */
+.mojo-component {
+    position: relative;
+}
+
+.mojo-component.mojo-disabled {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+/* ========================================================================
+   MOJO Debug Helpers (Development Only)
+   ======================================================================== */
+
+.mojo-debug * {
+    outline: 1px solid red !important;
+}
+
+.mojo-debug *:hover {
+    background: rgba(255, 0, 0, 0.1) !important;
+}
+
+/* ========================================================================
+   FileDropMixin - Drag and Drop Visual Feedback
+   ======================================================================== */
+
+.drag-over {
+    border-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-bg-subtle) !important;
+    transition: all 0.2s ease;
+}
+
+.drag-active {
+    border-style: dashed !important;
+    border-width: 2px !important;
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
+}
+
+/* Combined drag state */
+.drag-over.drag-active {
+    transform: scale(1.02);
+    box-shadow:
+        0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25),
+        0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Dark theme support */
+[data-bs-theme="dark"] .drag-over {
+    background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .drag-over,
+    .drag-active {
+        transition: none !important;
+        transform: none !important;
+    }
+}
+
+/* Hide debug helpers in production */
+@media (min-width: 1px) {
+    .mojo-debug {
+        display: none;
+    }
+}
+
+/* Show debug helpers when explicitly enabled */
+.mojo-debug-enabled .mojo-debug {
+    display: block !important;
+}
+
+/* ========================================
+   Image Field Styles
+   ======================================== */
+
+.image-field-container {
+    position: relative;
+    display: inline-block;
+    border-radius: 0.375rem;
+    overflow: hidden;
+}
+
+.image-drop-zone {
+    position: relative;
+    border-radius: 0.375rem;
+    transition: all 0.2s ease;
+    overflow: hidden;
+}
+
+.image-drop-zone.droppable {
+    border: 2px dashed var(--bs-border-color);
+}
+
+.image-drop-zone.droppable:hover {
+    border-color: var(--bs-primary);
+    background-color: var(--bs-primary-bg-subtle);
+}
+
+/* Drop zone states */
+.image-drop-zone.drag-over {
+    border-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-bg-subtle) !important;
+    transform: scale(1.02);
+}
+
+.image-drop-zone.drag-active {
+    border-color: var(--bs-success) !important;
+    background-color: var(--bs-success-bg-subtle) !important;
+    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.25);
+}
+
+/* Size variants */
+.image-field-xs {
+    width: 48px;
+    height: 48px;
+}
+
+.image-field-sm {
+    width: 96px;
+    height: 96px;
+}
+
+.image-field-md {
+    width: 150px;
+    height: 150px;
+}
+
+.image-field-lg {
+    width: 200px;
+    height: 200px;
+}
+
+.image-field-xl {
+    width: 300px;
+    height: 300px;
+}
+
+/* Preview images */
+.image-field-container img {
+    transition: transform 0.2s ease;
+}
+
+.image-field-container:hover img {
+    transform: scale(1.05);
+}
+
+/* Remove button positioning */
+.image-field-container .btn {
+    transition: opacity 0.2s ease;
+}
+
+.image-field-container:not(:hover) .btn {
+    opacity: 0.6;
+}
+
+/* Dark theme adjustments */
+[data-bs-theme="dark"] .image-drop-zone.droppable {
+    border-color: var(--bs-border-color-translucent);
+}
+
+[data-bs-theme="dark"] .image-drop-zone.droppable:hover {
+    border-color: var(--bs-primary);
+    background-color: rgba(var(--bs-primary-rgb), 0.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 576px) {
+    .image-field-xl {
+        width: 250px;
+        height: 250px;
+    }
+
+    .image-field-lg {
+        width: 180px;
+        height: 180px;
+    }
+}
+
+/* Accessibility */
+.image-drop-zone:focus {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+    .image-drop-zone,
+    .image-field-container img,
+    .image-field-container .btn {
+        transition: none;
+    }
+
+    .image-drop-zone.drag-over {
+        transform: none;
+    }
+
+    .image-field-container:hover img {
+        transform: none;
+    }
+}
+
+/* ========================================================================
+   MOJO Form Groups
+   ======================================================================== */
+
+.mojo-form-group {
+    margin-bottom: 1rem;
+}
+
+.mojo-form-group .h6 {
+    color: var(--bs-secondary);
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--bs-border-color);
+}
+
+/* Responsive adjustments for form groups */
+@media (max-width: 767.98px) {
+    .mojo-form-group {
+        padding: 0.75rem;
+        margin-bottom: 0.75rem;
+    }
+}
+
+/* ========================================================================
+   MOJO Form Controls
+   ======================================================================== */
+
+.mojo-form-control {
+    margin-bottom: 1rem;
+}
+
+.mojo-form-control .form-label {
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    color: var(--bs-body-color);
+}
+
+.mojo-form-control .form-text {
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: var(--bs-secondary);
+}
+
+.mojo-form-control .invalid-feedback {
+    margin-top: 0.25rem;
+}
+
+/* Form check controls (checkboxes, switches, radios) */
+.mojo-form-control .form-check {
+    margin-bottom: 0;
+}
+
+.mojo-form-control .form-check .form-check-label {
+    font-weight: normal;
+}
+
+/* Image field specific styling */
+.mojo-form-control .image-field-container {
+    margin-top: 0.5rem;
+}
+
+/* Range slider specific styling */
+.mojo-form-control input[type="range"] {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+/* Responsive adjustments for form controls */
+@media (max-width: 767.98px) {
+    .mojo-form-control {
+        margin-bottom: 0.75rem;
+    }
+
+    .mojo-form-control .form-label {
+        margin-bottom: 0.375rem;
+    }
+}
+
+/* ==============================================
+   Modal Context Menu Button Styles
+   ============================================== */
+
+/* Base context menu button - inherits header color by default */
+.mojo-modal-context-menu-btn {
+    color: inherit !important;
+    border: none;
+    background: transparent;
+    opacity: 0.7;
+    transition: opacity 0.15s ease-in-out;
+}
+
+.mojo-modal-context-menu-btn:hover,
+.mojo-modal-context-menu-btn:focus {
+    color: inherit !important;
+    background: rgba(var(--bs-emphasis-color-rgb), 0.1);
+    opacity: 1;
+}
+
+.mojo-modal-context-menu-btn:active {
+    background: rgba(var(--bs-emphasis-color-rgb), 0.2);
+}
+
+/* Modal type-specific overrides */
+.modal.modal-info .mojo-modal-context-menu-btn {
+    color: #ffffff !important;
+}
+
+.modal.modal-success .mojo-modal-context-menu-btn {
+    color: #ffffff !important;
+}
+
+.modal.modal-warning .mojo-modal-context-menu-btn {
+    color: #000000 !important;
+}
+
+.modal.modal-error .mojo-modal-context-menu-btn {
+    color: #ffffff !important;
+}
+
+.modal.modal-dark .mojo-modal-context-menu-btn {
+    color: #ffffff !important;
+}
+
+/* Dark theme support */
+[data-bs-theme="dark"] .mojo-modal-context-menu-btn {
+    color: #ffffff !important;
+}
+
+/* Ensure proper spacing and alignment */
+.modal-header .mojo-modal-context-menu-btn {
+    margin-left: auto;
+    margin-right: 0;
+}