/* ═══════════════════════════════════════════════════════════════════
   StoryCut — Design Token System (Single Source of Truth)

   ALL colors, spacing, radius, shadows, and typography tokens live here.
   To rebrand: change values in this file ONLY — everything else inherits.

   Inspired by Linear / Raycast / Vercel premium design systems.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Mode-Independent Tokens (Brand + Layout) ────────────────────── */
:root {
    /* Brand / Primary — SAME in light and dark */
    --primary-rgb: 124, 92, 255;
    --sc-primary: #7C5CFF;
    --sc-primary-hover: #6A4DF4;
    --sc-primary-active: #5A3EEA;
    --sc-primary-glow: #9B7CFF;
    --sc-primary-soft: rgba(124, 92, 255, 0.12);
    --sc-primary-soft-hover: rgba(124, 92, 255, 0.18);
    --sc-primary-shadow: rgba(124, 92, 255, 0.25);

    /* Gradient signature */
    --sc-gradient: linear-gradient(135deg, #7C5CFF, #9B7CFF);
    --sc-gradient-hover: linear-gradient(135deg, #6A4DF4, #8B6CFF);

    /* Feedback — SAME in both modes */
    --sc-success: #22C55E;
    --sc-success-soft: rgba(34, 197, 94, 0.12);
    --sc-error: #EF4444;
    --sc-error-soft: rgba(239, 68, 68, 0.12);
    --sc-warning: #F59E0B;
    --sc-warning-soft: rgba(245, 158, 11, 0.12);

    /* Radius System */
    --sc-radius-xs: 6px;
    --sc-radius-sm: 8px;
    --sc-radius-md: 10px;
    --sc-radius-lg: 12px;
    --sc-radius-xl: 16px;
    --sc-radius-2xl: 20px;
    --sc-radius-full: 999px;

    /* Spacing System (strict multiples) */
    --sc-space-1: 4px;
    --sc-space-2: 8px;
    --sc-space-3: 12px;
    --sc-space-4: 16px;
    --sc-space-6: 24px;
    --sc-space-8: 32px;
    --sc-space-12: 48px;
    --sc-space-16: 64px;

    /* Typography */
    --sc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --sc-font-display: 48px;
    --sc-font-h1: 36px;
    --sc-font-h2: 28px;
    --sc-font-h3: 20px;
    --sc-font-body: 14px;
    --sc-font-small: 12px;

    /* Shadows */
    --sc-shadow-sm: 0px 4px 14px rgba(0, 0, 0, 0.16);
    --sc-shadow-md: 0px 10px 30px rgba(0, 0, 0, 0.25);
    --sc-shadow-glow: 0 0 20px rgba(124, 92, 255, 0.25);

    /* Component Heights */
    --sc-height-input: 42px;
    --sc-height-topbar: 64px;
    --sc-height-sidebar-item: 40px;
    --sc-height-icon-btn: 36px;
}

/* ─── Light Mode Tokens ───────────────────────────────────────────── */
:root,
[data-mantine-color-scheme="light"] {
    --sc-bg: #FFFFFF;
    --sc-surface: #F6F6F8;
    --sc-surface-hover: #EEEEF2;
    --sc-surface-elevated: #FFFFFF;
    --sc-border: #E4E4E7;
    --sc-border-subtle: rgba(0, 0, 0, 0.06);
    --sc-text: #09090B;
    --sc-text-secondary: #52525B;
    --sc-text-muted: #A1A1AA;
    --sc-overlay: rgba(0, 0, 0, 0.5);
    --sc-bg-hover: rgba(0, 0, 0, 0.02);
    --sc-bg-active: rgba(0, 0, 0, 0.04);
    --sc-dot-pattern: rgba(0, 0, 0, 0.08);
    --sc-upload-gradient: linear-gradient(135deg, #F5F3FF 0%, #F0EEFF 50%, #F0F9FF 100%);
    --sc-overlay-btn-bg: rgba(255, 255, 255, 0.9);
    --sc-overlay-btn-text: #09090B;
    --sc-overlay-btn-border: rgba(0, 0, 0, 0.1);
    --sc-overlay-btn-shadow: rgba(0, 0, 0, 0.15);
    --sc-sidebar-active-bg: rgba(124, 92, 255, 0.08);
    --sc-toggle-off: #D4D4D8;
    --sc-input-placeholder: #A1A1AA;
    --sc-timeline-bg: #F3F4F6;
    --sc-timeline-clip: #EEEEF2;
    --sc-timeline-clip-border: #E4E4E7;
    --sc-card-hover-transform: translateY(-2px);
    --sc-scrollbar-thumb: rgba(0, 0, 0, 0.15);
    --sc-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
}

/* ─── Dark Mode Tokens ────────────────────────────────────────────── */
[data-mantine-color-scheme="dark"] {
    --sc-bg: #0F0F14;
    --sc-surface: #18181F;
    --sc-surface-hover: #1F1F27;
    --sc-surface-elevated: #1F1F27;
    --sc-border: #26262F;
    --sc-border-subtle: rgba(255, 255, 255, 0.06);
    --sc-text: #F5F5F7;
    --sc-text-secondary: #A1A1AA;
    --sc-text-muted: #6B6B75;
    --sc-overlay: rgba(0, 0, 0, 0.6);
    --sc-bg-hover: rgba(255, 255, 255, 0.04);
    --sc-bg-active: rgba(255, 255, 255, 0.07);
    --sc-dot-pattern: rgba(255, 255, 255, 0.06);
    --sc-upload-gradient: linear-gradient(135deg, #1A1525 0%, #1A1830 50%, #141825 100%);
    --sc-overlay-btn-bg: rgba(255, 255, 255, 0.12);
    --sc-overlay-btn-text: rgba(255, 255, 255, 0.9);
    --sc-overlay-btn-border: rgba(255, 255, 255, 0.15);
    --sc-overlay-btn-shadow: rgba(0, 0, 0, 0.3);
    --sc-sidebar-active-bg: rgba(124, 92, 255, 0.15);
    --sc-toggle-off: #26262F;
    --sc-input-placeholder: #6B6B75;
    --sc-timeline-bg: #141419;
    --sc-timeline-clip: #2A2A33;
    --sc-timeline-clip-border: #34343D;
    --sc-card-hover-transform: translateY(-2px);
    --sc-scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --sc-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
}

/* ─── Backward-Compat Aliases ───────────────────────────────────────
   Maps old variable names → new tokens so existing CSS keeps working
   while we migrate. Can be removed once migration is complete. */
:root,
[data-mantine-color-scheme="light"] {
    --primary-color: var(--sc-primary);
    --primary-hover: var(--sc-primary-hover);
    --primary-light: var(--sc-primary-soft);
    --primary-light-hover: var(--sc-primary-soft-hover);
    --primary-light-color: var(--sc-primary);
    /* Purple shade aliases used by inline gradients (Export button, etc.) */
    --primary-0: #F3EEFF;
    --primary-1: #E5DEFF;
    --primary-2: #C9B8FF;
    --primary-3: #AD93FF;
    --primary-4: #9B7CFF;
    --primary-5: #8A6BFF;
    --primary-6: #7C5CFF;
    --primary-7: #6A4DF4;
    --primary-8: #5A3EEA;
    --primary-9: #4A2ED4;
    --success-color: var(--sc-success);
    --warning-color: var(--sc-warning);
    --danger-color: var(--sc-error);
    --text-primary: var(--sc-text);
    --text-secondary: var(--sc-text-secondary);
    --text-tertiary: var(--sc-text-muted);
    --bg-primary: var(--sc-bg);
    --bg-secondary: var(--sc-surface);
    --bg-tertiary: var(--sc-surface-hover);
    --border-color: var(--sc-border);
    --border-radius: var(--sc-radius-md);
    --border-radius-lg: var(--sc-radius-lg);
    --border-radius-xl: var(--sc-radius-xl);
    --app-surface: var(--sc-bg);
    --app-surface-alt: var(--sc-surface);
    --app-surface-dim: var(--sc-surface-hover);
    --app-text: var(--sc-text);
    --app-text-secondary: var(--sc-text-secondary);
    --app-text-dimmed: var(--sc-text-muted);
    --app-border: var(--sc-border);
    --app-border-light: var(--sc-border);
    --app-border-subtle: var(--sc-border-subtle);
    --app-border-subtler: var(--sc-border-subtle);
    --app-bg-hover: var(--sc-bg-hover);
    --app-bg-active: var(--sc-bg-active);
    --app-shadow-subtle: rgba(0, 0, 0, 0.06);
    --app-overlay-btn-bg: var(--sc-overlay-btn-bg);
    --app-overlay-btn-text: var(--sc-overlay-btn-text);
    --app-overlay-btn-border: var(--sc-overlay-btn-border);
    --app-overlay-btn-shadow: var(--sc-overlay-btn-shadow);
    --app-dot-pattern: var(--sc-dot-pattern);
    --app-upload-gradient: var(--sc-upload-gradient);
}

[data-mantine-color-scheme="dark"] {
    --primary-color: var(--sc-primary);
    --primary-hover: var(--sc-primary-hover);
    --primary-light: var(--sc-primary-soft);
    --primary-light-hover: var(--sc-primary-soft-hover);
    --primary-light-color: var(--sc-primary);
    /* Purple shade aliases (same in both modes) */
    --primary-0: #F3EEFF;
    --primary-1: #E5DEFF;
    --primary-2: #C9B8FF;
    --primary-3: #AD93FF;
    --primary-4: #9B7CFF;
    --primary-5: #8A6BFF;
    --primary-6: #7C5CFF;
    --primary-7: #6A4DF4;
    --primary-8: #5A3EEA;
    --primary-9: #4A2ED4;
    --success-color: var(--sc-success);
    --warning-color: var(--sc-warning);
    --danger-color: var(--sc-error);
    --text-primary: var(--sc-text);
    --text-secondary: var(--sc-text-secondary);
    --text-tertiary: var(--sc-text-muted);
    --bg-primary: var(--sc-bg);
    --bg-secondary: var(--sc-surface);
    --bg-tertiary: var(--sc-surface-hover);
    --border-color: var(--sc-border);
    --app-surface: var(--sc-surface);
    --app-surface-alt: var(--sc-bg);
    --app-surface-dim: var(--sc-surface-hover);
    --app-text: var(--sc-text);
    --app-text-secondary: var(--sc-text-secondary);
    --app-text-dimmed: var(--sc-text-muted);
    --app-border: var(--sc-border);
    --app-border-light: var(--sc-surface-hover);
    --app-border-subtle: var(--sc-border-subtle);
    --app-border-subtler: var(--sc-border-subtle);
    --app-bg-hover: var(--sc-bg-hover);
    --app-bg-active: var(--sc-bg-active);
    --app-shadow-subtle: rgba(0, 0, 0, 0.2);
    --app-overlay-btn-bg: var(--sc-overlay-btn-bg);
    --app-overlay-btn-text: var(--sc-overlay-btn-text);
    --app-overlay-btn-border: var(--sc-overlay-btn-border);
    --app-overlay-btn-shadow: var(--sc-overlay-btn-shadow);
    --app-dot-pattern: var(--sc-dot-pattern);
    --app-upload-gradient: var(--sc-upload-gradient);
}

.m_b37d9ac7 {
  width: calc(100% - var(--mantine-spacing-md) * 2);
  position: fixed;
  z-index: var(--notifications-z-index);
  max-width: var(--notifications-container-width);
}

  .m_b37d9ac7:where([data-position='top-center']) {
    top: var(--mantine-spacing-md);
    left: 50%;
    transform: translateX(-50%);
  }

  .m_b37d9ac7:where([data-position='top-left']) {
    top: var(--mantine-spacing-md);
    left: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='top-right']) {
    top: var(--mantine-spacing-md);
    right: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='bottom-center']) {
    bottom: var(--mantine-spacing-md);
    left: 50%;
    transform: translateX(-50%);
  }

  .m_b37d9ac7:where([data-position='bottom-left']) {
    bottom: var(--mantine-spacing-md);
    left: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='bottom-right']) {
    bottom: var(--mantine-spacing-md);
    right: var(--mantine-spacing-md);
  }

.m_5ed0edd0 + .m_5ed0edd0 {
    margin-top: var(--mantine-spacing-md);
  }

.m_468e7eda {
  padding-top: 0;
  padding-bottom: 0;
  appearance: none;
}

  .m_468e7eda::-webkit-calendar-picker-indicator {
    display: none;
  }

  .m_468e7eda::-webkit-clear-button {
    display: none;
  }

  .m_468e7eda::-webkit-datetime-edit-hour-field,
  .m_468e7eda::-webkit-datetime-edit-minute-field,
  .m_468e7eda::-webkit-datetime-edit-second-field,
  .m_468e7eda::-webkit-datetime-edit-ampm-field {
    padding-top: 0;
    max-height: calc(1.875rem * var(--mantine-scale));
    display: inline;
  }

  .m_468e7eda::-webkit-datetime-edit-hour-field:focus, .m_468e7eda::-webkit-datetime-edit-minute-field:focus, .m_468e7eda::-webkit-datetime-edit-second-field:focus, .m_468e7eda::-webkit-datetime-edit-ampm-field:focus {
      background-color: var(--mantine-primary-color-filled);
      color: var(--mantine-color-white);
    }

.m_7a8f1e6d {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

  :where([dir="rtl"]) .m_7a8f1e6d {
    flex-direction: row-reverse;
}

.m_d6bb0a54 {
  display: flex;
  align-items: center;
  height: calc(var(--input-height) - 15px);
}

.m_b97ecb26 {
  display: flex;
  flex-direction: column;
}

.m_31fe42f9 {
  display: flex;
  gap: calc(0.25rem * var(--mantine-scale));
}

.m_9c4817c3 {
  padding: calc(0.25rem * var(--mantine-scale));
}

.m_154c536b {
  text-align: center;
  width: 2.5em;
  height: 2em;
  border-radius: var(--mantine-radius-default);
  font-size: var(--control-font-size, var(--mantine-font-size-sm));
}

.m_154c536b:where([data-active]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
  }

@media (hover: hover) {
    .m_154c536b:hover:where(:not([data-active])) {
      color: var(--mantine-color-bright);
    }

      :where([data-mantine-color-scheme='dark']) .m_154c536b:hover:where(:not([data-active])) {
        background-color: var(--mantine-color-dark-5);
  }

      :where([data-mantine-color-scheme='light']) .m_154c536b:hover:where(:not([data-active])) {
        background-color: var(--mantine-color-gray-1);
  }
}

@media (hover: none) {
    .m_154c536b:active:where(:not([data-active])) {
      color: var(--mantine-color-bright);
    }

      :where([data-mantine-color-scheme='dark']) .m_154c536b:active:where(:not([data-active])) {
        background-color: var(--mantine-color-dark-5);
  }

      :where([data-mantine-color-scheme='light']) .m_154c536b:active:where(:not([data-active])) {
        background-color: var(--mantine-color-gray-1);
  }
}

.m_7be09d0c {
  text-align: center;
  height: 2em;
  padding-inline: 0.5em;
  border-radius: var(--mantine-radius-default);
  font-size: var(--control-font-size, var(--mantine-font-size-sm));
}

.m_7be09d0c:where([data-active]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
  }

@media (hover: hover) {
    .m_7be09d0c:hover:where(:not([data-active])) {
      color: var(--mantine-color-bright);
    }

      :where([data-mantine-color-scheme='dark']) .m_7be09d0c:hover:where(:not([data-active])) {
        background-color: var(--mantine-color-dark-5);
  }

      :where([data-mantine-color-scheme='light']) .m_7be09d0c:hover:where(:not([data-active])) {
        background-color: var(--mantine-color-gray-1);
  }
}

@media (hover: none) {
    .m_7be09d0c:active:where(:not([data-active])) {
      color: var(--mantine-color-bright);
    }

      :where([data-mantine-color-scheme='dark']) .m_7be09d0c:active:where(:not([data-active])) {
        background-color: var(--mantine-color-dark-5);
  }

      :where([data-mantine-color-scheme='light']) .m_7be09d0c:active:where(:not([data-active])) {
        background-color: var(--mantine-color-gray-1);
  }
}

.m_7d00001d + .m_7d00001d {
    margin-top: var(--mantine-spacing-sm);
  }

.m_d8d918d7 {
  margin-bottom: calc(0.25rem * var(--mantine-scale));
  color: var(--mantine-color-dimmed);
  font-size: calc(var(--control-font-size, var(--mantine-font-size-sm)) - 2px);
  font-weight: 500;
  display: flex;
  align-items: center;
  padding-inline-start: calc(0.4375rem * var(--mantine-scale));
}

.m_d8d918d7::after {
    content: '';
    width: 100%;
    height: calc(0.0625rem * var(--mantine-scale));
    flex: 1;
    margin-inline-start: var(--mantine-spacing-xs);
  }

:where([data-mantine-color-scheme='light']) .m_d8d918d7::after {
      background-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_d8d918d7::after {
      background-color: var(--mantine-color-dark-4);
}

.m_6b43ba88 {
  width: calc(2ch + 0.3em);
  caret-color: transparent;
  font-variant-numeric: tabular-nums;
  position: relative;
  height: 100%;
  line-height: 1;
  padding-inline: 0.15em;
  border: 0;
  text-align: center;
  text-align-last: center;
  background-color: transparent;
  color: var(--input-color);
  border-radius: calc(0.125rem * var(--mantine-scale));
  appearance: none;
}

.m_6b43ba88:where([data-am-pm]) {
    width: calc(3ch + 0.3em);
  }

.m_6b43ba88:where(:disabled) {
    cursor: not-allowed;
  }

.m_6b43ba88::selection {
    background-color: transparent;
  }

.m_6b43ba88::placeholder {
    opacity: 1;
    color: inherit;
  }

.m_6b43ba88:focus {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
    outline: 0;
  }

.m_6b43ba88:focus::placeholder {
      color: var(--mantine-color-white);
    }

.m_396ce5cb {
  --day-size-xs: calc(1.875rem * var(--mantine-scale));
  --day-size-sm: calc(2.25rem * var(--mantine-scale));
  --day-size-md: calc(2.625rem * var(--mantine-scale));
  --day-size-lg: calc(3rem * var(--mantine-scale));
  --day-size-xl: calc(3.375rem * var(--mantine-scale));
  --day-size: var(--day-size-sm);

  width: var(--day-size, var(--day-size-sm));
  height: var(--day-size, var(--day-size-sm));
  font-size: calc(var(--day-size) / 2.8);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  background-color: transparent;
  border-radius: var(--mantine-radius-default);
  color: var(--mantine-color-text);
  opacity: 1;
}

  @media (hover: hover) {
      [data-mantine-color-scheme='light'] .m_396ce5cb:hover:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
        background-color: var(--mantine-color-gray-0);
  }

      [data-mantine-color-scheme='dark'] .m_396ce5cb:hover:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
        background-color: var(--mantine-color-dark-5);
  }
}

  @media (hover: none) {
      [data-mantine-color-scheme='light'] .m_396ce5cb:active:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
        background-color: var(--mantine-color-gray-0);
  }

      [data-mantine-color-scheme='dark'] .m_396ce5cb:active:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
        background-color: var(--mantine-color-dark-5);
  }
}

  .m_396ce5cb:where([data-static]) {
    user-select: auto;
    cursor: default;
  }

  .m_396ce5cb:where([data-weekend]) {
    color: var(--mantine-color-red-6);
  }

  .m_396ce5cb:where([data-outside]) {
    color: var(--mantine-color-dimmed);
    opacity: 0.5;
  }

  .m_396ce5cb:where(:disabled, [data-disabled]) {
    color: var(--mantine-color-disabled-color);
    cursor: not-allowed;
    opacity: 0.5;
  }

  .m_396ce5cb:where([data-hidden]) {
    display: none;
  }

  :where([data-mantine-color-scheme='light']) .m_396ce5cb:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) {
      border: 1px solid var(--mantine-color-gray-4);
}

  :where([data-mantine-color-scheme='dark']) .m_396ce5cb:where([data-today][data-highlight-today]:not([data-selected], [data-in-range])) {
      border: 1px solid var(--mantine-color-dark-4);
}

  .m_396ce5cb:where([data-in-range]) {
    background-color: var(--mantine-primary-color-light-hover);
    border-radius: 0;
  }

  @media (hover: hover) {
      .m_396ce5cb:where([data-in-range]):hover:where(:not([data-disabled], [data-static])) {
        background-color: var(--mantine-primary-color-light);
      }
}

  @media (hover: none) {
      .m_396ce5cb:where([data-in-range]):active:where(:not([data-disabled], [data-static])) {
        background-color: var(--mantine-primary-color-light);
      }
}

  .m_396ce5cb:where([data-first-in-range]) {
    border-radius: 0;
    border-start-start-radius: var(--mantine-radius-default);
    border-end-start-radius: var(--mantine-radius-default);
  }

  .m_396ce5cb:where([data-last-in-range]) {
    border-radius: 0;
    border-end-end-radius: var(--mantine-radius-default);
    border-start-end-radius: var(--mantine-radius-default);
  }

  .m_396ce5cb:where([data-last-in-range][data-first-in-range]) {
    border-radius: var(--mantine-radius-default);
  }

  .m_396ce5cb:where([data-selected]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-contrast);
  }

  @media (hover: hover) {
      .m_396ce5cb:where([data-selected]):hover:where(:not([data-disabled], [data-static])) {
        background-color: var(--mantine-primary-color-filled-hover);
      }
}

  @media (hover: none) {
      .m_396ce5cb:where([data-selected]):active:where(:not([data-disabled], [data-static])) {
        background-color: var(--mantine-primary-color-filled-hover);
      }
}

.m_18a3eca {
  color: var(--mantine-color-dimmed);
  font-weight: normal;
  font-size: var(--wr-fz, var(--mantine-font-size-sm));
  text-transform: capitalize;
  padding-bottom: calc(var(--wr-spacing, var(--mantine-spacing-sm)) / 2);
}

.m_cc9820d3 {
  border-collapse: collapse;
  table-layout: fixed;
}

.m_8f457cd5 {
  padding: 0;
}

.m_8f457cd5:where([data-with-spacing]) {
    padding: calc(0.03125rem * var(--mantine-scale));
  }

.m_6cff9dea {
  --wn-size-xs: calc(1.875rem * var(--mantine-scale));
  --wn-size-sm: calc(2.25rem * var(--mantine-scale));
  --wn-size-md: calc(2.625rem * var(--mantine-scale));
  --wn-size-lg: calc(3rem * var(--mantine-scale));
  --wn-size-xl: calc(3.375rem * var(--mantine-scale));

  color: var(--mantine-color-dimmed);
  font-weight: normal;
  font-size: calc(var(--wn-size, var(--wn-size-sm)) / 2.8);
  text-align: center;
  width: var(--wn-size, var(--wn-size-sm));
}

.m_dc6a3c71 {
  --dpc-size-xs: calc(1.875rem * var(--mantine-scale));
  --dpc-size-sm: calc(2.25rem * var(--mantine-scale));
  --dpc-size-md: calc(2.625rem * var(--mantine-scale));
  --dpc-size-lg: calc(3rem * var(--mantine-scale));
  --dpc-size-xl: calc(3.375rem * var(--mantine-scale));
  --dpc-size: var(--dpc-size-sm);

  font-size: var(--dpc-fz, var(--mantine-font-size-sm));
  height: var(--dpc-size);
  width: calc((var(--dpc-size) * 7) / 3 + calc(0.09375rem * var(--mantine-scale)));
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
  background-color: transparent;
  color: var(--mantine-color-text);
  opacity: 1;
  border-radius: var(--mantine-radius-default);
}

  @media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_dc6a3c71:hover:where(:not([data-disabled], :disabled)) {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_dc6a3c71:hover:where(:not([data-disabled], :disabled)) {
        background-color: var(--mantine-color-dark-5);
  }
}

  @media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_dc6a3c71:active:where(:not([data-disabled], :disabled)) {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_dc6a3c71:active:where(:not([data-disabled], :disabled)) {
        background-color: var(--mantine-color-dark-5);
  }
}

  .m_dc6a3c71:where(:disabled, [data-disabled]) {
    color: var(--mantine-color-disabled-color);
    cursor: not-allowed;
    opacity: 0.5;
  }

  .m_dc6a3c71:where([data-selected]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-primary-color-contrast, var(--mantine-color-white));
  }

  @media (hover: hover) {

  .m_dc6a3c71:where([data-selected]):hover {
      background-color: var(--mantine-primary-color-filled-hover);
  }
}

  @media (hover: none) {

  .m_dc6a3c71:where([data-selected]):active {
      background-color: var(--mantine-primary-color-filled-hover);
  }
}

  .m_dc6a3c71:where([data-in-range]) {
    background-color: var(--mantine-primary-color-light-hover);
    border-radius: 0;
  }

  @media (hover: hover) {

  .m_dc6a3c71:where([data-in-range]):hover {
      background-color: var(--mantine-primary-color-light);
  }
}

  @media (hover: none) {

  .m_dc6a3c71:where([data-in-range]):active {
      background-color: var(--mantine-primary-color-light);
  }
}

  .m_dc6a3c71:where([data-first-in-range]) {
    border-radius: 0;
    border-start-start-radius: var(--mantine-radius-default);
    border-end-start-radius: var(--mantine-radius-default);
  }

  .m_dc6a3c71:where([data-last-in-range]) {
    border-radius: 0;
    border-end-end-radius: var(--mantine-radius-default);
    border-start-end-radius: var(--mantine-radius-default);
  }

  .m_dc6a3c71:where([data-first-in-range][data-last-in-range]) {
    border-radius: var(--mantine-radius-default);
  }

.m_9206547b {
  border-collapse: collapse;
  border-width: 0;
}

.m_c5a19c7d {
  padding: 0;
}

.m_c5a19c7d:where([data-with-spacing]) {
    padding: calc(0.03125rem * var(--mantine-scale));
  }

.m_2a6c32d {
  border-collapse: collapse;
  border-width: 0;
  cursor: pointer;
}

.m_fe27622f {
  padding: 0;
}

.m_fe27622f:where([data-with-spacing]) {
    padding: calc(0.03125rem * var(--mantine-scale));
  }

.m_730a79ed {
  --dch-control-size-xs: calc(1.875rem * var(--mantine-scale));
  --dch-control-size-sm: calc(2.25rem * var(--mantine-scale));
  --dch-control-size-md: calc(2.625rem * var(--mantine-scale));
  --dch-control-size-lg: calc(3rem * var(--mantine-scale));
  --dch-control-size-xl: calc(3.375rem * var(--mantine-scale));
  --dch-control-size: var(--dch-control-size-sm);

  display: flex;
  max-width: calc(var(--dch-control-size) * 8 + calc(0.4375rem * var(--mantine-scale)));
  margin-bottom: var(--mantine-spacing-xs);
}

.m_f6645d97,
.m_2351eeb0 {
  height: var(--dch-control-size);
  border-radius: var(--mantine-radius-default);
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  opacity: 1;
  cursor: pointer;
}

.m_f6645d97:where([data-static]), .m_2351eeb0:where([data-static]) {
    cursor: default;
  }

@media (hover: hover) {
      [data-mantine-color-scheme='light'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) {
        background-color: var(--mantine-color-gray-0);
  }

      [data-mantine-color-scheme='dark'] .m_f6645d97:hover:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:hover:where(:not([data-disabled], [data-static], :disabled)) {
        background-color: var(--mantine-color-dark-5);
  }
}

@media (hover: none) {
      [data-mantine-color-scheme='light'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='light'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) {
        background-color: var(--mantine-color-gray-0);
  }

      [data-mantine-color-scheme='dark'] .m_f6645d97:active:where(:not([data-disabled], [data-static], :disabled)), [data-mantine-color-scheme='dark'] .m_2351eeb0:active:where(:not([data-disabled], [data-static], :disabled)) {
        background-color: var(--mantine-color-dark-5);
  }
}

.m_f6645d97:where(:disabled, [data-disabled]), .m_2351eeb0:where(:disabled, [data-disabled]) {
    opacity: 0.2;
    cursor: not-allowed;
  }

.m_2351eeb0 {
  width: var(--dch-control-size);
}

.m_f6645d97 {
  flex: 1;
  font-size: var(--dch-fz, var(--mantine-font-size-sm));
  font-weight: 500;
  text-transform: capitalize;
}

.m_367dc749 {
  width: 60%;
  height: 60%;
}

.m_367dc749:where([data-direction='next']) {
    transform: rotate(270deg);
  }

:where([dir="rtl"]) .m_367dc749:where([data-direction='next']) {
      transform: rotate(90deg);
}

.m_367dc749:where([data-direction='previous']) {
    transform: rotate(90deg);
  }

:where([dir="rtl"]) .m_367dc749:where([data-direction='previous']) {
      transform: rotate(270deg);
}

.m_30b26e33 {
  display: flex;
  gap: var(--mantine-spacing-md);
}

.m_6fa5e2aa {
  cursor: pointer;
  line-height: unset;
}

  .m_6fa5e2aa:where([data-read-only]) {
    cursor: default;
  }

.m_765a40cf {
  display: flex;
  font-size: var(--preset-font-size);
}

.m_d6a681e1 {
  display: flex;
  flex-direction: column;
  border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid;
  padding-inline-end: 0.5em;
  margin-inline-end: 0.5em;
}

:where([data-mantine-color-scheme='light']) .m_d6a681e1 {
    border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_d6a681e1 {
    border-color: var(--mantine-color-dark-5);
}

.m_acd30b22 {
  padding: 0.52em 0.8em;
  border-radius: var(--mantine-radius-default);
  font-size: var(--preset-font-size);
  white-space: nowrap;
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_acd30b22:hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_acd30b22:hover {
      background-color: var(--mantine-color-dark-5);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_acd30b22:active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_acd30b22:active {
      background-color: var(--mantine-color-dark-5);
  }
}

.m_208d2562 {
  display: flex;
  align-items: stretch;
  margin-top: var(--mantine-spacing-md);
}

.m_62ee059 {
  flex: 1;
  margin-inline-end: var(--mantine-spacing-md);
}

.m_ac3f4d63 {
  text-align: center;
  padding-inline: 1em;
  padding-block: 0.25em;
  border: 1px solid var(--mantine-color-default-border);
  background-color: var(--mantine-color-default);
  color: var(--mantine-color-default-color);
  border-radius: var(--time-grid-radius, var(--mantine-radius-default));
  font-size: var(--time-grid-fz, var(--mantine-font-size-sm));
}

  @media (hover: hover) {
    .m_ac3f4d63:hover:where(:not([data-disabled])) {
      background-color: var(--mantine-color-default-hover);
    }
}

  @media (hover: none) {
    .m_ac3f4d63:active:where(:not([data-disabled])) {
      background-color: var(--mantine-color-default-hover);
    }
}

  .m_ac3f4d63:where([data-active]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
    border-color: transparent;
  }

  @media (hover: hover) {
      .m_ac3f4d63:where([data-active]):hover:where(:not([data-disabled])) {
        background-color: var(--mantine-primary-color-filled-hover);
      }
}

  @media (hover: none) {
      .m_ac3f4d63:where([data-active]):active:where(:not([data-disabled])) {
        background-color: var(--mantine-primary-color-filled-hover);
      }
}

  .m_ac3f4d63:where(:disabled, [data-disabled]) {
    opacity: 0.5;
    cursor: not-allowed;
  }