/*
 * MnO UI Framework v1.0
 * A clean, iOS-inspired CSS framework with dark mode support
 * Prefix: mo-
 */

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  /* Primary Brand Colors */
  --mo-color-primary: #00416b;
  --mo-color-primary-600: #00678a;
  
  /* Neutral Grays (Light Theme) */
  --mo-gray-50: #f9fafb;
  --mo-gray-100: #f3f4f6;
  --mo-gray-200: #e5e7eb;
  --mo-gray-300: #d1d5db;
  --mo-gray-400: #9ca3af;
  --mo-gray-500: #6b7280;
  --mo-gray-600: #4b5563;
  --mo-gray-700: #374151;
  --mo-gray-800: #1f2937;
  --mo-gray-900: #111827;
  --mo-gray-950: #030712;
  
  /* Semantic Colors */
  --mo-color-success: #10b981;
  --mo-color-success-light: #d1fae5;
  --mo-color-success-dark: #065f46;
  --mo-color-warning: #f59e0b;
  --mo-color-warning-light: #fef3c7;
  --mo-color-warning-dark: #92400e;
  --mo-color-danger: #ef4444;
  --mo-color-danger-light: #fee2e2;
  --mo-color-danger-dark: #991b1b;
  --mo-color-info: #3b82f6;
  --mo-color-info-light: #dbeafe;
  --mo-color-info-dark: #1e40af;
  
  /* Spacing Scale (4px based) */
  --mo-space-1: 4px;
  --mo-space-2: 8px;
  --mo-space-3: 12px;
  --mo-space-4: 16px;
  --mo-space-5: 20px;
  --mo-space-6: 24px;
  --mo-space-7: 28px;
  --mo-space-8: 32px;
  --mo-space-9: 36px;
  --mo-space-10: 40px;
  --mo-space-11: 44px;
  --mo-space-12: 48px;
  
  /* Border Radius */
  --mo-radius-sm: 6px;
  --mo-radius-md: 12px;
  --mo-radius-lg: 16px;
  --mo-radius-2xl: 24px;
  --mo-radius-pill: 9999px;
  
  /* Shadows (Elevation) */
  --mo-shadow-0: none;
  --mo-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --mo-shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --mo-shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --mo-shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Borders */
  --mo-border-width: 1px;
  --mo-border-width-2: 2px;
  
  /* Opacity */
  --mo-opacity-disabled: 0.5;
  --mo-opacity-overlay: 0.5;
  
  /* Blur */
  --mo-blur-sm: 4px;
  --mo-blur-md: 8px;
  --mo-blur-lg: 16px;
  
  /* Focus Ring */
  --mo-focus-ring-width: 3px;
  --mo-focus-ring-offset: 2px;
  --mo-focus-ring-color: rgb(0 103 138 / 0.5);
  
  /* Typography Scale */
  --mo-text-xs: 12px;
  --mo-text-sm: 14px;
  --mo-text-base: 16px;
  --mo-text-lg: 18px;
  --mo-text-xl: 20px;
  --mo-text-2xl: 24px;
  --mo-text-3xl: 28px;
  --mo-text-4xl: 32px;
  --mo-text-5xl: 40px;
  
  /* Line Heights */
  --mo-leading-tight: 1.25;
  --mo-leading-normal: 1.5;
  --mo-leading-relaxed: 1.75;
  
  /* Font Weights */
  --mo-font-normal: 400;
  --mo-font-medium: 500;
  --mo-font-semibold: 600;
  --mo-font-bold: 700;
  
  /* Motion */
  --mo-duration-fast: 150ms;
  --mo-duration-normal: 250ms;
  --mo-duration-slow: 350ms;
  --mo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mo-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-Index */
  --mo-z-dropdown: 1000;
  --mo-z-sticky: 1020;
  --mo-z-fixed: 1030;
  --mo-z-modal-backdrop: 1040;
  --mo-z-modal: 1050;
  --mo-z-toast: 1060;
  --mo-z-tooltip: 1070;
  
  /* Breakpoints (for reference) */
  --mo-breakpoint-sm: 480px;
  --mo-breakpoint-md: 768px;
  --mo-breakpoint-lg: 1024px;
  --mo-breakpoint-xl: 1280px;
}

/* Light Theme (Default) */
:root,
[data-theme="light"] {
  --mo-bg-base: #ffffff;
  --mo-bg-surface: var(--mo-gray-50);
  --mo-bg-elevated: #ffffff;
  --mo-bg-overlay: rgba(0, 0, 0, 0.5);
  
  --mo-text-primary: var(--mo-gray-900);
  --mo-text-secondary: var(--mo-gray-600);
  --mo-text-tertiary: var(--mo-gray-500);
  --mo-text-inverse: #ffffff;
  
  --mo-border-base: var(--mo-gray-200);
  --mo-border-strong: var(--mo-gray-300);
  
  --mo-input-bg: #ffffff;
  --mo-input-border: var(--mo-gray-300);
  --mo-input-focus-border: var(--mo-color-primary-600);
  
  color-scheme: light;
}

/* Dark Theme */
[data-theme="dark"] {
  --mo-gray-50: #18181b;
  --mo-gray-100: #27272a;
  --mo-gray-200: #3f3f46;
  --mo-gray-300: #52525b;
  --mo-gray-400: #71717a;
  --mo-gray-500: #a1a1aa;
  --mo-gray-600: #d4d4d8;
  --mo-gray-700: #e4e4e7;
  --mo-gray-800: #f4f4f5;
  --mo-gray-900: #fafafa;
  --mo-gray-950: #ffffff;
  
  --mo-bg-base: #0a0a0b;
  --mo-bg-surface: var(--mo-gray-50);
  --mo-bg-elevated: var(--mo-gray-100);
  --mo-bg-overlay: rgba(0, 0, 0, 0.7);
  
  --mo-text-primary: var(--mo-gray-900);
  --mo-text-secondary: var(--mo-gray-500);
  --mo-text-tertiary: var(--mo-gray-400);
  --mo-text-inverse: var(--mo-gray-900);
  
  --mo-border-base: var(--mo-gray-200);
  --mo-border-strong: var(--mo-gray-300);
  
  --mo-input-bg: var(--mo-gray-50);
  --mo-input-border: var(--mo-gray-300);
  --mo-input-focus-border: var(--mo-color-primary-600);
  
  --mo-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --mo-shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --mo-shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --mo-shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  
  color-scheme: dark;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-duration-fast: 0ms;
    --mo-duration-normal: 0ms;
    --mo-duration-slow: 0ms;
  }
  
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--mo-text-base);
  line-height: var(--mo-leading-normal);
  color: var(--mo-text-primary);
  background-color: var(--mo-bg-base);
  transition: background-color var(--mo-duration-normal) var(--mo-ease-smooth);
}

:focus-visible {
  outline: var(--mo-focus-ring-width) solid var(--mo-focus-ring-color);
  outline-offset: var(--mo-focus-ring-offset);
  border-radius: var(--mo-radius-sm);
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.mo-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--mo-space-4);
}

.mo-container--fluid {
  max-width: 100%;
}

/* Display */
.mo-block { display: block; }
.mo-inline-block { display: inline-block; }
.mo-inline { display: inline; }
.mo-flex { display: flex; }
.mo-inline-flex { display: inline-flex; }
.mo-grid { display: grid; }
.mo-hidden { display: none; }

/* Flex */
.mo-flex-col { flex-direction: column; }
.mo-flex-wrap { flex-wrap: wrap; }
.mo-items-start { align-items: flex-start; }
.mo-items-center { align-items: center; }
.mo-items-end { align-items: flex-end; }
.mo-justify-start { justify-content: flex-start; }
.mo-justify-center { justify-content: center; }
.mo-justify-end { justify-content: flex-end; }
.mo-justify-between { justify-content: space-between; }
.mo-flex-1 { flex: 1; }
.mo-flex-auto { flex: 1 1 auto; }
.mo-flex-none { flex: none; }

/* Gap */
.mo-gap-1 { gap: var(--mo-space-1); }
.mo-gap-2 { gap: var(--mo-space-2); }
.mo-gap-3 { gap: var(--mo-space-3); }
.mo-gap-4 { gap: var(--mo-space-4); }
.mo-gap-6 { gap: var(--mo-space-6); }

/* Width */
.mo-w-full { width: 100%; }
.mo-w-auto { width: auto; }

/* Overflow */
.mo-overflow-hidden { overflow: hidden; }
.mo-overflow-auto { overflow: auto; }
.mo-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spacing (curated) */
.mo-m-0 { margin: 0; }
.mo-m-2 { margin: var(--mo-space-2); }
.mo-m-4 { margin: var(--mo-space-4); }
.mo-mt-2 { margin-top: var(--mo-space-2); }
.mo-mt-4 { margin-top: var(--mo-space-4); }
.mo-mb-2 { margin-bottom: var(--mo-space-2); }
.mo-mb-4 { margin-bottom: var(--mo-space-4); }
.mo-p-2 { padding: var(--mo-space-2); }
.mo-p-4 { padding: var(--mo-space-4); }
.mo-p-6 { padding: var(--mo-space-6); }

/* Text */
.mo-text-center { text-align: center; }
.mo-text-sm { font-size: var(--mo-text-sm); }
.mo-text-lg { font-size: var(--mo-text-lg); }
.mo-font-medium { font-weight: var(--mo-font-medium); }
.mo-font-semibold { font-weight: var(--mo-font-semibold); }

/* Responsive utilities */
@media (max-width: 767px) {
  .mo-hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .mo-hidden-desktop { display: none !important; }
}

/* ==========================================================================
   Sidebar Layout
   ========================================================================== */

/*
HTML Example:
<aside class="mo-sidebar" id="main-sidebar" aria-label="Main navigation">
  <div class="mo-sidebar__header">
    <h2 class="mo-sidebar__title">MnO</h2>
    <button class="mo-sidebar__toggle" aria-label="Toggle sidebar">
      <i class="fas fa-bars"></i>
    </button>
  </div>
  
  <nav class="mo-sidebar__nav">
    <div class="mo-sidebar__section">
      <a href="#" class="mo-sidebar__item mo-sidebar__item--active">
        <i class="fas fa-home"></i>
        <span>Dashboard</span>
      </a>
      <a href="#" class="mo-sidebar__item">
        <i class="fas fa-users"></i>
        <span>Users</span>
      </a>
    </div>
  </nav>
</aside>
<div class="mo-overlay" id="sidebar-overlay"></div>
*/

.mo-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 260px;
  background-color: var(--mo-bg-elevated);
  border-right: var(--mo-border-width) solid var(--mo-border-base);
  display: flex;
  flex-direction: column;
  z-index: var(--mo-z-fixed);
  transition: width var(--mo-duration-normal) var(--mo-ease-smooth),
              transform var(--mo-duration-normal) var(--mo-ease-smooth);
  overflow: hidden;
}

.mo-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mo-space-4);
  border-bottom: var(--mo-border-width) solid var(--mo-border-base);
  min-height: 64px;
}

.mo-sidebar__title {
  font-size: var(--mo-text-xl);
  font-weight: var(--mo-font-bold);
  color: var(--mo-color-primary);
  white-space: nowrap;
  overflow: hidden;
}

.mo-sidebar__toggle {
  background: none;
  border: none;
  color: var(--mo-text-secondary);
  cursor: pointer;
  padding: var(--mo-space-2);
  border-radius: var(--mo-radius-sm);
  transition: background-color var(--mo-duration-fast);
  font-size: var(--mo-text-lg);
}

.mo-sidebar__toggle:hover {
  background-color: var(--mo-bg-surface);
}

.mo-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--mo-space-4);
}

.mo-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: var(--mo-space-1);
  margin-bottom: var(--mo-space-6);
}

.mo-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--mo-space-3);
  padding: var(--mo-space-3);
  color: var(--mo-text-secondary);
  text-decoration: none;
  border-radius: var(--mo-radius-md);
  transition: all var(--mo-duration-fast);
  font-size: var(--mo-text-sm);
  font-weight: var(--mo-font-medium);
  position: relative;
}

.mo-sidebar__item i {
  font-size: var(--mo-text-lg);
  min-width: 20px;
  text-align: center;
}

.mo-sidebar__item span {
  white-space: nowrap;
  overflow: hidden;
}

.mo-sidebar__item:hover {
  background-color: var(--mo-bg-surface);
  color: var(--mo-text-primary);
}

.mo-sidebar__item--active {
  background-color: var(--mo-color-primary);
  color: white;
}

.mo-sidebar__item--active:hover {
  background-color: var(--mo-color-primary-600);
}

/* Collapsed State (Desktop) */
@media (min-width: 768px) {
  .mo-sidebar--collapsed {
    width: 72px;
  }
  
  .mo-sidebar--collapsed .mo-sidebar__title,
  .mo-sidebar--collapsed .mo-sidebar__item span {
    opacity: 0;
    pointer-events: none;
  }
  
  .mo-sidebar--collapsed .mo-sidebar__item {
    justify-content: center;
    padding: var(--mo-space-3);
  }
  
  .mo-sidebar--collapsed .mo-sidebar__item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    margin-left: var(--mo-space-2);
    padding: var(--mo-space-2) var(--mo-space-3);
    background-color: var(--mo-gray-900);
    color: white;
    border-radius: var(--mo-radius-sm);
    font-size: var(--mo-text-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mo-duration-fast);
    z-index: var(--mo-z-tooltip);
  }
  
  .mo-sidebar--collapsed .mo-sidebar__item:hover::after {
    opacity: 1;
  }
}

/* Mobile Sidebar */
@media (max-width: 767px) {
  .mo-sidebar {
    transform: translateX(-100%);
  }
  
  .mo-sidebar.mo-sidebar--open {
    transform: translateX(0);
  }
}

.mo-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--mo-bg-overlay);
  backdrop-filter: blur(var(--mo-blur-sm));
  opacity: 0;
  pointer-events: none;
  z-index: calc(var(--mo-z-fixed) - 1);
  transition: opacity var(--mo-duration-normal);
}

.mo-overlay.mo-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/*
HTML Examples:
<button class="mo-btn mo-btn--primary">Primary</button>
<button class="mo-btn mo-btn--outline">Outline</button>
<button class="mo-btn mo-btn--ghost">Ghost</button>
<button class="mo-btn mo-btn--primary mo-btn--loading">
  <i class="fas fa-spinner fa-spin"></i> Loading
</button>
<button class="mo-btn mo-btn--icon"><i class="fas fa-heart"></i></button>
*/

.mo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mo-space-2);
  padding: var(--mo-space-3) var(--mo-space-4);
  font-size: var(--mo-text-sm);
  font-weight: var(--mo-font-medium);
  line-height: 1;
  border: var(--mo-border-width) solid transparent;
  border-radius: var(--mo-radius-md);
  cursor: pointer;
  transition: all var(--mo-duration-fast) var(--mo-ease-smooth);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.mo-btn:disabled,
.mo-btn--loading {
  opacity: var(--mo-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.mo-btn--primary {
  background-color: var(--mo-color-primary);
  color: white;
}

.mo-btn--primary:hover {
  background-color: var(--mo-color-primary-600);
  box-shadow: var(--mo-shadow-2);
}

/* Neutral */
.mo-btn--neutral {
  background-color: var(--mo-bg-surface);
  color: var(--mo-text-primary);
  border-color: var(--mo-border-base);
}

.mo-btn--neutral:hover {
  background-color: var(--mo-gray-200);
}

/* Outline */
.mo-btn--outline {
  background-color: transparent;
  color: var(--mo-color-primary);
  border-color: var(--mo-color-primary);
}

.mo-btn--outline:hover {
  background-color: var(--mo-color-primary);
  color: white;
}

/* Ghost */
.mo-btn--ghost {
  background-color: transparent;
  color: var(--mo-text-secondary);
}

.mo-btn--ghost:hover {
  background-color: var(--mo-bg-surface);
  color: var(--mo-text-primary);
}

/* Link */
.mo-btn--link {
  background-color: transparent;
  color: var(--mo-color-primary);
  padding: 0;
  border: none;
  text-decoration: underline;
}

.mo-btn--link:hover {
  color: var(--mo-color-primary-600);
}

/* Sizes */
.mo-btn--xs {
  padding: var(--mo-space-1) var(--mo-space-2);
  font-size: var(--mo-text-xs);
}

.mo-btn--sm {
  padding: var(--mo-space-2) var(--mo-space-3);
  font-size: var(--mo-text-sm);
}

.mo-btn--lg {
  padding: var(--mo-space-4) var(--mo-space-6);
  font-size: var(--mo-text-lg);
}

.mo-btn--xl {
  padding: var(--mo-space-5) var(--mo-space-8);
  font-size: var(--mo-text-xl);
}

/* Icon Only */
.mo-btn--icon {
  padding: var(--mo-space-3);
  aspect-ratio: 1;
}

/* ==========================================================================
   Badges & Chips
   ========================================================================== */

.mo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mo-space-1);
  padding: var(--mo-space-1) var(--mo-space-2);
  font-size: var(--mo-text-xs);
  font-weight: var(--mo-font-medium);
  border-radius: var(--mo-radius-sm);
  line-height: 1;
}

.mo-badge--primary {
  background-color: var(--mo-color-primary);
  color: white;
}

.mo-badge--success {
  background-color: var(--mo-color-success-light);
  color: var(--mo-color-success-dark);
}

.mo-badge--warning {
  background-color: var(--mo-color-warning-light);
  color: var(--mo-color-warning-dark);
}

.mo-badge--danger {
  background-color: var(--mo-color-danger-light);
  color: var(--mo-color-danger-dark);
}

.mo-badge--info {
  background-color: var(--mo-color-info-light);
  color: var(--mo-color-info-dark);
}

.mo-badge--neutral {
  background-color: var(--mo-gray-100);
  color: var(--mo-gray-700);
}

.mo-badge--pill {
  border-radius: var(--mo-radius-pill);
  padding: var(--mo-space-1) var(--mo-space-3);
}

.mo-badge__dismiss {
  background: none;
  border: none;
  color: currentColor;
  cursor: pointer;
  padding: 0;
  margin-left: var(--mo-space-1);
  opacity: 0.7;
  font-size: var(--mo-text-xs);
}

.mo-badge__dismiss:hover {
  opacity: 1;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.mo-alert {
  padding: var(--mo-space-4);
  border-radius: var(--mo-radius-md);
  border-left: 4px solid;
  display: flex;
  gap: var(--mo-space-3);
}

.mo-alert__icon {
  font-size: var(--mo-text-xl);
  flex-shrink: 0;
}

.mo-alert__content {
  flex: 1;
}

.mo-alert__title {
  font-weight: var(--mo-font-semibold);
  margin-bottom: var(--mo-space-1);
}

.mo-alert--success {
  background-color: var(--mo-color-success-light);
  border-color: var(--mo-color-success);
  color: var(--mo-color-success-dark);
}

.mo-alert--warning {
  background-color: var(--mo-color-warning-light);
  border-color: var(--mo-color-warning);
  color: var(--mo-color-warning-dark);
}

.mo-alert--danger {
  background-color: var(--mo-color-danger-light);
  border-color: var(--mo-color-danger);
  color: var(--mo-color-danger-dark);
}

.mo-alert--info {
  background-color: var(--mo-color-info-light);
  border-color: var(--mo-color-info);
  color: var(--mo-color-info-dark);
}

/* ==========================================================================
   Modal
   ========================================================================== */

/*
HTML Example:
<button data-mo-modal-open="#my-modal">Open Modal</button>

<div class="mo-modal" id="my-modal" role="dialog" aria-modal="true">
  <div class="mo-modal__backdrop"></div>
  <div class="mo-modal__container">
    <div class="mo-modal__content">
      <div class="mo-modal__header">
        <h2 class="mo-modal__title">Modal Title</h2>
        <button class="mo-modal__close" data-mo-modal-close aria-label="Close">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="mo-modal__body">
        Modal content goes here
      </div>
      <div class="mo-modal__footer">
        <button class="mo-btn mo-btn--neutral" data-mo-modal-close>Cancel</button>
        <button class="mo-btn mo-btn--primary">Save</button>
      </div>
    </div>
  </div>
</div>
*/

.mo-modal {
  position: fixed;
  inset: 0;
  z-index: var(--mo-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mo-duration-normal);
}

.mo-modal--open {
  opacity: 1;
  pointer-events: auto;
}

.mo-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--mo-bg-overlay);
  backdrop-filter: blur(var(--mo-blur-md));
  z-index: var(--mo-z-modal-backdrop);
}

.mo-modal__container {
  position: relative;
  z-index: var(--mo-z-modal);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform var(--mo-duration-normal) var(--mo-ease-spring);
}

.mo-modal--open .mo-modal__container {
  transform: scale(1);
}

.mo-modal__content {
  background-color: var(--mo-bg-elevated);
  border-radius: var(--mo-radius-lg);
  box-shadow: var(--mo-shadow-4);
  display: flex;
  flex-direction: column;
}

.mo-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mo-space-6);
  border-bottom: var(--mo-border-width) solid var(--mo-border-base);
}

.mo-modal__title {
  font-size: var(--mo-text-xl);
  font-weight: var(--mo-font-semibold);
  color: var(--mo-text-primary);
}

.mo-modal__close {
  background: none;
  border: none;
  color: var(--mo-text-secondary);
  cursor: pointer;
  padding: var(--mo-space-2);
  border-radius: var(--mo-radius-sm);
  font-size: var(--mo-text-lg);
  transition: background-color var(--mo-duration-fast);
}

.mo-modal__close:hover {
  background-color: var(--mo-bg-surface);
}

.mo-modal__body {
  padding: var(--mo-space-6);
  flex: 1;
  overflow-y: auto;
}

.mo-modal__footer {
  display: flex;
  gap: var(--mo-space-3);
  justify-content: flex-end;
  padding: var(--mo-space-6);
  border-top: var(--mo-border-width) solid var(--mo-border-base);
}

/* Modal Sizes */
.mo-modal--sm .mo-modal__container { max-width: 400px; }
.mo-modal--md .mo-modal__container { max-width: 600px; }
.mo-modal--lg .mo-modal__container { max-width: 800px; }
.mo-modal--xl .mo-modal__container { max-width: 1000px; }

/* ==========================================================================
   Tabs
   ========================================================================== */

.mo-tabs {
  display: flex;
  flex-direction: column;
}

.mo-tabs__list {
  display: flex;
  gap: var(--mo-space-2);
  border-bottom: var(--mo-border-width) solid var(--mo-border-base);
  list-style: none;
}

.mo-tabs__list--pills {
  border-bottom: none;
  background-color: var(--mo-bg-surface);
  padding: var(--mo-space-1);
  border-radius: var(--mo-radius-md);
}

.mo-tabs__tab {
  padding: var(--mo-space-3) var(--mo-space-4);
  font-size: var(--mo-text-sm);
  font-weight: var(--mo-font-medium);
  color: var(--mo-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color var(--mo-duration-fast);
  border-radius: var(--mo-radius-sm);
}

.mo-tabs__tab:hover {
  color: var(--mo-text-primary);
}

.mo-tabs__tab--active {
  color: var(--mo-color-primary);
}

.mo-tabs__tab--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--mo-color-primary);
}

.mo-tabs__list--pills .mo-tabs__tab--active {
  background-color: white;
  color: var(--mo-text-primary);
  box-shadow: var(--mo-shadow-1);
}

.mo-tabs__list--pills .mo-tabs__tab--active::after {
  display: none;
}

.mo-tabs__panel {
  padding: var(--mo-space-6) 0;
  display: none;
}

.mo-tabs__panel--active {
  display: block;
}

/* ==========================================================================
   Dropdown & Menu
   ========================================================================== */

.mo-dropdown {
  position: relative;
  display: inline-block;
}

.mo-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--mo-space-2));
  left: 0;
  min-width: 200px;
  background-color: var(--mo-bg-elevated);
  border: var(--mo-border-width) solid var(--mo-border-base);
  border-radius: var(--mo-radius-md);
  box-shadow: var(--mo-shadow-3);
  padding: var(--mo-space-2);
  z-index: var(--mo-z-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all var(--mo-duration-fast) var(--mo-ease-smooth);
}

.mo-dropdown__menu--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mo-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--mo-space-2);
  padding: var(--mo-space-2) var(--mo-space-3);
  font-size: var(--mo-text-sm);
  color: var(--mo-text-primary);
  text-decoration: none;
  border-radius: var(--mo-radius-sm);
  transition: background-color var(--mo-duration-fast);
  cursor: pointer;
  white-space: nowrap;
}

.mo-dropdown__item:hover {
  background-color: var(--mo-bg-surface);
}

.mo-dropdown__item--danger {
  color: var(--mo-color-danger);
}

.mo-dropdown__divider {
  height: var(--mo-border-width);
  background-color: var(--mo-border-base);
  margin: var(--mo-space-2) 0;
}

/* ==========================================================================
   Tooltip
   ========================================================================== */

.mo-tooltip {
  position: absolute;
  background-color: var(--mo-gray-900);
  color: white;
  padding: var(--mo-space-2) var(--mo-space-3);
  border-radius: var(--mo-radius-sm);
  font-size: var(--mo-text-sm);
  white-space: nowrap;
  z-index: var(--mo-z-tooltip);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mo-duration-fast);
}

.mo-tooltip--visible {
  opacity: 1;
}

/* ==========================================================================
   Toast
   ========================================================================== */

.mo-toast-container {
  position: fixed;
  top: var(--mo-space-4);
  right: var(--mo-space-4);
  z-index: var(--mo-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--mo-space-3);
  pointer-events: none;
}

.mo-toast {
  background-color: var(--mo-bg-elevated);
  border: var(--mo-border-width) solid var(--mo-border-base);
  border-radius: var(--mo-radius-md);
  box-shadow: var(--mo-shadow-4);
  padding: var(--mo-space-4);
  min-width: 300px;
  max-width: 400px;
  pointer-events: auto;
  display: flex;
  gap: var(--mo-space-3);
  align-items: start;
  transform: translateX(calc(100% + var(--mo-space-4)));
  transition: transform var(--mo-duration-normal) var(--mo-ease-spring);
}

.mo-toast--visible {
  transform: translateX(0);
}

.mo-toast__icon {
  font-size: var(--mo-text-xl);
  flex-shrink: 0;
}

.mo-toast--success .mo-toast__icon { color: var(--mo-color-success); }
.mo-toast--warning .mo-toast__icon { color: var(--mo-color-warning); }
.mo-toast--danger .mo-toast__icon { color: var(--mo-color-danger); }
.mo-toast--info .mo-toast__icon { color: var(--mo-color-info); }

.mo-toast__content {
  flex: 1;
}

.mo-toast__title {
  font-weight: var(--mo-font-semibold);
  margin-bottom: var(--mo-space-1);
  font-size: var(--mo-text-sm);
}

.mo-toast__message {
  font-size: var(--mo-text-sm);
  color: var(--mo-text-secondary);
}

.mo-toast__close {
  background: none;
  border: none;
  color: var(--mo-text-secondary);
  cursor: pointer;
  padding: 0;
  font-size: var(--mo-text-sm);
  flex-shrink: 0;
}

.mo-toast__close:hover {
  color: var(--mo-text-primary);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.mo-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--mo-space-2);
  flex-wrap: wrap;
  font-size: var(--mo-text-sm);
}

.mo-breadcrumbs__item {
  color: var(--mo-text-secondary);
  text-decoration: none;
  transition: color var(--mo-duration-fast);
}

.mo-breadcrumbs__item:hover {
  color: var(--mo-text-primary);
}

.mo-breadcrumbs__item--active {
  color: var(--mo-text-primary);
  pointer-events: none;
}

.mo-breadcrumbs__separator {
  color: var(--mo-text-tertiary);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.mo-pagination {
  display: flex;
  align-items: center;
  gap: var(--mo-space-2);
  list-style: none;
}

.mo-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--mo-space-2);
  font-size: var(--mo-text-sm);
  font-weight: var(--mo-font-medium);
  color: var(--mo-text-secondary);
  background: none;
  border: var(--mo-border-width) solid transparent;
  border-radius: var(--mo-radius-sm);
  cursor: pointer;
  transition: all var(--mo-duration-fast);
  text-decoration: none;
}

.mo-pagination__item:hover {
  background-color: var(--mo-bg-surface);
  color: var(--mo-text-primary);
}

.mo-pagination__item--active {
  background-color: var(--mo-color-primary);
  color: white;
  pointer-events: none;
}

.mo-pagination__item:disabled {
  opacity: var(--mo-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.mo-accordion {
  border: var(--mo-border-width) solid var(--mo-border-base);
  border-radius: var(--mo-radius-md);
  overflow: hidden;
}

.mo-accordion__item {
  border-bottom: var(--mo-border-width) solid var(--mo-border-base);
}

.mo-accordion__item:last-child {
  border-bottom: none;
}

.mo-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mo-space-4);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--mo-text-base);
  font-weight: var(--mo-font-medium);
  color: var(--mo-text-primary);
  cursor: pointer;
  transition: background-color var(--mo-duration-fast);
}

.mo-accordion__header:hover {
  background-color: var(--mo-bg-surface);
}

.mo-accordion__icon {
  transition: transform var(--mo-duration-fast);
}

.mo-accordion__header[aria-expanded="true"] .mo-accordion__icon {
  transform: rotate(180deg);
}

.mo-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--mo-duration-normal) var(--mo-ease-smooth);
}

.mo-accordion__content--open {
  max-height: 1000px;
}

.mo-accordion__body {
  padding: 0 var(--mo-space-4) var(--mo-space-4);
  color: var(--mo-text-secondary);
  font-size: var(--mo-text-sm);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.mo-form-group {
  margin-bottom: var(--mo-space-4);
}

.mo-label {
  display: block;
  font-size: var(--mo-text-sm);
  font-weight: var(--mo-font-medium);
  color: var(--mo-text-primary);
  margin-bottom: var(--mo-space-2);
}

.mo-label--required::after {
  content: '*';
  color: var(--mo-color-danger);
  margin-left: var(--mo-space-1);
}

.mo-input,
.mo-textarea,
.mo-select {
  width: 100%;
  padding: var(--mo-space-3);
  font-size: var(--mo-text-sm);
  color: var(--mo-text-primary);
  background-color: var(--mo-input-bg);
  border: var(--mo-border-width) solid var(--mo-input-border);
  border-radius: var(--mo-radius-md);
  transition: all var(--mo-duration-fast);
}

.mo-input:focus,
.mo-textarea:focus,
.mo-select:focus {
  outline: none;
  border-color: var(--mo-input-focus-border);
  box-shadow: 0 0 0 3px var(--mo-focus-ring-color);
}

.mo-input::placeholder,
.mo-textarea::placeholder {
  color: var(--mo-text-tertiary);
}

.mo-textarea {
  min-height: 100px;
  resize: vertical;
}

.mo-input--error,
.mo-textarea--error,
.mo-select--error {
  border-color: var(--mo-color-danger);
}

.mo-input--success {
  border-color: var(--mo-color-success);
}

.mo-help-text {
  display: block;
  font-size: var(--mo-text-xs);
  color: var(--mo-text-tertiary);
  margin-top: var(--mo-space-1);
}

.mo-help-text--error {
  color: var(--mo-color-danger);
}

.mo-help-text--success {
  color: var(--mo-color-success);
}

/* Input Group */
.mo-input-group {
  display: flex;
  align-items: stretch;
}

.mo-input-group .mo-input {
  border-radius: 0;
}

.mo-input-group .mo-input:first-child {
  border-top-left-radius: var(--mo-radius-md);
  border-bottom-left-radius: var(--mo-radius-md);
}

.mo-input-group .mo-input:last-child {
  border-top-right-radius: var(--mo-radius-md);
  border-bottom-right-radius: var(--mo-radius-md);
}

.mo-input-group__addon {
  display: flex;
  align-items: center;
  padding: var(--mo-space-3);
  font-size: var(--mo-text-sm);
  background-color: var(--mo-bg-surface);
  border: var(--mo-border-width) solid var(--mo-input-border);
  color: var(--mo-text-secondary);
}

.mo-input-group__addon:first-child {
  border-right: none;
  border-top-left-radius: var(--mo-radius-md);
  border-bottom-left-radius: var(--mo-radius-md);
}

.mo-input-group__addon:last-child {
  border-left: none;
  border-top-right-radius: var(--mo-radius-md);
  border-bottom-right-radius: var(--mo-radius-md);
}

/* Checkbox & Radio */
.mo-checkbox,
.mo-radio {
  display: flex;
  align-items: center;
  gap: var(--mo-space-2);
  cursor: pointer;
  font-size: var(--mo-text-sm);
}

.mo-checkbox input,
.mo-radio input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--mo-color-primary);
}

/* Switch */
.mo-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.mo-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mo-switch__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--mo-gray-300);
  border-radius: var(--mo-radius-pill);
  transition: background-color var(--mo-duration-fast);
}

.mo-switch__slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform var(--mo-duration-fast) var(--mo-ease-spring);
}

.mo-switch input:checked + .mo-switch__slider {
  background-color: var(--mo-color-primary);
}

.mo-switch input:checked + .mo-switch__slider::before {
  transform: translateX(20px);
}

.mo-switch input:focus-visible + .mo-switch__slider {
  box-shadow: 0 0 0 3px var(--mo-focus-ring-color);
}

/* Slider */
.mo-slider {
  width: 100%;
  height: 6px;
  border-radius: var(--mo-radius-pill);
  background-color: var(--mo-gray-300);
  outline: none;
  appearance: none;
}

.mo-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--mo-color-primary);
  cursor: pointer;
  transition: transform var(--mo-duration-fast);
}

.mo-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.mo-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--mo-color-primary);
  cursor: pointer;
  border: none;
  transition: transform var(--mo-duration-fast);
}

.mo-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
HTML Example:
<table class="mo-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Admin</td>
    </tr>
  </tbody>
</table>
*/

.mo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mo-text-sm);
}

.mo-table thead {
  background-color: var(--mo-bg-surface);
  border-bottom: var(--mo-border-width-2) solid var(--mo-border-strong);
}

.mo-table th {
  padding: var(--mo-space-3) var(--mo-space-4);
  text-align: left;
  font-weight: var(--mo-font-semibold);
  color: var(--mo-text-primary);
  white-space: nowrap;
}

.mo-table td {
  padding: var(--mo-space-3) var(--mo-space-4);
  border-bottom: var(--mo-border-width) solid var(--mo-border-base);
  color: var(--mo-text-secondary);
}

.mo-table tbody tr {
  transition: background-color var(--mo-duration-fast);
}

.mo-table tbody tr:hover {
  background-color: var(--mo-bg-surface);
}

.mo-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table Variants */
.mo-table--dense th,
.mo-table--dense td {
  padding: var(--mo-space-2) var(--mo-space-3);
}

.mo-table--comfortable th,
.mo-table--comfortable td {
  padding: var(--mo-space-4) var(--mo-space-6);
}

.mo-table--zebra tbody tr:nth-child(even) {
  background-color: var(--mo-bg-surface);
}

.mo-table--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--mo-bg-surface);
}

.mo-table tbody tr.mo-table__row--selected {
  background-color: var(--mo-color-info-light);
}

.mo-table__empty {
  padding: var(--mo-space-12) var(--mo-space-4);
  text-align: center;
  color: var(--mo-text-tertiary);
}

/* ==========================================================================
   DataTables Integration
   ========================================================================== */

/*
Usage Example:
<table id="example" class="mo-table mo-table--datatable">
  <!-- table content -->
</table>

<script>
  // Initialize DataTables
  const table = $('#example').DataTable({
    responsive: true,
    pageLength: 25
  });
  
  // Apply MnO theme
  MnO.datatables.enhance('#example');
</script>
*/

.mo-table--datatable {
  border: var(--mo-border-width) solid var(--mo-border-base);
  border-radius: var(--mo-radius-md);
  overflow: hidden;
}

.dataTables_wrapper {
  padding: var(--mo-space-4);
}

.dataTables_wrapper .dataTables_filter input {
  padding: var(--mo-space-2) var(--mo-space-3);
  border: var(--mo-border-width) solid var(--mo-input-border);
  border-radius: var(--mo-radius-md);
  font-size: var(--mo-text-sm);
  margin-left: var(--mo-space-2);
  background-color: var(--mo-input-bg);
  color: var(--mo-text-primary);
}

.dataTables_wrapper .dataTables_length select {
  padding: var(--mo-space-2) var(--mo-space-3);
  border: var(--mo-border-width) solid var(--mo-input-border);
  border-radius: var(--mo-radius-md);
  font-size: var(--mo-text-sm);
  margin: 0 var(--mo-space-2);
  background-color: var(--mo-input-bg);
  color: var(--mo-text-primary);
}

.dataTables_wrapper .dataTables_info {
  padding-top: var(--mo-space-4);
  font-size: var(--mo-text-sm);
  color: var(--mo-text-secondary);
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: var(--mo-space-4);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: var(--mo-space-2) var(--mo-space-3);
  margin-left: var(--mo-space-1);
  border-radius: var(--mo-radius-sm);
  font-size: var(--mo-text-sm);
  border: var(--mo-border-width) solid transparent;
  color: var(--mo-text-secondary) !important;
  background: none !important;
  transition: all var(--mo-duration-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--mo-bg-surface) !important;
  color: var(--mo-text-primary) !important;
  border-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--mo-color-primary) !important;
  color: white !important;
  border-color: var(--mo-color-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: var(--mo-opacity-disabled);
  cursor: not-allowed;
}

.dataTables_wrapper .dataTables_processing {
  background-color: var(--mo-bg-elevated);
  border: var(--mo-border-width) solid var(--mo-border-base);
  border-radius: var(--mo-radius-md);
  box-shadow: var(--mo-shadow-3);
  color: var(--mo-text-primary);
}

/* ==========================================================================
   SweetAlert2 Theme Override
   ========================================================================== */

/*
Usage Example:
<script>
  // Apply MnO theme to SweetAlert2
  MnO.swal.applyTheme();
  
  // Use SweetAlert2 with MnO styling
  Swal.fire({
    title: 'Success!',
    text: 'Your changes have been saved.',
    icon: 'success',
    confirmButtonText: 'Great!'
  });
</script>
*/

.swal2-popup {
  border-radius: var(--mo-radius-lg) !important;
  background-color: var(--mo-bg-elevated) !important;
  color: var(--mo-text-primary) !important;
}

.swal2-title {
  color: var(--mo-text-primary) !important;
  font-weight: var(--mo-font-semibold) !important;
}

.swal2-html-container {
  color: var(--mo-text-secondary) !important;
}

.swal2-confirm {
  background-color: var(--mo-color-primary) !important;
  border-radius: var(--mo-radius-md) !important;
  padding: var(--mo-space-3) var(--mo-space-6) !important;
  font-weight: var(--mo-font-medium) !important;
}

.swal2-cancel {
  background-color: var(--mo-bg-surface) !important;
  color: var(--mo-text-primary) !important;
  border: var(--mo-border-width) solid var(--mo-border-base) !important;
  border-radius: var(--mo-radius-md) !important;
  padding: var(--mo-space-3) var(--mo-space-6) !important;
  font-weight: var(--mo-font-medium) !important;
}

.swal2-icon {
  border-color: transparent !important;
}

/* ==========================================================================
   Utility Classes (Responsive)
   ========================================================================== */

@media (min-width: 768px) {
  .mo-md\:flex { display: flex; }
  .mo-md\:hidden { display: none; }
  .mo-md\:block { display: block; }
}

@media (min-width: 1024px) {
  .mo-lg\:flex { display: flex; }
  .mo-lg\:hidden { display: none; }
  .mo-lg\:block { display: block; }
}
/* === Fluid type & spacing (scales down on phones) === */
:root {
  /* fluid sizes driven by viewport width */
  --mo-fluid-step--1: clamp(12px, 0.8vw + 10px, 14px);
  --mo-fluid-step-0:  clamp(14px, 0.9vw + 11px, 16px);
  --mo-fluid-step-1:  clamp(16px, 1.0vw + 12px, 18px);
  --mo-fluid-step-2:  clamp(18px, 1.1vw + 13px, 24px);
  --mo-fluid-space:   clamp(12px, 2vw, 24px);
}
body { font-size: var(--mo-fluid-step-0); }

/* Respect iOS notches / safe areas */
.mo-sidebar,
.dashboard-header,
.dashboard-main {
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

/* Dark mode: stronger dropdown/menu contrast for readability */
[data-theme="dark"] .mo-dropdown__menu {
  background-color: #0f1115;
  border-color: #262b39;
}
[data-theme="dark"] .mo-dropdown__item {
  color: #e6e7ea;
}
[data-theme="dark"] .mo-dropdown__item:hover {
  background-color: #1a1e28;
}
/* === Footer (sticky on short pages, normal on long pages) === */
.app-has-footer {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.dashboard-main { flex: 1 0 auto; } /* lets the footer sit at the bottom */

.mo-footer {
  margin-top: auto;
  background: var(--mo-bg-elevated, #181b22);
  color: var(--mo-text-muted, #9aa3b2);
  border-top: 1px solid var(--mo-border-base, #2a2f3a);
  padding: clamp(14px, 2.5vw, 20px) 0;
  /* keep clear of notches */
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}

.mo-footer__inner {
  /* match your centered container width */
  width: min(1280px, 100% - clamp(24px, 4vw, 56px));
  margin-inline: auto;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 16px;
}

.mo-footer__brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.mo-footer__title {
  font-weight: 600;
  color: var(--mo-text-strong, #e6e7ea);
}
.mo-footer__meta {
  font-size: 0.9em;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mo-footer__nav {
  display: flex;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mo-footer__link {
  font-size: 0.95em;
  color: var(--mo-link, #9CDCFE);
  text-decoration: none;
}
.mo-footer__link:hover { text-decoration: underline; }

/* Mobile: stack neatly */
@media (max-width: 640px) {
  .mo-footer__inner {
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: 8px;
  }
  .mo-footer__nav { justify-content: start; }
}

.mo-swal-popup {
      border-radius: var(--mo-radius-lg) !important;
      background-color: var(--mo-bg-elevated) !important;
      color: var(--mo-text-primary) !important;
      padding: 2rem !important;
    }

    .mo-swal-title {
      color: var(--mo-text-primary) !important;
      font-weight: 600 !important;
      font-size: 1.5rem !important;
      margin-bottom: 0.5rem !important;
    }

    .mo-swal-text {
      color: var(--mo-text-secondary) !important;
      font-size: 1rem !important;
    }

    .mo-swal-confirm {
      background-color: var(--mo-color-primary) !important;
      color: white !important;
      border-radius: var(--mo-radius-md) !important;
      padding: 0.75rem 2rem !important;
      font-weight: 500 !important;
      border: none !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }

    .mo-swal-confirm:hover {
      background-color: var(--mo-color-primary-dark) !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .mo-swal-cancel {
      background-color: var(--mo-bg-surface) !important;
      color: var(--mo-text-primary) !important;
      border: 1px solid var(--mo-border-base) !important;
      border-radius: var(--mo-radius-md) !important;
      padding: 0.75rem 2rem !important;
      font-weight: 500 !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }

    .mo-swal-cancel:hover {
      background-color: var(--mo-gray-100) !important;
    }

    /* Dark mode adjustments */
    [data-theme="dark"] .mo-swal-popup {
      background-color: var(--mo-gray-800) !important;
    }

    [data-theme="dark"] .mo-swal-cancel {
      background-color: var(--mo-gray-700) !important;
    }

    [data-theme="dark"] .mo-swal-cancel:hover {
      background-color: var(--mo-gray-600) !important;
    }

    /* Icon colors */
    .swal2-icon.swal2-success {
      border-color: var(--mo-color-success) !important;
      color: var(--mo-color-success) !important;
    }

    .swal2-icon.swal2-error {
      border-color: var(--mo-color-danger) !important;
      color: var(--mo-color-danger) !important;
    }

    .swal2-icon.swal2-warning {
      border-color: var(--mo-color-warning) !important;
      color: var(--mo-color-warning) !important;
    }

    .swal2-icon.swal2-info {
      border-color: var(--mo-color-info) !important;
      color: var(--mo-color-info) !important;
    }

    .swal2-success-ring {
      border-color: var(--mo-color-success) !important;
    }

    [class^='swal2'] {
      border-color: transparent !important;
    }
    
    /* Error text styling */
    .error-text {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.5rem;
      padding: 0.75rem;
      background-color: rgba(239, 68, 68, 0.1);
      border-left: 3px solid #ef4444;
      border-radius: var(--mo-radius-md);
      color: #dc2626;
      font-size: 0.875rem;
      animation: slideDown 0.3s ease-out;
    }
    
    .error-text i {
      font-size: 1rem;
      flex-shrink: 0;
    }
    
    [data-theme="dark"] .error-text {
      background-color: rgba(239, 68, 68, 0.15);
      color: #fca5a5;
      border-left-color: #f87171;
    }
    
    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }