/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: rotateX(0);
      --tw-rotate-y: rotateY(0);
      --tw-rotate-z: rotateZ(0);
      --tw-skew-x: skewX(0);
      --tw-skew-y: skewY(0);
      --tw-scroll-snap-strictness: proximity;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-amber-300: oklch(.879 .169 91.605);
    --color-amber-500: oklch(.769 .188 70.08);
    --color-amber-600: oklch(.666 .179 58.318);
    --color-gray-100: oklch(.967 .003 264.542);
    --color-gray-200: oklch(.928 .006 264.531);
    --color-gray-500: oklch(.551 .027 264.364);
    --color-gray-600: oklch(.446 .03 256.802);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-xl: 24px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(--font-sans--font-variation-settings);
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  body {
    line-height: inherit;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
    color: currentColor;
  }

  @supports (color: color-mix(in lab, red, red)) {
    ::placeholder {
      color: color-mix(in oklab, currentColor 50%, transparent);
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  html {
    touch-action: pan-y;
    -ms-touch-action: pan-y;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, SF Pro Display, SF Pro Text, Helvetica Neue, sans-serif;
    overflow: hidden auto;
  }

  #root, .app-container {
    width: 100%;
    max-width: 100vw;
    min-height: 100dvh;
    overflow: hidden auto;
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
  }

  #root *, .app-container * {
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
  }

  [lang="ar"], [lang="ar"] * {
    letter-spacing: .01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga" 1, "calt" 1;
    font-family: Tajawal, -apple-system, BlinkMacSystemFont, SF Arabic, Segoe UI, Droid Arabic Naskh, Arabic Typesetting, sans-serif;
  }

  [lang="ar"] * {
    line-height: 1.75;
  }

  [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5, [lang="ar"] h6 {
    line-height: 1.4;
  }

  [lang="ar"] p, [lang="ar"] span:not(.text-2xl):not(.text-xl):not(.text-lg) {
    word-spacing: .1em;
  }

  [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5, [lang="ar"] h6 {
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.6;
  }

  [lang="ar"] button, [lang="ar"] label {
    font-weight: 500;
    line-height: 1.6;
  }

  [lang="ar"] p, [lang="ar"] input, [lang="ar"] textarea {
    font-weight: 400;
    line-height: 1.8;
  }

  [lang="ar"] [role="menuitem"], [lang="ar"] [data-slot="dropdown-menu-item"] {
    text-align: right;
    direction: rtl;
  }

  [lang="ar"] [data-slot="dropdown-menu-item"] > svg {
    margin-left: .5rem;
    margin-right: 0;
  }

  [dir="rtl"] [data-slot="avatar"] {
    flex-shrink: 0;
  }

  [dir="rtl"] [data-slot="avatar-image"] {
    object-fit: cover;
  }

  [dir="rtl"] [data-slot="switch"] {
    direction: ltr;
  }

  [lang="ar"] .space-x-3 > * + *, [lang="ar"] .space-x-reverse > * + * {
    margin-left: 0;
    margin-right: .75rem;
  }

  [lang="ar"] [dir="rtl"] .flex.items-center {
    gap: .75rem;
  }

  [lang="ar"] .text-sm, [lang="ar"] .text-xs {
    line-height: 1.6;
  }

  [lang="ar"] .rounded-full {
    padding-left: .875rem;
    padding-right: .875rem;
  }

  [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    text-align: right;
  }

  [lang="ar"] {
    font-variant-numeric: lining-nums tabular-nums;
  }

  [lang="ar"] input[type="number"], [lang="ar"] .text-2xl, [lang="ar"] .text-xl, [lang="ar"] .text-lg {
    font-feature-settings: "tnum" 1;
  }

  .rtl-calendar, .rtl-calendar .rdp {
    direction: rtl;
  }

  .rtl-calendar .rdp-caption_label {
    text-align: center;
  }

  .rtl-calendar .rdp-nav_button_previous {
    left: auto;
    right: .25rem;
  }

  .rtl-calendar .rdp-nav_button_next {
    left: .25rem;
    right: auto;
  }

  .rtl-calendar .rdp-head_row, .rtl-calendar .rdp-row {
    direction: rtl;
  }

  [lang="ar"] .rdp-caption_label {
    letter-spacing: 0;
    font-weight: 700;
  }

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

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

  [dir="rtl"] .pl-1 {
    padding-left: 0;
    padding-right: .25rem;
  }

  [dir="rtl"] .pl-2 {
    padding-left: 0;
    padding-right: .5rem;
  }

  [dir="rtl"] .pl-3 {
    padding-left: 0;
    padding-right: .75rem;
  }

  [dir="rtl"] .pl-4 {
    padding-left: 0;
    padding-right: 1rem;
  }

  [dir="rtl"] .pl-6 {
    padding-left: 0;
    padding-right: 1.5rem;
  }

  [dir="rtl"] .pr-1 {
    padding-left: .25rem;
    padding-right: 0;
  }

  [dir="rtl"] .pr-2 {
    padding-left: .5rem;
    padding-right: 0;
  }

  [dir="rtl"] .pr-3 {
    padding-left: .75rem;
    padding-right: 0;
  }

  [dir="rtl"] .pr-4 {
    padding-left: 1rem;
    padding-right: 0;
  }

  [dir="rtl"] .pr-6 {
    padding-left: 1.5rem;
    padding-right: 0;
  }

  [dir="rtl"] .ml-1 {
    margin-left: 0;
    margin-right: .25rem;
  }

  [dir="rtl"] .ml-2 {
    margin-left: 0;
    margin-right: .5rem;
  }

  [dir="rtl"] .ml-3 {
    margin-left: 0;
    margin-right: .75rem;
  }

  [dir="rtl"] .ml-4 {
    margin-left: 0;
    margin-right: 1rem;
  }

  [dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
  }

  [dir="rtl"] .mr-1 {
    margin-left: .25rem;
    margin-right: 0;
  }

  [dir="rtl"] .mr-2 {
    margin-left: .5rem;
    margin-right: 0;
  }

  [dir="rtl"] .mr-3 {
    margin-left: .75rem;
    margin-right: 0;
  }

  [dir="rtl"] .mr-4 {
    margin-left: 1rem;
    margin-right: 0;
  }

  [dir="rtl"] .mr-auto {
    margin-left: auto;
    margin-right: 0;
  }

  [dir="rtl"] .text-left {
    text-align: right;
  }

  [dir="rtl"] .text-right {
    text-align: left;
  }

  [dir="rtl"] .rounded-l {
    border-radius: 0 .5rem .5rem 0;
  }

  [dir="rtl"] .rounded-r {
    border-radius: .5rem 0 0 .5rem;
  }

  [dir="rtl"] .ios-card {
    direction: rtl;
  }

  [dir="rtl"] .gap-1, [dir="rtl"] .gap-2, [dir="rtl"] .gap-3, [dir="rtl"] .gap-4 {
    gap: inherit;
  }

  [dir="rtl"] .space-x-1 > * + * {
    margin-left: 0;
    margin-right: .25rem;
  }

  [dir="rtl"] .space-x-2 > * + * {
    margin-left: 0;
    margin-right: .5rem;
  }

  [dir="rtl"] .space-x-3 > * + * {
    margin-left: 0;
    margin-right: .75rem;
  }

  [dir="rtl"] .space-x-4 > * + * {
    margin-left: 0;
    margin-right: 1rem;
  }

  [dir="rtl"] [role="dialog"], [dir="rtl"] .dialog-content, [dir="rtl"] input:not([type="checkbox"]):not([type="radio"]), [dir="rtl"] textarea, [dir="rtl"] select {
    text-align: right;
    direction: rtl;
  }

  [dir="rtl"] [data-sonner-toast], [dir="rtl"] [data-sonner-toast] * {
    text-align: right !important;
    direction: rtl !important;
  }

  [data-sonner-toaster] {
    z-index: 999999 !important;
  }

  [data-sonner-toast] {
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: #fffffff2 !important;
    border: 1px solid #00000014 !important;
    border-radius: 14px !important;
    max-width: 400px !important;
    margin: 8px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    box-shadow: 0 4px 12px #00000014, 0 2px 6px #0000000a !important;
  }

  .dark [data-sonner-toast] {
    color: #fff !important;
    background: #1e1e1ef2 !important;
    border: 1px solid #ffffff1a !important;
    box-shadow: 0 4px 12px #0000004d, 0 2px 6px #0003 !important;
  }

  [data-sonner-toast][data-type="success"] {
    background: #f0fff4f2 !important;
    border-color: #34c75933 !important;
  }

  .dark [data-sonner-toast][data-type="success"] {
    background: #34c75926 !important;
    border-color: #34c7594d !important;
  }

  [data-sonner-toast][data-type="success"] [data-icon] {
    color: #34c759 !important;
  }

  [data-sonner-toast][data-type="error"] {
    background: #fff5f5f2 !important;
    border-color: #dc262633 !important;
  }

  .dark [data-sonner-toast][data-type="error"] {
    background: #dc262626 !important;
    border-color: #dc26264d !important;
  }

  [data-sonner-toast][data-type="error"] [data-icon] {
    color: #dc2626 !important;
  }

  [data-sonner-toast][data-type="warning"] {
    background: #fffbebf2 !important;
    border-color: #eab30833 !important;
  }

  .dark [data-sonner-toast][data-type="warning"] {
    background: #eab30826 !important;
    border-color: #eab3084d !important;
  }

  [data-sonner-toast][data-type="warning"] [data-icon] {
    color: #eab308 !important;
  }

  [data-sonner-toast][data-type="info"] {
    background: #eff6fff2 !important;
    border-color: #3b82f633 !important;
  }

  .dark [data-sonner-toast][data-type="info"] {
    background: #3b82f626 !important;
    border-color: #3b82f64d !important;
  }

  [data-sonner-toast][data-type="info"] [data-icon] {
    color: #3b82f6 !important;
  }

  [data-sonner-toast] [data-title] {
    color: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  [data-sonner-toast] [data-description] {
    opacity: .8 !important;
    margin-top: 2px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }

  [data-sonner-toast] [data-icon] {
    margin-right: 10px !important;
  }

  [dir="rtl"] [data-sonner-toast] [data-icon] {
    margin-left: 10px !important;
    margin-right: 0 !important;
  }

  @keyframes toastSlideIn {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }

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

  [data-sonner-toast] {
    animation: .3s cubic-bezier(.36, .66, .04, 1) toastSlideIn !important;
  }

  [lang="ar"] .tabular-nums, [lang="ar"] [data-numeric] {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  * {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  @supports (padding: max(0px)) {
    .pwa-safe-top {
      padding-top: max(var(--safe-area-inset-top), 1rem);
    }

    .pwa-safe-bottom {
      padding-bottom: max(var(--safe-area-inset-bottom), 1rem);
    }

    .pwa-safe-left {
      padding-left: max(var(--safe-area-inset-left), 1rem);
    }

    .pwa-safe-right {
      padding-right: max(var(--safe-area-inset-right), 1rem);
    }
  }

  @media (display-mode: standalone) {
    body {
      overscroll-behavior-y: contain;
    }

    .app-header {
      padding-top: max(var(--safe-area-inset-top), 1rem);
    }

    .bottom-nav {
      padding-bottom: max(var(--safe-area-inset-bottom), 1rem);
    }
  }

  .touch-pan-y {
    touch-action: pan-y;
  }

  .touch-pan-x {
    touch-action: pan-x;
  }

  .touch-none {
    touch-action: none;
  }

  * {
    -webkit-tap-highlight-color: #007aff1a;
  }

  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  button, .button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .ios-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  .swipeable {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .active-press {
    transition: transform .1s, opacity .1s;
  }

  .active-press:active {
    opacity: .8;
    transform: scale(.97);
  }

  .card-press {
    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
  }

  .card-press:active {
    transform: scale(.98);
  }

  :focus-visible {
    border-radius: calc(var(--radius) * .5);
    outline: 3px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
  }

  .skip-to-main {
    z-index: 999;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: var(--radius);
    font-weight: var(--font-weight-semibold);
    padding: 1rem 1.5rem;
    text-decoration: none;
    position: absolute;
    left: -9999px;
  }

  .skip-to-main:focus {
    top: 1rem;
    left: 1rem;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .sr-only-focusable:focus, .sr-only-focusable:active {
    clip: auto;
    white-space: normal;
    width: auto;
    height: auto;
    position: static;
    overflow: visible;
  }

  html {
    scroll-behavior: smooth;
  }

  ::selection {
    background-color: hsl(var(--primary) / .2);
    color: hsl(var(--foreground));
  }

  button, a, select {
    touch-action: manipulation !important;
    -ms-touch-action: manipulation !important;
  }

  input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
    font-size: 16px !important;
  }

  button, .badge {
    -webkit-user-select: none;
    user-select: none;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    margin-bottom: 1rem;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-snug);
    margin-bottom: .75rem;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-normal);
    margin-bottom: .5rem;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) h4 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-relaxed);
    margin-bottom: .5rem;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: 1rem;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) [aria-invalid="true"] {
    border-color: hsl(var(--destructive));
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) [aria-valid="true"] {
    border-color: hsl(var(--chart-2));
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) [aria-busy="true"] {
    cursor: wait;
    opacity: .6;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) [disabled], :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) .animate-fade-in {
    animation: .3s ease-in-out fadeIn;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) p {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) label, :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) button {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) input {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }
}

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .-start-4 {
    inset-inline-start: calc(var(--spacing) * -4);
  }

  .start-1\/2 {
    inset-inline-start: 50%;
  }

  .start-3 {
    inset-inline-start: calc(var(--spacing) * 3);
  }

  .start-\[2px\] {
    inset-inline-start: 2px;
  }

  .start-\[22px\] {
    inset-inline-start: 22px;
  }

  .-end-8 {
    inset-inline-end: calc(var(--spacing) * -8);
  }

  .end-1 {
    inset-inline-end: calc(var(--spacing) * 1);
  }

  .end-2 {
    inset-inline-end: calc(var(--spacing) * 2);
  }

  .end-\[4px\] {
    inset-inline-end: 4px;
  }

  .-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
  }

  .-top-2\.5 {
    top: calc(var(--spacing) * -2.5);
  }

  .-top-8 {
    top: calc(var(--spacing) * -8);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-12 {
    top: calc(var(--spacing) * 12);
  }

  .top-\[2px\] {
    top: 2px;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .-bottom-4 {
    bottom: calc(var(--spacing) * -4);
  }

  .-bottom-\[5px\] {
    bottom: -5px;
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-\[2px\] {
    bottom: 2px;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[5\] {
    z-index: 5;
  }

  .z-\[9996\] {
    z-index: 9996;
  }

  .z-\[9997\] {
    z-index: 9997;
  }

  .z-\[9998\] {
    z-index: 9998;
  }

  .z-\[9999\] {
    z-index: 9999;
  }

  .z-\[10000\] {
    z-index: 10000;
  }

  .container {
    width: 100%;
  }

  @media (width >= 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (width >= 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (width >= 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (width >= 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (width >= 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .ms-1 {
    margin-inline-start: calc(var(--spacing) * 1);
  }

  .ms-1\.5 {
    margin-inline-start: calc(var(--spacing) * 1.5);
  }

  .ms-2 {
    margin-inline-start: calc(var(--spacing) * 2);
  }

  .ms-auto {
    margin-inline-start: auto;
  }

  .me-0\.5 {
    margin-inline-end: calc(var(--spacing) * .5);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-\[2px\] {
    margin-top: 2px;
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-\[1\.5px\] {
    height: 1.5px;
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-\[3px\] {
    height: 3px;
  }

  .h-\[4px\] {
    height: 4px;
  }

  .h-\[5px\] {
    height: 5px;
  }

  .h-\[6px\] {
    height: 6px;
  }

  .h-\[7px\] {
    height: 7px;
  }

  .h-\[14px\] {
    height: 14px;
  }

  .h-\[16px\] {
    height: 16px;
  }

  .h-\[18px\] {
    height: 18px;
  }

  .h-\[20px\] {
    height: 20px;
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[27px\] {
    height: 27px;
  }

  .h-\[31px\] {
    height: 31px;
  }

  .h-\[32px\] {
    height: 32px;
  }

  .h-\[40px\] {
    height: 40px;
  }

  .h-\[44px\] {
    height: 44px;
  }

  .h-\[56px\] {
    height: 56px;
  }

  .h-\[100dvh\] {
    height: 100dvh;
  }

  .h-\[160px\] {
    height: 160px;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-\[25vh\] {
    max-height: 25vh;
  }

  .max-h-\[28vh\] {
    max-height: 28vh;
  }

  .max-h-\[85vh\] {
    max-height: 85vh;
  }

  .max-h-\[92vh\] {
    max-height: 92vh;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-\[32px\] {
    min-height: 32px;
  }

  .min-h-\[38px\] {
    min-height: 38px;
  }

  .min-h-\[44px\] {
    min-height: 44px;
  }

  .min-h-\[62px\] {
    min-height: 62px;
  }

  .min-h-\[100dvh\] {
    min-height: 100dvh;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-\[4px\] {
    width: 4px;
  }

  .w-\[5px\] {
    width: 5px;
  }

  .w-\[6px\] {
    width: 6px;
  }

  .w-\[7px\] {
    width: 7px;
  }

  .w-\[8px\] {
    width: 8px;
  }

  .w-\[14px\] {
    width: 14px;
  }

  .w-\[18px\] {
    width: 18px;
  }

  .w-\[20px\] {
    width: 20px;
  }

  .w-\[22px\] {
    width: 22px;
  }

  .w-\[27px\] {
    width: 27px;
  }

  .w-\[32px\] {
    width: 32px;
  }

  .w-\[51px\] {
    width: 51px;
  }

  .w-\[56px\] {
    width: 56px;
  }

  .w-\[70px\] {
    width: 70px;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-\[240px\] {
    max-width: 240px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[280px\] {
    max-width: 280px;
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-\[16px\] {
    min-width: 16px;
  }

  .min-w-\[44px\] {
    min-width: 44px;
  }

  .min-w-\[100px\] {
    min-width: 100px;
  }

  .flex-1 {
    flex: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize-none {
    resize: none;
  }

  .snap-y {
    scroll-snap-type: y var(--tw-scroll-snap-strictness);
  }

  .snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }

  .snap-center {
    scroll-snap-align: center;
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-disc {
    list-style-type: disc;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  .gap-\[3px\] {
    gap: 3px;
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  :where(.-space-x-1\.5 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -1.5) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -1.5) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.-space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-\[var\(--border\)\] > :not(:last-child)) {
    border-color: var(--border);
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[7px\] {
    border-radius: 7px;
  }

  .rounded-\[8px\] {
    border-radius: 8px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[20px\] {
    border-radius: 20px;
  }

  .rounded-\[22px\] {
    border-radius: 22px;
  }

  .rounded-\[32px\] {
    border-radius: 32px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius);
  }

  .rounded-md {
    border-radius: calc(var(--radius)  - 2px);
  }

  .rounded-sm {
    border-radius: calc(var(--radius)  - 4px);
  }

  .rounded-xl {
    border-radius: calc(var(--radius)  + 4px);
  }

  .rounded-s-2xl {
    border-start-start-radius: var(--radius-2xl);
    border-end-start-radius: var(--radius-2xl);
  }

  .rounded-t-3xl {
    border-top-left-radius: var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
  }

  .rounded-t-\[12px\] {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .rounded-tl-lg {
    border-top-left-radius: var(--radius);
  }

  .rounded-tr-lg {
    border-top-right-radius: var(--radius);
  }

  .rounded-br-lg {
    border-bottom-right-radius: var(--radius);
  }

  .rounded-bl-lg {
    border-bottom-left-radius: var(--radius);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-3 {
    border-top-style: var(--tw-border-style);
    border-top-width: 3px;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-3 {
    border-right-style: var(--tw-border-style);
    border-right-width: 3px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-3 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 3px;
  }

  .border-l-3 {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-\[var\(--border\)\] {
    border-color: var(--border);
  }

  .border-\[var\(--ios-gray\)\] {
    border-color: var(--ios-gray);
  }

  .border-\[var\(--ios-separator\)\] {
    border-color: var(--ios-separator);
  }

  .border-\[var\(--primary\)\] {
    border-color: var(--primary);
  }

  .border-\[var\(--primary\)\]\/20 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[var\(--primary\)\]\/20 {
      border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .border-amber-500 {
    border-color: var(--color-amber-500);
  }

  .border-white\/15 {
    border-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/15 {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .border-white\/20 {
    border-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/20 {
      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .border-white\/30 {
    border-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/30 {
      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .border-white\/40 {
    border-color: #fff6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/40 {
      border-color: color-mix(in oklab, var(--color-white) 40%, transparent);
    }
  }

  .border-white\/60 {
    border-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/60 {
      border-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-t-white {
    border-top-color: var(--color-white);
  }

  .bg-\[\#34C759\] {
    background-color: #34c759;
  }

  .bg-\[rgba\(0\,132\,61\,0\.12\)\] {
    background-color: #00843d1f;
  }

  .bg-\[var\(--background\)\] {
    background-color: var(--background);
  }

  .bg-\[var\(--border\)\] {
    background-color: var(--border);
  }

  .bg-\[var\(--card\)\] {
    background-color: var(--card);
  }

  .bg-\[var\(--card\)\]\/80 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--card\)\]\/80 {
      background-color: color-mix(in oklab, var(--card) 80%, transparent);
    }
  }

  .bg-\[var\(--danger\)\] {
    background-color: var(--danger);
  }

  .bg-\[var\(--danger-muted\)\] {
    background-color: var(--danger-muted);
  }

  .bg-\[var\(--foreground\)\] {
    background-color: var(--foreground);
  }

  .bg-\[var\(--input-background\)\] {
    background-color: var(--input-background);
  }

  .bg-\[var\(--ios-blue\)\] {
    background-color: var(--ios-blue);
  }

  .bg-\[var\(--ios-gray-1\)\] {
    background-color: var(--ios-gray-1);
  }

  .bg-\[var\(--ios-gray-3\)\] {
    background-color: var(--ios-gray-3);
  }

  .bg-\[var\(--ios-gray-4\)\] {
    background-color: var(--ios-gray-4);
  }

  .bg-\[var\(--ios-gray-5\)\] {
    background-color: var(--ios-gray-5);
  }

  .bg-\[var\(--ios-gray-6\)\] {
    background-color: var(--ios-gray-6);
  }

  .bg-\[var\(--ios-green\)\]\/10 {
    background-color: var(--ios-green);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ios-green\)\]\/10 {
      background-color: color-mix(in oklab, var(--ios-green) 10%, transparent);
    }
  }

  .bg-\[var\(--ios-grouped-bg\)\] {
    background-color: var(--ios-grouped-bg);
  }

  .bg-\[var\(--ios-orange\)\] {
    background-color: var(--ios-orange);
  }

  .bg-\[var\(--ios-orange\)\]\/10 {
    background-color: var(--ios-orange);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ios-orange\)\]\/10 {
      background-color: color-mix(in oklab, var(--ios-orange) 10%, transparent);
    }
  }

  .bg-\[var\(--ios-red\)\] {
    background-color: var(--ios-red);
  }

  .bg-\[var\(--ios-red\)\]\/10 {
    background-color: var(--ios-red);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--ios-red\)\]\/10 {
      background-color: color-mix(in oklab, var(--ios-red) 10%, transparent);
    }
  }

  .bg-\[var\(--ios-teal\)\] {
    background-color: var(--ios-teal);
  }

  .bg-\[var\(--primary\)\] {
    background-color: var(--primary);
  }

  .bg-\[var\(--primary\)\]\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[var\(--primary\)\]\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-\[var\(--primary\,\#00843d\)\] {
    background-color: var(--primary, #00843d);
  }

  .bg-\[var\(--primary-subtle\)\] {
    background-color: var(--primary-subtle);
  }

  .bg-\[var\(--surface-primary-subtle\)\] {
    background-color: var(--surface-primary-subtle);
  }

  .bg-amber-500\/10 {
    background-color: color-mix(in srgb, oklch(.769 .188 70.08) 10%, transparent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/15 {
    background-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-\[2px\] {
    padding: 2px;
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-\[2px\] {
    padding-block: 2px;
  }

  .py-\[14px\] {
    padding-block: 14px;
  }

  .py-\[15px\] {
    padding-block: 15px;
  }

  .py-\[60px\] {
    padding-block: 60px;
  }

  .ps-1 {
    padding-inline-start: calc(var(--spacing) * 1);
  }

  .ps-1\.5 {
    padding-inline-start: calc(var(--spacing) * 1.5);
  }

  .ps-5 {
    padding-inline-start: calc(var(--spacing) * 5);
  }

  .ps-9 {
    padding-inline-start: calc(var(--spacing) * 9);
  }

  .ps-12 {
    padding-inline-start: calc(var(--spacing) * 12);
  }

  .ps-\[2px\] {
    padding-inline-start: 2px;
  }

  .pe-4 {
    padding-inline-end: calc(var(--spacing) * 4);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-\[15vh\] {
    padding-top: 15vh;
  }

  .pt-\[calc\(env\(safe-area-inset-top\,12px\)\+8px\)\] {
    padding-top: calc(env(safe-area-inset-top, 12px)  + 8px);
  }

  .pt-\[calc\(env\(safe-area-inset-top\,12px\)\+16px\)\] {
    padding-top: calc(env(safe-area-inset-top, 12px)  + 16px);
  }

  .pt-\[calc\(env\(safe-area-inset-top\,44px\)\+24px\)\] {
    padding-top: calc(env(safe-area-inset-top, 44px)  + 24px);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-\[calc\(env\(safe-area-inset-bottom\,16px\)\+16px\)\] {
    padding-bottom: calc(env(safe-area-inset-bottom, 16px)  + 16px);
  }

  .pb-\[calc\(env\(safe-area-inset-bottom\,20px\)\+16px\)\] {
    padding-bottom: calc(env(safe-area-inset-bottom, 20px)  + 16px);
  }

  .pb-\[calc\(env\(safe-area-inset-bottom\,20px\)\+20px\)\] {
    padding-bottom: calc(env(safe-area-inset-bottom, 20px)  + 20px);
  }

  .text-center {
    text-align: center;
  }

  .text-end {
    text-align: end;
  }

  .text-start {
    text-align: start;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-\[0\.5rem\] {
    font-size: .5rem;
  }

  .text-\[0\.75rem\] {
    font-size: .75rem;
  }

  .text-\[0\.625rem\] {
    font-size: .625rem;
  }

  .text-\[0\.875rem\] {
    font-size: .875rem;
  }

  .text-\[0\.6875rem\] {
    font-size: .6875rem;
  }

  .text-\[0\.8125rem\] {
    font-size: .8125rem;
  }

  .text-\[0\.9375rem\] {
    font-size: .9375rem;
  }

  .text-\[1\.0625rem\] {
    font-size: 1.0625rem;
  }

  .text-\[8rem\] {
    font-size: 8rem;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[0\.15em\] {
    --tw-tracking: .15em;
    letter-spacing: .15em;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-\[var\(--background\)\] {
    color: var(--background);
  }

  .text-\[var\(--danger\)\] {
    color: var(--danger);
  }

  .text-\[var\(--danger-vivid\)\] {
    color: var(--danger-vivid);
  }

  .text-\[var\(--destructive\)\] {
    color: var(--destructive);
  }

  .text-\[var\(--foreground\)\] {
    color: var(--foreground);
  }

  .text-\[var\(--ios-blue\)\] {
    color: var(--ios-blue);
  }

  .text-\[var\(--ios-gray\)\] {
    color: var(--ios-gray);
  }

  .text-\[var\(--ios-gray-3\)\] {
    color: var(--ios-gray-3);
  }

  .text-\[var\(--ios-green\)\] {
    color: var(--ios-green);
  }

  .text-\[var\(--ios-indigo\)\] {
    color: var(--ios-indigo);
  }

  .text-\[var\(--ios-orange\)\] {
    color: var(--ios-orange);
  }

  .text-\[var\(--ios-purple\)\] {
    color: var(--ios-purple);
  }

  .text-\[var\(--ios-red\)\] {
    color: var(--ios-red);
  }

  .text-\[var\(--ios-secondary-label\)\] {
    color: var(--ios-secondary-label);
  }

  .text-\[var\(--ios-teal\)\] {
    color: var(--ios-teal);
  }

  .text-\[var\(--ios-tertiary-label\)\] {
    color: var(--ios-tertiary-label);
  }

  .text-\[var\(--primary\)\] {
    color: var(--primary);
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .uppercase {
    text-transform: uppercase;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .underline {
    text-decoration-line: underline;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-80 {
    opacity: .8;
  }

  .shadow-\[var\(--primary\)\]\/20 {
    --tw-shadow-alpha: 20%;
    --tw-shadow: var(--primary);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring, .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-amber-300 {
    --tw-ring-color: var(--color-amber-300);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur-\[80px\] {
    --tw-blur: blur(80px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .running {
    animation-play-state: running;
  }

  .placeholder\:text-\[var\(--ios-secondary-label\)\]::placeholder {
    color: var(--ios-secondary-label);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-\[var\(--primary\)\]:focus {
    --tw-ring-color: var(--primary);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[var\(--ring\)\]:focus-visible {
    --tw-ring-color: var(--ring);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .active\:scale-90:active {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-\[0\.97\]:active {
    scale: .97;
  }

  .active\:scale-\[0\.98\]:active {
    scale: .98;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:bg-\[var\(--ios-gray-6\)\]:active {
    background-color: var(--ios-gray-6);
  }

  .active\:bg-\[var\(--ios-red\)\]\/5:active {
    background-color: var(--ios-red);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .active\:bg-\[var\(--ios-red\)\]\/5:active {
      background-color: color-mix(in oklab, var(--ios-red) 5%, transparent);
    }
  }

  .active\:bg-\[var\(--surface-active\)\]:active {
    background-color: var(--surface-active);
  }

  .active\:bg-\[var\(--surface-primary-subtle\)\]:active {
    background-color: var(--surface-primary-subtle);
  }

  .active\:bg-gray-200:active {
    background-color: var(--color-gray-200);
  }

  .active\:text-\[var\(--destructive\)\]:active {
    color: var(--destructive);
  }

  .active\:text-\[var\(--foreground\)\]:active {
    color: var(--foreground);
  }

  .active\:text-\[var\(--ios-red\)\]:active {
    color: var(--ios-red);
  }

  .active\:text-white:active {
    color: var(--color-white);
  }

  .active\:opacity-60:active {
    opacity: .6;
  }

  .active\:opacity-70:active {
    opacity: .7;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .rtl\:translate-x-1\/2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .rtl\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    rotate: 180deg;
  }

  :where(.rtl\:space-x-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) {
    --tw-space-x-reverse: 1;
  }
}

@keyframes accentPulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }
}

@media (width >= 768px) and (orientation: landscape) {
  .cycle-landscape-split {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    display: grid;
  }
}

:root {
  --primary: #00843d;
  --primary-foreground: #fff;
  --primary-hover: #006b31;
  --primary-active: #005226;
  --primary-muted: #d5f5e3;
  --primary-subtle: #ebf9f0;
  --neutral-950: #0a0a0b;
  --neutral-900: #171719;
  --neutral-800: #27272a;
  --neutral-700: #3f3f45;
  --neutral-600: #52525a;
  --neutral-500: #71717a;
  --neutral-400: #a1a1aa;
  --neutral-300: #d4d4d8;
  --neutral-200: #e4e4e7;
  --neutral-100: #f4f4f5;
  --neutral-50: #fafafa;
  --neutral-0: #fff;
  --success-muted: #dcfce7;
  --success-light: #86efac;
  --success: #22c55e;
  --success-dark: #16a34a;
  --success-vivid: #15803d;
  --success-foreground: #fff;
  --warning-muted: #fef3c7;
  --warning-light: #fcd34d;
  --warning: #f59e0b;
  --warning-dark: #d97706;
  --warning-vivid: #b45309;
  --warning-foreground: #1c1917;
  --danger-muted: #fee2e2;
  --danger-light: #fca5a5;
  --danger: #ef4444;
  --danger-dark: #dc2626;
  --danger-vivid: #b91c1c;
  --danger-foreground: #fff;
  --info-muted: #dbeafe;
  --info-light: #93c5fd;
  --info: #3b82f6;
  --info-dark: #2563eb;
  --info-vivid: #1d4ed8;
  --info-foreground: #fff;
  --surface-ground: #f8f9fa;
  --surface-0: #fff;
  --surface-1: #fff;
  --surface-2: #fff;
  --surface-3: #fff;
  --surface-primary-subtle: #ebf9f0;
  --surface-primary-muted: #d5f5e3;
  --surface-hover: #00843d0a;
  --surface-active: #00843d14;
  --surface-selected: #00843d1f;
  --shadow-xs: 0 1px 2px #0000000d;
  --shadow-sm: 0 1px 3px #00000014, 0 1px 2px #0000000a;
  --shadow-md: 0 4px 6px #00000012, 0 2px 4px #0000000a;
  --shadow-lg: 0 10px 15px #00000014, 0 4px 6px #0000000a;
  --shadow-xl: 0 20px 25px #0000001a, 0 10px 10px #0000000a;
  --ios-red: #ff3b30;
  --ios-orange: #ff9500;
  --ios-yellow: #fc0;
  --ios-green: #34c759;
  --ios-mint: #00c7be;
  --ios-teal: #5ac8fa;
  --ios-cyan: #32ade6;
  --ios-blue: #00843d;
  --ios-indigo: #5856d6;
  --ios-purple: #af52de;
  --ios-pink: #ff2d55;
  --ios-brown: #a2845e;
  --ios-gray: #8e8e93;
  --ios-gray-2: #78788029;
  --ios-gray-3: #7676803d;
  --ios-gray-4: #74748052;
  --ios-gray-5: #87879166;
  --ios-gray-6: #8e8e93;
  --ios-label: #000;
  --ios-secondary-label: #3c3c4399;
  --ios-tertiary-label: #3c3c436b;
  --ios-quaternary-label: #3c3c4338;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  --text-inverted: #fff;
  --text-link: #00843d;
  --text-link-hover: #006b31;
  --text-link-visited: #005226;
  --border-subtle: #0000000f;
  --border-default: #0000001a;
  --border-strong: #00000029;
  --border-focus: #00843d;
  --border-error: #ef4444;
  --ring: #00843d;
  --ring-offset: #fff;
  --ring-width: 2px;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --touch-target-min: 2.75rem;
  --touch-target-comfortable: 3rem;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --bottom-nav-height: 80px;
  --bottom-nav-safe-height: calc(100px + var(--safe-area-inset-bottom));
  --background: #f5f5f7;
  --background-rgb: 245, 245, 247;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --popover: #fff;
  --popover-foreground: #000;
  --secondary: #f5f5f7;
  --secondary-foreground: #000;
  --muted: #f5f5f7;
  --muted-foreground: #8e8e93;
  --accent: #f5f5f7;
  --accent-foreground: #000;
  --destructive: #ff3b30;
  --destructive-foreground: #fff;
  --border: #00000014;
  --input: transparent;
  --input-background: #8e8e931f;
  --switch-background: #e5e5ea;
  --chart-1: #00843d;
  --chart-2: #34c759;
  --chart-3: #ff9500;
  --chart-4: #5856d6;
  --chart-5: #5ac8fa;
  --radius: .75rem;
  --sidebar: #f5f5f7;
  --sidebar-foreground: #000;
  --sidebar-primary: #00843d;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #00843d1a;
  --sidebar-accent-foreground: #00843d;
  --sidebar-border: #00000014;
  --sidebar-ring: #00843d;
  --ios-red-dark: #ff453a;
  --ios-orange-dark: #ff9f0a;
  --ios-yellow-dark: #ffd60a;
  --ios-green-dark: #32d74b;
  --ios-green-light: #34c7591a;
  --ios-teal-dark: #64d2ff;
  --ios-blue-dark: #00a550;
  --ios-indigo-dark: #5e5ce6;
  --ios-purple-dark: #bf5af2;
  --ios-pink-dark: #ff375f;
  --ios-gray-dark: #98989d;
  --ios-gray-1: #7878801f;
  --ios-grouped-bg: #f2f2f7;
}

.dark {
  --background: #000;
  --background-rgb: 0, 0, 0;
  --foreground: #fff;
  --card: #000;
  --card-foreground: #fff;
  --popover: #000;
  --popover-foreground: #fff;
  --primary: #00a550;
  --primary-foreground: #fff;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #000;
  --muted-foreground: #98989d;
  --accent: #2c2c2e;
  --accent-foreground: #fff;
  --destructive: #ff453a;
  --destructive-foreground: #fff;
  --border: #ffffff1f;
  --input: transparent;
  --input-background: #7676803d;
  --switch-background: #39393d;
  --ring: #00a550;
  --chart-1: #00a550;
  --chart-2: #32d74b;
  --chart-3: #ff9f0a;
  --chart-4: #5e5ce6;
  --chart-5: #64d2ff;
  --radius: .75rem;
  --sidebar: #000;
  --sidebar-foreground: #fff;
  --sidebar-primary: #00a550;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #00a55026;
  --sidebar-accent-foreground: #00a550;
  --sidebar-border: #ffffff1f;
  --sidebar-ring: #00a550;
  --ios-label: #fff;
  --ios-secondary-label: #ebebf599;
  --ios-tertiary-label: #ebebf56b;
  --ios-quaternary-label: #ebebf538;
  --danger-muted: #ef444426;
  --surface-ground: #09090b;
  --surface-0: #0f0f12;
  --surface-1: #18181b;
  --surface-2: #27272a;
  --surface-3: #3f3f45;
  --surface-primary-subtle: #00a55014;
  --surface-primary-muted: #00a55029;
  --surface-hover: #ffffff0a;
  --surface-active: #ffffff14;
  --surface-selected: #00a55033;
  --shadow-xs: 0 1px 2px #0006;
  --shadow-sm: 0 1px 3px #00000080, 0 0 1px #ffffff0d;
  --shadow-md: 0 4px 6px #00000080, 0 0 1px #ffffff0d;
  --shadow-lg: 0 10px 15px #0009, 0 0 1px #ffffff0d;
  --shadow-xl: 0 20px 25px #000000b3, 0 0 2px #ffffff0d;
  --ios-red: #ff453a;
  --ios-orange: #ff9f0a;
  --ios-yellow: #ffd60a;
  --ios-green: #32d74b;
  --ios-mint: #66d4cf;
  --ios-teal: #40c8e0;
  --ios-cyan: #64d2ff;
  --ios-blue: #00a550;
  --ios-indigo: #5e5ce6;
  --ios-purple: #bf5af2;
  --ios-pink: #ff375f;
  --ios-brown: #ac8e68;
  --ios-gray: #8e8e93;
  --ios-gray-2: #636366;
  --ios-gray-3: #48484a;
  --ios-gray-4: #3a3a3c;
  --ios-gray-5: #2c2c2e;
  --ios-gray-6: #1c1c1e;
  --ios-grouped-bg: #1c1c1e;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-muted: #64748b;
  --text-inverted: #0f172a;
  --text-link: #00a550;
  --text-link-hover: #00c060;
  --text-link-visited: #00843d;
  --border-subtle: #ffffff0f;
  --border-default: #ffffff1a;
  --border-strong: #ffffff29;
  --border-focus: #00a550;
  --ring-offset: #0f0f12;
}

[data-theme="adhd"] {
  --primary-600: #4f7cc2;
  --primary-500: #6b93d4;
  --primary-400: #8aaae0;
  --primary: #4f7cc2;
  --surface-ground: #f0f4f8;
  --surface-0: #fff;
  --text-primary: #1e3a5f;
  --text-secondary: #4a6fa5;
  --danger: #e06b7a;
  --warning: #d4a24c;
  --ring: #4f7cc2;
  --ring-width: 3px;
}

[data-theme="medical"] {
  --primary-600: #00843d;
  --primary-500: #00a550;
  --primary: #00843d;
  --surface-ground: #f8fafb;
  --surface-0: #fff;
  --text-primary: #0f1419;
  --text-secondary: #4a5568;
  --status-normal: #22c55e;
  --status-attention: #f59e0b;
  --status-critical: #ef4444;
  --status-info: #3b82f6;
}

[data-theme="military"] {
  --primary-600: #5d6b2a;
  --primary-500: #6b7f39;
  --primary-400: #8a9c56;
  --primary: #5d6b2a;
  --surface-ground: #e8e9e3;
  --surface-0: #f5f5f0;
  --surface-1: #fff;
  --text-primary: #1f2617;
  --text-secondary: #4a5240;
  --danger: #a34a47;
  --warning: #b8863a;
  --info: #4a6b8a;
}

[data-theme="energy"] {
  --primary-600: #ea580c;
  --primary-500: #f97316;
  --primary-400: #fb923c;
  --primary: #ea580c;
  --surface-ground: #faf5f0;
  --surface-0: #fff;
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --danger: #dc2626;
  --warning: #fbbf24;
  --success: #16a34a;
  --info: #0284c7;
}

.adhd {
  --background: #e8f0f7;
  --foreground: #1a2332;
  --card: #fff;
  --card-foreground: #1a2332;
  --popover: #fff;
  --popover-foreground: #1a2332;
  --primary: #5b7ecc;
  --primary-foreground: #fff;
  --secondary: #d4e2f4;
  --secondary-foreground: #1a2332;
  --muted: #d4e2f4;
  --muted-foreground: #5a6b7f;
  --accent: #f0f5fa;
  --accent-foreground: #1a2332;
  --destructive: #e85d75;
  --destructive-foreground: #fff;
  --border: #5b7ecc40;
  --input: transparent;
  --input-background: #5b7ecc14;
  --switch-background: #c5d9f2;
  --font-weight-medium: 600;
  --font-weight-normal: 500;
  --ring: #5b7ecc;
  --chart-1: #5b7ecc;
  --chart-2: #7cb8a8;
  --chart-3: #f4a259;
  --chart-4: #9d84b7;
  --chart-5: #e85d75;
  --sidebar: #e8f0f7;
  --sidebar-foreground: #1a2332;
  --sidebar-primary: #5b7ecc;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #5b7ecc1f;
  --sidebar-accent-foreground: #5b7ecc;
  --sidebar-border: #5b7ecc40;
  --sidebar-ring: #5b7ecc;
}

.theme-medical {
  --background: #f5f5f7;
  --background-rgb: 245, 245, 247;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --popover: #fff;
  --popover-foreground: #000;
  --primary: #00843d;
  --primary-foreground: #fff;
  --secondary: #f5f5f7;
  --secondary-foreground: #000;
  --muted: #f5f5f7;
  --muted-foreground: #8e8e93;
  --accent: #f5f5f7;
  --accent-foreground: #000;
  --destructive: #ff3b30;
  --destructive-foreground: #fff;
  --border: #00000014;
  --input: transparent;
  --input-background: #8e8e931f;
  --switch-background: #e5e5ea;
  --ring: #00843d;
  --chart-1: #00843d;
  --chart-2: #34c759;
  --chart-3: #ff9500;
  --chart-4: #5856d6;
  --chart-5: #5ac8fa;
  --sidebar: #f5f5f7;
  --sidebar-foreground: #000;
  --sidebar-primary: #00843d;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #00843d1a;
  --sidebar-accent-foreground: #00843d;
  --sidebar-border: #00000014;
  --sidebar-ring: #00843d;
}

.dark.theme-medical {
  --background: #000;
  --background-rgb: 0, 0, 0;
  --foreground: #fff;
  --card: #000;
  --card-foreground: #fff;
  --popover: #000;
  --popover-foreground: #fff;
  --primary: #00a550;
  --primary-foreground: #fff;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #000;
  --muted-foreground: #98989d;
  --accent: #2c2c2e;
  --accent-foreground: #fff;
  --destructive: #ff453a;
  --destructive-foreground: #fff;
  --border: #ffffff1f;
  --input: transparent;
  --input-background: #7676803d;
  --switch-background: #39393d;
  --ring: #00a550;
  --chart-1: #00a550;
  --chart-2: #32d74b;
  --chart-3: #ff9f0a;
  --chart-4: #5e5ce6;
  --chart-5: #64d2ff;
}

.theme-military {
  --background: #e8e9e5;
  --background-rgb: 232, 233, 229;
  --foreground: #2a2f1f;
  --card: #f5f6f4;
  --card-foreground: #2a2f1f;
  --popover: #f5f6f4;
  --popover-foreground: #2a2f1f;
  --primary: #6b7f39;
  --primary-foreground: #fff;
  --secondary: #d4d6cd;
  --secondary-foreground: #2a2f1f;
  --muted: #d4d6cd;
  --muted-foreground: #6b7049;
  --accent: #e8e9e5;
  --accent-foreground: #2a2f1f;
  --destructive: #b85450;
  --destructive-foreground: #fff;
  --border: #6b7f3926;
  --input: transparent;
  --input-background: #6b7f3914;
  --switch-background: #d4d6cd;
  --ring: #6b7f39;
  --chart-1: #6b7f39;
  --chart-2: #7a9b4f;
  --chart-3: #c9a869;
  --chart-4: #5c6e4a;
  --chart-5: #8b9678;
  --sidebar: #e8e9e5;
  --sidebar-foreground: #2a2f1f;
  --sidebar-primary: #6b7f39;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #6b7f391f;
  --sidebar-accent-foreground: #6b7f39;
  --sidebar-border: #6b7f3926;
  --sidebar-ring: #6b7f39;
}

.dark.theme-military {
  --background: #1a1d16;
  --background-rgb: 26, 29, 22;
  --foreground: #e8e9e5;
  --card: #23271d;
  --card-foreground: #e8e9e5;
  --popover: #23271d;
  --popover-foreground: #e8e9e5;
  --primary: #8fa855;
  --primary-foreground: #1a1d16;
  --secondary: #2f3328;
  --secondary-foreground: #e8e9e5;
  --muted: #2f3328;
  --muted-foreground: #9fa48e;
  --accent: #3a3f32;
  --accent-foreground: #e8e9e5;
  --destructive: #d67370;
  --destructive-foreground: #fff;
  --border: #8fa85533;
  --input: transparent;
  --input-background: #8fa8551f;
  --switch-background: #3a3f32;
  --ring: #8fa855;
  --chart-1: #8fa855;
  --chart-2: #9bb96a;
  --chart-3: #d4b87a;
  --chart-4: #7a8f5e;
  --chart-5: #a3ad8e;
}

.theme-oilgas {
  --background: #faf8f5;
  --background-rgb: 250, 248, 245;
  --foreground: #1f1a15;
  --card: #fff;
  --card-foreground: #1f1a15;
  --popover: #fff;
  --popover-foreground: #1f1a15;
  --primary: #ff9500;
  --primary-foreground: #fff;
  --secondary: #f5f0e8;
  --secondary-foreground: #1f1a15;
  --muted: #f5f0e8;
  --muted-foreground: #79716a;
  --accent: #fef8f0;
  --accent-foreground: #1f1a15;
  --destructive: #d64a3b;
  --destructive-foreground: #fff;
  --border: #ff95001f;
  --input: transparent;
  --input-background: #ff95000f;
  --switch-background: #e8e0d5;
  --ring: #ff9500;
  --chart-1: #ff9500;
  --chart-2: #00843d;
  --chart-3: #34c759;
  --chart-4: #5856d6;
  --chart-5: #5ac8fa;
  --sidebar: #faf8f5;
  --sidebar-foreground: #1f1a15;
  --sidebar-primary: #ff9500;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #ff95001a;
  --sidebar-accent-foreground: #ff9500;
  --sidebar-border: #ff95001f;
  --sidebar-ring: #ff9500;
}

.dark.theme-oilgas {
  --background: #1a1612;
  --background-rgb: 26, 22, 18;
  --foreground: #faf8f5;
  --card: #221e19;
  --card-foreground: #faf8f5;
  --popover: #221e19;
  --popover-foreground: #faf8f5;
  --primary: #ff9f0a;
  --primary-foreground: #1a1612;
  --secondary: #2a2520;
  --secondary-foreground: #faf8f5;
  --muted: #2a2520;
  --muted-foreground: #a59c92;
  --accent: #332d26;
  --accent-foreground: #faf8f5;
  --destructive: #e8634f;
  --destructive-foreground: #fff;
  --border: #ff9f0a2e;
  --input: transparent;
  --input-background: #ff9f0a1a;
  --switch-background: #3d3730;
  --ring: #ff9f0a;
  --chart-1: #ff9f0a;
  --chart-2: #00a550;
  --chart-3: #32d74b;
  --chart-4: #5e5ce6;
  --chart-5: #64d2ff;
}

.page-container {
  will-change: auto;
}

.ios-card, [class*="rounded-xl"], [class*="rounded-2xl"] {
  backface-visibility: hidden;
  transform: translateZ(0);
}

button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:active:not(:disabled), a:active, [role="button"]:active {
  transition: transform 60ms ease-out, opacity 60ms ease-out;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

nav[class*="fixed"], div[class*="sticky"] {
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (prefers-reduced-data: reduce) {
  img, video {
    content-visibility: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.ios-blur {
  background: #fff;
}

.dark .ios-blur {
  background: #000;
}

.adhd .ios-blur {
  background: #fff;
}

.ios-card {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid #0000000f;
  box-shadow: 0 2px 8px #0000000a, 0 1px 2px #0000000f;
}

.dark .ios-card {
  border-radius: var(--radius);
  background: #000;
  border: 1px solid #ffffff1f;
  box-shadow: 0 2px 8px #0006, 0 1px 2px #0003;
}

.adhd .ios-card {
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid #5b7ecc33;
  box-shadow: 0 3px 12px #5b7ecc14, 0 0 0 1px #5b7ecc26;
}

.ios-glass {
  background: #fff;
  border: 1px solid #0000001a;
  box-shadow: 0 8px 32px #0000000f;
}

.dark .ios-glass {
  background: #000;
  border: 1px solid #ffffff1a;
  box-shadow: 0 8px 32px #0006;
}

.ios-glass-heavy {
  background: #fff;
  border: 1px solid #0000001a;
  box-shadow: 0 12px 48px #0000001a;
}

.dark .ios-glass-heavy {
  background: #000;
  border: 1px solid #ffffff26;
  box-shadow: 0 12px 48px #0009;
}

.ios-material {
  background: #f2f2f7;
  border: .5px solid #0000001a;
}

.dark .ios-material {
  background: #000;
  border: .5px solid #ffffff1a;
}

.ios-sheet {
  background: #fff;
  box-shadow: 0 -2px 20px #00000014, 0 0 0 .5px #00000005;
}

.dark .ios-sheet {
  background: #000;
  box-shadow: 0 -2px 20px #0006, 0 0 0 .5px #ffffff0d;
}

.ios-tab-bar-container {
  -webkit-backdrop-filter: blur(20px);
  background: #fffc;
  border-top: .5px solid #0000001a;
}

.dark .ios-tab-bar-container {
  -webkit-backdrop-filter: blur(20px);
  background: #000c;
  border-top: .5px solid #ffffff1a;
}

.ios-tab-item {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  padding: .5rem;
  display: flex;
}

.ios-tab-icon {
  width: 24px;
  height: 24px;
  transition: all .2s;
}

.ios-tab-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  transition: color .2s;
}

.ios-separator {
  border-color: #00000014;
}

.dark .ios-separator {
  border-color: #ffffff1f;
}

.calendar-month {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

.rdp {
  justify-content: center;
  display: flex;
}

.react-calendar__month-view__weekdays__weekday {
  color: #000 !important;
  font-weight: 600 !important;
}

.react-calendar__month-view__weekdays__weekday abbr {
  color: #000 !important;
  text-decoration: none !important;
}

.dark .react-calendar__month-view__weekdays__weekday, .dark .react-calendar__month-view__weekdays__weekday abbr {
  color: #fff !important;
}

.ios-toggle {
  appearance: none;
  background-color: var(--switch-background);
  cursor: pointer;
  border-radius: 31px;
  outline: none;
  flex-shrink: 0;
  width: 51px;
  height: 31px;
  transition: background-color .3s;
  position: relative;
}

.ios-toggle:checked {
  background-color: var(--ios-green);
}

.ios-toggle:before {
  content: "";
  background-color: #fff;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 3px 8px #00000026, 0 1px 1px #00000029;
}

.ios-toggle:checked:before {
  transform: translateX(20px);
}

.ios-toggle:active:before {
  width: 31px;
}

.dark .ios-toggle {
  background-color: #78788052;
}

.dark .ios-toggle:checked {
  background-color: var(--ios-green-dark);
}

.rdp-day {
  font-size: 15px;
  width: 3.5rem !important;
  height: 3.5rem !important;
}

.rdp-month {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.rdp-table {
  margin: 0 auto;
}

.rdp-day_outside {
  pointer-events: auto;
  opacity: .25 !important;
}

.rdp-day_outside:hover {
  opacity: .35 !important;
}

.rdp-day:not(.rdp-day_outside) {
  opacity: 1 !important;
}

.dark .rdp-day_selected {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.dark .rdp-day_today {
  font-weight: 700;
}

.dark .rdp-day:hover:not(.rdp-day_selected) {
  background-color: hsl(var(--accent)) !important;
}

.rdp-day_button > div > span[style*="color"] {
  color: inherit !important;
}

.rdp-day_button[class*="aramco"], .rdp-day_button[class*="holiday"] {
  color: inherit;
}

.rdp-day_button[class*="aramco"] > div > span, .rdp-day_button[class*="holiday"] > div > span {
  z-index: 1;
  position: relative;
}

.rdp-day_workingOnHoliday:after {
  content: "⚠";
  color: var(--ios-orange);
  z-index: 10;
  text-shadow: 0 0 3px #fffc;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: 2px;
  right: 2px;
}

.rdp-day_workingOnHoliday {
  position: relative;
}

@media (width <= 640px) {
  .rdp-day {
    font-size: 14px;
    width: 3rem !important;
    height: 3rem !important;
  }

  .rdp-day_workingOnHoliday:after {
    font-size: 10px;
    top: 1px;
    right: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --border: #0000004d;
    --muted-foreground: #000;
  }

  .dark {
    --border: #fffc;
    --muted-foreground: #fff;
  }

  button, a, input, textarea, select {
    border-width: 2px !important;
  }

  a {
    text-decoration: underline;
  }

  button:focus, a:focus, input:focus, textarea:focus, select:focus {
    outline-width: 4px !important;
  }
}

html {
  font-size: var(--font-size);
  overflow: hidden auto;
}

.text-ios-red {
  color: var(--ios-red);
}

.dark .text-ios-red {
  color: var(--ios-red-dark);
}

.bg-ios-red {
  background-color: var(--ios-red);
}

.dark .bg-ios-red {
  background-color: var(--ios-red-dark);
}

.bg-ios-red\/10 {
  background-color: rgb(from var(--ios-red) r g b / .1);
}

.dark .bg-ios-red\/10 {
  background-color: rgb(from var(--ios-red-dark) r g b / .2);
}

.bg-ios-red\/20 {
  background-color: rgb(from var(--ios-red) r g b / .2);
}

.dark .bg-ios-red\/20 {
  background-color: rgb(from var(--ios-red-dark) r g b / .3);
}

.border-ios-red\/20 {
  border-color: rgb(from var(--ios-red) r g b / .2);
}

.border-ios-red\/30 {
  border-color: rgb(from var(--ios-red) r g b / .3);
}

.text-ios-orange {
  color: var(--ios-orange);
}

.dark .text-ios-orange {
  color: var(--ios-orange-dark);
}

.bg-ios-orange {
  background-color: var(--ios-orange);
}

.dark .bg-ios-orange {
  background-color: var(--ios-orange-dark);
}

.bg-ios-orange\/10 {
  background-color: rgb(from var(--ios-orange) r g b / .1);
}

.dark .bg-ios-orange\/10 {
  background-color: rgb(from var(--ios-orange-dark) r g b / .2);
}

.bg-ios-orange\/20 {
  background-color: rgb(from var(--ios-orange) r g b / .2);
}

.dark .bg-ios-orange\/20 {
  background-color: rgb(from var(--ios-orange-dark) r g b / .3);
}

.border-ios-orange\/20 {
  border-color: rgb(from var(--ios-orange) r g b / .2);
}

.text-ios-yellow {
  color: var(--ios-yellow);
}

.dark .text-ios-yellow {
  color: var(--ios-yellow-dark);
}

.bg-ios-yellow {
  background-color: var(--ios-yellow);
}

.bg-ios-yellow\/10 {
  background-color: rgb(from var(--ios-yellow) r g b / .1);
}

.text-ios-green {
  color: var(--ios-green);
}

.dark .text-ios-green {
  color: var(--ios-green-dark);
}

.bg-ios-green {
  background-color: var(--ios-green);
}

.dark .bg-ios-green {
  background-color: var(--ios-green-dark);
}

.bg-ios-green\/10 {
  background-color: rgb(from var(--ios-green) r g b / .1);
}

.dark .bg-ios-green\/10 {
  background-color: rgb(from var(--ios-green-dark) r g b / .2);
}

.bg-ios-green\/20 {
  background-color: rgb(from var(--ios-green) r g b / .2);
}

.border-ios-green {
  border-color: var(--ios-green);
}

.border-ios-green\/20 {
  border-color: rgb(from var(--ios-green) r g b / .2);
}

.text-ios-blue {
  color: var(--ios-blue);
}

.dark .text-ios-blue {
  color: var(--ios-blue-dark);
}

.bg-ios-blue {
  background-color: var(--ios-blue);
}

.dark .bg-ios-blue {
  background-color: var(--ios-blue-dark);
}

.bg-ios-blue\/5 {
  background-color: rgb(from var(--ios-blue) r g b / .05);
}

.bg-ios-blue\/10 {
  background-color: rgb(from var(--ios-blue) r g b / .1);
}

.dark .bg-ios-blue\/10 {
  background-color: rgb(from var(--ios-blue-dark) r g b / .2);
}

.bg-ios-blue\/20 {
  background-color: rgb(from var(--ios-blue) r g b / .2);
}

.border-ios-blue\/20 {
  border-color: rgb(from var(--ios-blue) r g b / .2);
}

.text-ios-indigo {
  color: var(--ios-indigo);
}

.dark .text-ios-indigo {
  color: var(--ios-indigo-dark);
}

.bg-ios-indigo {
  background-color: var(--ios-indigo);
}

.bg-ios-indigo\/20 {
  background-color: rgb(from var(--ios-indigo) r g b / .2);
}

.text-ios-purple {
  color: var(--ios-purple);
}

.dark .text-ios-purple {
  color: var(--ios-purple-dark);
}

.bg-ios-purple {
  background-color: var(--ios-purple);
}

.bg-ios-purple\/10 {
  background-color: rgb(from var(--ios-purple) r g b / .1);
}

.bg-ios-purple\/20 {
  background-color: rgb(from var(--ios-purple) r g b / .2);
}

.dark .bg-ios-purple\/20 {
  background-color: rgb(from var(--ios-purple-dark) r g b / .3);
}

.bg-ios-red\/5 {
  background-color: rgb(from var(--ios-red) r g b / .05);
}

.bg-ios-red\/90, .hover\:bg-ios-red\/90:hover {
  background-color: rgb(from var(--ios-red) r g b / .9);
}

.hover\:bg-ios-red\/20:hover {
  background-color: rgb(from var(--ios-red) r g b / .2);
}

.hover\:bg-ios-red:hover {
  background-color: var(--ios-red);
}

.dark .hover\:bg-ios-red:hover {
  background-color: var(--ios-red-dark);
}

.bg-ios-orange\/5 {
  background-color: rgb(from var(--ios-orange) r g b / .05);
}

.bg-ios-orange\/15 {
  background-color: rgb(from var(--ios-orange) r g b / .15);
}

.bg-ios-orange\/90, .hover\:bg-ios-orange\/90:hover {
  background-color: rgb(from var(--ios-orange) r g b / .9);
}

.hover\:bg-ios-orange\/10:hover {
  background-color: rgb(from var(--ios-orange) r g b / .1);
}

.bg-ios-green\/5 {
  background-color: rgb(from var(--ios-green) r g b / .05);
}

.bg-ios-green\/15 {
  background-color: rgb(from var(--ios-green) r g b / .15);
}

.bg-ios-green\/90, .hover\:bg-ios-green\/90:hover {
  background-color: rgb(from var(--ios-green) r g b / .9);
}

.hover\:bg-ios-green\/20:hover {
  background-color: rgb(from var(--ios-green) r g b / .2);
}

.hover\:bg-ios-green:hover {
  background-color: var(--ios-green);
}

.dark .hover\:bg-ios-green:hover {
  background-color: var(--ios-green-dark);
}

.bg-ios-blue\/90 {
  background-color: rgb(from var(--ios-blue) r g b / .9);
}

.hover\:bg-ios-blue\/10:hover {
  background-color: rgb(from var(--ios-blue) r g b / .1);
}

.hover\:bg-ios-blue:hover {
  background-color: var(--ios-blue);
}

.dark .hover\:bg-ios-blue:hover {
  background-color: var(--ios-blue-dark);
}

.border-ios-orange\/30 {
  border-color: rgb(from var(--ios-orange) r g b / .3);
}

.border-ios-green\/30 {
  border-color: rgb(from var(--ios-green) r g b / .3);
}

.focus-visible\:ring-ios-red:focus-visible {
  --tw-ring-color: var(--ios-red);
}

.focus-visible\:ring-ios-orange:focus-visible {
  --tw-ring-color: var(--ios-orange);
}

.focus-visible\:ring-ios-green:focus-visible {
  --tw-ring-color: var(--ios-green);
}

.focus-visible\:ring-ios-blue:focus-visible {
  --tw-ring-color: var(--ios-blue);
}

.border-ios-red {
  border-color: var(--ios-red);
}

.dark .border-ios-red {
  border-color: var(--ios-red-dark);
}

.border-ios-orange {
  border-color: var(--ios-orange);
}

.dark .border-ios-orange {
  border-color: var(--ios-orange-dark);
}

.hover\:border-ios-red:hover {
  border-color: var(--ios-red);
}

.dark .hover\:border-ios-red:hover {
  border-color: var(--ios-red-dark);
}

.hover\:border-ios-green:hover {
  border-color: var(--ios-green);
}

.dark .hover\:border-ios-green:hover {
  border-color: var(--ios-green-dark);
}

.hover\:border-ios-orange:hover {
  border-color: var(--ios-orange);
}

.dark .hover\:border-ios-orange:hover {
  border-color: var(--ios-orange-dark);
}

.bg-ios-gray-1 {
  background-color: var(--ios-gray-1);
}

.bg-ios-gray-2 {
  background-color: var(--ios-gray-2);
}

.bg-ios-gray-3 {
  background-color: var(--ios-gray-3);
}

.bg-ios-gray-4 {
  background-color: var(--ios-gray-4);
}

.bg-ios-gray-5 {
  background-color: var(--ios-gray-5);
}

.bg-ios-gray-6 {
  background-color: var(--ios-gray-6);
}

.hover\:bg-ios-gray-4:hover {
  background-color: var(--ios-gray-4);
}

.text-ios-label {
  color: var(--ios-label);
}

.text-ios-secondary-label {
  color: var(--ios-secondary-label);
}

.text-ios-tertiary-label {
  color: var(--ios-tertiary-label);
}

.text-ios-quaternary-label {
  color: var(--ios-quaternary-label);
}

.bg-ios-green-light {
  background-color: var(--ios-green-light);
}

.calendar-view-container {
  height: calc(100vh - var(--bottom-nav-safe-height));
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  overflow: hidden;
}

.calendar-top-nav {
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(var(--background-rgb), .8);
  z-index: 10;
  flex-shrink: 0;
  padding: .75rem 1.5rem;
  position: sticky;
  top: 0;
}

.calendar-nav-inner {
  justify-content: flex-end;
  align-items: center;
  max-width: 1200px;
  min-height: 3.5rem;
  margin: 0 auto;
  padding: .5rem 1rem;
  display: flex;
}

.calendar-nav-button {
  background-color: var(--secondary);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: .75rem;
  align-items: center;
  gap: .25rem;
  padding: .5rem .875rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.calendar-nav-button:hover {
  background-color: var(--muted);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #00843d26;
}

.calendar-nav-button:active {
  transform: scale(.95);
}

.cursor-crosshair {
  cursor: crosshair;
}

.calendar-view-active {
  background-color: var(--ios-gray-5);
}

.calendar-header {
  background-color: var(--background);
  flex-shrink: 0;
  padding: 0 1rem .5rem;
}

.calendar-month-title {
  margin-bottom: .25rem;
  font-size: 1.75rem;
  font-weight: 700;
}

.calendar-cycle-badge {
  background-color: var(--ios-green-light);
  color: var(--ios-green);
  border-radius: 9999px;
  align-items: center;
  gap: .375rem;
  padding: .125rem .625rem;
  display: inline-flex;
}

.calendar-content {
  flex: 1;
  min-height: 0;
  padding: 0 1.25rem;
  overflow-y: auto;
}

.calendar-content-fullscreen {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.calendar-content-fullscreen::-webkit-scrollbar {
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.calendar-content-fullscreen::-webkit-scrollbar-thumb {
  display: none !important;
}

.calendar-content-fullscreen::-webkit-scrollbar-track {
  display: none !important;
}

.calendar-bottom-nav {
  padding: .75rem 1.25rem calc(.75rem + var(--safe-area-inset-bottom));
  background-color: var(--background);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.calendar-bottom-nav-floating {
  padding: 0 1rem calc(.5rem + var(--safe-area-inset-bottom));
  z-index: 50;
  flex-shrink: 0;
  position: relative;
}

.calendar-bottom-nav-floating > .calendar-nav-inner {
  -webkit-backdrop-filter: blur(20px);
  background: #fffc;
  border: 1px solid #00000014;
  border-radius: 16px;
  padding: .5rem 1rem;
  box-shadow: 0 8px 24px #00000014, 0 2px 6px #0000000a, inset 0 0 0 .5px #ffffff80;
}

.dark .calendar-bottom-nav-floating > .calendar-nav-inner {
  background: #1c1c1ecc;
  border: 1px solid #ffffff1f;
  box-shadow: 0 8px 24px #0006, 0 2px 6px #0003, inset 0 0 0 .5px #ffffff1a;
}

.agenda-view {
  padding: 1rem 0;
}

.agenda-summary {
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
  display: grid;
}

.agenda-stat-card {
  border-radius: var(--radius);
  background-color: var(--card);
  border: 1px solid var(--border);
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  display: flex;
}

.agenda-stat-icon {
  border-radius: 9999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.agenda-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.agenda-stat-label {
  color: var(--ios-secondary-label);
  font-size: .75rem;
}

.agenda-list {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.agenda-day-item {
  border-radius: var(--radius);
  background-color: var(--card);
  border: 1px solid var(--border);
  text-align: left;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .75rem 1rem;
  transition: background-color .15s;
  display: flex;
}

.agenda-day-item:hover {
  background-color: var(--accent);
}

.agenda-day-date {
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 3rem;
  display: flex;
}

.agenda-day-number {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.agenda-day-name {
  color: var(--ios-secondary-label);
  text-transform: uppercase;
  font-size: .75rem;
}

.agenda-shift-badge {
  border-radius: 9999px;
  padding: .25rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  display: inline-block;
}

.agenda-hours {
  color: var(--ios-secondary-label);
  margin-left: auto;
  font-size: .875rem;
  font-weight: 600;
}

@media (width <= 640px) {
  .calendar-month-title {
    font-size: 1.875rem;
  }

  .agenda-summary {
    grid-template-columns: 1fr;
  }

  .agenda-stat-card {
    padding: .75rem;
  }
}

.app-main-content {
  min-height: calc(100vh - var(--bottom-nav-safe-height));
  padding-top: 0;
}

.header-container {
  z-index: 10;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: .5px solid #0000001a;
  width: 100%;
  position: sticky;
  top: 0;
}

.dark .header-container {
  border-bottom: .5px solid #ffffff1f;
}

.header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.header-content {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  min-height: 3rem;
  padding: .625rem 0;
  display: grid;
}

.header-section-left {
  justify-content: flex-start;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.header-section-center {
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  display: flex;
}

.header-section-right {
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  display: flex;
}

[dir="rtl"] .header-section-left {
  justify-content: flex-end;
}

[dir="rtl"] .header-section-right {
  justify-content: flex-start;
}

.header-text-primary {
  color: var(--foreground);
  letter-spacing: -.01em;
  font-size: .9375rem;
  font-weight: 600;
}

.header-text-secondary {
  color: var(--ios-secondary-label);
  font-size: .875rem;
  font-weight: 500;
}

.header-text-status {
  color: var(--primary);
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
}

.header-text-location {
  color: var(--ios-tertiary-label);
  font-size: .8125rem;
  font-weight: 500;
}

.header-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ios-secondary-label);
  flex-shrink: 0;
}

.header-icon-primary {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
  flex-shrink: 0;
}

.header-status-badge {
  color: var(--primary);
  background-color: #00843d1a;
  border-radius: .5rem;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  font-size: .8125rem;
  font-weight: 600;
  display: inline-flex;
}

.dark .header-status-badge {
  background-color: #00843d33;
}

.header-cycle-day {
  background-color: var(--ios-gray-2);
  font-variant-numeric: tabular-nums;
  border-radius: .375rem;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .5rem;
  font-size: .8125rem;
  font-weight: 600;
  display: inline-flex;
}

.dark .header-cycle-day {
  background-color: var(--ios-gray-3);
}

.header-days-off {
  color: var(--ios-green);
  font-variant-numeric: tabular-nums;
  background-color: #34c7591a;
  border-radius: .375rem;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .5rem;
  font-size: .8125rem;
  font-weight: 600;
  display: inline-flex;
}

.dark .header-days-off {
  color: var(--ios-green-dark);
  background-color: #32d74b33;
}

@media (width <= 768px) {
  .header-inner {
    padding: 0 .75rem;
  }

  .header-content {
    gap: .5rem;
    min-height: 2.75rem;
    padding: .5rem 0;
  }

  .header-text-primary {
    font-size: .875rem;
  }

  .header-text-status {
    font-size: .9375rem;
  }

  .header-icon {
    width: 1rem;
    height: 1rem;
  }
}

@media (width <= 480px) {
  .header-inner {
    padding: 0 .5rem;
  }

  .header-content {
    gap: .375rem;
  }

  .header-text-primary {
    font-size: .8125rem;
  }

  .header-text-secondary {
    font-size: .75rem;
  }

  .header-text-status {
    font-size: .875rem;
  }

  .header-text-location {
    font-size: .75rem;
  }
}

.ios-input {
  background-color: var(--ios-gray-2);
  width: 100%;
  color: var(--foreground);
  border: .5px solid #0000;
  border-radius: .625rem;
  padding: .625rem .875rem;
  font-size: 1rem;
  transition: all .15s;
}

.ios-input:focus {
  background-color: var(--ios-gray-3);
  border-color: var(--primary);
  outline: none;
}

.dark .ios-input {
  background-color: var(--ios-gray-3);
  color: var(--foreground);
}

.dark .ios-input:focus {
  background-color: var(--ios-gray-4);
}

.ios-checkbox {
  border: 2px solid var(--ios-gray-4);
  appearance: none;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  transition: all .15s;
}

.ios-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

.ios-checkbox:hover:not(:checked) {
  border-color: var(--primary);
}

.ios-button-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  border: none;
  border-radius: .625rem;
  justify-content: center;
  align-items: center;
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.ios-button-primary:hover:not(:disabled) {
  opacity: .9;
}

.ios-button-primary:active:not(:disabled) {
  transform: scale(.98);
}

.ios-button-primary:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.section-header {
  color: var(--muted-foreground);
  letter-spacing: -.01em;
  font-size: .9375rem;
  font-weight: 600;
}

.matrix-category-button {
  background: var(--ios-gray-2);
  cursor: pointer;
  border: 1.5px solid #0000;
  border-radius: .625rem;
  align-items: center;
  gap: .375rem;
  padding: .5rem .625rem;
  transition: all .2s;
  display: flex;
}

.dark .matrix-category-button {
  background: var(--ios-gray-3);
}

.matrix-category-button:hover {
  opacity: .9;
}

.matrix-category-button-selected {
  background: var(--background);
  box-shadow: 0 1px 3px #0000001a;
}

.dark .matrix-category-button-selected {
  background: var(--ios-gray-4);
}

.matrix-quadrant {
  background: var(--ios-gray-2);
  border-radius: .75rem;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.dark .matrix-quadrant {
  background: var(--ios-gray-3);
}

.matrix-quadrant-header {
  background: var(--background);
  border-left: 3px solid;
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: .5rem;
  padding: .75rem;
  display: flex;
}

.dark .matrix-quadrant-header {
  background: var(--ios-gray-4);
}

.matrix-quadrant-content {
  -webkit-overflow-scrolling: touch;
  max-height: 20rem;
  padding: .75rem;
  overflow-y: auto;
}

.matrix-quadrant-content::-webkit-scrollbar {
  width: .25rem;
}

.matrix-quadrant-content::-webkit-scrollbar-track {
  background: none;
}

.matrix-quadrant-content::-webkit-scrollbar-thumb {
  background: var(--ios-gray-4);
  border-radius: 9999px;
}

.matrix-task-item {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: .625rem;
  align-items: center;
  gap: .625rem;
  padding: .625rem;
  display: flex;
}

.dark .matrix-task-item {
  background: var(--card);
}

.matrix-category-picker {
  background: var(--background);
  border: 1px solid var(--border);
  z-index: 50;
  border-radius: .625rem;
  min-width: 8rem;
  margin-top: .25rem;
  position: absolute;
  top: 100%;
  right: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px #0000001a;
}

.dark .matrix-category-picker {
  background: var(--card);
  box-shadow: 0 4px 12px #0000004d;
}

.matrix-category-picker-item {
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .625rem .75rem;
  transition: background-color .15s;
  display: flex;
}

.matrix-category-picker-item:hover {
  background: var(--ios-gray-2);
}

.dark .matrix-category-picker-item:hover {
  background: var(--ios-gray-3);
}

.matrix-mini-quadrant {
  background: var(--ios-gray-2);
  border-left: 2.5px solid;
  border-radius: .5rem;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem .625rem;
  display: flex;
}

.dark .matrix-mini-quadrant {
  background: var(--ios-gray-3);
}

.ios-modal-overlay {
  z-index: 50;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  animation: .2s ease-out fadeIn;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ios-modal-container {
  width: 100%;
  max-width: 36rem;
  max-height: 85vh;
  animation: .3s ease-out slideUp;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.ios-modal-content {
  flex-direction: column;
  max-height: 85vh;
  display: flex;
  overflow: hidden;
}

.ios-modal-header {
  border-bottom: .5px solid var(--border);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  display: flex;
}

.ios-modal-title {
  color: var(--foreground);
  font-size: 1.25rem;
  font-weight: 700;
}

.ios-modal-body {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.ios-modal-body::-webkit-scrollbar {
  width: .375rem;
}

.ios-modal-body::-webkit-scrollbar-track {
  background: none;
}

.ios-modal-body::-webkit-scrollbar-thumb {
  background: var(--ios-gray-4);
  border-radius: 9999px;
}

.ios-close-button {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  transition: background-color .15s;
}

.ios-close-button:hover {
  background-color: var(--ios-gray-3);
}

@media (width <= 640px) {
  .ios-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .ios-modal-container {
    border-radius: 1rem 1rem 0 0;
    max-width: 100%;
    max-height: 90vh;
  }

  .ios-modal-content {
    border-radius: 1rem 1rem 0 0;
    max-height: 90vh;
  }
}

[lang="ar"] .header-text-primary, [lang="ar"] .header-text-status {
  letter-spacing: 0;
  font-weight: 700;
}

[lang="ar"] .header-text-secondary {
  font-weight: 500;
}

.event-card-minimal {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: transform .15s;
}

.event-card-minimal:focus, .event-card-minimal:focus-visible {
  outline: none !important;
}

.event-card-minimal:active {
  transform: scale(.98);
}

.event-card-top {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  display: flex;
}

.event-icon-minimal {
  background-color: var(--primary);
  border-radius: .625rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.event-icon {
  color: #fff;
  stroke-width: 2.5px;
  width: 1.25rem;
  height: 1.25rem;
}

.event-time-minimal {
  color: var(--ios-secondary-label);
  font-variant-numeric: tabular-nums;
  font-size: .9375rem;
  font-weight: 600;
}

.event-card-main {
  flex-direction: column;
  gap: .375rem;
  display: flex;
}

.event-title-minimal {
  letter-spacing: 0;
  color: var(--muted-foreground);
  text-transform: none;
  margin-bottom: .25rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.event-subtitle-minimal {
  color: var(--ios-secondary-label);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
}

[lang="ar"] .event-title-minimal {
  letter-spacing: 0;
  font-weight: 600;
  line-height: 1.5;
}

.event-list-expanded {
  margin-top: 1rem;
  animation: .3s ease-out expandDown;
  overflow: hidden;
}

@keyframes expandDown {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 1000px;
  }
}

.event-divider {
  background-color: var(--border);
  height: 1px;
  margin: 1rem 0;
}

.event-list-item {
  background-color: var(--secondary);
  border-radius: .75rem;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
  padding: .75rem;
  transition: all .15s;
  display: flex;
}

.event-list-item:hover {
  background-color: var(--muted);
}

.event-list-item:active {
  transform: scale(.98);
}

.event-list-item-icon {
  background-color: var(--background);
  width: 2rem;
  height: 2rem;
  color: var(--primary);
  border-radius: .5rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.event-list-item-content {
  flex: 1;
  min-width: 0;
}

.event-list-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  margin-bottom: .125rem;
}

.event-list-item-subtitle {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.event-list-item-detail {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (width <= 640px) {
  .event-card-minimal {
    padding: 1.25rem;
  }

  .event-title-minimal {
    font-size: 1.75rem;
  }

  .event-subtitle-minimal {
    font-size: 1rem;
  }

  .event-icon-minimal {
    width: 2.25rem;
    height: 2.25rem;
  }

  .event-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .event-list-item {
    padding: .625rem;
  }

  .event-list-item-detail {
    display: none;
  }
}

.progress-ring-container {
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
}

.progress-ring {
  width: 120px;
  height: 120px;
  position: relative;
}

.progress-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring-circle-bg {
  fill: none;
  stroke: var(--secondary);
  stroke-width: 8px;
}

.progress-ring-circle {
  fill: none;
  stroke-width: 8px;
  stroke-linecap: round;
  transition: stroke-dashoffset .5s;
}

.progress-ring-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.progress-ring-percentage {
  color: var(--foreground);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.progress-ring-label {
  color: var(--muted-foreground);
  max-width: 100px;
  margin-top: .25rem;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.2;
}

.progress-rings-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  justify-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  display: grid;
}

@media (width <= 640px) {
  .progress-ring {
    width: 100px;
    height: 100px;
  }

  .progress-ring-percentage {
    font-size: 1.5rem;
  }

  .progress-ring-label {
    font-size: .625rem;
  }
}

.multi-ring-wrapper {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 16px #00000014;
}

.dark .multi-ring-wrapper {
  background: #000;
  box-shadow: 0 4px 16px #0000004d;
}

.multi-ring-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
}

.multi-ring-container-horizontal {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
}

.multi-ring {
  flex-shrink: 0;
  animation: 3s ease-in-out infinite ringPulse;
  position: relative;
}

@keyframes ringPulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

.multi-ring-svg {
  width: 100%;
  height: 100%;
}

.multi-ring-center {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  animation: 4s ease-in-out infinite centerBreathe;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes centerBreathe {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .85;
  }
}

.multi-ring-center-icon {
  margin-bottom: .25rem;
  animation: 8s linear infinite iconRotate;
}

@keyframes iconRotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.multi-ring-center-primary {
  color: var(--foreground);
  letter-spacing: -.02em;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.multi-ring-center-secondary {
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1;
}

.multi-ring-labels {
  flex-direction: column;
  flex: 1;
  gap: 1rem;
  display: flex;
}

.multi-ring-label-item {
  align-items: center;
  gap: .75rem;
  transition: all .3s;
  display: flex;
}

.multi-ring-label-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  transition: all .3s;
}

.multi-ring-label-content {
  flex-direction: column;
  flex: 1;
  gap: .125rem;
  display: flex;
}

.multi-ring-label-text {
  color: var(--foreground);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
}

.multi-ring-label-value {
  color: var(--muted-foreground);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.2;
}

@media (width <= 640px) {
  .multi-ring-wrapper {
    padding: 1.25rem;
  }

  .multi-ring-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .multi-ring-container-horizontal {
    flex-direction: row;
    gap: 1rem;
  }

  .multi-ring {
    animation: none;
  }

  .multi-ring-labels {
    width: auto;
  }

  .multi-ring-center-primary {
    font-size: 1.5rem;
  }

  .multi-ring-center-secondary {
    font-size: .625rem;
  }

  .multi-ring-label-text {
    font-size: .6875rem;
  }

  .multi-ring-label-value {
    font-size: .625rem;
  }
}

.prayer-grid-compact {
  border-top: 1px solid var(--border);
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  display: grid;
}

.prayer-grid-compact-no-border {
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  display: grid;
}

.prayer-time-pill {
  background-color: hsl(var(--accent) / .5);
  border-radius: .75rem;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
  transition: all .15s;
  display: flex;
}

.prayer-time-pill:hover {
  background-color: hsl(var(--accent));
}

.prayer-time-pill-active {
  background-color: hsl(var(--primary) / .2);
}

.prayer-icon {
  width: 1rem;
  height: 1rem;
  margin-bottom: .25rem;
}

.prayer-name {
  color: var(--muted-foreground);
  text-align: center;
  margin-bottom: .125rem;
  font-size: .625rem;
}

.prayer-time {
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-weight: 500;
}

@media (width <= 640px) {
  .prayer-grid-compact, .prayer-grid-compact-no-border {
    gap: .375rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .prayer-time-pill {
    padding: .375rem;
  }

  .prayer-icon {
    width: .875rem;
    height: .875rem;
  }

  .prayer-name {
    font-size: .5625rem;
  }

  .prayer-time {
    font-size: .6875rem;
  }
}

.task-stats-grid {
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
  margin-bottom: 1rem;
  display: grid;
}

.task-stat-mini {
  background-color: var(--secondary);
  border-radius: .75rem;
  flex-direction: column;
  gap: .25rem;
  padding: .75rem;
  transition: all .15s;
  display: flex;
}

.task-stat-mini:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
}

.task-stat-label {
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .025em;
  font-size: .6875rem;
  font-weight: 500;
}

.task-stat-value {
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.task-progress-section {
  border-top: 1px solid var(--border);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.task-progress-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  display: flex;
}

.task-progress-label {
  color: var(--foreground);
  font-size: .8125rem;
  font-weight: 600;
}

.task-progress-percentage {
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  font-size: .875rem;
  font-weight: 700;
}

.progress-bar-track {
  background: linear-gradient(to right, hsl(var(--secondary)), hsl(var(--muted)));
  border-radius: 9999px;
  height: .5rem;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #0000001a;
}

.dark .progress-bar-track {
  background: linear-gradient(to right, hsl(var(--secondary)), #8a57fe1a);
  box-shadow: inset 0 1px 2px #0000004d;
}

.progress-bar-fill {
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-400) 50%, var(--primary-300) 100%);
  border-radius: 9999px;
  height: 100%;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
  animation: 2s ease-in-out infinite shimmer;
  position: relative;
  box-shadow: 0 0 8px #8a57fe66, 0 1px 3px #8a57fe4d;
}

@keyframes shimmer {
  0%, 100% {
    box-shadow: 0 0 8px #8a57fe66, 0 1px 3px #8a57fe4d;
  }

  50% {
    box-shadow: 0 0 12px #8a57fe99, 0 1px 4px #8a57fe66;
  }
}

.progress-bar-fill:after {
  content: "";
  background: linear-gradient(#ffffff4d, #0000);
  border-radius: 9999px 9999px 0 0;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.category-progress-list {
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.25rem;
  display: flex;
}

.category-progress-item {
  flex-direction: column;
  gap: .375rem;
  display: flex;
}

.category-progress-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.category-progress-name {
  color: var(--foreground);
  font-size: .75rem;
  font-weight: 600;
}

.category-progress-count {
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  font-size: .6875rem;
  font-weight: 500;
}

.category-bar-track {
  background-color: var(--secondary);
  border-radius: 9999px;
  height: .375rem;
  position: relative;
  overflow: hidden;
}

.category-bar-fill {
  border-radius: 9999px;
  height: 100%;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.category-bar-do-first {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

.category-bar-schedule {
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-400) 100%);
}

.category-bar-delegate {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.category-bar-eliminate {
  background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
}

.progress-bar-segmented {
  background-color: var(--secondary);
  border-radius: 9999px;
  height: .5rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.progress-segment {
  height: 100%;
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.progress-segment:not(:last-child):after {
  content: "";
  background-color: #ffffff4d;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.completion-badge {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  color: #fff;
  font-variant-numeric: tabular-nums;
  border-radius: 9999px;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 2px 8px #8a57fe40;
}

.completion-badge-icon {
  width: .875rem;
  height: .875rem;
}

.flex-center-between {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.card-section-header-compact {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.card-section-header {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.empty-state {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  display: flex;
}

.empty-state-icon {
  background: #8a57fe1a;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  display: flex;
}

.empty-state-title {
  color: var(--foreground);
  margin-bottom: .5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.empty-state-description {
  color: var(--muted-foreground);
  max-width: 280px;
  margin-bottom: 1.5rem;
  font-size: .875rem;
}

.empty-state-template-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  width: 100%;
  max-width: 320px;
  display: grid;
}

.empty-state-template-btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: #8a57fe0d;
  border: 1px solid #8a57fe1a;
  border-radius: .75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: 1rem .75rem;
  transition: all .2s;
  display: flex;
}

.empty-state-template-btn:active {
  background: #8a57fe1a;
  transform: scale(.95);
}

.template-label {
  color: var(--foreground);
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
}

.dark .empty-state-template-btn {
  background: #8a57fe14;
  border: 1px solid #8a57fe26;
}

.dark .empty-state-template-btn:active {
  background: #8a57fe26;
}

.task-empty-state {
  text-align: center;
  color: var(--muted-foreground);
  padding: 2rem 1rem;
}

.task-empty-icon {
  opacity: .3;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .75rem;
}

.task-empty-text {
  font-size: .9375rem;
  font-weight: 500;
}

@media (width <= 640px) {
  .task-stats-grid {
    gap: .5rem;
  }

  .task-stat-mini {
    padding: .625rem;
  }

  .task-stat-value {
    font-size: 1.25rem;
  }

  .progress-bar-track {
    height: .375rem;
  }

  .category-progress-list {
    gap: .625rem;
  }
}

.task-input-container {
  border-top: 1px solid var(--border);
  flex-direction: column;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  display: flex;
}

.task-input {
  background-color: var(--secondary);
  border: 1px solid var(--border);
  width: 100%;
  color: var(--foreground);
  border-radius: .75rem;
  outline: none;
  padding: .75rem;
  font-size: .875rem;
  transition: all .15s;
}

.task-input:focus {
  background-color: var(--background);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px #8a57fe1a;
}

.task-input::placeholder {
  color: var(--muted-foreground);
}

.task-category-select {
  background-color: var(--secondary);
  border: 1px solid var(--border);
  width: 100%;
  color: var(--foreground);
  cursor: pointer;
  border-radius: .75rem;
  outline: none;
  padding: .75rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .15s;
}

.task-category-select:focus {
  background-color: var(--background);
  border-color: var(--primary);
}

.task-add-button {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  width: 100%;
  height: 2.5rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  color: #fff !important;
  border: none !important;
}

.task-add-button:hover {
  transform: translateY(-1px);
}

.task-add-button:active {
  transform: scale(.98);
}

@media (width <= 640px) {
  .task-input-container {
    gap: .375rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .task-input, .task-category-select {
    padding: .625rem;
    font-size: .8125rem;
  }

  .task-add-button {
    height: 2.25rem;
  }
}

.task-empty-state-enhanced {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  display: flex;
}

.task-empty-hint {
  color: var(--muted-foreground);
  opacity: .8;
  margin-top: .5rem;
  font-size: .875rem;
}

.task-filter-chips {
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  display: flex;
}

.task-filter-chip {
  background-color: var(--secondary);
  border: 1.5px solid var(--border);
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: 9999px;
  outline: none;
  align-items: center;
  gap: .25rem;
  padding: .375rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.task-filter-chip:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
}

.task-filter-chip:active {
  transform: scale(.95);
}

.task-filter-chip-active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.task-filter-chip-do-first.task-filter-chip-active {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  border-color: #ef4444;
}

.task-filter-chip-schedule.task-filter-chip-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  border-color: var(--primary);
}

.task-filter-chip-delegate.task-filter-chip-active {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  border-color: #3b82f6;
}

.task-filter-chip-dot {
  width: 8px;
  height: 8px;
}

.task-motivational-stats {
  background: linear-gradient(135deg, #8a57fe0d 0%, #a57dff0d 100%);
  border: 1px solid #8a57fe1a;
  border-radius: .75rem;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  display: flex;
}

.task-motivational-stat {
  flex: 1;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.task-motivational-value {
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 700;
}

.task-motivational-label {
  color: var(--muted-foreground);
  font-size: .75rem;
  font-weight: 500;
}

.task-preview-section {
  margin-bottom: 1rem;
}

.task-preview-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  display: flex;
}

.task-preview-title {
  color: var(--foreground);
  font-size: .875rem;
  font-weight: 600;
}

.task-preview-count {
  color: var(--muted-foreground);
  background-color: var(--secondary);
  border-radius: 9999px;
  padding: .25rem .5rem;
  font-size: .75rem;
  font-weight: 500;
}

.task-preview-list {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.task-preview-item-wrapper {
  flex-direction: column;
  gap: .375rem;
  display: flex;
  position: relative;
}

.task-preview-item {
  background-color: var(--secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  touch-action: pan-y;
  border-radius: .75rem;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  transition: all .15s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.task-preview-item:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #0000001a;
}

.task-preview-item:active {
  transform: scale(.98);
}

.task-preview-item-completed {
  opacity: .6;
  background-color: var(--muted);
}

.task-preview-item-completed:hover {
  opacity: .7;
}

.task-preview-checkbox {
  border: 2px solid var(--border);
  background-color: var(--background);
  cursor: pointer;
  border-radius: 50%;
  outline: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  transition: all .15s;
  display: flex;
}

.task-preview-checkbox:hover {
  border-color: var(--primary);
  background-color: #8a57fe1a;
}

.task-preview-checkbox:active {
  transform: scale(.9);
}

.task-preview-checkbox-completed {
  background-color: var(--primary);
  border-color: var(--primary);
}

.task-preview-checkbox-completed .task-preview-checkbox-inner {
  background-color: #fff;
  width: 10px;
  height: 10px;
}

.task-preview-checkbox-inner {
  background-color: #0000;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  transition: all .15s;
}

.task-preview-checkbox:hover .task-preview-checkbox-inner {
  background-color: var(--primary);
}

.task-preview-content {
  flex: 1;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  display: flex;
}

.task-category-badge-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.task-preview-text {
  color: var(--foreground);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .875rem;
  overflow: hidden;
}

.task-preview-text-completed {
  color: var(--muted-foreground);
  opacity: .7;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.task-swipe-indicator {
  justify-content: center;
  align-items: center;
  animation: .3s swipePulse;
  display: flex;
  position: absolute;
  right: 1rem;
}

@keyframes swipePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .8;
    transform: scale(1.1);
  }
}

.task-preview-see-all {
  border: 1.5px dashed var(--border);
  width: 100%;
  color: var(--muted-foreground);
  cursor: pointer;
  background-color: #0000;
  border-radius: .75rem;
  outline: none;
  margin-top: .5rem;
  padding: .625rem;
  font-size: .8125rem;
  font-weight: 600;
  transition: all .15s;
}

.task-preview-see-all:hover {
  background-color: var(--secondary);
  border-color: var(--primary);
  color: var(--primary);
}

.task-preview-see-all:active {
  transform: scale(.98);
}

.task-all-done {
  text-align: center;
  background: linear-gradient(135deg, #34c7590d 0%, #34c75905 100%);
  border: 1.5px dashed #34c7594d;
  border-radius: .75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  display: flex;
}

.task-all-done-icon {
  color: #34c759;
  width: 3rem;
  height: 3rem;
  margin-bottom: .75rem;
  animation: .6s celebration;
}

@keyframes celebration {
  0%, 100% {
    transform: scale(1)rotate(0);
  }

  25% {
    transform: scale(1.1)rotate(-5deg);
  }

  75% {
    transform: scale(1.1)rotate(5deg);
  }
}

.task-all-done-text {
  color: #34c759;
  margin-bottom: .25rem;
  font-size: 1rem;
  font-weight: 600;
}

.task-all-done-hint {
  color: var(--muted-foreground);
  opacity: .8;
  font-size: .875rem;
}

.task-quick-add-section {
  border-top: 1px solid var(--border);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.task-quick-add-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  display: flex;
}

.task-quick-add-title {
  color: var(--foreground);
  font-size: .875rem;
  font-weight: 600;
}

.task-category-indicator {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 9999px;
  padding: .25rem .625rem;
  font-size: .6875rem;
  font-weight: 700;
}

.task-input-row {
  margin-bottom: .75rem;
}

.task-input-enhanced {
  background-color: var(--secondary);
  border: 2px solid var(--border);
  width: 100%;
  color: var(--foreground);
  border-radius: .75rem;
  outline: none;
  padding: .875rem 1rem;
  font-size: .9375rem;
  transition: all .15s;
}

.task-input-enhanced:focus {
  background-color: var(--background);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px #8a57fe1a;
}

.task-input-enhanced::placeholder {
  color: var(--muted-foreground);
  opacity: .6;
}

.task-category-select-chips {
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  display: grid;
}

.task-category-chip {
  background-color: var(--secondary);
  border: 2px solid var(--border);
  color: var(--muted-foreground);
  cursor: pointer;
  text-align: center;
  border-radius: .75rem;
  outline: none;
  padding: .625rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  transition: all .15s;
}

.task-category-chip:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
}

.task-category-chip:active {
  transform: scale(.96);
}

.task-category-chip-active {
  font-weight: 700;
}

@media (width <= 640px) {
  .task-filter-chips {
    gap: .375rem;
  }

  .task-filter-chip {
    padding: .3125rem .625rem;
    font-size: .6875rem;
  }

  .task-motivational-stats {
    padding: .75rem;
  }

  .task-motivational-value {
    font-size: 1.125rem;
  }

  .task-motivational-label {
    font-size: .6875rem;
  }

  .task-preview-item {
    padding: .625rem;
  }

  .task-preview-text {
    font-size: .8125rem;
  }

  .task-category-select-chips {
    grid-template-columns: repeat(2, 1fr);
    gap: .375rem;
  }

  .task-category-chip {
    padding: .5rem .625rem;
    font-size: .75rem;
  }

  .task-quick-add-section {
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

.task-action-buttons {
  opacity: 1;
  align-items: center;
  gap: .375rem;
  padding-left: 2.25rem;
  transition: opacity .15s;
  display: flex;
}

.task-action-btn {
  background-color: var(--secondary);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  cursor: pointer;
  white-space: nowrap;
  border-radius: .5rem;
  outline: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: .25rem;
  padding: .5rem .625rem;
  font-size: .6875rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.task-action-btn:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px #0000001a;
}

.task-action-btn:active {
  transform: scale(.95);
}

.task-action-btn-edit {
  color: var(--primary);
  border-color: #00843d4d;
}

.task-action-btn-edit:hover {
  border-color: var(--primary);
  color: var(--primary);
  background-color: #00843d1a;
}

.task-action-btn-deadline {
  color: #3b82f6;
  border-color: #3b82f64d;
}

.task-action-btn-deadline:hover {
  color: #3b82f6;
  background-color: #3b82f61a;
  border-color: #3b82f6;
}

.task-action-btn-reminder {
  color: #ff9500;
  border-color: #ff95004d;
}

.task-action-btn-reminder:hover {
  color: #ff9500;
  background-color: #ff95001a;
  border-color: #ff9500;
}

.task-action-btn-delete {
  color: #ff3b30;
  border-color: #ff3b304d;
}

.task-action-btn-delete:hover {
  color: #ff3b30;
  background-color: #ff3b301a;
  border-color: #ff3b30;
}

@media (width <= 640px) {
  .task-action-buttons {
    gap: .25rem;
    padding-left: 2rem;
  }

  .task-action-btn {
    padding: .375rem .5rem;
    font-size: .625rem;
  }
}

.task-stat-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  display: flex;
}

.task-stat-item {
  align-items: center;
  gap: .375rem;
  display: flex;
}

.task-stat-value {
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  font-weight: 600;
}

.category-filter-row {
  align-items: center;
  gap: .375rem;
  margin-left: auto;
  display: flex;
}

.category-filter-chip {
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  font-size: .875rem;
  transition: all .2s;
  display: flex;
}

.category-filter-chip:active {
  transform: scale(.9);
}

.category-filter-chip-active {
  border-width: 2px;
  transform: scale(1.05);
}

.category-filter-chip-inactive {
  opacity: .6;
}

.category-filter-chip-do-first {
  background: #ef44441a;
  border-color: #ef4444;
}

.category-filter-chip-schedule {
  border-color: var(--primary);
  background: #00843d1a;
}

.category-filter-chip-delegate {
  background: #3b82f61a;
  border-color: #3b82f6;
}

.category-filter-chip-work-only {
  background: #ff95001a;
  border-color: #ff9500;
}

.category-filter-icon {
  width: .875rem;
  height: .875rem;
}

.more-tasks-btn {
  border: 1.5px dashed var(--border);
  width: 100%;
  color: var(--muted-foreground);
  cursor: pointer;
  background: none;
  border-radius: .75rem;
  margin-top: .5rem;
  padding: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  transition: all .2s;
}

.more-tasks-btn:hover {
  background: var(--secondary);
  border-color: var(--primary);
  color: var(--primary);
}

.more-tasks-btn:active {
  transform: scale(.98);
}

.completion-message {
  text-align: center;
  background: linear-gradient(135deg, #34c7590d 0%, #34c75905 100%);
  border: 1.5px dashed #34c7594d;
  border-radius: .75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  display: flex;
}

.completion-icon {
  color: #34c759;
  width: 3rem;
  height: 3rem;
  margin-bottom: .75rem;
  animation: .6s celebration;
}

.completion-text {
  color: #34c759;
  font-size: 1rem;
  font-weight: 600;
}

.task-input-section {
  border-top: 1px solid var(--border);
  flex-direction: column;
  gap: .75rem;
  margin-top: .75rem;
  padding-top: .75rem;
  display: flex;
}

.task-input-enhanced-compact {
  padding: .75rem;
  font-size: .875rem;
}

.category-select-row {
  gap: .5rem;
  display: flex;
}

.category-select-btn {
  cursor: pointer;
  background: var(--secondary);
  color: var(--muted-foreground);
  border: 1.5px solid #0000;
  border-radius: .625rem;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  padding: .5rem .625rem;
  font-size: .75rem;
  font-weight: 600;
  transition: all .2s;
  display: flex;
}

.category-select-btn:active {
  transform: scale(.95);
}

.category-select-btn-do-first {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
}

.category-select-btn-do-first-inactive {
  color: #ef4444;
  background: #ef44441a;
  border-color: #ef444433;
}

.category-select-btn-schedule {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.category-select-btn-schedule-inactive {
  color: var(--primary);
  background: #00843d1a;
  border-color: #00843d33;
}

.category-select-btn-delegate {
  color: #fff;
  background: #3b82f6;
  border-color: #3b82f6;
}

.category-select-btn-delegate-inactive {
  color: #3b82f6;
  background: #3b82f61a;
  border-color: #3b82f633;
}

.category-select-btn-eliminate {
  color: #fff;
  background: #6b7280;
  border-color: #6b7280;
}

.category-select-btn-eliminate-inactive {
  color: #6b7280;
  background: #6b72801a;
  border-color: #6b728033;
}

.category-select-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.work-checkbox-label {
  background: var(--secondary);
  cursor: pointer;
  border-radius: .625rem;
  align-items: center;
  gap: .5rem;
  padding: .625rem .75rem;
  transition: all .2s;
  display: flex;
}

.work-checkbox-label:hover {
  background: var(--muted);
}

.work-checkbox-label:active {
  transform: scale(.98);
}

.ios-checkbox {
  border: 2px solid var(--border);
  cursor: pointer;
  appearance: none;
  background: var(--background);
  border-radius: .375rem;
  width: 1.25rem;
  height: 1.25rem;
  transition: all .2s;
  position: relative;
}

.ios-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.ios-checkbox:checked:after {
  content: "✓";
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.work-checkbox-text {
  color: var(--foreground);
  font-size: .8125rem;
  font-weight: 500;
}

.manage-btn {
  justify-content: center;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin-top: .75rem;
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  display: flex;
}

.manage-btn-icon {
  width: 1rem;
  height: 1rem;
}

.task-preview-item-wrapper-completed {
  opacity: .7;
}

.settings-page {
  padding-bottom: 1.5rem;
}

.settings-header {
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 2.125rem;
  font-weight: 700;
}

html[dir="rtl"] .settings-header {
  text-align: right;
}

.settings-section {
  padding-left: 1rem;
  padding-right: 1rem;
}

.settings-section-header {
  color: var(--muted-foreground);
  text-transform: uppercase;
  margin-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: .8125rem;
  font-weight: 500;
}

html[dir="rtl"] .settings-section-header {
  text-align: right;
}

.settings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  overflow: hidden;
}

.settings-profile-card {
  text-align: center;
  padding: 1.5rem;
}

.settings-profile-avatar {
  background: #8a57fe1a;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto .75rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.settings-profile-avatar-bg {
  opacity: .1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.settings-profile-initials {
  color: var(--primary);
  z-index: 10;
  font-size: 1.875rem;
  font-weight: 600;
  position: relative;
}

.settings-profile-name {
  margin-bottom: .25rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.settings-profile-email {
  color: var(--muted-foreground);
  margin-bottom: .5rem;
  font-size: .9375rem;
}

.settings-profile-badge {
  background: #8a57fe1a;
  border-radius: 9999px;
  padding: .25rem .75rem;
  display: inline-block;
}

.settings-profile-badge-text {
  color: var(--primary);
  font-size: .8125rem;
  font-weight: 500;
}

.settings-setup-banner {
  border: 2px solid #8a57fe33;
  padding: 1rem;
}

html[dir="ltr"] .settings-setup-banner {
  text-align: left;
}

html[dir="rtl"] .settings-setup-banner {
  text-align: right;
}

.settings-setup-banner-content {
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
  display: flex;
}

html[dir="rtl"] .settings-setup-banner-content {
  flex-direction: row-reverse;
}

.settings-setup-icon {
  background: #8a57fe1a;
  border-radius: 9999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.settings-setup-text {
  flex: 1;
}

.settings-setup-title {
  margin-bottom: .25rem;
  font-size: .9375rem;
  font-weight: 600;
}

.settings-setup-description {
  color: var(--muted-foreground);
  font-size: .8125rem;
}

.settings-setup-button {
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: .5rem;
  width: 100%;
  padding: .625rem 1rem;
  font-weight: 500;
  transition: opacity .2s;
}

.settings-setup-button:active {
  opacity: .8;
}

.settings-list-item {
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .625rem 1rem;
  transition: background-color .2s;
  display: flex;
}

html[dir="rtl"] .settings-list-item {
  flex-direction: row-reverse;
}

.settings-list-item:last-child {
  border-bottom: none;
}

.settings-list-item:active {
  background: var(--muted);
}

.settings-list-item-icon {
  border-radius: .375rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
}

.settings-list-item-content {
  flex: 1;
  min-width: 0;
}

html[dir="ltr"] .settings-list-item-content {
  text-align: left;
}

html[dir="rtl"] .settings-list-item-content {
  text-align: right;
}

.settings-list-item-label {
  color: var(--muted-foreground);
  font-size: .8125rem;
}

.settings-list-item-value {
  font-size: 1.0625rem;
}

.settings-list-item-value-italic {
  color: var(--muted-foreground);
  font-style: italic;
}

.settings-list-item-title {
  font-size: 1.0625rem;
}

.settings-list-item-subtitle {
  color: var(--muted-foreground);
  font-size: .8125rem;
}

.settings-list-item-trailing {
  color: var(--muted-foreground);
  font-size: 1.0625rem;
}

.settings-list-item-chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.settings-toggle-row {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem;
  display: flex;
}

html[dir="rtl"] .settings-toggle-row {
  flex-direction: row-reverse;
}

.settings-toggle-row:last-child {
  border-bottom: none;
}

.settings-toggle-content {
  flex: 1;
  align-items: center;
  gap: .75rem;
  display: flex;
}

html[dir="ltr"] .settings-toggle-content {
  justify-content: flex-start;
}

html[dir="rtl"] .settings-toggle-content {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.settings-toggle-label {
  flex: 1;
  font-size: 1.0625rem;
}

html[dir="ltr"] .settings-toggle-label {
  text-align: left;
}

html[dir="rtl"] .settings-toggle-label {
  text-align: right;
}

.settings-checkbox-wrapper {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.settings-radio-item {
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .625rem 1rem;
  transition: background-color .2s;
  display: flex;
}

html[dir="rtl"] .settings-radio-item {
  flex-direction: row-reverse;
}

.settings-radio-item:last-child {
  border-bottom: none;
}

.settings-radio-item:active {
  background: var(--muted);
}

.settings-radio-checkmark {
  background: #00843d;
  border-radius: 9999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}

.settings-action-button {
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .625rem 1rem;
  transition: background-color .2s;
  display: flex;
}

.settings-action-button:last-child {
  border-bottom: none;
}

.settings-action-button:active {
  background: var(--muted);
}

.settings-action-button-text {
  color: #00843d;
  font-size: 1.0625rem;
  font-weight: 500;
}

.settings-action-button-danger {
  color: #ff3b30;
}

.settings-empty-note {
  text-align: center;
  color: var(--muted-foreground);
  padding: 1rem;
  font-size: .875rem;
  font-style: italic;
}

.settings-icon-brand {
  background: #8a57fe1a;
}

.settings-icon-blue {
  background: #007aff1a;
}

.settings-icon-green {
  background: #34c7591a;
}

.settings-icon-orange {
  background: #ff95001a;
}

.settings-icon-red {
  background: #ff3b301a;
}

.settings-icon-purple {
  background: #af52de1a;
}

.settings-icon-gray {
  background: #8e8e931a;
}

.settings-icon-olive {
  background: #6b7f391a;
}

.settings-icon-bus {
  background: #ff95001a;
}

.settings-icon-military {
  background: #6b7f391a;
}

.settings-list-item-extra {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.settings-list-item-extra-text {
  color: var(--muted-foreground);
  font-size: 1.0625rem;
}

.settings-list-item-extra-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.settings-list-item-check {
  background: #00843d;
  border-radius: 9999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}

.settings-list-item-border {
  border-bottom: 1px solid var(--border);
}

@media (width <= 640px) {
  .settings-header {
    font-size: 2rem;
  }

  .settings-list-item, .settings-toggle-row {
    padding: .5rem 1rem;
  }
}

.app-header {
  z-index: 50;
  background-color: var(--background);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(var(--background-rgb), .8);
  position: sticky;
  top: 0;
}

.calendar-active .app-header {
  z-index: -999;
}

.app-header-content {
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  height: 3.5rem;
  margin: 0 auto;
  padding: .75rem 1.5rem;
  display: flex;
}

.app-header-title {
  color: var(--primary);
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.app-header-settings-btn {
  background-color: var(--secondary);
  width: 2.5rem;
  height: 2.5rem;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: .75rem;
  outline: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.app-header-settings-btn:hover {
  background-color: var(--muted);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px #00843d26;
}

.app-header-settings-btn:active {
  transform: scale(.95);
}

.app-main-content {
  padding-top: .5rem;
}

@media (width <= 640px) {
  .app-header-content {
    height: 3rem;
    padding: .625rem 1rem;
  }

  .app-header-title {
    font-size: 1.375rem;
  }

  .app-header-settings-btn {
    width: 2.25rem;
    height: 2.25rem;
  }

  .calendar-top-nav {
    padding: .625rem 1rem;
  }

  .calendar-nav-inner {
    height: 3rem;
  }
}

.alarm-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 8rem;
}

.alarm-stats-card {
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.alarm-stats-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  display: grid;
}

.alarm-stat-item {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.alarm-stat-icon-wrapper {
  border-radius: .75rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.alarm-stat-icon-total {
  color: var(--primary);
  background-color: #00843d1a;
}

.alarm-stat-icon-active {
  color: #34c759;
  background-color: #34c7591a;
}

.alarm-stat-icon-day {
  color: #00843d;
  background-color: #00843d1a;
}

.alarm-stat-content {
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
  display: flex;
}

.alarm-stat-label {
  color: var(--muted-foreground);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .75rem;
  overflow: hidden;
}

.alarm-stat-value {
  color: var(--foreground);
  font-size: 1.25rem;
  font-weight: 700;
}

.alarm-stat-value-active {
  color: #34c759;
}

.alarm-list-section {
  margin-bottom: 2rem;
}

.alarm-section-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  display: flex;
}

.alarm-section-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.alarm-count-badge {
  background-color: var(--primary);
  color: #fff;
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
}

.alarm-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.alarm-empty-icon-wrapper {
  justify-content: center;
  margin-bottom: 1rem;
  display: flex;
}

.alarm-empty-icon {
  width: 4rem;
  height: 4rem;
  color: var(--muted-foreground);
  opacity: .5;
}

.alarm-empty-title {
  color: var(--foreground);
  margin-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.alarm-empty-subtitle {
  color: var(--muted-foreground);
  font-size: .875rem;
}

.alarm-list {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.alarm-card {
  cursor: pointer;
  padding: 1rem;
  transition: all .15s;
  position: relative;
  overflow: hidden;
}

.alarm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000001a;
}

.alarm-card:active {
  transform: scale(.98);
}

.alarm-card-disabled {
  opacity: .5;
}

.alarm-card-main {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.alarm-card-left {
  flex: 1;
  min-width: 0;
}

.alarm-time {
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.alarm-time-disabled {
  color: var(--muted-foreground);
}

.alarm-meta {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.alarm-label {
  color: var(--muted-foreground);
  font-size: .875rem;
}

.alarm-tags {
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.alarm-day-tag {
  background-color: #ffffff80;
  border: 1px solid;
  border-radius: .5rem;
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 600;
}

.alarm-feature-tag {
  background-color: var(--secondary);
  color: var(--muted-foreground);
  border-radius: .375rem;
  justify-content: center;
  align-items: center;
  padding: .25rem;
  display: flex;
}

.alarm-toggle {
  cursor: pointer;
  border: none;
  border-radius: 1rem;
  outline: none;
  flex-shrink: 0;
  width: 3rem;
  height: 1.75rem;
  transition: background-color .2s;
  position: relative;
}

.alarm-toggle-on {
  background-color: #34c759;
}

.alarm-toggle-off {
  background-color: var(--secondary);
}

.alarm-toggle-thumb {
  background-color: #fff;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform .2s;
  position: absolute;
  top: .125rem;
  box-shadow: 0 2px 4px #0003;
}

.alarm-toggle-on .alarm-toggle-thumb {
  transform: translateX(1.25rem);
}

.alarm-toggle-off .alarm-toggle-thumb {
  transform: translateX(.125rem);
}

.alarm-delete-btn {
  color: #ff3b30;
  cursor: pointer;
  opacity: 0;
  background-color: #ff3b301a;
  border: 1px solid #ff3b304d;
  border-radius: .5rem;
  outline: none;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: all .15s;
  display: flex;
  position: absolute;
  top: .75rem;
  right: .75rem;
}

.alarm-card:hover .alarm-delete-btn {
  opacity: 1;
}

.alarm-delete-btn:hover {
  background-color: #ff3b3033;
  transform: scale(1.1);
}

.alarm-delete-btn:active {
  transform: scale(.95);
}

.alarm-fab {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  color: #fff;
  cursor: pointer;
  z-index: 40;
  border: none;
  border-radius: 50%;
  outline: none;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  transition: all .2s;
  display: flex;
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  box-shadow: 0 4px 16px #00843d66;
}

.alarm-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px #8a57fe80;
}

.alarm-fab:active {
  transform: scale(.95);
}

.alarm-dialog-overlay {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 100;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  display: flex;
  position: fixed;
  inset: 0;
}

.alarm-dialog {
  background-color: var(--card);
  border-radius: 1rem;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 40px #0000004d;
}

.alarm-dialog-header {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  display: flex;
}

.alarm-dialog-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.alarm-dialog-close, .alarm-dialog-save {
  background-color: var(--secondary);
  width: 2.5rem;
  height: 2.5rem;
  color: var(--muted-foreground);
  cursor: pointer;
  border: none;
  border-radius: .75rem;
  outline: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.alarm-dialog-save {
  background-color: var(--primary);
  color: #fff;
}

.alarm-dialog-close:hover, .alarm-dialog-save:hover {
  transform: scale(1.05);
}

.alarm-dialog-close:active, .alarm-dialog-save:active {
  transform: scale(.95);
}

.alarm-dialog-content {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.alarm-form-section {
  margin-bottom: 1.5rem;
}

.alarm-form-label {
  color: var(--foreground);
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 600;
  display: block;
}

.alarm-time-input, .alarm-label-input, .alarm-select-input {
  background-color: var(--secondary);
  border: 1px solid var(--border);
  width: 100%;
  color: var(--foreground);
  border-radius: .75rem;
  outline: none;
  padding: .75rem 1rem;
  font-size: 1rem;
  transition: all .15s;
}

.alarm-time-input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 700;
}

.alarm-time-input:focus, .alarm-label-input:focus, .alarm-select-input:focus {
  border-color: var(--primary);
}

.alarm-day-filter-options {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.alarm-day-filter-btn {
  background-color: var(--secondary);
  border: 2px solid var(--border);
  cursor: pointer;
  color: var(--foreground);
  border-radius: .75rem;
  outline: none;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.alarm-day-filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px #0000001a;
}

.alarm-day-filter-btn:active {
  transform: scale(.98);
}

.alarm-day-filter-btn-active {
  border-width: 2px;
}

.alarm-form-toggle-section {
  background-color: var(--secondary);
  border-radius: .75rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  display: flex;
}

.alarm-form-toggle-content {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.alarm-form-toggle-content .alarm-form-label {
  margin-bottom: 0;
}

@media (width <= 640px) {
  .alarm-view {
    padding: 1rem 1rem 6rem;
  }

  .alarm-stats-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .alarm-time {
    font-size: 1.75rem;
  }

  .alarm-fab {
    width: 3rem;
    height: 3rem;
    bottom: 5rem;
    right: 1rem;
  }

  .alarm-dialog {
    max-height: 95vh;
  }

  .alarm-time-input {
    font-size: 1.5rem;
  }
}

.shift-pattern-dialog {
  background: linear-gradient(#faf9fb, #fff);
  border-radius: 1.5rem;
  flex-direction: column;
  width: 95vw;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 60px #8a57fe33;
}

.dark .shift-pattern-dialog {
  background: #000;
}

.shift-pattern-dialog .alarm-dialog-title {
  color: #1a1a1a;
  letter-spacing: -.03em;
  text-align: center;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 900;
}

.dark .shift-pattern-dialog .alarm-dialog-title {
  color: #fff;
}

.shift-pattern-dialog .alarm-dialog-close {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--primary);
  background: #00843d1a;
  border: 1.5px solid #00843d33;
  transition: all .2s;
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
}

.shift-pattern-dialog .alarm-dialog-close:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  border-color: var(--primary);
  color: #fff;
  transform: rotate(90deg)scale(1.1);
  box-shadow: 0 4px 12px #00843d4d;
}

.shift-pattern-tabs {
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  display: flex;
  overflow: hidden;
}

.shift-pattern-tabs-list {
  background: linear-gradient(135deg, #8a57fe14, #6366f114);
  border: 1px solid #8a57fe26;
  border-radius: 1rem;
  gap: .625rem;
  margin-bottom: 1.5rem;
  padding: .375rem;
  display: flex;
}

.shift-pattern-tab {
  color: #a0a0a0;
  cursor: pointer;
  background-color: #0000;
  border: none;
  border-radius: .75rem;
  outline: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  font-size: .9375rem;
  font-weight: 700;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  display: flex;
}

.shift-pattern-tab:hover {
  color: var(--primary);
  background-color: #00843d1a;
  transform: scale(1.02);
}

.shift-pattern-tab[data-state="active"] {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: #fff;
}

.shift-pattern-content {
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow-y: auto;
}

.shift-pattern-scroll {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  margin-bottom: 1rem;
  padding: .5rem;
  overflow-y: auto;
}

.shift-pattern-scroll-full {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: .25rem;
  overflow-y: auto;
}

.shift-pattern-grid {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.shift-pattern-preset-card {
  cursor: pointer;
  background: #fff;
  border: 2px solid #f0f0f0;
  border-radius: 1.25rem;
  outline: none;
  padding: 1.5rem;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 2px 8px #0000000a;
}

.shift-pattern-preset-card-clickable:hover {
  border-color: var(--primary);
  background: linear-gradient(135deg, #00843d05, #00843d05);
  transform: translateY(-3px)scale(1.01);
  box-shadow: 0 12px 24px #00843d2e;
}

.shift-pattern-preset-card-clickable:active {
  transform: scale(.99);
}

.shift-pattern-preset-card-selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, #00843d14, #00843d14);
  box-shadow: 0 8px 20px #00843d40;
}

.shift-pattern-preset-header {
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.125rem;
  display: flex;
}

.shift-pattern-preset-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: #fff;
  border-radius: 1.125rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  box-shadow: 0 8px 16px #8a57fe4d;
}

.shift-pattern-preset-info {
  flex: 1;
}

.shift-pattern-preset-name {
  color: #1a1a1a;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
  font-size: 1.25rem;
  font-weight: 800;
}

.dark .shift-pattern-preset-name {
  color: #fff;
}

.shift-pattern-preset-badge {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: #fff;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: .625rem;
  align-items: center;
  padding: .375rem .875rem;
  font-size: .8125rem;
  font-weight: 800;
  display: inline-flex;
  box-shadow: 0 2px 8px #8a57fe40;
}

.shift-pattern-preset-notes {
  border-left: 3px solid var(--primary);
  color: #666;
  background: linear-gradient(135deg, #fafafa, #f5f5f5);
  border-radius: .75rem;
  margin-top: 1rem;
  padding: .875rem 1.125rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.6;
}

.dark .shift-pattern-preset-notes {
  color: #ffffffb3;
  border-left-color: var(--primary-300);
  background: #ffffff0d;
}

.shift-pattern-footer {
  border-top: 1px solid var(--border);
  gap: .75rem;
  padding-top: 1rem;
  display: flex;
}

.shift-pattern-select-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: .75rem;
  outline: none;
  flex: 1;
  padding: .875rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  transition: all .2s;
}

.shift-pattern-select-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px #8a57fe4d;
}

.shift-pattern-select-btn:active {
  transform: scale(.98);
}

.shift-pattern-cancel-btn {
  background-color: var(--secondary);
  color: var(--foreground);
  border: 2px solid var(--border);
  cursor: pointer;
  border-radius: .75rem;
  outline: none;
  padding: .875rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  transition: all .15s;
}

.shift-pattern-cancel-btn:hover {
  background-color: var(--muted);
}

.bus-schedule-routes {
  flex-direction: column;
  gap: .75rem;
  margin-top: .75rem;
  display: flex;
}

.bus-schedule-route-summary {
  color: var(--muted-foreground);
  letter-spacing: -.01em;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  display: flex;
}

.bus-schedule-route-times {
  background: var(--ios-material-bg);
  border: 1px solid var(--ios-separator);
  border-radius: .625rem;
  flex-direction: column;
  gap: 0;
  display: flex;
  overflow: hidden;
}

.bus-schedule-route-time-item {
  background: var(--ios-material-bg);
  color: var(--foreground);
  border-bottom: 1px solid var(--ios-separator);
  letter-spacing: -.02em;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  transition: background .15s;
  display: flex;
}

.bus-schedule-route-time-item:last-child {
  border-bottom: none;
}

.bus-schedule-route-time-item:active {
  background: var(--ios-pressed);
}

.dark .bus-schedule-route-times {
  background: #ffffff0d;
  border-color: #ffffff1a;
}

.dark .bus-schedule-route-time-item {
  color: #fff;
  background: #ffffff0d;
  border-color: #ffffff1a;
}

.dark .bus-schedule-route-time-item:active {
  background: #ffffff14;
}

.bus-schedule-route-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: .5rem;
  height: .5rem;
}

.bus-schedule-route-more {
  color: var(--muted-foreground);
  text-align: left;
  letter-spacing: -.01em;
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.bus-template-card {
  background: var(--ios-material-bg);
  border: 1px solid var(--ios-separator);
  cursor: pointer;
  border-radius: .75rem;
  transition: all .15s;
  overflow: hidden;
}

.bus-template-card:active {
  background: var(--ios-pressed);
  transform: scale(.98);
}

.bus-template-header {
  border-bottom: 1px solid var(--ios-separator);
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  display: flex;
}

.bus-template-icon {
  background: var(--brand-primary);
  color: #fff;
  border-radius: .5rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.bus-template-info {
  flex: 1;
  min-width: 0;
}

.bus-template-name {
  color: var(--foreground);
  letter-spacing: -.02em;
  font-size: 1.0625rem;
  font-weight: 600;
}

.bus-template-company {
  color: var(--muted-foreground);
  letter-spacing: -.01em;
  margin-top: .125rem;
  font-size: .8125rem;
}

.bus-template-notes {
  color: var(--muted-foreground);
  border-top: 1px solid var(--ios-separator);
  background: var(--ios-card-bg);
  letter-spacing: -.01em;
  padding: .75rem 1rem;
  font-size: .8125rem;
  line-height: 1.4;
}

.bus-custom-templates-section {
  margin-bottom: 1.5rem;
}

.bus-custom-section-label {
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .5rem;
  padding: 0 .25rem;
  font-size: .6875rem;
  font-weight: 700;
}

.bus-custom-templates-list {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.bus-custom-template-card {
  background: var(--ios-material-bg);
  border: 1px solid var(--ios-separator);
  border-radius: .75rem;
  padding: 1rem;
  transition: all .15s;
}

.bus-custom-template-card:active {
  background: var(--ios-pressed);
  transform: scale(.98);
}

.bus-custom-template-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .5rem;
  display: flex;
}

.bus-custom-template-name {
  color: var(--foreground);
  letter-spacing: -.02em;
  font-size: 1.0625rem;
  font-weight: 600;
}

.bus-custom-template-company {
  color: var(--muted-foreground);
  letter-spacing: -.01em;
  margin-top: .125rem;
  font-size: .8125rem;
}

.bus-custom-template-actions {
  flex-shrink: 0;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.bus-custom-action-btn {
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  color: var(--ios-blue);
  border-radius: .5rem;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.bus-custom-action-btn:active {
  background: var(--ios-pressed);
  transform: scale(.95);
}

.bus-custom-delete-btn {
  color: var(--ios-red);
}

.bus-custom-select-btn {
  background: var(--ios-blue);
  color: #fff;
  cursor: pointer;
  letter-spacing: -.01em;
  border: none;
  border-radius: .5rem;
  padding: .375rem .75rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
}

.bus-custom-select-btn:active {
  opacity: .8;
  transform: scale(.95);
}

.bus-custom-template-summary {
  color: var(--muted-foreground);
  border-top: 1px solid var(--ios-separator);
  letter-spacing: -.01em;
  align-items: center;
  gap: .5rem;
  padding-top: .5rem;
  font-size: .8125rem;
  display: flex;
}

.bus-custom-form-section {
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  border-radius: .75rem;
  padding: 1rem;
}

.bus-routes-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  display: flex;
}

.bus-add-route-btn {
  background: var(--ios-blue);
  color: #fff;
  cursor: pointer;
  letter-spacing: -.01em;
  border: none;
  border-radius: .5rem;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.bus-add-route-btn:active {
  opacity: .8;
  transform: scale(.95);
}

.bus-routes-list {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.bus-route-form-item {
  background: var(--ios-material-bg);
  border: 1px solid var(--ios-separator);
  border-radius: .75rem;
  padding: 1rem;
}

.bus-route-form-row {
  align-items: flex-end;
  gap: .75rem;
  display: flex;
}

.bus-route-form-field {
  flex: 1;
  min-width: 0;
}

.bus-route-form-field-wide {
  flex: 2;
}

.bus-route-label {
  color: var(--foreground);
  letter-spacing: -.01em;
  margin-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  display: block;
}

.bus-route-time-input {
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  width: 100%;
  color: var(--foreground);
  letter-spacing: -.01em;
  border-radius: .5rem;
  padding: .625rem .75rem;
  font-size: 1rem;
  transition: all .15s;
}

.bus-route-time-input:focus {
  border-color: var(--ios-blue);
  background: var(--background);
  outline: none;
}

.bus-route-select {
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  width: 100%;
  color: var(--foreground);
  letter-spacing: -.01em;
  cursor: pointer;
  border-radius: .5rem;
  padding: .625rem .75rem;
  font-size: 1rem;
  transition: all .15s;
}

.bus-route-select:focus {
  border-color: var(--ios-blue);
  background: var(--background);
  outline: none;
}

.bus-route-delete-btn {
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  width: 2rem;
  height: 2rem;
  color: var(--ios-red);
  cursor: pointer;
  border-radius: .5rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-bottom: .125rem;
  transition: all .15s;
  display: flex;
}

.bus-route-delete-btn:active {
  background: #ff3b301a;
  transform: scale(.95);
}

.bus-notes-textarea {
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  width: 100%;
  color: var(--foreground);
  letter-spacing: -.01em;
  resize: vertical;
  border-radius: .5rem;
  min-height: 4rem;
  padding: .75rem;
  font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, Segoe UI, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  transition: all .15s;
}

.bus-notes-textarea:focus {
  border-color: var(--ios-blue);
  background: var(--background);
  outline: none;
}

.bus-form-actions {
  border-top: 1px solid var(--ios-separator);
  gap: .75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  display: flex;
}

.bus-form-save-btn {
  background: var(--brand-primary);
  color: #fff;
  cursor: pointer;
  letter-spacing: -.01em;
  border: none;
  border-radius: .75rem;
  flex: 1;
  padding: .75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  transition: all .15s;
}

.bus-form-save-btn:active {
  opacity: .9;
  transform: scale(.98);
}

.bus-form-cancel-btn {
  color: var(--ios-blue);
  cursor: pointer;
  letter-spacing: -.01em;
  background: none;
  border: none;
  border-radius: .75rem;
  padding: .75rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  transition: all .15s;
}

.bus-form-cancel-btn:active {
  background: var(--ios-pressed);
}

* {
  will-change: auto;
}

button, .ios-card, .task-item, .alarm-card, .shift-pattern-preset-card, [class*="animate-"], [class*="transition-"] {
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  transform: translateZ(0);
}

@keyframes bounce {
  0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0)translateZ(0);
  }

  25% {
    transform: translateX(-6px)translateZ(0);
  }

  75% {
    transform: translateX(6px)translateZ(0);
  }
}

@keyframes wiggle {
  0%, 100% {
    transform: rotate(0)translateZ(0);
  }

  25% {
    transform: rotate(-5deg)translateZ(0);
  }

  75% {
    transform: rotate(5deg)translateZ(0);
  }
}

@keyframes pulse-scale {
  0%, 100% {
    transform: scale(1)translateZ(0);
  }

  50% {
    transform: scale(1.05)translateZ(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px)translateZ(0);
  }

  to {
    opacity: 1;
    transform: translateX(0)translateZ(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px)translateZ(0);
  }

  to {
    opacity: 1;
    transform: translateX(0)translateZ(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px)translateZ(0);
  }

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

.animate-bounce {
  animation: .6s cubic-bezier(.4, 0, .2, 1) bounce;
}

.animate-shake {
  animation: .4s cubic-bezier(.4, 0, .2, 1) shake;
}

.animate-wiggle {
  animation: .5s cubic-bezier(.4, 0, .2, 1) wiggle;
}

.animate-pulse {
  animation: 2s ease-in-out infinite pulse-scale;
}

.animate-slide-in-left {
  animation: .3s cubic-bezier(.4, 0, .2, 1) slide-in-left;
}

.animate-slide-in-right {
  animation: .3s cubic-bezier(.4, 0, .2, 1) slide-in-right;
}

.animate-fade-in-up {
  animation: .3s cubic-bezier(.4, 0, .2, 1) fade-in-up;
}

.transition-120 {
  transition: all 8.33ms cubic-bezier(.4, 0, .2, 1);
}

.transition-smooth {
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

.transition-fast {
  transition: all .1s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .animate-bounce, .animate-shake, .animate-wiggle, .animate-pulse {
    animation: none !important;
  }
}

.gpu-accelerated {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.scroll-optimized {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  will-change: scroll-position;
}

@media (resolution >= 120dpi) {
  button, .ios-card, .task-item {
    transition-duration: 8.33ms;
  }
}

@media (min-device-pixel-ratio: 2) and (width >= 390px) {
  * {
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

.bus-route-form-row {
  grid-template-columns: 100px 1fr 140px auto;
  align-items: end;
  gap: .75rem;
  display: grid;
}

.bus-route-form-field {
  flex-direction: column;
  gap: .375rem;
  display: flex;
}

.bus-route-form-field-wide {
  grid-column: span 1;
}

.bus-route-label {
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .75rem;
  font-weight: 700;
}

.bus-route-time-input {
  background-color: var(--background);
  border: 2px solid var(--border);
  color: var(--foreground);
  border-radius: .5rem;
  outline: none;
  padding: .625rem;
  font-size: .875rem;
  transition: all .15s;
}

.bus-route-time-input:focus {
  border-color: var(--primary);
}

.bus-route-select {
  background-color: var(--background);
  border: 2px solid var(--border);
  color: var(--foreground);
  cursor: pointer;
  border-radius: .5rem;
  outline: none;
  padding: .625rem;
  font-size: .875rem;
  transition: all .15s;
}

.bus-route-select:focus {
  border-color: var(--primary);
}

.bus-route-delete-btn {
  color: #ff3b30;
  cursor: pointer;
  background-color: #ff3b301a;
  border: 1px solid #ff3b304d;
  border-radius: .5rem;
  outline: none;
  justify-content: center;
  align-self: flex-end;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: all .15s;
  display: flex;
}

.bus-route-delete-btn:hover {
  background-color: #ff3b3033;
  transform: scale(1.1);
}

.bus-notes-textarea {
  background-color: var(--background);
  border: 2px solid var(--border);
  width: 100%;
  color: var(--foreground);
  resize: vertical;
  border-radius: .75rem;
  outline: none;
  min-height: 80px;
  padding: .75rem;
  font-family: inherit;
  font-size: .875rem;
  transition: all .15s;
}

.bus-notes-textarea:focus {
  border-color: var(--primary);
}

.bus-times-progress-container {
  background-color: #8a57fe26;
  border-radius: 2px;
  width: 100%;
  height: 4px;
  margin-top: 1rem;
  overflow: hidden;
}

.bus-times-progress-bar {
  border-radius: 2px;
  height: 100%;
  transition: width 1s linear;
}

@media (width <= 640px) {
  .shift-pattern-dialog {
    border-radius: 1.5rem 1.5rem 0 0;
    width: 100vw;
    max-width: 100vw;
    max-height: 95vh;
  }

  .shift-pattern-tabs {
    padding: 1rem;
  }

  .shift-pattern-tabs-list {
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .25rem;
  }

  .shift-pattern-tab {
    gap: .375rem;
    padding: .625rem .75rem;
    font-size: .8125rem;
  }

  .shift-pattern-preset-card {
    padding: 1rem;
  }

  .shift-pattern-preset-header {
    gap: .75rem;
    margin-bottom: .875rem;
  }

  .shift-pattern-preset-icon {
    border-radius: .875rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  .shift-pattern-preset-name {
    margin-bottom: .375rem;
    font-size: 1rem;
  }

  .shift-pattern-preset-badge {
    padding: .3125rem .625rem;
    font-size: .6875rem;
  }

  .bus-schedule-routes {
    gap: .625rem;
  }

  .bus-schedule-route-summary {
    gap: .5rem;
    padding: .5rem .75rem;
    font-size: .75rem;
  }

  .bus-schedule-route-times {
    gap: .375rem;
    padding: .375rem;
  }

  .bus-schedule-route-time-item {
    gap: .625rem;
    padding: .5rem .75rem;
    font-size: .8125rem;
  }

  .bus-schedule-route-dot {
    width: .625rem;
    height: .625rem;
  }

  .bus-schedule-route-more {
    padding: .375rem .75rem;
    font-size: .75rem;
  }

  .shift-pattern-preset-notes {
    margin-top: .75rem;
    padding: .75rem .875rem;
    font-size: .75rem;
  }

  .bus-route-form-row {
    grid-template-columns: 1fr;
  }

  .bus-route-delete-btn {
    align-self: stretch;
    width: 100%;
  }
}

@media (width <= 375px) {
  .shift-pattern-preset-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .shift-pattern-preset-name {
    font-size: .9375rem;
  }

  .shift-pattern-preset-badge {
    padding: .25rem .5rem;
    font-size: .625rem;
  }

  .bus-schedule-route-time-item {
    padding: .5rem .625rem;
    font-size: .75rem;
  }
}

@keyframes shimmer-skeleton {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, var(--secondary) 0%, var(--muted) 50%, var(--secondary) 100%);
  background-size: 200% 100%;
  animation: 1.5s ease-in-out infinite shimmer-skeleton;
}

.animate-slide-up {
  animation: .3s cubic-bezier(.32, .72, 0, 1) forwards slideUp;
}

.bg-primary {
  color: var(--clr-primary-a50);
  background-color: var(--clr-surface-a0);
}

[style*="--holiday-color"] {
  border-color: var(--holiday-color);
  background-color: var(--holiday-color);
}

@supports (color: color-mix(in lab, red, red)) {
  [style*="--holiday-color"] {
    background-color: color-mix(in srgb, var(--holiday-color) 3%, transparent);
  }
}

[style*="--holiday-color"] .holiday-icon, [style*="--holiday-color"] .holiday-title {
  color: var(--holiday-color);
}

[style*="--route-color"] .bus-route-dot {
  background-color: var(--route-color);
}

.dynamic-transform {
  will-change: transform;
}

.dynamic-size {
  will-change: width, height;
}

.progress-bar-dynamic {
  width: var(--progress-width, 0%);
  transition: width .5s, transform .3s;
}

.transform-origin-rtl {
  transform-origin: var(--transform-origin, left);
}

.export-preview {
  width: 420px;
  height: 594px;
}

.export-preview-content {
  transform-origin: 0 0;
  width: 2100px;
  height: 2970px;
  transform: scale(.2);
}

.bus-schedule-padding {
  padding-bottom: .75rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.multi-ring-labels-margin {
  margin-left: 1.5rem;
}

[style*="--ring-color"] .multi-ring-label-dot, .multi-ring-label-dot[style*="--ring-color"] {
  background-color: var(--ring-color);
}

.pull-refresh-transform {
  transform: translateY(var(--pull-distance, 0px));
  transition: transform .2s;
}

.rotate-dynamic {
  transform: rotate(var(--rotation, 0deg));
  transition: transform .2s;
}

.progress-ring-size {
  width: var(--ring-size, 120px);
  height: var(--ring-size, 120px);
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
  initial-value: rotateX(0);
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}

@property --tw-scroll-snap-strictness {
  syntax: "*";
  inherits: false;
  initial-value: proximity;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}
/* Font now loaded via optimized <link> tags in index.html */

/* Utility: hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Accent bar pulse animation (#1) */
@keyframes accentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Landscape split layout (#14) */
@media (min-width: 768px) and (orientation: landscape) {
  .cycle-landscape-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

:root {
  /* ========================================
   * CYCLE APP - Green Color System
   * ======================================== */

  /* Semantic aliases */
  --primary: #00843d;
  --primary-foreground: #ffffff;
  --primary-hover: #006b31;
  --primary-active: #005226;
  --primary-muted: #D5F5E3;
  --primary-subtle: #EBF9F0;

  /* ==========================================================================
   * PART 2: NEUTRAL SCALE (Warm Gray)
   * ======================================================================= */
  --neutral-950: #0a0a0b;    /* Near black */
  --neutral-900: #171719;    /* Rich black */
  --neutral-800: #27272a;    /* Dark gray */
  --neutral-700: #3f3f45;    /* Medium dark */
  --neutral-600: #52525a;    /* Medium */
  --neutral-500: #71717a;    /* True gray */
  --neutral-400: #a1a1aa;    /* Light medium */
  --neutral-300: #d4d4d8;    /* Light gray */
  --neutral-200: #e4e4e7;    /* Very light */
  --neutral-100: #f4f4f5;    /* Near white */
  --neutral-50:  #fafafa;    /* Off-white */
  --neutral-0:   #ffffff;    /* Pure white */

  /* ==========================================================================
   * PART 3: SEMANTIC STATUS COLORS
   * Three-tier system: Muted → Base → Vivid
   * ======================================================================= */
  
  /* ✅ SUCCESS - Fresh Green (distinct from brand) */
  --success-muted: #dcfce7;      /* Background tint */
  --success-light: #86efac;      /* Light accent */
  --success: #22c55e;            /* Base - hsl(142, 71%, 45%) */
  --success-dark: #16a34a;       /* Hover/Active */
  --success-vivid: #15803d;      /* High contrast text */
  --success-foreground: #ffffff;
  
  /* ⚠️ WARNING - Warm Amber */
  --warning-muted: #fef3c7;      /* Background tint */
  --warning-light: #fcd34d;      /* Light accent */
  --warning: #f59e0b;            /* Base - hsl(38, 92%, 50%) */
  --warning-dark: #d97706;       /* Hover/Active */
  --warning-vivid: #b45309;      /* High contrast text */
  --warning-foreground: #1c1917;
  
  /* 🚨 DANGER - Clear Red */
  --danger-muted: #fee2e2;       /* Background tint */
  --danger-light: #fca5a5;       /* Light accent */
  --danger: #ef4444;             /* Base - hsl(0, 84%, 60%) */
  --danger-dark: #dc2626;        /* Hover/Active */
  --danger-vivid: #b91c1c;       /* High contrast text */
  --danger-foreground: #ffffff;
  
  /* ℹ️ INFO - Accessible Blue */
  --info-muted: #dbeafe;         /* Background tint */
  --info-light: #93c5fd;         /* Light accent */
  --info: #3b82f6;               /* Base - hsl(217, 91%, 60%) */
  --info-dark: #2563eb;          /* Hover/Active */
  --info-vivid: #1d4ed8;         /* High contrast text */
  --info-foreground: #ffffff;

  /* ==========================================================================
   * PART 4: SURFACE & ELEVATION SYSTEM
   * ======================================================================= */
  
  /* Elevation levels - subtle shadow progression */
  --surface-ground: #f8f9fa;     /* Page background */
  --surface-0: #ffffff;          /* Cards, base level */
  --surface-1: #ffffff;          /* Slightly raised (shadow only) */
  --surface-2: #ffffff;          /* Modals, dropdowns */
  --surface-3: #ffffff;          /* Popovers, tooltips */
  
  /* Tinted surfaces (brand presence) */
  --surface-primary-subtle: #EBF9F0;   /* Green tint 5% */
  --surface-primary-muted: #D5F5E3;    /* Green tint 15% */
  
  /* Interactive surfaces */
  --surface-hover: rgba(0, 132, 61, 0.04);
  --surface-active: rgba(0, 132, 61, 0.08);
  --surface-selected: rgba(0, 132, 61, 0.12);
  
  /* Shadow system for elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* ==========================================================================
   * PART 6: IMPROVED iOS SYSTEM COLORS
   * ======================================================================= */
  
  /* System colors - Light mode */
  --ios-red: #ff3b30;
  --ios-orange: #ff9500;
  --ios-yellow: #ffcc00;
  --ios-green: #34c759;
  --ios-mint: #00c7be;
  --ios-teal: #30b0c7;
  --ios-cyan: #32ade6;
  --ios-blue: #00843d;
  --ios-indigo: #5856d6;
  --ios-purple: #af52de;
  --ios-pink: #ff2d55;
  --ios-brown: #a2845e;
  
  /* System grays - semantic */
  --ios-gray: #8e8e93;
  --ios-gray-2: #aeaeb2;
  --ios-gray-3: #c7c7cc;
  --ios-gray-4: #d1d1d6;
  --ios-gray-5: #e5e5ea;
  --ios-gray-6: #f2f2f7;
  
  /* iOS Labels */
  --ios-label: #000000;
  --ios-secondary-label: rgba(60, 60, 67, 0.6);
  --ios-tertiary-label: rgba(60, 60, 67, 0.3);
  --ios-quaternary-label: rgba(60, 60, 67, 0.18);

  /* ==========================================================================
   * PART 7: TEXT & TYPOGRAPHY COLORS
   * ======================================================================= */
  
  /* Light mode text - all pass WCAG AA */
  --text-primary: #0f172a;           /* 15.8:1 contrast */
  --text-secondary: #475569;         /* 7.1:1 contrast */
  --text-tertiary: #64748b;          /* 4.6:1 contrast (large text only) */
  --text-muted: #94a3b8;             /* 3.0:1 (decorative only) */
  --text-inverted: #ffffff;
  
  /* Link colors */
  --text-link: #00843d;
  --text-link-hover: #006b31;
  --text-link-visited: #005226;

  /* ==========================================================================
   * PART 8: BORDER & DIVIDER SYSTEM
   * ======================================================================= */
  
  /* Borders - Light mode */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);
  --border-focus: #00843d;
  --border-error: #ef4444;
  
  /* Ring (focus outline) */
  --ring: #00843d;
  --ring-offset: #ffffff;
  --ring-width: 2px;

  /* ========================================
   * TYPOGRAPHY & SPACING
   * ======================================== */

  /* Typography Scale - WCAG Compliant */
  --text-xs: 0.75rem;     /* 12px - minimum for labels */
  --text-sm: 0.875rem;    /* 14px - WCAG AA minimum */
  --text-base: 1rem;      /* 16px - comfortable reading */
  --text-lg: 1.125rem;    /* 18px - WCAG AA large text */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Touch Targets - WCAG 2.5.5 */
  --touch-target-min: 2.75rem;  /* 44px minimum */
  --touch-target-comfortable: 3rem; /* 48px comfortable */
  
  /* Line Heights for Readability */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;
  
  /* Safe Area Insets for Mobile */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  
  /* Bottom Navigation Height */
  --bottom-nav-height: 80px;
  --bottom-nav-safe-height: calc(100px + var(--safe-area-inset-bottom));
  
  /* Colors - Enhanced Contrast (WCAG AA+) */
  --background: #f5f5f7;
  --background-rgb: 245, 245, 247;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --popover: #ffffff;
  --popover-foreground: #000000;
  --primary: #00843d;
  --primary-foreground: #ffffff;
  --secondary: #f5f5f7;
  --secondary-foreground: #000000;
  --muted: #f5f5f7;
  --muted-foreground: #8e8e93;
  --accent: #f5f5f7;
  --accent-foreground: #000000;
  --destructive: #ff3b30;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --input: transparent;
  --input-background: rgba(142, 142, 147, 0.12);
  --switch-background: #e5e5ea;
  --ring: #00843d;
  --chart-1: #00843d;
  --chart-2: #34C759;
  --chart-3: #FF9500;
  --chart-4: #5856D6;
  --chart-5: #5AC8FA;
  --radius: 0.75rem;
  --sidebar: #f5f5f7;
  --sidebar-foreground: #000000;
  --sidebar-primary: #00843d;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(0, 132, 61, 0.1);
  --sidebar-accent-foreground: #00843d;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-ring: #00843d;
}

/* iOS Color System - Semantic Colors */
:root {
  --ios-red: #FF3B30;
  --ios-red-dark: #ff453a;
  --ios-orange: #FF9500;
  --ios-orange-dark: #FF9F0A;
  --ios-yellow: #FFCC00;
  --ios-yellow-dark: #FFD60A;
  --ios-green: #34C759;
  --ios-green-dark: #32D74B;
  --ios-green-light: rgba(52, 199, 89, 0.1);
  --ios-teal: #5AC8FA;
  --ios-teal-dark: #64D2FF;
  --ios-blue: #00843d;
  --ios-blue-dark: #00A550;
  --ios-indigo: #5856D6;
  --ios-indigo-dark: #5E5CE6;
  --ios-purple: #AF52DE;
  --ios-purple-dark: #BF5AF2;
  --ios-pink: #FF2D55;
  --ios-pink-dark: #FF375F;
  --ios-gray: #8E8E93;
  --ios-gray-dark: #98989D;
  
  /* iOS Gray Fill Levels */
  --ios-gray-1: rgba(120, 120, 128, 0.12);
  --ios-gray-2: rgba(120, 120, 128, 0.16);
  --ios-gray-3: rgba(118, 118, 128, 0.24);
  --ios-gray-4: rgba(116, 116, 128, 0.32);
  --ios-gray-5: rgba(135, 135, 145, 0.40);
  --ios-gray-6: rgba(142, 142, 147, 1);

  /* iOS Grouped Background */
  --ios-grouped-bg: #f2f2f7;
  
  /* iOS Label Colors */
  --ios-label: #000000;
  --ios-secondary-label: rgba(60, 60, 67, 0.6);
  --ios-tertiary-label: rgba(60, 60, 67, 0.42);
  --ios-quaternary-label: rgba(60, 60, 67, 0.22);
}

.dark {
  --background: #000000;
  --background-rgb: 0, 0, 0;
  --foreground: #ffffff;
  --card: #000000;
  --card-foreground: #ffffff;
  --popover: #000000;
  --popover-foreground: #ffffff;
  --primary: #00A550;
  --primary-foreground: #ffffff;
  --secondary: #000000;
  --secondary-foreground: #ffffff;
  --muted: #000000;
  --muted-foreground: #98989d;
  --accent: #2c2c2e;
  --accent-foreground: #ffffff;
  --destructive: #ff453a;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.12);
  --input: transparent;
  --input-background: rgba(118, 118, 128, 0.24);
  --switch-background: #39393d;
  --ring: #00A550;
  --chart-1: #00A550;
  --chart-2: #32D74B;
  --chart-3: #FF9F0A;
  --chart-4: #5E5CE6;
  --chart-5: #64D2FF;
  --radius: 0.75rem;
  --sidebar: #000000;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #00A550;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(0, 165, 80, 0.15);
  --sidebar-accent-foreground: #00A550;
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --sidebar-ring: #00A550;
  
  /* iOS Label Colors - Dark Mode */
  --ios-label: #ffffff;
  --ios-secondary-label: rgba(235, 235, 245, 0.6);
  --ios-tertiary-label: rgba(235, 235, 245, 0.42);
  --ios-quaternary-label: rgba(235, 235, 245, 0.22);

  /* ==========================================================================
   * IMPROVED DARK MODE COLORS
   * True dark with elevation via lightness
   * ======================================================================= */
  
  /* Danger colors - dark mode */
  --danger-muted: rgba(239, 68, 68, 0.15);

  /* Dark mode surfaces */
  --surface-ground: #09090b;     /* Deepest black */
  --surface-0: #0f0f12;          /* Base cards */
  --surface-1: #18181b;          /* Raised level 1 */
  --surface-2: #27272a;          /* Raised level 2 */
  --surface-3: #3f3f45;          /* Popovers */
  
  /* Tinted surfaces */
  --surface-primary-subtle: rgba(0, 165, 80, 0.08);
  --surface-primary-muted: rgba(0, 165, 80, 0.16);
  
  /* Interactive surfaces */
  --surface-hover: rgba(255, 255, 255, 0.04);
  --surface-active: rgba(255, 255, 255, 0.08);
  --surface-selected: rgba(0, 165, 80, 0.20);
  
  /* Dark mode shadows (subtle glow effect) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7), 0 0 2px rgba(255, 255, 255, 0.05);
  
  /* System colors - Dark mode (more vibrant) */
  --ios-red: #ff453a;
  --ios-orange: #ff9f0a;
  --ios-yellow: #ffd60a;
  --ios-green: #32d74b;
  --ios-mint: #66d4cf;
  --ios-teal: #40c8e0;
  --ios-cyan: #64d2ff;
  --ios-blue: #00A550;
  --ios-indigo: #5e5ce6;
  --ios-purple: #bf5af2;
  --ios-pink: #ff375f;
  --ios-brown: #ac8e68;
  
  /* System grays - dark mode */
  --ios-gray: #8e8e93;
  --ios-gray-2: #636366;
  --ios-gray-3: #48484a;
  --ios-gray-4: #3a3a3c;
  --ios-gray-5: #2c2c2e;
  --ios-gray-6: #1c1c1e;

  /* iOS Grouped Background - Dark */
  --ios-grouped-bg: #1c1c1e;
  
  /* Dark mode text */
  --text-primary: #f8fafc;           /* 15.8:1 contrast */
  --text-secondary: #cbd5e1;         /* 8.5:1 contrast */
  --text-tertiary: #94a3b8;          /* 4.9:1 contrast */
  --text-muted: #64748b;             /* 3.2:1 (decorative only) */
  --text-inverted: #0f172a;
  
  /* Link colors - more vibrant in dark */
  --text-link: #00A550;
  --text-link-hover: #00C060;
  --text-link-visited: #00843d;
  
  /* Borders - Dark mode */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-focus: #00A550;
  
  --ring: #00A550;
  --ring-offset: #0f0f12;
  
}

/* ==========================================================================
 * PART 11: THEME VARIANTS
 * ======================================================================= */

/* 🧠 ADHD-Friendly Theme (Cognitive Accessibility) */
[data-theme="adhd"] {
  /* Reduced visual noise, calming colors */
  --primary-600: #4f7cc2;            /* Calming blue instead of stimulating green */
  --primary-500: #6b93d4;
  --primary-400: #8aaae0;
  --primary: #4f7cc2;
  
  --surface-ground: #f0f4f8;         /* Soft blue-gray */
  --surface-0: #ffffff;
  
  --text-primary: #1e3a5f;           /* Navy for focus */
  --text-secondary: #4a6fa5;
  
  /* Reduced contrast for less eye strain */
  --danger: #e06b7a;                 /* Softer red */
  --warning: #d4a24c;                /* Softer amber */
  
  /* Larger, more visible focus rings */
  --ring: #4f7cc2;
  --ring-width: 3px;
}

/* 🏥 Medical Theme (Clinical Precision) */
[data-theme="medical"] {
  --primary-600: #00843d;            /* Green */
  --primary-500: #00A550;
  --primary: #00843d;
  
  /* Clean, clinical surfaces */
  --surface-ground: #f8fafb;
  --surface-0: #ffffff;
  
  /* High readability text */
  --text-primary: #0f1419;
  --text-secondary: #4a5568;
  
  /* Medical status colors - colorblind safe */
  --status-normal: #22c55e;          /* Green - normal */
  --status-attention: #f59e0b;       /* Amber - attention */
  --status-critical: #ef4444;        /* Red - critical */
  --status-info: #3b82f6;            /* Blue - info */
}

/* 🎖️ Military Theme (Tactical) */
[data-theme="military"] {
  --primary-600: #5d6b2a;            /* Olive drab */
  --primary-500: #6b7f39;
  --primary-400: #8a9c56;
  --primary: #5d6b2a;
  
  --surface-ground: #e8e9e3;         /* Khaki base */
  --surface-0: #f5f5f0;
  --surface-1: #ffffff;
  
  --text-primary: #1f2617;           /* Dark olive */
  --text-secondary: #4a5240;
  
  /* Muted, non-distracting alerts */
  --danger: #a34a47;
  --warning: #b8863a;
  --info: #4a6b8a;
}

/* 🛢️ Energy/Industrial Theme */
[data-theme="energy"] {
  --primary-600: #ea580c;            /* Safety orange */
  --primary-500: #f97316;
  --primary-400: #fb923c;
  --primary: #ea580c;
  
  --surface-ground: #faf5f0;         /* Warm white */
  --surface-0: #ffffff;
  
  --text-primary: #1c1917;           /* Warm black */
  --text-secondary: #57534e;
  
  /* Industrial safety colors */
  --danger: #dc2626;
  --warning: #fbbf24;
  --success: #16a34a;
  --info: #0284c7;
}

.adhd {
  --background: #e8f0f7;
  --foreground: #1a2332;
  --card: #ffffff;
  --card-foreground: #1a2332;
  --popover: #ffffff;
  --popover-foreground: #1a2332;
  --primary: #5b7ecc;
  --primary-foreground: #ffffff;
  --secondary: #d4e2f4;
  --secondary-foreground: #1a2332;
  --muted: #d4e2f4;
  --muted-foreground: #5a6b7f;
  --accent: #f0f5fa;
  --accent-foreground: #1a2332;
  --destructive: #e85d75;
  --destructive-foreground: #ffffff;
  --border: rgba(91, 126, 204, 0.25);
  --input: transparent;
  --input-background: rgba(91, 126, 204, 0.08);
  --switch-background: #c5d9f2;
  --font-weight-medium: 600;
  --font-weight-normal: 500;
  --ring: #5b7ecc;
  --chart-1: #5b7ecc;
  --chart-2: #7cb8a8;
  --chart-3: #f4a259;
  --chart-4: #9d84b7;
  --chart-5: #e85d75;
  --sidebar: #e8f0f7;
  --sidebar-foreground: #1a2332;
  --sidebar-primary: #5b7ecc;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(91, 126, 204, 0.12);
  --sidebar-accent-foreground: #5b7ecc;
  --sidebar-border: rgba(91, 126, 204, 0.25);
  --sidebar-ring: #5b7ecc;
}

/* ========================================
 * INDUSTRY THEMES
 * ======================================== */

/* Medical Theme — Green (Default) */
.theme-medical {
  --background: #f5f5f7;
  --background-rgb: 245, 245, 247;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --popover: #ffffff;
  --popover-foreground: #000000;
  --primary: #00843d;
  --primary-foreground: #ffffff;
  --secondary: #f5f5f7;
  --secondary-foreground: #000000;
  --muted: #f5f5f7;
  --muted-foreground: #8e8e93;
  --accent: #f5f5f7;
  --accent-foreground: #000000;
  --destructive: #ff3b30;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --input: transparent;
  --input-background: rgba(142, 142, 147, 0.12);
  --switch-background: #e5e5ea;
  --ring: #00843d;
  --chart-1: #00843d;
  --chart-2: #34C759;
  --chart-3: #FF9500;
  --chart-4: #5856D6;
  --chart-5: #5AC8FA;
  --sidebar: #f5f5f7;
  --sidebar-foreground: #000000;
  --sidebar-primary: #00843d;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(0, 132, 61, 0.1);
  --sidebar-accent-foreground: #00843d;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-ring: #00843d;
}

.dark.theme-medical {
  --background: #000000;
  --background-rgb: 0, 0, 0;
  --foreground: #ffffff;
  --card: #000000;
  --card-foreground: #ffffff;
  --popover: #000000;
  --popover-foreground: #ffffff;
  --primary: #00A550;
  --primary-foreground: #ffffff;
  --secondary: #000000;
  --secondary-foreground: #ffffff;
  --muted: #000000;
  --muted-foreground: #98989d;
  --accent: #2c2c2e;
  --accent-foreground: #ffffff;
  --destructive: #ff453a;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.12);
  --input: transparent;
  --input-background: rgba(118, 118, 128, 0.24);
  --switch-background: #39393d;
  --ring: #00A550;
  --chart-1: #00A550;
  --chart-2: #32D74B;
  --chart-3: #FF9F0A;
  --chart-4: #5E5CE6;
  --chart-5: #64D2FF;
}

/* Military Theme - Tactical Olive */
.theme-military {
  --background: #e8e9e5;
  --background-rgb: 232, 233, 229;
  --foreground: #2a2f1f;
  --card: #f5f6f4;
  --card-foreground: #2a2f1f;
  --popover: #f5f6f4;
  --popover-foreground: #2a2f1f;
  --primary: #6b7f39;
  --primary-foreground: #ffffff;
  --secondary: #d4d6cd;
  --secondary-foreground: #2a2f1f;
  --muted: #d4d6cd;
  --muted-foreground: #6b7049;
  --accent: #e8e9e5;
  --accent-foreground: #2a2f1f;
  --destructive: #b85450;
  --destructive-foreground: #ffffff;
  --border: rgba(107, 127, 57, 0.15);
  --input: transparent;
  --input-background: rgba(107, 127, 57, 0.08);
  --switch-background: #d4d6cd;
  --ring: #6b7f39;
  --chart-1: #6b7f39;
  --chart-2: #7a9b4f;
  --chart-3: #c9a869;
  --chart-4: #5c6e4a;
  --chart-5: #8b9678;
  --sidebar: #e8e9e5;
  --sidebar-foreground: #2a2f1f;
  --sidebar-primary: #6b7f39;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(107, 127, 57, 0.12);
  --sidebar-accent-foreground: #6b7f39;
  --sidebar-border: rgba(107, 127, 57, 0.15);
  --sidebar-ring: #6b7f39;
}

.dark.theme-military {
  --background: #1a1d16;
  --background-rgb: 26, 29, 22;
  --foreground: #e8e9e5;
  --card: #23271d;
  --card-foreground: #e8e9e5;
  --popover: #23271d;
  --popover-foreground: #e8e9e5;
  --primary: #8fa855;
  --primary-foreground: #1a1d16;
  --secondary: #2f3328;
  --secondary-foreground: #e8e9e5;
  --muted: #2f3328;
  --muted-foreground: #9fa48e;
  --accent: #3a3f32;
  --accent-foreground: #e8e9e5;
  --destructive: #d67370;
  --destructive-foreground: #ffffff;
  --border: rgba(143, 168, 85, 0.2);
  --input: transparent;
  --input-background: rgba(143, 168, 85, 0.12);
  --switch-background: #3a3f32;
  --ring: #8fa855;
  --chart-1: #8fa855;
  --chart-2: #9bb96a;
  --chart-3: #d4b87a;
  --chart-4: #7a8f5e;
  --chart-5: #a3ad8e;
}

/* Oil & Gas Theme - Industrial Amber */
.theme-oilgas {
  --background: #faf8f5;
  --background-rgb: 250, 248, 245;
  --foreground: #1f1a15;
  --card: #ffffff;
  --card-foreground: #1f1a15;
  --popover: #ffffff;
  --popover-foreground: #1f1a15;
  --primary: #ff9500;
  --primary-foreground: #ffffff;
  --secondary: #f5f0e8;
  --secondary-foreground: #1f1a15;
  --muted: #f5f0e8;
  --muted-foreground: #79716a;
  --accent: #fef8f0;
  --accent-foreground: #1f1a15;
  --destructive: #d64a3b;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 149, 0, 0.12);
  --input: transparent;
  --input-background: rgba(255, 149, 0, 0.06);
  --switch-background: #e8e0d5;
  --ring: #ff9500;
  --chart-1: #ff9500;
  --chart-2: #00843d;
  --chart-3: #34c759;
  --chart-4: #5856d6;
  --chart-5: #5ac8fa;
  --sidebar: #faf8f5;
  --sidebar-foreground: #1f1a15;
  --sidebar-primary: #ff9500;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(255, 149, 0, 0.1);
  --sidebar-accent-foreground: #ff9500;
  --sidebar-border: rgba(255, 149, 0, 0.12);
  --sidebar-ring: #ff9500;
}

.dark.theme-oilgas {
  --background: #1a1612;
  --background-rgb: 26, 22, 18;
  --foreground: #faf8f5;
  --card: #221e19;
  --card-foreground: #faf8f5;
  --popover: #221e19;
  --popover-foreground: #faf8f5;
  --primary: #ff9f0a;
  --primary-foreground: #1a1612;
  --secondary: #2a2520;
  --secondary-foreground: #faf8f5;
  --muted: #2a2520;
  --muted-foreground: #a59c92;
  --accent: #332d26;
  --accent-foreground: #faf8f5;
  --destructive: #e8634f;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 159, 10, 0.18);
  --input: transparent;
  --input-background: rgba(255, 159, 10, 0.1);
  --switch-background: #3d3730;
  --ring: #ff9f0a;
  --chart-1: #ff9f0a;
  --chart-2: #00A550;
  --chart-3: #32d74b;
  --chart-4: #5e5ce6;
  --chart-5: #64d2ff;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  /* Prevent horizontal scroll and zoom globally */
  html {
    overflow: hidden;
    overscroll-behavior: none;
    width: 100%;
    height: 100dvh;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    overscroll-behavior: none;
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
  }

  /* Prevent all major containers from causing horizontal overflow */
  #root,
  .app-container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
  }
  
  /* Allow interaction in app content */
  #root *,
  .app-container * {
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
  }

  /* Arabic font support - Enhanced */
  [lang="ar"], [lang="ar"] * {
    font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'SF Arabic', 'Segoe UI', 'Droid Arabic Naskh', 'Arabic Typesetting', sans-serif;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga" 1, "calt" 1;
  }

  /* Better Arabic line height for readability */
  [lang="ar"] * {
    line-height: 1.75;
  }

  /* Tighter line height for headings */
  [lang="ar"] h1,
  [lang="ar"] h2,
  [lang="ar"] h3,
  [lang="ar"] h4,
  [lang="ar"] h5,
  [lang="ar"] h6 {
    line-height: 1.4;
  }

  /* Better spacing for Arabic words */
  [lang="ar"] p,
  [lang="ar"] span:not(.text-2xl):not(.text-xl):not(.text-lg) {
    word-spacing: 0.1em;
  }
  
  /* Better Arabic font rendering */
  [lang="ar"] h1,
  [lang="ar"] h2,
  [lang="ar"] h3,
  [lang="ar"] h4,
  [lang="ar"] h5,
  [lang="ar"] h6 {
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.6;
  }
  
  [lang="ar"] button,
  [lang="ar"] label {
    font-weight: 500;
    line-height: 1.6;
  }
  
  [lang="ar"] p,
  [lang="ar"] input,
  [lang="ar"] textarea {
    font-weight: 400;
    line-height: 1.8;  /* Enhanced from 1.7 for better Arabic readability */
  }
  
  /* Better spacing for Arabic dropdown menus */
  [lang="ar"] [role="menuitem"],
  [lang="ar"] [data-slot="dropdown-menu-item"] {
    direction: rtl;
    text-align: right;
  }
  
  /* Reverse flex direction for icons in Arabic */
  [lang="ar"] [data-slot="dropdown-menu-item"] > svg {
    margin-right: 0;
    margin-left: 0.5rem;
  }
  
  /* Fix Avatar in RTL mode */
  [dir="rtl"] [data-slot="avatar"] {
    flex-shrink: 0;
  }
  
  [dir="rtl"] [data-slot="avatar-image"] {
    object-fit: cover;
  }
  
  /* Fix Switch in RTL mode */
  [dir="rtl"] [data-slot="switch"] {
    direction: ltr;
  }
  
  /* Better spacing for profile items in Arabic */
  [lang="ar"] .space-x-3 > * + * {
    margin-left: 0;
    margin-right: 0.75rem;
  }
  
  [lang="ar"] .space-x-reverse > * + * {
    margin-left: 0;
    margin-right: 0.75rem;
  }
  
  /* Ensure proper gap in flex containers for Arabic */
  [lang="ar"] [dir="rtl"] .flex.items-center {
    gap: 0.75rem;
  }
  
  /* Better text rendering in profile sections */
  [lang="ar"] .text-sm,
  [lang="ar"] .text-xs {
    line-height: 1.6;
  }
  
  /* Improve badge appearance in Arabic */
  [lang="ar"] .rounded-full {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  /* RTL text alignment for Arabic */
  [dir="rtl"] h1,
  [dir="rtl"] h2,
  [dir="rtl"] h3,
  [dir="rtl"] h4,
  [dir="rtl"] h5,
  [dir="rtl"] h6 {
    text-align: right;
  }

  /* Force English numbers in Arabic mode */
  [lang="ar"] {
    font-variant-numeric: lining-nums tabular-nums;
  }
  
  /* Ensure numbers are always in English (Western) digits */
  [lang="ar"] input[type="number"],
  [lang="ar"] .text-2xl,
  [lang="ar"] .text-xl,
  [lang="ar"] .text-lg {
    font-feature-settings: "tnum" 1;
  }

  /* RTL Calendar support */
  .rtl-calendar {
    direction: rtl;
  }

  .rtl-calendar .rdp {
    direction: rtl;
  }

  .rtl-calendar .rdp-caption_label {
    text-align: center;
  }

  .rtl-calendar .rdp-nav_button_previous {
    right: 0.25rem;
    left: auto;
  }

  .rtl-calendar .rdp-nav_button_next {
    left: 0.25rem;
    right: auto;
  }

  .rtl-calendar .rdp-head_row {
    direction: rtl;
  }

  .rtl-calendar .rdp-row {
    direction: rtl;
  }
  
  /* Better spacing for calendar in Arabic */
  [lang="ar"] .rdp-caption_label {
    font-weight: 700;
    letter-spacing: 0;
  }

  /* ===================================
     COMPREHENSIVE RTL IMPROVEMENTS
     =================================== */
  
  /* Global RTL flex direction fixes */
  [dir="rtl"] .flex-row {
    flex-direction: row-reverse;
  }

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

  /* RTL spacing utilities - swap padding and margin */
  [dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
  [dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
  [dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
  [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
  [dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }

  [dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; }
  [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
  [dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
  [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
  [dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; }

  [dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
  [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
  [dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
  [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
  [dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }

  [dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
  [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
  [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
  [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
  [dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

  /* RTL text alignment */
  [dir="rtl"] .text-left { text-align: right; }
  [dir="rtl"] .text-right { text-align: left; }

  /* RTL border radius corrections */
  [dir="rtl"] .rounded-l { border-radius: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
  [dir="rtl"] .rounded-r { border-radius: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }

  /* Specific component fixes for RTL */
  [dir="rtl"] .ios-card {
    direction: rtl;
  }

  /* Fix gap in RTL for flex containers */
  [dir="rtl"] .gap-1,
  [dir="rtl"] .gap-2,
  [dir="rtl"] .gap-3,
  [dir="rtl"] .gap-4 {
    gap: inherit; /* Maintain gap value */
  }

  /* Space-x utilities in RTL - properly reverse */
  [dir="rtl"] .space-x-1 > * + * { margin-left: 0; margin-right: 0.25rem; }
  [dir="rtl"] .space-x-2 > * + * { margin-left: 0; margin-right: 0.5rem; }
  [dir="rtl"] .space-x-3 > * + * { margin-left: 0; margin-right: 0.75rem; }
  [dir="rtl"] .space-x-4 > * + * { margin-left: 0; margin-right: 1rem; }

  /* Dialog and modal RTL support */
  [dir="rtl"] [role="dialog"],
  [dir="rtl"] .dialog-content {
    direction: rtl;
    text-align: right;
  }

  /* Input and form RTL support */
  [dir="rtl"] input:not([type="checkbox"]):not([type="radio"]),
  [dir="rtl"] textarea,
  [dir="rtl"] select {
    text-align: right;
    direction: rtl;
  }

  /* Notification/Toast RTL support */
  [dir="rtl"] [data-sonner-toast],
  [dir="rtl"] [data-sonner-toast] * {
    direction: rtl !important;
    text-align: right !important;
  }

  [dir="rtl"] [data-sonner-toast] [data-icon] {
    margin-left: 0.75rem;
    margin-right: 0;
  }

  /* ========================================
   * SONNER TOAST STYLING - iOS Design
   * ======================================== */
  
  /* Toast Container */
  [data-sonner-toaster] {
    z-index: 999999 !important;
  }

  /* Individual Toast */
  [data-sonner-toast] {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.08),
      0 2px 6px rgba(0, 0, 0, 0.04) !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    max-width: 400px !important;
    margin: 8px !important;
  }

  /* Dark mode toasts */
  .dark [data-sonner-toast] {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }

  /* Success Toast */
  [data-sonner-toast][data-type="success"] {
    background: rgba(240, 255, 244, 0.95) !important;
    border-color: rgba(52, 199, 89, 0.2) !important;
  }

  .dark [data-sonner-toast][data-type="success"] {
    background: rgba(52, 199, 89, 0.15) !important;
    border-color: rgba(52, 199, 89, 0.3) !important;
  }

  [data-sonner-toast][data-type="success"] [data-icon] {
    color: #34C759 !important;
  }

  /* Error Toast */
  [data-sonner-toast][data-type="error"] {
    background: rgba(255, 245, 245, 0.95) !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
  }

  .dark [data-sonner-toast][data-type="error"] {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
  }

  [data-sonner-toast][data-type="error"] [data-icon] {
    color: #dc2626 !important;
  }

  /* Warning Toast */
  [data-sonner-toast][data-type="warning"] {
    background: rgba(255, 251, 235, 0.95) !important;
    border-color: rgba(234, 179, 8, 0.2) !important;
  }

  .dark [data-sonner-toast][data-type="warning"] {
    background: rgba(234, 179, 8, 0.15) !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
  }

  [data-sonner-toast][data-type="warning"] [data-icon] {
    color: #eab308 !important;
  }

  /* Info Toast */
  [data-sonner-toast][data-type="info"] {
    background: rgba(239, 246, 255, 0.95) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
  }

  .dark [data-sonner-toast][data-type="info"] {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
  }

  [data-sonner-toast][data-type="info"] [data-icon] {
    color: #3b82f6 !important;
  }

  /* Toast Title */
  [data-sonner-toast] [data-title] {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: inherit !important;
  }

  /* Toast Description */
  [data-sonner-toast] [data-description] {
    font-weight: 400 !important;
    font-size: 13px !important;
    opacity: 0.8 !important;
    margin-top: 2px !important;
  }

  /* Toast Icon */
  [data-sonner-toast] [data-icon] {
    margin-right: 10px !important;
  }

  [dir="rtl"] [data-sonner-toast] [data-icon] {
    margin-right: 0 !important;
    margin-left: 10px !important;
  }

  /* Toast Animation - iOS spring */
  @keyframes toastSlideIn {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  [data-sonner-toast] {
    animation: toastSlideIn 0.3s cubic-bezier(0.36, 0.66, 0.04, 1) !important;
  }

  /* iOS-style class for custom styling */
  .ios-toast {
    /* Additional custom styles can go here */
  }

  /* Better Arabic number display */
  [lang="ar"] .tabular-nums,
  [lang="ar"] [data-numeric] {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
  }
  
  /* Hide scrollbar */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide all scrollbars globally - iOS style */
  * {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  *::-webkit-scrollbar {
    display: none;
  }

  /* ========================================
   * PWA SUPPORT & NATIVE-LIKE INTERACTIONS
   * ======================================== */
  
  /* Safe area support for notched devices */
  @supports (padding: max(0px)) {
    .pwa-safe-top {
      padding-top: max(var(--safe-area-inset-top), 1rem);
    }
    
    .pwa-safe-bottom {
      padding-bottom: max(var(--safe-area-inset-bottom), 1rem);
    }
    
    .pwa-safe-left {
      padding-left: max(var(--safe-area-inset-left), 1rem);
    }
    
    .pwa-safe-right {
      padding-right: max(var(--safe-area-inset-right), 1rem);
    }
  }
  
  /* Prevent pull-to-refresh on PWA */
  @media (display-mode: standalone) {
    body {
      overscroll-behavior-y: contain;
    }
    
    .app-header {
      padding-top: max(var(--safe-area-inset-top), 1rem);
    }
    
    .bottom-nav {
      padding-bottom: max(var(--safe-area-inset-bottom), 1rem);
    }
  }
  
  /* Touch action optimization */
  .touch-pan-y {
    touch-action: pan-y;
  }
  
  .touch-pan-x {
    touch-action: pan-x;
  }
  
  .touch-none {
    touch-action: none;
  }
  
  /* Native-like tap highlight */
  * {
    -webkit-tap-highlight-color: rgba(0, 122, 255, 0.1);
  }
  
  /* Smooth scrolling for better native feel */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent text selection on buttons for native feel */
  button, .button {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  
  /* iOS-style momentum scrolling */
  .ios-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  
  /* Swipeable elements */
  .swipeable {
    touch-action: pan-y;
    user-select: none;
  }
  
  /* Active state for better touch feedback */
  .active-press {
    transition: transform 0.1s ease, opacity 0.1s ease;
  }
  
  .active-press:active {
    transform: scale(0.97);
    opacity: 0.8;
  }
  
  /* Card press effect for native feel */
  .card-press {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .card-press:active {
    transform: scale(0.98);
  }

  /* ========================================
   * ACCESSIBILITY FEATURES (WCAG 2.1)
   * ======================================== */

  /* Focus Visible - WCAG 2.4.7 */
  *:focus-visible {
    outline: 3px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
    border-radius: calc(var(--radius) * 0.5);
  }

  /* Skip to Main Content - WCAG 2.4.1 */
  .skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1rem 1.5rem;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: var(--font-weight-semibold);
  }

  .skip-to-main:focus {
    left: 1rem;
    top: 1rem;
  }

  /* Screen Reader Only - WCAG 4.1.2 */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .sr-only-focusable:focus,
  .sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Smooth Scroll Behavior */
  html {
    scroll-behavior: smooth;
  }

  /* Better Text Selection */
  ::selection {
    background-color: hsl(var(--primary) / 0.2);
    color: hsl(var(--foreground));
  }

  /* Touch Manipulation for Better Mobile UX */
  button,
  a,
  select {
    touch-action: manipulation !important;
    -ms-touch-action: manipulation !important;
  }

  /* Re-enable text selection for inputs and textareas (Safari fix) */
  input,
  textarea,
  [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
    font-size: 16px !important; /* Prevents Safari auto-zoom on focus */
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
  }

  /* Prevent Text Selection on Interactive Elements */
  button,
  .badge {
    user-select: none;
    -webkit-user-select: none;
  }
}

/* ========================================
 * GPU PERFORMANCE & NATIVE FEEL
 * ======================================== */

/* Page container — no contain:layout (it breaks fixed-positioned sheets inside) */
.page-container {
  will-change: auto;
}

/* GPU-accelerated card transitions */
.ios-card,
[class*="rounded-xl"],
[class*="rounded-2xl"] {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Instant active states — 0ms delay for native feel */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* iOS-style active press feedback */
button:active:not(:disabled),
a:active,
[role="button"]:active {
  transition: transform 60ms ease-out, opacity 60ms ease-out;
}

/* No-scrollbar utility (used by horizontal scroll areas) */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Optimized fixed elements (tab bar, headers) */
nav[class*="fixed"],
div[class*="sticky"] {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Prefers reduced data — skip heavy animations */
@media (prefers-reduced-data: reduce) {
  img, video {
    content-visibility: auto;
  }
}

/* Prefers reduced motion — disable animations globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* iOS-style backdrop blur */
.ios-blur {
  background: #ffffff;
}

.dark .ios-blur {
  background: #000000;
}

.adhd .ios-blur {
  background: #ffffff;
}

/* iOS-style card */
.ios-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.dark .ios-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

.adhd .ios-card {
  background: #ffffff;
  border: 2px solid rgba(91, 126, 204, 0.2);
  border-radius: var(--radius);
  box-shadow: 
    0 3px 12px rgba(91, 126, 204, 0.08),
    0 0 0 1px rgba(91, 126, 204, 0.15);
}

/* Enhanced iOS Glass Card - More Frosted */
.ios-glass {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.dark .ios-glass {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Ultra Glass - Maximum Blur Effect */
.ios-glass-heavy {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
}

.dark .ios-glass-heavy {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

/* iOS Material - Subtle Glass */
.ios-material {
  background: #f2f2f7;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}

.dark .ios-material {
  background: #000000;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* iOS Sheet Glass - For Bottom Sheets */
.ios-sheet {
  background: #ffffff;
  box-shadow: 
    0 -2px 20px rgba(0, 0, 0, 0.08),
    0 0 0 0.5px rgba(0, 0, 0, 0.02);
}

.dark .ios-sheet {
  background: #000000;
  box-shadow: 
    0 -2px 20px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(255, 255, 255, 0.05);
}

/* iOS Tab Bar - Bottom Navigation */
.ios-tab-bar-container {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
}

.dark .ios-tab-bar-container {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
}

.ios-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ios-tab-icon {
  width: 24px;
  height: 24px;
  transition: all 0.2s ease;
}

.ios-tab-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.2s ease;
}

/* iOS Separator */
.ios-separator {
  border-color: rgba(0, 0, 0, 0.08);
}

.dark .ios-separator {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Calendar month virtualization — skip rendering off-screen months */
.calendar-month {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* Calendar day styling for Hijri dates */
.rdp {
  display: flex;
  justify-content: center;
}

/* Calendar weekday headers - Fix light mode contrast */
.react-calendar__month-view__weekdays__weekday {
  color: #000000 !important;
  font-weight: 600 !important;
}

.react-calendar__month-view__weekdays__weekday abbr {
  text-decoration: none !important;
  color: #000000 !important;
}

.dark .react-calendar__month-view__weekdays__weekday {
  color: #ffffff !important;
}

.dark .react-calendar__month-view__weekdays__weekday abbr {
  color: #ffffff !important;
}

/* iOS Toggle Switch */
.ios-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 51px;
  height: 31px;
  background-color: var(--switch-background);
  border-radius: 31px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.ios-toggle:checked {
  background-color: var(--ios-green);
}

.ios-toggle::before {
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: white;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.ios-toggle:checked::before {
  transform: translateX(20px);
}

.ios-toggle:active::before {
  width: 31px;
}

.dark .ios-toggle {
  background-color: rgba(120, 120, 128, 0.32);
}

.dark .ios-toggle:checked {
  background-color: var(--ios-green-dark);
}

.rdp-day {
  height: 3.5rem !important;
  width: 3.5rem !important;
  font-size: 15px;
}

.rdp-month {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rdp-table {
  margin: 0 auto;
}

/* Shade outside days (previous/next month) */
.rdp-day_outside {
  opacity: 0.25 !important;
  pointer-events: auto;
}

.rdp-day_outside:hover {
  opacity: 0.35 !important;
}

/* Ensure current month days are fully visible */
.rdp-day:not(.rdp-day_outside) {
  opacity: 1 !important;
}

/* Dark mode calendar improvements */
.dark .rdp-day_selected {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.dark .rdp-day_today {
  font-weight: 700;
}

.dark .rdp-day:hover:not(.rdp-day_selected) {
  background-color: hsl(var(--accent)) !important;
}

/* Ensure shift colors in DayContent override modifier colors */
.rdp-day_button > div > span[style*="color"] {
  color: inherit !important;
}

/* Allow both holiday underlines AND shift colors to be visible */
.rdp-day_button[class*="aramco"],
.rdp-day_button[class*="holiday"] {
  /* Keep the underline but let child spans override color */
  color: inherit;
}

.rdp-day_button[class*="aramco"] > div > span,
.rdp-day_button[class*="holiday"] > div > span {
  /* Children with inline styles take precedence */
  position: relative;
  z-index: 1;
}

/* Working on Holiday - Special indicator for employees working on holidays */
.rdp-day_workingOnHoliday::after {
  content: "⚠";
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 12px;
  line-height: 1;
  color: var(--ios-orange);
  font-weight: bold;
  z-index: 10;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}

.rdp-day_workingOnHoliday {
  position: relative;
}

@media (max-width: 640px) {
  .rdp-day {
    height: 3rem !important;
    width: 3rem !important;
    font-size: 14px;
  }
  
  .rdp-day_workingOnHoliday::after {
    font-size: 10px;
    top: 1px;
    right: 1px;
  }
}

/* ========================================
 * ACCESSIBILITY MEDIA QUERIES
 * ======================================== */

/* Reduced Motion - WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode - Enhanced Accessibility */
@media (prefers-contrast: high) {
  :root {
    --border: rgba(0, 0, 0, 0.3);
    --muted-foreground: #000000;
  }

  .dark {
    --border: rgba(255, 255, 255, 0.8);
    --muted-foreground: #ffffff;
  }

  button,
  a,
  input,
  textarea,
  select {
    border-width: 2px !important;
  }

  a {
    text-decoration: underline;
  }

  button:focus,
  a:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline-width: 4px !important;
  }
}

/**
 * Base typography - WCAG Compliant with Enhanced Readability
 */
@layer base {
  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
    h1 {
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-bold);
      line-height: var(--leading-tight);
      margin-bottom: 1rem;
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-semibold);
      line-height: var(--leading-snug);
      margin-bottom: 0.75rem;
    }

    h3 {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-semibold);
      line-height: var(--leading-normal);
      margin-bottom: 0.5rem;
    }

    h4 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-semibold);
      line-height: var(--leading-relaxed);
      margin-bottom: 0.5rem;
    }

    p {
      font-size: var(--text-base);
      line-height: var(--leading-relaxed);
      margin-bottom: 1rem;
    }

    /* Error states */
    [aria-invalid="true"] {
      border-color: hsl(var(--destructive));
    }

    /* Success states */
    [aria-valid="true"] {
      border-color: hsl(var(--chart-2));
    }

    /* Loading states */
    [aria-busy="true"] {
      cursor: wait;
      opacity: 0.6;
    }

    /* Disabled states */
    [disabled],
    [aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.5;
    }

    /* Smooth animations */
    .animate-fade-in {
      animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    p {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }

    label {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    button {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    input {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }
  }
}

html {
  font-size: var(--font-size);
  overflow-x: hidden;
  overflow-y: auto;
}

/* ========================================
 * IOS COLOR UTILITY CLASSES
 * ======================================== */

/* Red Colors */
.text-ios-red { color: var(--ios-red); }
.dark .text-ios-red { color: var(--ios-red-dark); }
.bg-ios-red { background-color: var(--ios-red); }
.dark .bg-ios-red { background-color: var(--ios-red-dark); }
.bg-ios-red\/10 { background-color: rgb(from var(--ios-red) r g b / 0.1); }
.dark .bg-ios-red\/10 { background-color: rgb(from var(--ios-red-dark) r g b / 0.2); }
.bg-ios-red\/20 { background-color: rgb(from var(--ios-red) r g b / 0.2); }
.dark .bg-ios-red\/20 { background-color: rgb(from var(--ios-red-dark) r g b / 0.3); }
.border-ios-red { border-color: var(--ios-red); }
.dark .border-ios-red { border-color: var(--ios-red-dark); }
.border-ios-red\/20 { border-color: rgb(from var(--ios-red) r g b / 0.2); }
.border-ios-red\/30 { border-color: rgb(from var(--ios-red) r g b / 0.3); }

/* Orange Colors */
.text-ios-orange { color: var(--ios-orange); }
.dark .text-ios-orange { color: var(--ios-orange-dark); }
.bg-ios-orange { background-color: var(--ios-orange); }
.dark .bg-ios-orange { background-color: var(--ios-orange-dark); }
.bg-ios-orange\/10 { background-color: rgb(from var(--ios-orange) r g b / 0.1); }
.dark .bg-ios-orange\/10 { background-color: rgb(from var(--ios-orange-dark) r g b / 0.2); }
.bg-ios-orange\/20 { background-color: rgb(from var(--ios-orange) r g b / 0.2); }
.dark .bg-ios-orange\/20 { background-color: rgb(from var(--ios-orange-dark) r g b / 0.3); }
.border-ios-orange { border-color: var(--ios-orange); }
.border-ios-orange\/20 { border-color: rgb(from var(--ios-orange) r g b / 0.2); }

/* Yellow Colors */
.text-ios-yellow { color: var(--ios-yellow); }
.dark .text-ios-yellow { color: var(--ios-yellow-dark); }
.bg-ios-yellow { background-color: var(--ios-yellow); }
.bg-ios-yellow\/10 { background-color: rgb(from var(--ios-yellow) r g b / 0.1); }

/* Green Colors */
.text-ios-green { color: var(--ios-green); }
.dark .text-ios-green { color: var(--ios-green-dark); }
.bg-ios-green { background-color: var(--ios-green); }
.dark .bg-ios-green { background-color: var(--ios-green-dark); }
.bg-ios-green\/10 { background-color: rgb(from var(--ios-green) r g b / 0.1); }
.dark .bg-ios-green\/10 { background-color: rgb(from var(--ios-green-dark) r g b / 0.2); }
.bg-ios-green\/20 { background-color: rgb(from var(--ios-green) r g b / 0.2); }
.border-ios-green { border-color: var(--ios-green); }
.border-ios-green\/20 { border-color: rgb(from var(--ios-green) r g b / 0.2); }

/* Blue Colors */
.text-ios-blue { color: var(--ios-blue); }
.dark .text-ios-blue { color: var(--ios-blue-dark); }
.bg-ios-blue { background-color: var(--ios-blue); }
.dark .bg-ios-blue { background-color: var(--ios-blue-dark); }
.bg-ios-blue\/5 { background-color: rgb(from var(--ios-blue) r g b / 0.05); }
.bg-ios-blue\/10 { background-color: rgb(from var(--ios-blue) r g b / 0.1); }
.dark .bg-ios-blue\/10 { background-color: rgb(from var(--ios-blue-dark) r g b / 0.2); }
.bg-ios-blue\/20 { background-color: rgb(from var(--ios-blue) r g b / 0.2); }
.border-ios-blue\/20 { border-color: rgb(from var(--ios-blue) r g b / 0.2); }

/* Indigo Colors */
.text-ios-indigo { color: var(--ios-indigo); }
.dark .text-ios-indigo { color: var(--ios-indigo-dark); }
.bg-ios-indigo { background-color: var(--ios-indigo); }
.bg-ios-indigo\/20 { background-color: rgb(from var(--ios-indigo) r g b / 0.2); }

/* Purple Colors */
.text-ios-purple { color: var(--ios-purple); }
.dark .text-ios-purple { color: var(--ios-purple-dark); }
.bg-ios-purple { background-color: var(--ios-purple); }
.bg-ios-purple\/10 { background-color: rgb(from var(--ios-purple) r g b / 0.1); }
.bg-ios-purple\/20 { background-color: rgb(from var(--ios-purple) r g b / 0.2); }
.dark .bg-ios-purple\/20 { background-color: rgb(from var(--ios-purple-dark) r g b / 0.3); }

/* Additional opacity variants */
.bg-ios-red\/5 { background-color: rgb(from var(--ios-red) r g b / 0.05); }
.bg-ios-red\/90 { background-color: rgb(from var(--ios-red) r g b / 0.9); }
.hover\:bg-ios-red\/90:hover { background-color: rgb(from var(--ios-red) r g b / 0.9); }
.hover\:bg-ios-red\/20:hover { background-color: rgb(from var(--ios-red) r g b / 0.2); }
.hover\:bg-ios-red:hover { background-color: var(--ios-red); }
.dark .hover\:bg-ios-red:hover { background-color: var(--ios-red-dark); }

.bg-ios-orange\/5 { background-color: rgb(from var(--ios-orange) r g b / 0.05); }
.bg-ios-orange\/15 { background-color: rgb(from var(--ios-orange) r g b / 0.15); }
.bg-ios-orange\/90 { background-color: rgb(from var(--ios-orange) r g b / 0.9); }
.hover\:bg-ios-orange\/90:hover { background-color: rgb(from var(--ios-orange) r g b / 0.9); }
.hover\:bg-ios-orange\/10:hover { background-color: rgb(from var(--ios-orange) r g b / 0.1); }

.bg-ios-green\/5 { background-color: rgb(from var(--ios-green) r g b / 0.05); }
.bg-ios-green\/15 { background-color: rgb(from var(--ios-green) r g b / 0.15); }
.bg-ios-green\/90 { background-color: rgb(from var(--ios-green) r g b / 0.9); }
.hover\:bg-ios-green\/90:hover { background-color: rgb(from var(--ios-green) r g b / 0.9); }
.hover\:bg-ios-green\/20:hover { background-color: rgb(from var(--ios-green) r g b / 0.2); }
.hover\:bg-ios-green:hover { background-color: var(--ios-green); }
.dark .hover\:bg-ios-green:hover { background-color: var(--ios-green-dark); }

.bg-ios-blue\/90 { background-color: rgb(from var(--ios-blue) r g b / 0.9); }
.hover\:bg-ios-blue\/10:hover { background-color: rgb(from var(--ios-blue) r g b / 0.1); }
.hover\:bg-ios-blue:hover { background-color: var(--ios-blue); }
.dark .hover\:bg-ios-blue:hover { background-color: var(--ios-blue-dark); }

.border-ios-orange\/30 { border-color: rgb(from var(--ios-orange) r g b / 0.3); }
.border-ios-green\/30 { border-color: rgb(from var(--ios-green) r g b / 0.3); }

/* Ring focus states */
.focus-visible\:ring-ios-red:focus-visible { --tw-ring-color: var(--ios-red); }
.focus-visible\:ring-ios-orange:focus-visible { --tw-ring-color: var(--ios-orange); }
.focus-visible\:ring-ios-green:focus-visible { --tw-ring-color: var(--ios-green); }
.focus-visible\:ring-ios-blue:focus-visible { --tw-ring-color: var(--ios-blue); }

/* Border solid colors */
.border-ios-red { border-color: var(--ios-red); }
.dark .border-ios-red { border-color: var(--ios-red-dark); }
.border-ios-orange { border-color: var(--ios-orange); }
.dark .border-ios-orange { border-color: var(--ios-orange-dark); }

/* Hover border states */
.hover\:border-ios-red:hover { border-color: var(--ios-red); }
.dark .hover\:border-ios-red:hover { border-color: var(--ios-red-dark); }
.hover\:border-ios-green:hover { border-color: var(--ios-green); }
.dark .hover\:border-ios-green:hover { border-color: var(--ios-green-dark); }
.hover\:border-ios-orange:hover { border-color: var(--ios-orange); }
.dark .hover\:border-ios-orange:hover { border-color: var(--ios-orange-dark); }

/* iOS Gray Fill Levels */
.bg-ios-gray-1 { background-color: var(--ios-gray-1); }
.bg-ios-gray-2 { background-color: var(--ios-gray-2); }
.bg-ios-gray-3 { background-color: var(--ios-gray-3); }
.bg-ios-gray-4 { background-color: var(--ios-gray-4); }
.bg-ios-gray-5 { background-color: var(--ios-gray-5); }
.bg-ios-gray-6 { background-color: var(--ios-gray-6); }

.hover\:bg-ios-gray-4:hover { background-color: var(--ios-gray-4); }

/* iOS Label Colors */
.text-ios-label { color: var(--ios-label); }
.text-ios-secondary-label { color: var(--ios-secondary-label); }
.text-ios-tertiary-label { color: var(--ios-tertiary-label); }
.text-ios-quaternary-label { color: var(--ios-quaternary-label); }

.bg-ios-green-light { background-color: var(--ios-green-light); }

/* ========================================
 * CALENDAR VIEW COMPONENTS
 * ======================================== */

/* Calendar View Container */
.calendar-view-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--bottom-nav-safe-height));
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Calendar Top Navigation */
.calendar-top-nav {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(var(--background-rgb), 0.8);
  position: sticky;
  top: 0;
  z-index: 10;
}

.calendar-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 3.5rem;
  padding: 0.5rem 1rem;
}

.calendar-nav-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  transition: all 150ms ease;
  font-weight: 600;
  color: var(--foreground);
}

.calendar-nav-button:hover {
  background-color: var(--muted);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 132, 61, 0.15);
}

.calendar-nav-button:active {
  transform: scale(0.95);
}

/* Paint Mode Styles */
.cursor-crosshair {
  cursor: crosshair;
}

.calendar-view-active {
  background-color: var(--ios-gray-5);
}

/* Calendar Header */
.calendar-header {
  flex-shrink: 0;
  padding: 0 1rem 0.5rem;
  background-color: var(--background);
}

.calendar-month-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.calendar-cycle-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  background-color: var(--ios-green-light);
  color: var(--ios-green);
}

/* Calendar Content Area */
.calendar-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.25rem;
}

/* Calendar Content Area - Full Screen for Infinity Scroll */
.calendar-content-fullscreen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

.calendar-content-fullscreen::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.calendar-content-fullscreen::-webkit-scrollbar-thumb {
  display: none !important;
}

.calendar-content-fullscreen::-webkit-scrollbar-track {
  display: none !important;
}

/* Calendar Bottom Navigation */
.calendar-bottom-nav {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem calc(0.75rem + var(--safe-area-inset-bottom));
  background-color: var(--background);
  border-top: 1px solid var(--border);
}

/* Calendar Bottom Navigation - Floating iOS Style */
.calendar-bottom-nav-floating {
  flex-shrink: 0;
  padding: 0 1rem calc(0.5rem + var(--safe-area-inset-bottom));
  position: relative;
  z-index: 50;
}

.calendar-bottom-nav-floating > .calendar-nav-inner {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 0.5rem 1rem;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.dark .calendar-bottom-nav-floating > .calendar-nav-inner {
  background: rgba(28, 28, 30, 0.8);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Agenda View Styles */
.agenda-view {
  padding: 1rem 0;
}

.agenda-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.agenda-stat-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  background-color: var(--card);
  border: 1px solid var(--border);
}

.agenda-stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.agenda-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.agenda-stat-label {
  font-size: 0.75rem;
  color: var(--ios-secondary-label);
}

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.agenda-day-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background-color: var(--card);
  border: 1px solid var(--border);
  transition: background-color 150ms;
  text-align: left;
  width: 100%;
}

.agenda-day-item:hover {
  background-color: var(--accent);
}

.agenda-day-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 3rem;
}

.agenda-day-number {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.agenda-day-name {
  font-size: 0.75rem;
  color: var(--ios-secondary-label);
  text-transform: uppercase;
}

.agenda-shift-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.agenda-hours {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ios-secondary-label);
  margin-left: auto;
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .calendar-month-title {
    font-size: 1.875rem;
  }
  
  .agenda-summary {
    grid-template-columns: 1fr;
  }
  
  .agenda-stat-card {
    padding: 0.75rem;
  }
}

/* ========================================
 * DYNAMIC HEADER COMPONENTS
 * ======================================== */

/* App Main Content - Padding for header */
.app-main-content {
  padding-top: 0;
  min-height: calc(100vh - var(--bottom-nav-safe-height));
}

/* Header Container */
.header-container {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

.dark .header-container {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.12);
}

/* Header Inner Wrapper */
.header-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header Content Grid */
.header-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  min-height: 3rem;
}

/* Header Sections */
.header-section-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;
}

.header-section-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-align: center;
}

.header-section-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* RTL Support */
[dir="rtl"] .header-section-left {
  justify-content: flex-end;
}

[dir="rtl"] .header-section-right {
  justify-content: flex-start;
}

/* Header Text Styles */
.header-text-primary {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: -0.01em;
}

.header-text-secondary {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ios-secondary-label);
}

.header-text-status {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.header-text-location {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ios-tertiary-label);
}

/* Header Icons */
.header-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--ios-secondary-label);
}

.header-icon-primary {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--primary);
}

/* Status Badge for Header */
.header-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  background-color: rgba(0, 132, 61, 0.1);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
}

.dark .header-status-badge {
  background-color: rgba(0, 132, 61, 0.2);
}

/* Cycle Day Indicator */
.header-cycle-day {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  background-color: var(--ios-gray-2);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dark .header-cycle-day {
  background-color: var(--ios-gray-3);
}

/* Days Off Counter */
.header-days-off {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  background-color: rgba(52, 199, 89, 0.1);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ios-green);
  font-variant-numeric: tabular-nums;
}

.dark .header-days-off {
  background-color: rgba(50, 215, 75, 0.2);
  color: var(--ios-green-dark);
}

/* Responsive Header */
@media (max-width: 768px) {
  .header-inner {
    padding: 0 0.75rem;
  }
  
  .header-content {
    gap: 0.5rem;
    padding: 0.5rem 0;
    min-height: 2.75rem;
  }
  
  .header-text-primary {
    font-size: 0.875rem;
  }
  
  .header-text-status {
    font-size: 0.9375rem;
  }
  
  .header-icon {
    width: 1rem;
    height: 1rem;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 0 0.5rem;
  }
  
  .header-content {
    gap: 0.375rem;
  }
  
  .header-text-primary {
    font-size: 0.8125rem;
  }
  
  .header-text-secondary {
    font-size: 0.75rem;
  }
  
  .header-text-status {
    font-size: 0.875rem;
  }
  
  .header-text-location {
    font-size: 0.75rem;
  }
}

/* ========================================
 * TASK MANAGER COMPONENTS
 * ======================================== */

/* Task Input */
.ios-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background-color: var(--ios-gray-2);
  border: 0.5px solid transparent;
  border-radius: 0.625rem;
  font-size: 1rem;
  color: var(--foreground);
  transition: all 150ms;
}

.ios-input:focus {
  outline: none;
  background-color: var(--ios-gray-3);
  border-color: var(--primary);
}

.dark .ios-input {
  background-color: var(--ios-gray-3);
  color: var(--foreground);
}

.dark .ios-input:focus {
  background-color: var(--ios-gray-4);
}

/* Task Checkbox */
.ios-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--ios-gray-4);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all 150ms;
  flex-shrink: 0;
}

.ios-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.ios-checkbox:hover:not(:checked) {
  border-color: var(--primary);
}

/* Primary Button */
.ios-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: 0.625rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms;
}

.ios-button-primary:hover:not(:disabled) {
  opacity: 0.9;
}

.ios-button-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.ios-button-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Section Header */
.section-header {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: -0.01em;
}

/* ========================================
 * EISENHOWER MATRIX / TASK QUADRANTS
 * ======================================== */

/* Category Button in Add Task Section */
.matrix-category-button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  background: var(--ios-gray-2);
  border: 1.5px solid transparent;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dark .matrix-category-button {
  background: var(--ios-gray-3);
}

.matrix-category-button:hover {
  opacity: 0.9;
}

.matrix-category-button-selected {
  background: var(--background);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark .matrix-category-button-selected {
  background: var(--ios-gray-4);
}

/* Matrix Quadrant Container */
.matrix-quadrant {
  display: flex;
  flex-direction: column;
  background: var(--ios-gray-2);
  border-radius: 0.75rem;
  overflow: hidden;
}

.dark .matrix-quadrant {
  background: var(--ios-gray-3);
}

/* Quadrant Header */
.matrix-quadrant-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--background);
  border-left: 3px solid;
  border-bottom: 1px solid var(--border);
}

.dark .matrix-quadrant-header {
  background: var(--ios-gray-4);
}

/* Quadrant Content */
.matrix-quadrant-content {
  padding: 0.75rem;
  max-height: 20rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.matrix-quadrant-content::-webkit-scrollbar {
  width: 0.25rem;
}

.matrix-quadrant-content::-webkit-scrollbar-track {
  background: transparent;
}

.matrix-quadrant-content::-webkit-scrollbar-thumb {
  background: var(--ios-gray-4);
  border-radius: 9999px;
}

/* Task Item in Matrix */
.matrix-task-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem;
  background: var(--background);
  border-radius: 0.625rem;
  border: 1px solid var(--border);
}

.dark .matrix-task-item {
  background: var(--card);
}

/* Category Picker Dropdown */
.matrix-category-picker {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  min-width: 8rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 50;
  overflow: hidden;
}

.dark .matrix-category-picker {
  background: var(--card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.matrix-category-picker-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-align: left;
}

.matrix-category-picker-item:hover {
  background: var(--ios-gray-2);
}

.dark .matrix-category-picker-item:hover {
  background: var(--ios-gray-3);
}

/* Mini Quadrant for Dashboard Card */
.matrix-mini-quadrant {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.625rem;
  background: var(--ios-gray-2);
  border-left: 2.5px solid;
  border-radius: 0.5rem;
}

.dark .matrix-mini-quadrant {
  background: var(--ios-gray-3);
}

/* ========================================
 * END MATRIX STYLES
 * ======================================== */

/* Modal Overlay */
.ios-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
  animation: fadeIn 200ms ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal Container */
.ios-modal-container {
  width: 100%;
  max-width: 36rem;
  max-height: 85vh;
  animation: slideUp 300ms ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Content */
.ios-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
}

/* Modal Header */
.ios-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}

.ios-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
}

/* Modal Body */
.ios-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.ios-modal-body::-webkit-scrollbar {
  width: 0.375rem;
}

.ios-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.ios-modal-body::-webkit-scrollbar-thumb {
  background: var(--ios-gray-4);
  border-radius: 9999px;
}

/* Close Button */
.ios-close-button {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transition: background-color 150ms;
}

.ios-close-button:hover {
  background-color: var(--ios-gray-3);
}

/* Responsive */
@media (max-width: 640px) {
  .ios-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .ios-modal-container {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 1rem 1rem 0 0;
  }

  .ios-modal-content {
    max-height: 90vh;
    border-radius: 1rem 1rem 0 0;
  }
}


/* Arabic Font Optimization */
[lang="ar"] .header-text-primary,
[lang="ar"] .header-text-status {
  font-weight: 700;
  letter-spacing: 0;
}

[lang="ar"] .header-text-secondary {
  font-weight: 500;
}

/* ========================================
 * UPCOMING EVENT CARD - MINIMAL iOS WIDGET STYLE
 * ======================================== */

.event-card-minimal {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: transform 150ms ease;
}

.event-card-minimal:focus,
.event-card-minimal:focus-visible {
  outline: none !important;
}

.event-card-minimal:active {
  transform: scale(0.98);
}

.event-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.event-icon-minimal {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: white;
  stroke-width: 2.5;
}

.event-time-minimal {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ios-secondary-label);
  font-variant-numeric: tabular-nums;
}

.event-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.event-title-minimal {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--muted-foreground);
  text-transform: none;
  margin-bottom: 0.25rem;
}

.event-subtitle-minimal {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ios-secondary-label);
}

/* Arabic Typography */
[lang="ar"] .event-title-minimal {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
}

/* Event List Expanded */
.event-list-expanded {
  margin-top: 1rem;
  animation: expandDown 300ms ease-out;
  overflow: hidden;
}

@keyframes expandDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}

.event-divider {
  height: 1px;
  background-color: var(--border);
  margin: 1rem 0;
}

.event-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--secondary);
  margin-bottom: 0.5rem;
  transition: all 150ms ease;
}

.event-list-item:hover {
  background-color: var(--muted);
}

.event-list-item:active {
  transform: scale(0.98);
}

.event-list-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: var(--background);
  color: var(--primary);
  flex-shrink: 0;
}

.event-list-item-content {
  flex: 1;
  min-width: 0;
}

.event-list-item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  margin-bottom: 0.125rem;
}

.event-list-item-subtitle {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.event-list-item-detail {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .event-card-minimal {
    padding: 1.25rem;
  }
  
  .event-title-minimal {
    font-size: 1.75rem;
  }
  
  .event-subtitle-minimal {
    font-size: 1rem;
  }
  
  .event-icon-minimal {
    width: 2.25rem;
    height: 2.25rem;
  }
  
  .event-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
  
  .event-list-item {
    padding: 0.625rem;
  }
  
  .event-list-item-detail {
    display: none;
  }
}

/* ========================================
 * PROGRESS RINGS - CIRCULAR STYLE
 * ======================================== */

.progress-ring-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}

.progress-ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.progress-ring-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-ring-circle-bg {
  fill: none;
  stroke: var(--secondary);
  stroke-width: 8;
}

.progress-ring-circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}

.progress-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-ring-percentage {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--foreground);
}

.progress-ring-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
  max-width: 100px;
  line-height: 1.2;
}

.progress-rings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  justify-items: center;
}

@media (max-width: 640px) {
  .progress-ring {
    width: 100px;
    height: 100px;
  }
  
  .progress-ring-percentage {
    font-size: 1.5rem;
  }
  
  .progress-ring-label {
    font-size: 0.625rem;
  }
}

/* ========================================
 * MULTI-RING - APPLE WATCH STYLE
 * ======================================== */

.multi-ring-wrapper {
  background: #ffffff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

.dark .multi-ring-wrapper {
  background: #000000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.multi-ring-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 0;
  margin-bottom: 0;
  flex-direction: column;
}

.multi-ring-container-horizontal {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  margin-top: 0;
  margin-bottom: 0;
  flex-direction: row;
}

.multi-ring {
  position: relative;
  flex-shrink: 0;
  animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.multi-ring-svg {
  width: 100%;
  height: 100%;
}



/* Center Content */
.multi-ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  animation: centerBreathe 4s ease-in-out infinite;
}

@keyframes centerBreathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

.multi-ring-center-icon {
  margin-bottom: 0.25rem;
  animation: iconRotate 8s linear infinite;
}

@keyframes iconRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.multi-ring-center-primary {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1;
  letter-spacing: -0.02em;
}

.multi-ring-center-secondary {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Labels */
.multi-ring-labels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.multi-ring-label-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
}



.multi-ring-label-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.multi-ring-label-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.multi-ring-label-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1;
}

.multi-ring-label-value {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  line-height: 1.2;
}

@media (max-width: 640px) {
  .multi-ring-wrapper {
    padding: 1.25rem;
  }
  
  .multi-ring-container {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .multi-ring-container-horizontal {
    flex-direction: row;
    gap: 1rem;
  }
  
  .multi-ring {
    animation: none;
  }
  
  .multi-ring-labels {
    width: auto;
  }
  
  .multi-ring-center-primary {
    font-size: 1.5rem;
  }
  
  .multi-ring-center-secondary {
    font-size: 0.625rem;
  }
  
  .multi-ring-label-text {
    font-size: 0.6875rem;
  }
  
  .multi-ring-label-value {
    font-size: 0.625rem;
  }
}

/* Prayer Grid Compact - Integrated in Upcoming Event Card */
.prayer-grid-compact {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.prayer-grid-compact-no-border {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.prayer-time-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background-color: hsl(var(--accent) / 0.5);
  transition: all 150ms ease;
}

.prayer-time-pill:hover {
  background-color: hsl(var(--accent));
}

.prayer-time-pill-active {
  background-color: hsl(var(--primary) / 0.2);
}

.prayer-icon {
  width: 1rem;
  height: 1rem;
  margin-bottom: 0.25rem;
}

.prayer-name {
  font-size: 0.625rem;
  color: var(--muted-foreground);
  margin-bottom: 0.125rem;
  text-align: center;
}

.prayer-time {
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .prayer-grid-compact {
    gap: 0.375rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .prayer-grid-compact-no-border {
    gap: 0.375rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }
  
  .prayer-time-pill {
    padding: 0.375rem;
  }
  
  .prayer-icon {
    width: 0.875rem;
    height: 0.875rem;
  }
  
  .prayer-name {
    font-size: 0.5625rem;
  }
  
  .prayer-time {
    font-size: 0.6875rem;
  }
}

/* ========================================
 * TASK PROGRESS VISUALIZATION - Enhanced
 * ======================================== */

/* Task Stats Grid */
.task-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.task-stat-mini {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  background-color: var(--secondary);
  border-radius: 0.75rem;
  transition: all 150ms ease;
}

.task-stat-mini:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
}

.task-stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.task-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  line-height: 1;
}

/* Overall Progress Section */
.task-progress-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.task-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.task-progress-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
}

.task-progress-percentage {
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

/* Enhanced Progress Bar Track */
.progress-bar-track {
  position: relative;
  height: 0.5rem;
  background: linear-gradient(
    to right,
    hsl(var(--secondary)),
    hsl(var(--muted))
  );
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dark .progress-bar-track {
  background: linear-gradient(
    to right,
    hsl(var(--secondary)),
    rgba(138, 87, 254, 0.1)
  );
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Enhanced Progress Bar Fill */
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--primary-400) 50%,
    var(--primary-300) 100%
  );
  border-radius: 9999px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 
    0 0 8px rgba(138, 87, 254, 0.4),
    0 1px 3px rgba(138, 87, 254, 0.3);
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% {
    box-shadow: 
      0 0 8px rgba(138, 87, 254, 0.4),
      0 1px 3px rgba(138, 87, 254, 0.3);
  }
  50% {
    box-shadow: 
      0 0 12px rgba(138, 87, 254, 0.6),
      0 1px 4px rgba(138, 87, 254, 0.4);
  }
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  border-radius: 9999px 9999px 0 0;
}

/* Category Progress Bars */
.category-progress-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.category-progress-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.category-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.category-progress-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
}

.category-progress-count {
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

/* Category-specific progress bars */
.category-bar-track {
  position: relative;
  height: 0.375rem;
  background-color: var(--secondary);
  border-radius: 9999px;
  overflow: hidden;
}

.category-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* DO FIRST - Red/Urgent */
.category-bar-do-first {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

/* SCHEDULE - Green/Primary */
.category-bar-schedule {
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-400) 100%);
}

/* DELEGATE - Blue/Info */
.category-bar-delegate {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

/* ELIMINATE - Gray/Neutral */
.category-bar-eliminate {
  background: linear-gradient(90deg, #6b7280 0%, #9ca3af 100%);
}

/* Segmented Progress Bar (Multi-category) */
.progress-bar-segmented {
  position: relative;
  height: 0.5rem;
  background-color: var(--secondary);
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
}

.progress-segment {
  height: 100%;
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-segment:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* Completion Badge */
.completion-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  color: white;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(138, 87, 254, 0.25);
}

.completion-badge-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Utility Classes for Dashboard */
.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-section-header-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-section-header {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

.empty-state-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(138, 87, 254, 0.1);
}

.empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}

.empty-state-description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
  max-width: 280px;
}

.empty-state-template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
  max-width: 320px;
}

.empty-state-template-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: rgba(138, 87, 254, 0.05);
  border: 1px solid rgba(138, 87, 254, 0.1);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.empty-state-template-btn:active {
  transform: scale(0.95);
  background: rgba(138, 87, 254, 0.1);
}

.template-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--foreground);
  text-align: center;
}

.dark .empty-state-template-btn {
  background: rgba(138, 87, 254, 0.08);
  border: 1px solid rgba(138, 87, 254, 0.15);
}

.dark .empty-state-template-btn:active {
  background: rgba(138, 87, 254, 0.15);
}

/* Old Empty State - Keep for compatibility */
.task-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted-foreground);
}

.task-empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  opacity: 0.3;
}

.task-empty-text {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
  .task-stats-grid {
    gap: 0.5rem;
  }
  
  .task-stat-mini {
    padding: 0.625rem;
  }
  
  .task-stat-value {
    font-size: 1.25rem;
  }
  
  .progress-bar-track {
    height: 0.375rem;
  }
  
  .category-progress-list {
    gap: 0.625rem;
  }
}

/* Quick Add Task Input */
.task-input-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.task-input {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  transition: all 150ms ease;
  outline: none;
}

.task-input:focus {
  background-color: var(--background);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(138, 87, 254, 0.1);
}

.task-input::placeholder {
  color: var(--muted-foreground);
}

.task-category-select {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  transition: all 150ms ease;
  outline: none;
  cursor: pointer;
}

.task-category-select:focus {
  background-color: var(--background);
  border-color: var(--primary);
}

.task-add-button {
  width: 100%;
  height: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  color: white !important;
  border: none !important;
  transition: all 150ms ease;
}

.task-add-button:hover {
  transform: translateY(-1px);
}

.task-add-button:active {
  transform: scale(0.98);
}

/* Responsive */
@media (max-width: 640px) {
  .task-input-container {
    gap: 0.375rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }
  
  .task-input,
  .task-category-select {
    padding: 0.625rem;
    font-size: 0.8125rem;
  }
  
  .task-add-button {
    height: 2.25rem;
  }
}

/* ===================================
   ENHANCED TASK CARD STYLES (ALL 8 SUGGESTIONS)
   =================================== */

/* Enhanced Empty State */
.task-empty-state-enhanced {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

.task-empty-hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  opacity: 0.8;
}

/* Category Filter Chips */
.task-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.task-filter-chip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--secondary);
  border: 1.5px solid var(--border);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
}

.task-filter-chip:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
}

.task-filter-chip:active {
  transform: scale(0.95);
}

.task-filter-chip-active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
}

.task-filter-chip-do-first.task-filter-chip-active {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  border-color: #ef4444;
}

.task-filter-chip-schedule.task-filter-chip-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  border-color: var(--primary);
}

.task-filter-chip-delegate.task-filter-chip-active {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  border-color: #3b82f6;
}

.task-filter-chip-dot {
  width: 8px;
  height: 8px;
}

/* Motivational Stats */
.task-motivational-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(138, 87, 254, 0.05) 0%, rgba(165, 125, 255, 0.05) 100%);
  border-radius: 0.75rem;
  border: 1px solid rgba(138, 87, 254, 0.1);
}

.task-motivational-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.task-motivational-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.task-motivational-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* Task Preview Section */
.task-preview-section {
  margin-bottom: 1rem;
}

.task-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.task-preview-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.task-preview-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  padding: 0.25rem 0.5rem;
  background-color: var(--secondary);
  border-radius: 9999px;
}

.task-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Task Item Wrapper for action buttons */
.task-preview-item-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.task-preview-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: var(--secondary);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  transition: all 150ms ease;
  cursor: pointer;
  overflow: hidden;
  touch-action: pan-y;
}

.task-preview-item:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-preview-item:active {
  transform: scale(0.98);
}

/* Completed Task Styling */
.task-preview-item-completed {
  opacity: 0.6;
  background-color: var(--muted);
}

.task-preview-item-completed:hover {
  opacity: 0.7;
}

.task-preview-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background-color: var(--background);
  cursor: pointer;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.task-preview-checkbox:hover {
  border-color: var(--primary);
  background-color: rgba(138, 87, 254, 0.1);
}

.task-preview-checkbox:active {
  transform: scale(0.9);
}

.task-preview-checkbox-completed {
  background-color: var(--primary);
  border-color: var(--primary);
}

.task-preview-checkbox-completed .task-preview-checkbox-inner {
  background-color: white;
  width: 10px;
  height: 10px;
}

.task-preview-checkbox-inner {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent;
  transition: all 150ms ease;
}

.task-preview-checkbox:hover .task-preview-checkbox-inner {
  background-color: var(--primary);
}

.task-preview-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.task-category-badge-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.task-preview-text {
  font-size: 0.875rem;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-preview-text-completed {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--muted-foreground);
  opacity: 0.7;
}

.task-swipe-indicator {
  position: absolute;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: swipePulse 0.3s ease;
}

@keyframes swipePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.task-preview-see-all {
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.625rem;
  background-color: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
}

.task-preview-see-all:hover {
  background-color: var(--secondary);
  border-color: var(--primary);
  color: var(--primary);
}

.task-preview-see-all:active {
  transform: scale(0.98);
}

/* All Done Message */
.task-all-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.05) 0%, rgba(52, 199, 89, 0.02) 100%);
  border-radius: 0.75rem;
  border: 1.5px dashed rgba(52, 199, 89, 0.3);
}

.task-all-done-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  color: #34C759;
  animation: celebration 0.6s ease;
}

@keyframes celebration {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); }
  75% { transform: scale(1.1) rotate(5deg); }
}

.task-all-done-text {
  font-size: 1rem;
  font-weight: 600;
  color: #34C759;
  margin-bottom: 0.25rem;
}

.task-all-done-hint {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  opacity: 0.8;
}

/* Quick Add Section - Simplified */
.task-quick-add-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.task-quick-add-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.task-quick-add-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.task-category-indicator {
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.task-input-row {
  margin-bottom: 0.75rem;
}

.task-input-enhanced {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: var(--secondary);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  color: var(--foreground);
  transition: all 150ms ease;
  outline: none;
}

.task-input-enhanced:focus {
  background-color: var(--background);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(138, 87, 254, 0.1);
}

.task-input-enhanced::placeholder {
  color: var(--muted-foreground);
  opacity: 0.6;
}

/* Category Select Chips */
.task-category-select-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.task-category-chip {
  padding: 0.625rem 0.75rem;
  background-color: var(--secondary);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
  text-align: center;
}

.task-category-chip:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
}

.task-category-chip:active {
  transform: scale(0.96);
}

.task-category-chip-active {
  font-weight: 700;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .task-filter-chips {
    gap: 0.375rem;
  }
  
  .task-filter-chip {
    padding: 0.3125rem 0.625rem;
    font-size: 0.6875rem;
  }
  
  .task-motivational-stats {
    padding: 0.75rem;
  }
  
  .task-motivational-value {
    font-size: 1.125rem;
  }
  
  .task-motivational-label {
    font-size: 0.6875rem;
  }
  
  .task-preview-item {
    padding: 0.625rem;
  }
  
  .task-preview-text {
    font-size: 0.8125rem;
  }
  
  .task-category-select-chips {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
  }
  
  .task-category-chip {
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
  }
  
  .task-quick-add-section {
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

/* ===================================
   TASK ACTION BUTTONS (EDIT, DELETE, DEADLINE, REMINDER)
   =================================== */

.task-action-buttons {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 2.25rem;
  opacity: 1;
  transition: opacity 150ms ease;
}

.task-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.625rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
  white-space: nowrap;
}

.task-action-btn:hover {
  background-color: var(--muted);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-action-btn:active {
  transform: scale(0.95);
}

/* Edit button - Green */
.task-action-btn-edit {
  color: var(--primary);
  border-color: rgba(0, 132, 61, 0.3);
}

.task-action-btn-edit:hover {
  background-color: rgba(0, 132, 61, 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

/* Deadline button - Blue */
.task-action-btn-deadline {
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.3);
}

.task-action-btn-deadline:hover {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  color: #3b82f6;
}

/* Reminder button - Orange */
.task-action-btn-reminder {
  color: #FF9500;
  border-color: rgba(255, 149, 0, 0.3);
}

.task-action-btn-reminder:hover {
  background-color: rgba(255, 149, 0, 0.1);
  border-color: #FF9500;
  color: #FF9500;
}

/* Delete button - Red */
.task-action-btn-delete {
  color: #FF3B30;
  border-color: rgba(255, 59, 48, 0.3);
}

.task-action-btn-delete:hover {
  background-color: rgba(255, 59, 48, 0.1);
  border-color: #FF3B30;
  color: #FF3B30;
}

/* Responsive - Mobile */
@media (max-width: 640px) {
  .task-action-buttons {
    gap: 0.25rem;
    padding-left: 2rem;
  }
  
  .task-action-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.625rem;
  }
}

/* ===================================
   TASK STATS AND FILTERS
   =================================== */

.task-stat-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.task-stat-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.task-stat-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

.category-filter-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

.category-filter-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  border: 1.5px solid var(--border);
}

.category-filter-chip:active {
  transform: scale(0.9);
}

.category-filter-chip-active {
  border-width: 2px;
  transform: scale(1.05);
}

.category-filter-chip-inactive {
  opacity: 0.6;
}

.category-filter-chip-do-first {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.category-filter-chip-schedule {
  background: rgba(0, 132, 61, 0.1);
  border-color: var(--primary);
}

.category-filter-chip-delegate {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.category-filter-chip-work-only {
  background: rgba(255, 149, 0, 0.1);
  border-color: #FF9500;
}

.category-filter-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* More Tasks Button */
.more-tasks-btn {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.5rem;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
}

.more-tasks-btn:hover {
  background: var(--secondary);
  border-color: var(--primary);
  color: var(--primary);
}

.more-tasks-btn:active {
  transform: scale(0.98);
}

/* Completion Message */
.completion-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.05) 0%, rgba(52, 199, 89, 0.02) 100%);
  border-radius: 0.75rem;
  border: 1.5px dashed rgba(52, 199, 89, 0.3);
}

.completion-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  color: #34C759;
  animation: celebration 0.6s ease;
}

.completion-text {
  font-size: 1rem;
  font-weight: 600;
  color: #34C759;
}

/* Task Input Section */
.task-input-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.task-input-enhanced-compact {
  padding: 0.75rem;
  font-size: 0.875rem;
}

/* Category Select Row */
.category-select-row {
  display: flex;
  gap: 0.5rem;
}

.category-select-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
  background: var(--secondary);
  color: var(--muted-foreground);
}

.category-select-btn:active {
  transform: scale(0.95);
}

.category-select-btn-do-first {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}

.category-select-btn-do-first-inactive {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

.category-select-btn-schedule {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.category-select-btn-schedule-inactive {
  background: rgba(0, 132, 61, 0.1);
  color: var(--primary);
  border-color: rgba(0, 132, 61, 0.2);
}

.category-select-btn-delegate {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.category-select-btn-delegate-inactive {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.2);
}

.category-select-btn-eliminate {
  background: #6b7280;
  color: white;
  border-color: #6b7280;
}

.category-select-btn-eliminate-inactive {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
  border-color: rgba(107, 114, 128, 0.2);
}

.category-select-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

/* Work Checkbox */
.work-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--secondary);
  border-radius: 0.625rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.work-checkbox-label:hover {
  background: var(--muted);
}

.work-checkbox-label:active {
  transform: scale(0.98);
}

.ios-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.375rem;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background: var(--background);
  position: relative;
}

.ios-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.ios-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
}

.work-checkbox-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
}

/* Manage Button */
.manage-btn {
  width: 100%;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.manage-btn-icon {
  width: 1rem;
  height: 1rem;
}

/* Task Preview Item Wrapper Completed State */
.task-preview-item-wrapper-completed {
  opacity: 0.7;
}

/* ===================================
   SETTINGS PAGE
   =================================== */

/* Settings Page Container */
.settings-page {
  padding-bottom: 1.5rem;
}

/* Settings Header */
.settings-header {
  font-size: 2.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

html[dir="rtl"] .settings-header {
  text-align: right;
}

/* Settings Section */
.settings-section {
  padding-left: 1rem;
  padding-right: 1rem;
}

.settings-section-header {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

html[dir="rtl"] .settings-section-header {
  text-align: right;
}

/* Settings Card */
.settings-card {
  background: var(--card);
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Profile Card */
.settings-profile-card {
  padding: 1.5rem;
  text-align: center;
}

.settings-profile-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background: rgba(138, 87, 254, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  position: relative;
  overflow: hidden;
}

.settings-profile-avatar-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.1;
}

.settings-profile-initials {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--primary);
  position: relative;
  z-index: 10;
}

.settings-profile-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.settings-profile-email {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.settings-profile-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(138, 87, 254, 0.1);
}

.settings-profile-badge-text {
  font-size: 0.8125rem;
  color: var(--primary);
  font-weight: 500;
}

/* Complete Setup Banner */
.settings-setup-banner {
  padding: 1rem;
  border: 2px solid rgba(138, 87, 254, 0.2);
}

html[dir="ltr"] .settings-setup-banner {
  text-align: left;
}

html[dir="rtl"] .settings-setup-banner {
  text-align: right;
}

.settings-setup-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

html[dir="rtl"] .settings-setup-banner-content {
  flex-direction: row-reverse;
}

.settings-setup-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(138, 87, 254, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-setup-text {
  flex: 1;
}

.settings-setup-title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.settings-setup-description {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.settings-setup-button {
  width: 100%;
  padding: 0.625rem 1rem;
  background: var(--primary);
  color: white;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: opacity 0.2s ease;
  border: none;
  cursor: pointer;
}

.settings-setup-button:active {
  opacity: 0.8;
}

/* Settings List Items */
.settings-list-item {
  width: 100%;
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border);
}

html[dir="rtl"] .settings-list-item {
  flex-direction: row-reverse;
}

.settings-list-item:last-child {
  border-bottom: none;
}

.settings-list-item:active {
  background: var(--muted);
}

.settings-list-item-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-list-item-content {
  flex: 1;
  min-width: 0;
}

html[dir="ltr"] .settings-list-item-content {
  text-align: left;
}

html[dir="rtl"] .settings-list-item-content {
  text-align: right;
}

.settings-list-item-label {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.settings-list-item-value {
  font-size: 1.0625rem;
}

.settings-list-item-value-italic {
  font-style: italic;
  color: var(--muted-foreground);
}

.settings-list-item-title {
  font-size: 1.0625rem;
}

.settings-list-item-subtitle {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.settings-list-item-trailing {
  font-size: 1.0625rem;
  color: var(--muted-foreground);
}

.settings-list-item-chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

/* Settings Toggle Row */
.settings-toggle-row {
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
}

html[dir="rtl"] .settings-toggle-row {
  flex-direction: row-reverse;
}

.settings-toggle-row:last-child {
  border-bottom: none;
}

.settings-toggle-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

html[dir="ltr"] .settings-toggle-content {
  justify-content: flex-start;
}

html[dir="rtl"] .settings-toggle-content {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.settings-toggle-label {
  flex: 1;
  font-size: 1.0625rem;
}

html[dir="ltr"] .settings-toggle-label {
  text-align: left;
}

html[dir="rtl"] .settings-toggle-label {
  text-align: right;
}

.settings-checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Settings Radio Item */
.settings-radio-item {
  width: 100%;
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border);
}

html[dir="rtl"] .settings-radio-item {
  flex-direction: row-reverse;
}

.settings-radio-item:last-child {
  border-bottom: none;
}

.settings-radio-item:active {
  background: var(--muted);
}

.settings-radio-checkmark {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #00843d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Settings Action Button */
.settings-action-button {
  width: 100%;
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border);
}

.settings-action-button:last-child {
  border-bottom: none;
}

.settings-action-button:active {
  background: var(--muted);
}

.settings-action-button-text {
  font-size: 1.0625rem;
  font-weight: 500;
  color: #00843d;
}

.settings-action-button-danger {
  color: #FF3B30;
}

/* Settings Empty Card Note */
.settings-empty-note {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-style: italic;
}

/* Icon Background Colors */
.settings-icon-brand {
  background: rgba(138, 87, 254, 0.1);
}

.settings-icon-blue {
  background: rgba(0, 122, 255, 0.1);
}

.settings-icon-green {
  background: rgba(52, 199, 89, 0.1);
}

.settings-icon-orange {
  background: rgba(255, 149, 0, 0.1);
}

.settings-icon-red {
  background: rgba(255, 59, 48, 0.1);
}

.settings-icon-purple {
  background: rgba(175, 82, 222, 0.1);
}

.settings-icon-gray {
  background: rgba(142, 142, 147, 0.1);
}

.settings-icon-olive {
  background: rgba(107, 127, 57, 0.1);
}

.settings-icon-bus {
  background: rgba(255, 149, 0, 0.1);
}

.settings-icon-military {
  background: rgba(107, 127, 57, 0.1);
}

/* List Item Extras */
.settings-list-item-extra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-list-item-extra-text {
  font-size: 1.0625rem;
  color: var(--muted-foreground);
}

.settings-list-item-extra-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
}

/* List Item Check */
.settings-list-item-check {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #00843d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* List Item Border Helper */
.settings-list-item-border {
  border-bottom: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 640px) {
  .settings-header {
    font-size: 2rem;
  }
  
  .settings-list-item {
    padding: 0.5rem 1rem;
  }
  
  .settings-toggle-row {
    padding: 0.5rem 1rem;
  }
}

/* ===================================
   APP HEADER
   =================================== */

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--background);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: rgba(var(--background-rgb), 0.8);
}

/* Calendar view specific - send header behind content */
.calendar-active .app-header {
  z-index: -999;
}

.app-header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  height: 3.5rem;
}

.app-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-header-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--secondary);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
}

.app-header-settings-btn:hover {
  background-color: var(--muted);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 132, 61, 0.15);
}

.app-header-settings-btn:active {
  transform: scale(0.95);
}

/* Add top padding to main content to account for header */
.app-main-content {
  padding-top: 0.5rem;
}

/* Responsive - Mobile */
@media (max-width: 640px) {
  .app-header-content {
    padding: 0.625rem 1rem;
    height: 3rem;
  }
  
  .app-header-title {
    font-size: 1.375rem;
  }
  
  .app-header-settings-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
  
  /* Calendar navigation mobile styles */
  .calendar-top-nav {
    padding: 0.625rem 1rem;
  }
  
  .calendar-nav-inner {
    height: 3rem;
  }
}

/* ===================================
   ALARM VIEW
   =================================== */

.alarm-view {
  padding: 1.5rem;
  padding-bottom: 8rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Alarm Stats Card */
.alarm-stats-card {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.alarm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.alarm-stat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.alarm-stat-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.alarm-stat-icon-total {
  background-color: rgba(0, 132, 61, 0.1);
  color: var(--primary);
}

.alarm-stat-icon-active {
  background-color: rgba(52, 199, 89, 0.1);
  color: #34C759;
}

.alarm-stat-icon-day {
  background-color: rgba(0, 132, 61, 0.1);
  color: #00843d;
}

.alarm-stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.alarm-stat-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alarm-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
}

.alarm-stat-value-active {
  color: #34C759;
}

/* Alarm List Section */
.alarm-list-section {
  margin-bottom: 2rem;
}

.alarm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.alarm-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.alarm-count-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  background-color: var(--primary);
  color: white;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Empty State */
.alarm-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
}

.alarm-empty-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.alarm-empty-icon {
  width: 4rem;
  height: 4rem;
  color: var(--muted-foreground);
  opacity: 0.5;
}

.alarm-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.alarm-empty-subtitle {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Alarm List */
.alarm-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Alarm Card */
.alarm-card {
  padding: 1rem;
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
  overflow: hidden;
}

.alarm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.alarm-card:active {
  transform: scale(0.98);
}

.alarm-card-disabled {
  opacity: 0.5;
}

.alarm-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.alarm-card-left {
  flex: 1;
  min-width: 0;
}

.alarm-time {
  font-size: 2rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.alarm-time-disabled {
  color: var(--muted-foreground);
}

.alarm-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alarm-label {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.alarm-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.alarm-day-tag {
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
  background-color: rgba(255, 255, 255, 0.5);
}

.alarm-feature-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 0.375rem;
  background-color: var(--secondary);
  color: var(--muted-foreground);
}

/* Alarm Toggle */
.alarm-toggle {
  position: relative;
  width: 3rem;
  height: 1.75rem;
  border-radius: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  flex-shrink: 0;
  outline: none;
}

.alarm-toggle-on {
  background-color: #34C759;
}

.alarm-toggle-off {
  background-color: var(--secondary);
}

.alarm-toggle-thumb {
  position: absolute;
  top: 0.125rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 200ms ease;
}

.alarm-toggle-on .alarm-toggle-thumb {
  transform: translateX(1.25rem);
}

.alarm-toggle-off .alarm-toggle-thumb {
  transform: translateX(0.125rem);
}

/* Delete Button */
.alarm-delete-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 59, 48, 0.1);
  color: #FF3B30;
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: all 150ms ease;
  outline: none;
}

.alarm-card:hover .alarm-delete-btn {
  opacity: 1;
}

.alarm-delete-btn:hover {
  background-color: rgba(255, 59, 48, 0.2);
  transform: scale(1.1);
}

.alarm-delete-btn:active {
  transform: scale(0.95);
}

/* Floating Action Button */
.alarm-fab {
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%);
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 132, 61, 0.4);
  cursor: pointer;
  transition: all 200ms ease;
  z-index: 40;
  outline: none;
}

.alarm-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(138, 87, 254, 0.5);
}

.alarm-fab:active {
  transform: scale(0.95);
}

/* Alarm Dialog */
.alarm-dialog-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.alarm-dialog {
  background-color: var(--card);
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.alarm-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.alarm-dialog-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.alarm-dialog-close,
.alarm-dialog-save {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--secondary);
  color: var(--muted-foreground);
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
}

.alarm-dialog-save {
  background-color: var(--primary);
  color: white;
}

.alarm-dialog-close:hover,
.alarm-dialog-save:hover {
  transform: scale(1.05);
}

.alarm-dialog-close:active,
.alarm-dialog-save:active {
  transform: scale(0.95);
}

.alarm-dialog-content {
  padding: 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Form Sections */
.alarm-form-section {
  margin-bottom: 1.5rem;
}

.alarm-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.alarm-time-input,
.alarm-label-input,
.alarm-select-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background-color: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  color: var(--foreground);
  outline: none;
  transition: all 150ms ease;
}

.alarm-time-input {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.alarm-time-input:focus,
.alarm-label-input:focus,
.alarm-select-input:focus {
  border-color: var(--primary);
}

/* Day Filter Options */
.alarm-day-filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.alarm-day-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background-color: var(--secondary);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.alarm-day-filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.alarm-day-filter-btn:active {
  transform: scale(0.98);
}

.alarm-day-filter-btn-active {
  border-width: 2px;
}

/* Toggle Section */
.alarm-form-toggle-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: var(--secondary);
  border-radius: 0.75rem;
}

.alarm-form-toggle-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.alarm-form-toggle-content .alarm-form-label {
  margin-bottom: 0;
}

/* Responsive - Mobile */
@media (max-width: 640px) {
  .alarm-view {
    padding: 1rem;
    padding-bottom: 6rem;
  }

  .alarm-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .alarm-time {
    font-size: 1.75rem;
  }

  .alarm-fab {
    bottom: 5rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
  }

  .alarm-dialog {
    max-height: 95vh;
  }

  .alarm-time-input {
    font-size: 1.5rem;
  }
}

/* ============================================ */
/* BUS SCHEDULE DIALOG */
/* ============================================ */

.shift-pattern-dialog {
  max-width: 600px;
  width: 95vw;
  max-height: 85vh;
  background: linear-gradient(to bottom, #faf9fb, #ffffff);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(138, 87, 254, 0.2);
  display: flex;
  flex-direction: column;
}

.dark .shift-pattern-dialog {
  background: #000000;
}

.shift-pattern-dialog .alarm-dialog-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  text-align: center;
  margin: 0;
}

.dark .shift-pattern-dialog .alarm-dialog-title {
  color: #ffffff;
}

.shift-pattern-dialog .alarm-dialog-close {
  position: absolute;
  left: 1.5rem;
  top: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(0, 132, 61, 0.1);
  border: 1.5px solid rgba(0, 132, 61, 0.2);
  color: var(--primary);
  transition: all 200ms ease;
}

.shift-pattern-dialog .alarm-dialog-close:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  border-color: var(--primary);
  color: white;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 132, 61, 0.3);
}

.shift-pattern-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  overflow: hidden;
}

.shift-pattern-tabs-list {
  display: flex;
  gap: 0.625rem;
  padding: 0.375rem;
  background: linear-gradient(135deg, rgba(138, 87, 254, 0.08), rgba(99, 102, 241, 0.08));
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(138, 87, 254, 0.15);
}

.shift-pattern-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: transparent;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #a0a0a0;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.shift-pattern-tab:hover {
  background-color: rgba(0, 132, 61, 0.1);
  color: var(--primary);
  transform: scale(1.02);
}

.shift-pattern-tab[data-state="active"] {
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: white;
}

.shift-pattern-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.shift-pattern-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem;
  margin-bottom: 1rem;
}

.shift-pattern-scroll-full {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem;
}

.shift-pattern-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.shift-pattern-preset-card {
  padding: 1.5rem;
  background: white;
  border: 2px solid #f0f0f0;
  border-radius: 1.25rem;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.shift-pattern-preset-card-clickable:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 24px rgba(0, 132, 61, 0.18);
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(0, 132, 61, 0.02), rgba(0, 132, 61, 0.02));
}

.shift-pattern-preset-card-clickable:active {
  transform: scale(0.99);
}

.shift-pattern-preset-card-selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(0, 132, 61, 0.08), rgba(0, 132, 61, 0.08));
  box-shadow: 0 8px 20px rgba(0, 132, 61, 0.25);
}

.shift-pattern-preset-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.125rem;
}

.shift-pattern-preset-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  border-radius: 1.125rem;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 8px 16px rgba(138, 87, 254, 0.3);
}

.shift-pattern-preset-info {
  flex: 1;
}

.shift-pattern-preset-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.dark .shift-pattern-preset-name {
  color: #ffffff;
}

.shift-pattern-preset-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: white;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(138, 87, 254, 0.25);
}

.shift-pattern-preset-notes {
  margin-top: 1rem;
  padding: 0.875rem 1.125rem;
  background: linear-gradient(135deg, #fafafa, #f5f5f5);
  border-left: 3px solid var(--primary);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  color: #666;
  line-height: 1.6;
  font-weight: 500;
}

.dark .shift-pattern-preset-notes {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  border-left-color: var(--primary-300);
}

.shift-pattern-footer {
  display: flex;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.shift-pattern-select-btn {
  flex: 1;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
  outline: none;
}

.shift-pattern-select-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(138, 87, 254, 0.3);
}

.shift-pattern-select-btn:active {
  transform: scale(0.98);
}

.shift-pattern-cancel-btn {
  padding: 0.875rem 1.5rem;
  background-color: var(--secondary);
  color: var(--foreground);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
}

.shift-pattern-cancel-btn:hover {
  background-color: var(--muted);
}

/* Bus Schedule Specific Styles - iOS Native Design */
.bus-schedule-routes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.bus-schedule-route-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.bus-schedule-route-times {
  display: flex;
  flex-direction: column;
  gap: 0px;
  background: var(--ios-material-bg);
  border-radius: 0.625rem;
  overflow: hidden;
  border: 1px solid var(--ios-separator);
}

.bus-schedule-route-time-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--ios-material-bg);
  font-size: 1rem;
  color: var(--foreground);
  font-weight: 400;
  border-bottom: 1px solid var(--ios-separator);
  transition: background 150ms ease;
  letter-spacing: -0.02em;
}

.bus-schedule-route-time-item:last-child {
  border-bottom: none;
}

.bus-schedule-route-time-item:active {
  background: var(--ios-pressed);
}

/* Dark Mode for Bus Schedule */
.dark .bus-schedule-route-times {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .bus-schedule-route-time-item {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .bus-schedule-route-time-item:active {
  background: rgba(255, 255, 255, 0.08);
}

.bus-schedule-route-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.bus-schedule-route-more {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-weight: 500;
  padding: 0.5rem 1rem;
  text-align: left;
  letter-spacing: -0.01em;
}

/* iOS-Style Bus Template Cards */
.bus-template-card {
  background: var(--ios-material-bg);
  border: 1px solid var(--ios-separator);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 150ms ease;
  cursor: pointer;
}

.bus-template-card:active {
  transform: scale(0.98);
  background: var(--ios-pressed);
}

.bus-template-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--ios-separator);
}

.bus-template-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--brand-primary);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.bus-template-info {
  flex: 1;
  min-width: 0;
}

.bus-template-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

.bus-template-company {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-top: 0.125rem;
  letter-spacing: -0.01em;
}

.bus-template-notes {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--ios-separator);
  background: var(--ios-card-bg);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* Custom Templates Section */
.bus-custom-templates-section {
  margin-bottom: 1.5rem;
}

.bus-custom-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}

.bus-custom-templates-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bus-custom-template-card {
  padding: 1rem;
  background: var(--ios-material-bg);
  border: 1px solid var(--ios-separator);
  border-radius: 0.75rem;
  transition: all 150ms ease;
}

.bus-custom-template-card:active {
  background: var(--ios-pressed);
  transform: scale(0.98);
}

.bus-custom-template-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.bus-custom-template-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--foreground);
  letter-spacing: -0.02em;
}

.bus-custom-template-company {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-top: 0.125rem;
  letter-spacing: -0.01em;
}

.bus-custom-template-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.bus-custom-action-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  cursor: pointer;
  transition: all 150ms ease;
  color: var(--ios-blue);
}

.bus-custom-action-btn:active {
  background: var(--ios-pressed);
  transform: scale(0.95);
}

.bus-custom-delete-btn {
  color: var(--ios-red);
}

.bus-custom-select-btn {
  padding: 0.375rem 0.75rem;
  background: var(--ios-blue);
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: -0.01em;
}

.bus-custom-select-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.bus-custom-template-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  padding-top: 0.5rem;
  border-top: 1px solid var(--ios-separator);
  letter-spacing: -0.01em;
}

/* Custom Form Section */
.bus-custom-form-section {
  background: var(--ios-card-bg);
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ios-separator);
}

.bus-routes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.bus-add-route-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--ios-blue);
  color: white;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: -0.01em;
}

.bus-add-route-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

.bus-routes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bus-route-form-item {
  padding: 1rem;
  background: var(--ios-material-bg);
  border: 1px solid var(--ios-separator);
  border-radius: 0.75rem;
}

.bus-route-form-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.bus-route-form-field {
  flex: 1;
  min-width: 0;
}

.bus-route-form-field-wide {
  flex: 2;
}

.bus-route-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.375rem;
  letter-spacing: -0.01em;
}

.bus-route-time-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--foreground);
  letter-spacing: -0.01em;
  transition: all 150ms ease;
}

.bus-route-time-input:focus {
  outline: none;
  border-color: var(--ios-blue);
  background: var(--background);
}

.bus-route-select {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--foreground);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: all 150ms ease;
}

.bus-route-select:focus {
  outline: none;
  border-color: var(--ios-blue);
  background: var(--background);
}

.bus-route-delete-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  color: var(--ios-red);
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
  margin-bottom: 0.125rem;
}

.bus-route-delete-btn:active {
  background: rgba(255, 59, 48, 0.1);
  transform: scale(0.95);
}

.bus-notes-textarea {
  width: 100%;
  padding: 0.75rem;
  background: var(--ios-card-bg);
  border: 1px solid var(--ios-separator);
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--foreground);
  letter-spacing: -0.01em;
  line-height: 1.4;
  resize: vertical;
  min-height: 4rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  transition: all 150ms ease;
}

.bus-notes-textarea:focus {
  outline: none;
  border-color: var(--ios-blue);
  background: var(--background);
}

.bus-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ios-separator);
}

.bus-form-save-btn {
  flex: 1;
  padding: 0.75rem;
  background: var(--brand-primary);
  color: white;
  border-radius: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: -0.01em;
}

.bus-form-save-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.bus-form-cancel-btn {
  padding: 0.75rem 1.25rem;
  background: transparent;
  color: var(--ios-blue);
  border-radius: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: -0.01em;
}

.bus-form-cancel-btn:active {
  background: var(--ios-pressed);
}

/* ============================================ */
/* 120 FPS PERFORMANCE OPTIMIZATIONS */
/* ProMotion Display Support (iPhone 13 Pro+) */
/* ============================================ */

/* Force hardware acceleration for all animations */
* {
  will-change: auto;
}

/* Optimize frequently animated elements */
button,
.ios-card,
.task-item,
.alarm-card,
.shift-pattern-preset-card,
[class*="animate-"],
[class*="transition-"] {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* Micro-animations - 120 FPS optimized */
@keyframes bounce {
  0%, 100% { 
    transform: translateY(0) translateZ(0); 
  }
  50% { 
    transform: translateY(-8px) translateZ(0); 
  }
}

@keyframes shake {
  0%, 100% { 
    transform: translateX(0) translateZ(0); 
  }
  25% { 
    transform: translateX(-6px) translateZ(0); 
  }
  75% { 
    transform: translateX(6px) translateZ(0); 
  }
}

@keyframes wiggle {
  0%, 100% { 
    transform: rotate(0deg) translateZ(0); 
  }
  25% { 
    transform: rotate(-5deg) translateZ(0); 
  }
  75% { 
    transform: rotate(5deg) translateZ(0); 
  }
}

@keyframes pulse-scale {
  0%, 100% { 
    transform: scale(1) translateZ(0); 
  }
  50% { 
    transform: scale(1.05) translateZ(0); 
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

/* Utility classes for micro-animations */
.animate-bounce {
  animation: bounce 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-shake {
  animation: shake 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-wiggle {
  animation: wiggle 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-pulse {
  animation: pulse-scale 2s ease-in-out infinite;
}

.animate-slide-in-left {
  animation: slide-in-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-in-up {
  animation: fade-in-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 120 FPS smooth transitions */
.transition-120 {
  transition: all 8.33ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-smooth {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fast {
  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduce motion support - respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-bounce,
  .animate-shake,
  .animate-wiggle,
  .animate-pulse {
    animation: none !important;
  }
}

/* GPU acceleration hints */
.gpu-accelerated {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Optimized scroll performance */
.scroll-optimized {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  will-change: scroll-position;
}

/* High refresh rate display optimization */
@media (min-resolution: 120dpi) {
  button,
  .ios-card,
  .task-item {
    transition-duration: 8.33ms; /* 1 frame at 120fps */
  }
}

/* ProMotion display support - targets 120Hz capable devices */
@media (min-device-pixel-ratio: 2) and (min-width: 390px) {
  * {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.bus-route-form-row {
  display: grid;
  grid-template-columns: 100px 1fr 140px auto;
  gap: 0.75rem;
  align-items: end;
}

.bus-route-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bus-route-form-field-wide {
  grid-column: span 1;
}

.bus-route-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bus-route-time-input {
  padding: 0.625rem;
  background-color: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: all 150ms ease;
}

.bus-route-time-input:focus {
  border-color: var(--primary);
}

.bus-route-select {
  padding: 0.625rem;
  background-color: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: all 150ms ease;
  cursor: pointer;
}

.bus-route-select:focus {
  border-color: var(--primary);
}

.bus-route-delete-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 59, 48, 0.1);
  color: #FF3B30;
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
  align-self: flex-end;
}

.bus-route-delete-btn:hover {
  background-color: rgba(255, 59, 48, 0.2);
  transform: scale(1.1);
}

.bus-notes-textarea {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--background);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: all 150ms ease;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.bus-notes-textarea:focus {
  border-color: var(--primary);
}

/* Bus Times Progress Bar */
.bus-times-progress-container {
  width: 100%;
  height: 4px;
  background-color: rgba(138, 87, 254, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1rem;
}

.bus-times-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 1s linear;
}

/* Responsive - Mobile */
@media (max-width: 640px) {
  .shift-pattern-dialog {
    max-width: 100vw;
    max-height: 95vh;
    width: 100vw;
    border-radius: 1.5rem 1.5rem 0 0;
  }

  .shift-pattern-tabs {
    padding: 1rem;
  }

  .shift-pattern-tabs-list {
    gap: 0.5rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
  }

  .shift-pattern-tab {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
  }

  .shift-pattern-preset-card {
    padding: 1rem;
  }

  .shift-pattern-preset-header {
    gap: 0.75rem;
    margin-bottom: 0.875rem;
  }

  .shift-pattern-preset-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
  }

  .shift-pattern-preset-name {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }

  .shift-pattern-preset-badge {
    font-size: 0.6875rem;
    padding: 0.3125rem 0.625rem;
  }

  .bus-schedule-routes {
    gap: 0.625rem;
  }

  .bus-schedule-route-summary {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.5rem;
  }

  .bus-schedule-route-times {
    gap: 0.375rem;
    padding: 0.375rem;
  }

  .bus-schedule-route-time-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    gap: 0.625rem;
  }

  .bus-schedule-route-dot {
    width: 0.625rem;
    height: 0.625rem;
  }

  .bus-schedule-route-more {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }

  .shift-pattern-preset-notes {
    margin-top: 0.75rem;
    padding: 0.75rem 0.875rem;
    font-size: 0.75rem;
  }

  .bus-route-form-row {
    grid-template-columns: 1fr;
  }

  .bus-route-delete-btn {
    align-self: stretch;
    width: 100%;
  }
}

/* Extra Small Mobile (iPhone SE, etc.) */
@media (max-width: 375px) {
  .shift-pattern-preset-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .shift-pattern-preset-name {
    font-size: 0.9375rem;
  }

  .shift-pattern-preset-badge {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
  }

  .bus-schedule-route-time-item {
    font-size: 0.75rem;
    padding: 0.5rem 0.625rem;
  }
}

/* Skeleton Shimmer Animation */
@keyframes shimmer-skeleton {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--secondary) 0%,
    var(--muted) 50%,
    var(--secondary) 100%
  );
  background-size: 200% 100%;
  animation: shimmer-skeleton 1.5s ease-in-out infinite;
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/* ========================================
 * ALPHA COLOR SYSTEM UTILITY CLASSES
 * ======================================== */

/* Example usage of alpha color system */
.bg-primary {
  color: var(--clr-primary-a50);
  background-color: var(--clr-surface-a0);
}

/* ========================================
 * DYNAMIC STYLING UTILITIES
 * For components that need dynamic colors/values
 * ======================================== */

/* Holiday color CSS custom properties - used in DayDetailsDialog */
[style*="--holiday-color"] {
  border-color: var(--holiday-color);
  background-color: color-mix(in srgb, var(--holiday-color) 3%, transparent);
}

[style*="--holiday-color"] .holiday-icon {
  color: var(--holiday-color);
}

[style*="--holiday-color"] .holiday-title {
  color: var(--holiday-color);
}

/* Route color CSS custom properties - used in BusScheduleDialog */
[style*="--route-color"] .bus-route-dot {
  background-color: var(--route-color);
}

/* Dynamic transforms and dimensions */
.dynamic-transform {
  will-change: transform;
}

.dynamic-size {
  will-change: width, height;
}

/* Progress bar widths - use CSS custom property */
.progress-bar-dynamic {
  transition: width 0.5s ease, transform 0.3s ease;
  width: var(--progress-width, 0%);
}

/* Transform origin for RTL support */
.transform-origin-rtl {
  transform-origin: var(--transform-origin, left);
}

/* Export preview dimensions */
.export-preview {
  width: 420px;
  height: 594px;
}

.export-preview-content {
  width: 2100px;
  height: 2970px;
  transform: scale(0.2);
  transform-origin: top left;
}

/* Bus schedule padding utilities */
.bus-schedule-padding {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.75rem;
}

/* Multi-ring labels margin */
.multi-ring-labels-margin {
  margin-left: 1.5rem;
}

/* Multi-ring label dot color */
[style*="--ring-color"] .multi-ring-label-dot,
.multi-ring-label-dot[style*="--ring-color"] {
  background-color: var(--ring-color);
}

/* Pull-to-refresh transform */
.pull-refresh-transform {
  transition: transform 0.2s;
  transform: translateY(var(--pull-distance, 0px));
}

/* Rotate animation for refresh spinner */
.rotate-dynamic {
  transition: transform 0.2s;
  transform: rotate(var(--rotation, 0deg));
}

/* Progress ring sizing */
.progress-ring-size {
  width: var(--ring-size, 120px);
  height: var(--ring-size, 120px);
}

/* END OF CSS FILE */