/* main.scss (drop-in)
   VOR Core (base + utilities + components)
   - No patterns/presets here (those belong in template/components later)
   - Token-driven (variables.scss is the contract)
*/
@use "sass:math";
@use "sass:map";
@use "sass:color";
@use "./palette" as *;
@use "./variables" as *;

/* --------------------------------------------
   Base reset
-------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: $font-family-sans;
  line-height: $line-height-base;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: map.get($font-sizes, "body");
  font-weight: $weight-normal;
  color: $text-main;
  background-color: $bg-app;
  transition: background-color $duration-base $standard, color $duration-base $standard;
}

/* Media defaults */
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* Links */
a { color: inherit; }
a:hover { text-decoration: none; }

/* Accessible focus (default; components can override) */
:focus-visible { outline: none; }

/* --------------------------------------------
   Token helpers
-------------------------------------------- */
.bg-app { background-color: $bg-app !important; }
.bg-surface { background-color: $bg-surface !important; }
.bg-card { background-color: $bg-card !important; }

.text-main { color: $text-main !important; }
.text-muted { color: $text-muted !important; }
.text-light { color: $text-light !important; }
.text-inverse { color: $text-inverse !important; }

/* --------------------------------------------
   Containers / Grid (gutter via CSS vars)
-------------------------------------------- */
:root { --gutter-x: #{$grid-gutter-width}; --gutter-y: 0; }

.container,
.container-fluid {
  width: 100%;
  padding-right: math.div($grid-gutter-width, 2);
  padding-left: math.div($grid-gutter-width, 2);
  margin-right: auto;
  margin-left: auto;
}

@each $br-name, $br-value in $breakpoints {
  @if $br-name != "xs" {
    @media (min-width: $br-value) {
      .container {
        max-width: map.get($container-max-widths, $br-name);
      }
    }
  }
}

.row {
  display: flex;
  flex-wrap: wrap;

  /* row controls gutters */
  --gutter-x: #{$grid-gutter-width};
  --gutter-y: 0;

  margin-top: calc(var(--gutter-y) * -1);
  margin-right: calc(var(--gutter-x) / -2);
  margin-left: calc(var(--gutter-x) / -2);

  & > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--gutter-x) / 2);
    padding-left: calc(var(--gutter-x) / 2);
    margin-top: var(--gutter-y);
  }
}

.row-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* gutter utilities */
.g-0 { --gutter-x: 0; --gutter-y: 0; }
.gx-0 { --gutter-x: 0; }
.gy-0 { --gutter-y: 0; }

/* IMPORTANT: no @extend across media queries */
@mixin col-base() {
  width: 100%;
  padding-right: calc(var(--gutter-x) / 2);
  padding-left: calc(var(--gutter-x) / 2);
}

@each $br-name, $br-value in $breakpoints {
  @media (min-width: $br-value) {
    $infix: if($br-name == "xs", "", "-#{$br-name}");

    @for $i from 1 through $grid-columns {
      .col#{$infix}-#{$i} {
        @include col-base();
        flex: 0 0 auto;
        width: percentage(math.div($i, $grid-columns));
      }
    }

    .col#{$infix} {
      @include col-base();
      flex: 1 0 0%;
    }

    .col#{$infix}-auto {
      @include col-base();
      flex: 0 0 auto;
      width: auto;
    }
  }
}

/* --------------------------------------------
   Display / Flex utilities
-------------------------------------------- */
@each $br-name, $br-value in $breakpoints {
  @media (min-width: $br-value) {
    $infix: if($br-name == "xs", "", "-#{$br-name}");

    @each $prop in $display-values {
      .d#{$infix}-#{$prop} { display: $prop !important; }
    }

    @each $key, $val in $justify-content {
      .justify#{$infix}-#{$key} { justify-content: $val !important; }
    }

    @each $key, $val in $align-items {
      .align#{$infix}-#{$key} { align-items: $val !important; }
    }

    @each $dir in $flex-directions {
      .flex#{$infix}-#{$dir} { flex-direction: $dir !important; }
    }
  }
}

/* Convenience */
.flex-column { flex-direction: column !important; }
.mt-auto { margin-top: auto !important; }
.min-w-0 { min-width: 0 !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* --------------------------------------------
   Spacing utilities (generator)
-------------------------------------------- */
@each $br-name, $br-value in $breakpoints {
  @media (min-width: $br-value) {
    $infix: if($br-name == "xs", "", "-#{$br-name}");

    @each $prop-key, $prop-val in $spacing-properties {
      @each $side-key, $side-val in $spacing-sides {
        @each $size-key, $size-val in $spacers {
          .#{$prop-key}#{$side-key}#{$infix}-#{$size-key} {
            @if type-of($side-val) == "list" {
              @each $side in $side-val { #{$prop-val}-#{$side}: $size-val !important; }
            } @else if $side-val == "" {
              #{$prop-val}: $size-val !important;
            } @else {
              #{$prop-val}-#{$side-val}: $size-val !important;
            }
          }
        }
      }
    }
  }
}

/* Classic alias set (p-0 / px-4 / etc) + gap */
@each $k, $v in $spacers {
  .m-#{$k} { margin: $v !important; }
  .mx-#{$k} { margin-left: $v !important; margin-right: $v !important; }
  .my-#{$k} { margin-top: $v !important; margin-bottom: $v !important; }
  .mt-#{$k} { margin-top: $v !important; }
  .mb-#{$k} { margin-bottom: $v !important; }
  .ml-#{$k} { margin-left: $v !important; }
  .mr-#{$k} { margin-right: $v !important; }

  .p-#{$k} { padding: $v !important; }
  .px-#{$k} { padding-left: $v !important; padding-right: $v !important; }
  .py-#{$k} { padding-top: $v !important; padding-bottom: $v !important; }
  .pt-#{$k} { padding-top: $v !important; }
  .pb-#{$k} { padding-bottom: $v !important; }
  .pl-#{$k} { padding-left: $v !important; }
  .pr-#{$k} { padding-right: $v !important; }

  .gap-#{$k} { gap: $v !important; }
}

/* --------------------------------------------
   Sizing utilities + responsive widths/heights
-------------------------------------------- */
@each $key, $val in $sizes {
  .w-#{$key} { width: $val !important; }
  .h-#{$key} { height: $val !important; }
}

@each $br-name, $br-value in $breakpoints {
  @media (min-width: $br-value) {
    $infix: if($br-name == "xs", "", "-#{$br-name}");
    @each $key, $val in $sizes {
      .w#{$infix}-#{$key} { width: $val !important; }
      .h#{$infix}-#{$key} { height: $val !important; }
    }
  }
}

/* --------------------------------------------
   Typography utilities
-------------------------------------------- */
@each $key, $val in $font-sizes { .#{$key} { font-size: $val !important; } }

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }

.font-weight-light { font-weight: $weight-light !important; }
.font-weight-normal { font-weight: $weight-normal !important; }
.font-weight-medium { font-weight: $weight-medium !important; }
.font-weight-bold { font-weight: $weight-bold !important; }

.text-decoration-none { text-decoration: none !important; }
.text-uppercase { text-transform: uppercase !important; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
  padding: 0.12em 0.35em;
  border-radius: $radius-sm;
  background: rgba(var(--primary-rgb), 0.10);
  border: 1px solid rgba(var(--primary-rgb), 0.14);
}

/* --------------------------------------------
   Border helpers
-------------------------------------------- */
.border { border: 1px solid $border-color !important; }
.border-top { border-top: 1px solid $border-color !important; }
.border-bottom { border-bottom: 1px solid $border-color !important; }
.border-left { border-left: 1px solid $border-color !important; }
.border-right { border-right: 1px solid $border-color !important; }

/* --------------------------------------------
   Radius helpers
-------------------------------------------- */
.rounded { border-radius: $radius-md !important; }
.rounded-sm { border-radius: $radius-sm !important; }
.rounded-lg { border-radius: $radius-lg !important; }
.rounded-pill { border-radius: $radius-pill !important; }
.rounded-none { border-radius: $radius-none !important; }

/* --------------------------------------------
   Elevation helpers
-------------------------------------------- */
@each $key, $val in $elevation { .elevation-#{$key} { box-shadow: $val !important; } }

/* --------------------------------------------
   Z-index utilities
-------------------------------------------- */
@each $key, $val in $z-index { .z-#{$key} { z-index: $val !important; } }

/* --------------------------------------------
   Visibility / overflow helpers
-------------------------------------------- */
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

.cursor-pointer { cursor: pointer !important; }
.user-select-none { user-select: none !important; }
.is-hidden { display: none !important; }
.lock-scroll { overflow: hidden !important; }

/* --------------------------------------------
   Media helpers
-------------------------------------------- */
.img-fluid { max-width: 100%; height: auto; }
@each $fit in $object-fits { .object-#{$fit} { object-fit: $fit !important; } }

@each $key, $val in $aspect-ratios {
  .ratio-#{$key} {
    position: relative;
    width: 100%;

    &::before { display: block; content: ""; padding-top: $val; }
    > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  }
}

/* --------------------------------------------
   Color utilities + Buttons + Alerts
-------------------------------------------- */
@each $color-name, $shades in $colors {
  $base: map.get($shades, 600);
  $light: map.get($shades, 100);
  $soft-border: map.get($shades, 200);
  $dark: map.get($shades, 900);
  $text-strong: map.get($shades, 800);

  .text-#{$color-name} { color: $base !important; }
  .bg-#{$color-name} { background-color: $base !important; }
  .bg-#{$color-name}-light { background-color: $light !important; }

  @each $shade-level, $color-value in $shades {
    .text-#{$color-name}-#{$shade-level} { color: $color-value !important; }
    .bg-#{$color-name}-#{$shade-level} { background-color: $color-value !important; }
  }

  /* Solid button */
  .btn-#{$color-name} {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: map.get($spacers, 2);
    padding: $input-padding-y $input-padding-x;
    font-weight: $weight-medium;
    border-radius: $radius-md;
    border: 1px solid transparent;
    cursor: pointer;
    background-color: $base;
    color: $white;
    transition:
      background-color $duration-fast $standard,
      box-shadow $duration-base $standard,
      transform $duration-base $standard,
      filter $duration-fast $standard;

    &:hover { filter: brightness($hover-brightness); box-shadow: map.get($elevation, 2); transform: $hover-lift; }
    &:active { filter: brightness($active-brightness); transform: translateY(0); }
    &:focus { outline: none; }
    &:focus-visible { box-shadow: 0 0 0 $focus-ring-width $focus-ring-color, map.get($elevation, 2); }

    &:disabled, &.is-disabled {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
      box-shadow: none;
      transform: none;
      filter: none;
    }
  }

  /* Light button */
  .btn-#{$color-name}-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: map.get($spacers, 2);
    padding: $input-padding-y $input-padding-x;
    font-weight: $weight-medium;
    border-radius: $radius-md;
    border: 1px solid $soft-border;
    cursor: pointer;
    background-color: $light;
    color: $text-strong;
    transition:
      background-color $duration-fast $standard,
      box-shadow $duration-base $standard,
      transform $duration-base $standard;

    &:hover { background-color: map.get($shades, 200); box-shadow: map.get($elevation, 1); transform: translateY(-1px); }
    &:active { background-color: map.get($shades, 300); transform: translateY(0); }
    &:focus { outline: none; }
    &:focus-visible { box-shadow: 0 0 0 $focus-ring-width $focus-ring-color, map.get($elevation, 1); }

    &:disabled, &.is-disabled {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
      box-shadow: none;
      transform: none;
    }
  }

  /* Alerts */
  .alert-#{$color-name} {
    padding: $spacer;
    border-radius: $radius-md;
    background-color: $light;
    color: $dark;
    border: 1px solid $soft-border;
    margin-bottom: $spacer;
  }
}

/* Button size modifiers */
.btn-sm {
  padding: math.div($input-padding-y, 1.4) math.div($input-padding-x, 1.4) !important;
  font-size: map.get($font-sizes, "small") !important;
  border-radius: $radius-sm !important;
}

.btn-lg {
  padding: map.get($spacers, 3) map.get($spacers, 4) !important;
  font-size: map.get($font-sizes, "body") !important;
  border-radius: $radius-lg !important;
}

/* --------------------------------------------
   Cards / Surfaces
-------------------------------------------- */
.card {
  background-color: $bg-card;
  border: $card-border-width solid $border-color;
  border-radius: $card-border-radius;
  padding: $card-padding;
  box-shadow: map.get($elevation, 1);
}

.card.hoverable {
  transition: box-shadow $duration-slow $standard, transform $duration-slow $standard;
  &:hover { box-shadow: $hover-shadow; transform: $hover-lift; }
}

.card-soft {
  background-color: $bg-surface;
  border: 1px solid $border-color;
}

/* --------------------------------------------
   Forms (inputs/selects/textarea/checkbox/radio)
-------------------------------------------- */
.form-group { margin-bottom: map.get($spacers, 3); }

.label {
  display: block;
  margin-bottom: $label-margin-bottom;
  font-size: $label-font-size;
  font-weight: $label-font-weight;
  color: $text-muted;
}

@mixin input-base($height: $input-height) {
  width: 100%;
  height: $height;
  padding: $input-padding-y $input-padding-x;
  background-color: $bg-surface;
  border: 1px solid $border-color;
  border-radius: $radius-sm;
  color: $text-main;
  transition: border-color $duration-fast $standard, box-shadow $duration-fast $standard, background-color $duration-fast $standard;

  &:focus { outline: none; border-color: var(--primary); }
  &:focus-visible { box-shadow: 0 0 0 $focus-ring-width $focus-ring-color; }
  &::placeholder { color: $text-light; }

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
}

.input { @include input-base($input-height); }
.input-sm { @include input-base($input-height-sm); font-size: map.get($font-sizes, "small"); }
.input-lg { @include input-base($input-height-lg); font-size: map.get($font-sizes, "body"); }

.textarea {
  @include input-base($input-height-lg);
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.select {
  @include input-base($input-height);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right $input-padding-x center;
  background-size: 16px 12px;
}

[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.input-group {
  display: flex;
  align-items: stretch;

  .input, .select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  [class^="btn-"], .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;
  }
}

/* Checkbox / radio */
.check {
  display: inline-flex;
  align-items: center;
  gap: map.get($spacers, 2);
  cursor: pointer;
  user-select: none;
  color: $text-main;

  input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
      border-radius: $radius-sm;
    }
  }

  .check-label { color: $text-muted; }
}

/* --------------------------------------------
   Tables (token-driven)
-------------------------------------------- */
.table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;

  th, td {
    padding: $table-cell-padding-y $table-cell-padding-x;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid $border-color;
  }

  thead th {
    position: sticky;
    top: 0;
    z-index: 1;

    background: $table-header-bg;
    color: $table-header-color;

    font-weight: $weight-medium;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: map.get($font-sizes, "small");
    border-bottom: 1px solid $border-color;
  }

  thead th:first-child { border-top-left-radius: $radius-md; }
  thead th:last-child  { border-top-right-radius: $radius-md; }

  tbody tr {
    background: transparent;
    transition: background-color $duration-base $standard;
  }

  &.striped tbody tr:nth-of-type(odd) { background: $table-striped-bg; }

  &.hover tbody tr:hover { background: $table-hover-bg; }

  &.table-sm {
    th, td { padding: math.div($table-cell-padding-y, 1.4) math.div($table-cell-padding-x, 1.4); }
    thead th { font-size: map.get($font-sizes, "xs"); }
  }
}

/* --------------------------------------------
   Scrollbar
-------------------------------------------- */
::-webkit-scrollbar { width: $scrollbar-width; height: $scrollbar-width; }
::-webkit-scrollbar-track { background: $scrollbar-track; }
::-webkit-scrollbar-thumb {
  background: $scrollbar-thumb;
  border-radius: $radius-pill;
  &:hover { background: $scrollbar-thumb-hover; }
}

/* --------------------------------------------
   Badges
-------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.6em;
  font-size: map.get($font-sizes, "xs");
  font-weight: $weight-bold;
  border-radius: $radius-pill;
  line-height: 1;
  white-space: nowrap;
}

@each $color-name, $shades in $colors {
  .badge-#{$color-name} {
    background-color: map.get($shades, 100);
    color: map.get($shades, 800);
    border: 1px solid map.get($shades, 200);

    &.badge-solid {
      background-color: map.get($shades, 600);
      color: $white;
      border-color: transparent;
    }
  }
}

/* --------------------------------------------
   Chips (component)
-------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: map.get($spacers, 2); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: map.get($spacers, 2);
  padding: 0.35rem 0.65rem;
  border-radius: $radius-pill;
  border: 1px solid $border-color;
  background: $bg-surface;
  color: $text-muted;
  cursor: pointer;
  user-select: none;
  transition: transform $duration-fast $standard, box-shadow $duration-base $standard, background-color $duration-fast $standard, color $duration-fast $standard;

  &:hover {
    transform: translateY(-1px);
    box-shadow: map.get($elevation, 2);
    color: $text-main;
  }

  &.is-active {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.18);
    color: $text-main;
  }
}

/* --------------------------------------------
   Progress (component)
-------------------------------------------- */
.progress {
  height: 10px;
  border-radius: $radius-pill;
  background: $bg-surface;
  overflow: hidden;
  border: 1px solid $border-color;
}

.progress-bar {
  height: 100%;
  background: var(--primary);
  border-radius: $radius-pill;
  transition: width $duration-slow $standard;
}

/* Optional width helpers (keep demo-friendly) */
.progress-0 { width: 0%; }
.progress-25 { width: 25%; }
.progress-46 { width: 46%; }
.progress-50 { width: 50%; }
.progress-72 { width: 72%; }
.progress-100 { width: 100%; }

/* Variant tones */
.progress-bar.soft { background: rgba(var(--primary-rgb), 0.55); }
.progress-bar.warn { background: rgba(249,115,22,0.55); } /* stays as MDI-ish warning tone */

/* --------------------------------------------
   Buttons: Close / Icon (component)
-------------------------------------------- */
.btn-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: $text-muted;
  padding: 0.25rem 0.5rem;
  border-radius: $radius-sm;
  transition: background-color $duration-fast $standard, color $duration-fast $standard, transform $duration-fast $standard;

  &:hover {
    background: rgba(0,0,0,0.06);
    color: $text-main;
    transform: translateY(-1px);
  }

  &:active { transform: translateY(0); }
}

[data-theme="dark"] .btn-close:hover { background: rgba(255,255,255,0.08); }

/* --------------------------------------------
   App shell / Sidebar / Drawer / Modal
-------------------------------------------- */
.app-wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.sidebar {
  width: $sidebar-width;
  height: 100vh;
  position: sticky;
  top: 0;
  background-color: $bg-surface;
  border-right: 1px solid $border-color;
  display: flex;
  flex-direction: column;
  transition: width $duration-base $standard;

  &.collapsed { width: $sidebar-collapsed; }
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 88vw;
  height: 100vh;
  z-index: map.get($z-index, "sidebar");
  background-color: $bg-card;
  border-right: 1px solid $border-color;
  transform: translateX(-105%);
  transition: transform $duration-base $standard;
  box-shadow: map.get($elevation, 24);

  &.is-open { transform: translateX(0); }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: map.get($z-index, "modal");
  padding: map.get($spacers, 4);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity $duration-base $standard, visibility $duration-base $standard;

  &.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.modal-content {
  background-color: $bg-card;
  border-radius: $radius-lg;
  width: 100%;
  max-width: 640px;
  box-shadow: map.get($elevation, 24);
  overflow: hidden;
  border: 1px solid $border-color;

  transform: translateY(10px) scale(0.985);
  transition: transform $duration-base $standard;

  .modal-overlay.is-active & {
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: map.get($spacers, 3);
  padding: map.get($spacers, 4);
  border-bottom: 1px solid $border-color;
}

.modal-title {
  margin: 0;
  font-size: map.get($font-sizes, "h4");
  font-weight: $weight-bold;
  color: $text-main;
}

.modal-body {
  padding: map.get($spacers, 4);
  color: $text-muted;

  p {
    margin: 0;
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: map.get($spacers, 2);
  padding: map.get($spacers, 3) map.get($spacers, 4);
  border-top: 1px solid $border-color;
  background: $bg-surface;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: map.get($spacers, 2);
}

.vor-modal-sm {
  max-width: 480px;
}

.vor-modal-md {
  max-width: 640px;
}

.vor-modal-lg {
  max-width: 820px;
}
/* --------------------------------------------
   Accordion
-------------------------------------------- */
.accordion-item {
  border-bottom: 1px solid $border-color;

  &.is-active {
    .accordion-body { display: block; }
    .accordion-icon { transform: rotate(180deg); }
  }

  .accordion-header {
    padding: $spacer;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    width: 100%;
    color: $text-main;

    &:hover { background-color: $bg-surface; }
  }

  .accordion-icon { transition: transform $duration-base $standard; }

  .accordion-body {
    padding: 0 $spacer $spacer;
    display: none;
    color: $text-muted;
  }
}

/* --------------------------------------------
   Switch
-------------------------------------------- */
.switch {
  --switch-width: 40px;
  --switch-height: 22px;
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);

  input {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked + .slider {
      background-color: var(--primary);
      &::before { transform: translateX(18px); }
    }

    &:focus-visible + .slider {
      box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
    }
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: map.get(map.get($colors, "gray"), 300);
    transition: $duration-fast $standard;
    border-radius: $radius-pill;

    &::before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 3px;
      bottom: 3px;
      background-color: $white;
      transition: $duration-fast $standard;
      border-radius: 50%;
    }
  }
}

/* --------------------------------------------
   Dividers / helpers
-------------------------------------------- */
.hr {
  border: none;
  border-top: 1px solid $border-color;
  margin: map.get($spacers, 4) 0;
}

/* --------------------------------------------
   Drawer Modal (off-canvas modal)
-------------------------------------------- */
.drawer-modal {
  position: fixed;
  inset: 0;
  z-index: map.get($z-index, "modal");
  display: flex;
  justify-content: flex-end;

  background-color: rgba(0,0,0,0.55);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity $duration-base $standard, visibility $duration-base $standard;

  &.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* --------------------------------------------
   Drawer Modal (off-canvas modal)
-------------------------------------------- */
.drawer-modal {
  position: fixed;
  inset: 0;
  z-index: map.get($z-index, "modal");

  display: flex;
  justify-content: flex-end; /* right default */

  background-color: rgba(0,0,0,0.55);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity $duration-base $standard,
    visibility $duration-base $standard;

  &.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  &.is-left {
    justify-content: flex-start;
  }
}

.drawer-panel {
  width: 520px;
  max-width: 94vw;
  height: 100vh;

  background-color: $bg-card;
  box-shadow: map.get($elevation, 24);

  display: flex;
  flex-direction: column;

  transition: transform $duration-slow $standard;

  /* default: start off-screen right */
  transform: translateX(105%);
  border-left: 1px solid $border-color;

  .drawer-modal.is-active & {
    transform: translateX(0);
  }

  /* left variant */
  .drawer-modal.is-left & {
    transform: translateX(-105%);
    border-left: none;
    border-right: 1px solid $border-color;
  }

  .drawer-modal.is-left.is-active & {
    transform: translateX(0);
  }
}

.drawer-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: map.get($spacers, 4);
  border-bottom: 1px solid $border-color;
}

.drawer-panel-body {
  padding: map.get($spacers, 4);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

.drawer-panel-footer {
  padding: map.get($spacers, 3) map.get($spacers, 4);
  border-top: 1px solid $border-color;
}

/* Dark mode tweaks (optional, usually already handled by tokens) */
[data-theme="dark"] .drawer-modal {
  background-color: rgba(0,0,0,0.65);
}