@layer organisms {
  .dashboard-page {
    --dashboard-accent-ink: #1d6f6f;
    --dashboard-focus-color: #8a3b00;
    --dashboard-accent-surface: color-mix(in srgb, var(--color-brand-primary) 14%, white);
    --dashboard-accent-surface-strong: color-mix(in srgb, var(--color-brand-primary) 22%, white);
    --dashboard-accent-border: color-mix(in srgb, var(--dashboard-accent-ink) 28%, white);
    --dashboard-button-text: #1f2933;
    background:
      radial-gradient(circle at top left, rgb(255 255 255 / 0.28), transparent 18rem),
      radial-gradient(circle at bottom right, rgb(255 255 255 / 0.18), transparent 24rem),
      var(--color-brand-gradient-soft),
      var(--color-surface-muted);
  }

  .dashboard-shell {
    min-height: calc(100dvh - 4.5rem);
  }

  body:has(.dashboard-upload-modal[open]) {
    overflow: hidden;
  }

  :is(
    .dashboard-header__menu-toggle,
    .dashboard-search__field,
    .dashboard-header__user-button,
    .dashboard-search__result-icon,
    .dashboard-card__collapse
  ) svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  :is(.dashboard-sidebar__eyebrow, .dashboard-hero__eyebrow, .dashboard-card__eyebrow) {
    margin: 0;
    color: var(--dashboard-accent-ink);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  :is(
    .dashboard-header__menu-toggle,
    .dashboard-header__user-button,
    .dashboard-header__dropdown a,
    .dashboard-nav__link,
    .dashboard-action,
    .dashboard-upload-switch__button,
    .dashboard-upload-modal__close,
    .dashboard-link-button,
    .dashboard-search__result-title,
    .dashboard-page .ui-button
  ):focus-visible {
    outline: 2px solid var(--dashboard-focus-color);
    outline-offset: 3px;
    box-shadow:
      0 0 0 3px rgb(255 255 255 / 0.92),
      0 0 0 6px rgb(138 59 0 / 0.22);
  }

  .dashboard-header__actions {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
  }

  .dashboard-header__menu-toggle {
    display: none;
    width: 2.75rem;
    min-height: 2.75rem;
    border: var(--border-width) solid var(--ui-header-control-border);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 0.12);
    color: var(--ui-header-text);
  }

  .dashboard-search {
    position: relative;
    width: min(100%, 28rem);

    .dashboard-search__field {
      display: grid;
      min-height: 3rem;
      align-items: center;
      gap: var(--space-3);
      grid-template-columns: auto minmax(0, 1fr);
      border: var(--border-width) solid var(--ui-header-control-border);
      border-radius: var(--radius-pill);
      background: var(--ui-header-control-surface);
      color: var(--color-text);
      box-shadow: 0 10px 24px rgb(15 23 42 / 0.08);
      padding-inline: var(--space-4);

      &:focus-within {
        border-color: var(--dashboard-focus-color);
        box-shadow:
          0 0 0 3px rgb(255 255 255 / 0.92),
          0 0 0 6px rgb(138 59 0 / 0.2);
      }

      input {
        min-height: auto;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--color-text);
        padding: 0;

        &::placeholder {
          color: var(--color-text-muted);
          opacity: 1;
        }

        &:focus {
          box-shadow: none;
        }
      }
    }

    .dashboard-search__results {
      position: absolute;
      inset: calc(100% + var(--space-2)) 0 auto;
      z-index: var(--z-dropdown);
      display: grid;
      gap: var(--space-2);
      padding: var(--space-3);
    }

    .dashboard-search__hint {
      padding: var(--space-3);
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }

    .dashboard-search__result {
      display: grid;
      gap: var(--space-2);
      border: var(--border-width) solid transparent;
      border-radius: var(--radius-md);
      background: var(--color-surface-muted);
      padding: var(--space-3);
      transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

      &:is(:hover, :focus-within) {
        border-color: var(--dashboard-accent-ink);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
      }
    }

    .dashboard-search__result-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-3);
    }

    .dashboard-search__result-title {
      color: var(--color-text);
      font-size: var(--font-size-sm);
      font-weight: 700;
      text-decoration: none;

      &:is(:hover, :focus-visible) {
        text-decoration: underline;
        text-decoration-thickness: 0.12em;
      }
    }

    .dashboard-search__result-subtitle {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }

    .dashboard-search__result-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
    }
  }

  .dashboard-header__user {
    position: relative;

    .dashboard-header__user-button {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      min-height: 3rem;
      border: var(--border-width) solid var(--ui-header-control-border);
      border-radius: var(--radius-pill);
      background: rgb(255 255 255 / 0.14);
      backdrop-filter: blur(10px);
      color: var(--ui-header-text);
      padding: 0.4rem 0.85rem 0.4rem 0.4rem;

      &:is(:hover, :focus-visible) {
        border-color: var(--dashboard-accent-ink);
        background: color-mix(in srgb, var(--ui-header-control-surface-strong) 80%, white);
      }
    }

    .dashboard-header__user-badge {
      display: inline-grid;
      place-items: center;
      width: 2.15rem;
      height: 2.15rem;
      border-radius: 50%;
      background: var(--color-brand-primary);
      color: var(--dashboard-button-text);
      font-size: var(--font-size-sm);
      font-weight: 800;
    }

    .dashboard-header__user-meta {
      display: grid;
      justify-items: start;
      gap: 0.1rem;

      span {
        color: var(--ui-header-text);
      }

      small {
        color: var(--ui-header-muted-text);
        font-size: var(--font-size-xs);
      }
    }

    .dashboard-header__dropdown {
      position: absolute;
      top: calc(100% + var(--space-2));
      right: 0;
      z-index: var(--z-dropdown);
      min-width: 12rem;
      padding: var(--space-2);

      a {
        display: block;
        border-radius: var(--radius-sm);
        color: var(--color-text);
        padding: 0.7rem 0.85rem;
        text-decoration: none;

        &:is(:hover, :focus-visible) {
          background: var(--color-surface-muted);
        }
      }
    }
  }

  .dashboard-app {
    display: grid;
    width: min(100% - 2rem, 92rem);
    margin: 0 auto;
    gap: clamp(var(--space-4), 2vw, var(--space-8));
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    padding: clamp(var(--space-4), 2vw, var(--space-8));
  }

  .dashboard-sidebar {
    position: sticky;
    top: 5.5rem;
    display: grid;
    align-self: start;
    gap: var(--space-4);

    .dashboard-sidebar__brand {
      display: grid;
      gap: var(--space-3);
      border: var(--border-width) solid rgb(255 255 255 / 0.72);
      border-radius: 1.5rem;
      background:
        linear-gradient(180deg, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.76)),
        var(--color-brand-gradient);
      box-shadow: var(--shadow-md);
      color: var(--color-text);
      padding: clamp(var(--space-5), 2vw, var(--space-8));

      h1 {
        margin: 0;
        color: var(--color-text);
        font-size: clamp(1.6rem, 2.2vw, 2rem);
      }
    }

    .dashboard-sidebar__summary {
      margin: 0;
      color: var(--color-text-muted);
      font-family: var(--font-secondary);
      font-size: var(--font-size-sm);
    }

    .dashboard-sidebar__footer {
      display: grid;
      gap: var(--space-3);
      background: rgb(255 255 255 / 0.84);
      backdrop-filter: blur(12px);
    }

    .dashboard-sidebar__footer-title {
      margin: 0;
      font-size: var(--font-size-sm);
      font-weight: 700;
    }
  }

  .dashboard-nav {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: var(--border-width) solid rgb(51 204 204 / 0.18);
    border-radius: 1.25rem;
    background: rgb(255 255 255 / 0.84);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);

    .dashboard-nav__link {
      display: flex;
      align-items: center;
      min-height: 2.9rem;
      border-radius: var(--radius-md);
      color: var(--color-text);
      font-size: var(--font-size-sm);
      font-weight: 600;
      text-decoration: none;
      padding-inline: var(--space-4);
      transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

      &:is(:hover, :focus-visible) {
        background: var(--dashboard-accent-surface);
        color: var(--color-text);
        transform: translateX(2px);
      }

      &.is-active {
        background: var(--dashboard-accent-surface-strong);
        box-shadow: inset 0.3rem 0 0 var(--dashboard-accent-ink);
        color: var(--color-text);
      }
    }
  }

  .dashboard-main {
    display: grid;
    min-width: 0;
    gap: clamp(var(--space-4), 2vw, var(--space-8));
  }

  .dashboard-hero {
    display: grid;
    align-items: end;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.9fr);

    h2 {
      margin-block: var(--space-2) var(--space-3);
      font-size: clamp(1.9rem, 3vw, 3rem);
      line-height: 1.05;
    }

    .dashboard-hero__copy {
      max-width: 44rem;
      margin: 0;
      color: var(--color-text-muted);
      font-size: var(--font-size-lg);
    }

    .dashboard-hero__summary {
      display: grid;
      gap: var(--space-3);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .dashboard-kpi {
    display: grid;
    gap: var(--space-1);
    border: var(--border-width) solid rgb(51 204 204 / 0.18);
    border-radius: 1.15rem;
    background: rgb(255 255 255 / 0.86);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);

    strong {
      font-size: clamp(1.4rem, 2vw, 2rem);
      line-height: 1;
    }

    .dashboard-kpi__label {
      color: var(--color-text-muted);
      font-size: var(--font-size-xs);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
  }

  .dashboard-grid {
    display: grid;
    align-items: start;
    gap: clamp(var(--space-4), 2vw, var(--space-6));
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  }

  .dashboard-side-stack {
    display: grid;
    align-self: start;
    align-content: start;
    gap: clamp(var(--space-4), 2vw, var(--space-6));
    min-width: 0;
    margin-top: 0;
    padding-top: 0;
  }

  .dashboard-card {
    display: grid;
    min-width: 0;
    gap: var(--space-4);

    .dashboard-card__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);

      h3 {
        margin: var(--space-1) 0 0;
        font-size: clamp(1.25rem, 1.8vw, 1.65rem);
      }
    }
  }

  .dashboard-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .dashboard-card__collapse {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    border: var(--border-width) solid rgb(51 204 204 / 0.16);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
    padding: 0.5rem 0.85rem;
    transition:
      border-color var(--transition-fast),
      background var(--transition-fast),
      transform var(--transition-fast);

    &:is(:hover, :focus-visible) {
      border-color: var(--dashboard-accent-ink);
      background: var(--dashboard-accent-surface);
      transform: translateY(-1px);
    }

    svg {
      transition: transform var(--transition-fast);
    }

    &[aria-expanded="false"] svg {
      transform: rotate(90deg);
    }
  }

  .dashboard-card__panel {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
  }

  .dashboard-card__panel[hidden] {
    display: none;
  }

  .dashboard-action-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-action {
    display: grid;
    min-height: 7rem;
    gap: var(--space-2);
    border: var(--border-width) solid rgb(51 204 204 / 0.16);
    border-radius: 1rem;
    background: var(--color-surface-muted);
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    padding: var(--space-4);
    transition:
      transform var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);

    &:is(:hover, :focus-visible) {
      border-color: var(--dashboard-accent-ink);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    strong {
      font-size: var(--font-size-lg);
      line-height: 1.15;
    }

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }
  }

  .dashboard-upload-switch {
    display: inline-flex;
    gap: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    padding: var(--space-1);

    .dashboard-upload-switch__button {
      min-height: 2.5rem;
      border: 0;
      border-radius: var(--radius-pill);
      background: transparent;
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
      font-weight: 700;
      padding-inline: var(--space-4);

      &:is(:hover, :focus-visible) {
        background: var(--dashboard-accent-surface);
        color: var(--color-text);
      }

      &.is-active {
        background: var(--color-surface);
        border: var(--border-width) solid var(--dashboard-accent-border);
        box-shadow: var(--shadow-sm);
        color: var(--color-text);
      }
    }
  }

  .dashboard-upload-panels {
    display: grid;
    gap: var(--space-4);
  }

  .dashboard-upload-panel {
    display: grid;
    gap: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface-muted);
    padding: clamp(var(--space-4), 2vw, var(--space-5));

    .dashboard-upload-panel__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
    }
  }

  .dashboard-upload-modal {
    width: min(100% - 2rem, 48rem);
    max-height: min(100dvh - 2rem, 52rem);
    border: 0;
    border-radius: 1.5rem;
    background: transparent;
    box-shadow: none;
    color: var(--color-text);
    padding: 0;

    &::backdrop {
      background:
        linear-gradient(180deg, rgb(99 101 105 / 0.48), rgb(99 101 105 / 0.72)),
        var(--color-brand-gradient-soft),
        var(--color-overlay);
      backdrop-filter: blur(8px);
    }

    .dashboard-upload-modal__surface {
      display: grid;
      gap: clamp(var(--space-4), 2vw, var(--space-6));
      overflow: auto;
      border: var(--border-width) solid rgb(51 204 204 / 0.2);
      border-radius: 1.5rem;
      background:
        radial-gradient(circle at top right, rgb(255 255 255 / 0.22), transparent 20rem),
        var(--color-brand-gradient-soft),
        linear-gradient(180deg, rgb(255 255 255 / 0.98), rgb(247 250 252 / 0.98));
      box-shadow: 0 1.5rem 4rem rgb(15 23 42 / 0.24);
      padding: clamp(var(--space-4), 2vw, var(--space-6));
    }

    .dashboard-upload-modal__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);

      h3 {
        margin: var(--space-1) 0 var(--space-2);
        font-size: clamp(1.4rem, 2vw, 1.9rem);
      }
    }

    .dashboard-upload-modal__close {
      display: inline-grid;
      flex: 0 0 auto;
      place-items: center;
      width: 2.75rem;
      min-height: 2.75rem;
      border: var(--border-width) solid var(--color-border);
      border-radius: 50%;
      background: rgb(255 255 255 / 0.9);
      color: var(--color-text);
      transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);

      &:is(:hover, :focus-visible) {
        border-color: var(--dashboard-accent-ink);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
      }

      svg {
        width: 1.1rem;
        height: 1.1rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    }
  }

  .dashboard-feedback {
    align-items: start;
  }

  .dashboard-empty {
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    padding: var(--space-4);
  }

  :is(.dashboard-activity-list, .dashboard-case-grid) {
    display: grid;
    gap: var(--space-3);
  }

  .dashboard-batch-list {
    display: grid;
    gap: var(--space-3);
  }

  :is(.dashboard-activity-item, .dashboard-case-item) {
    display: grid;
    gap: var(--space-3);
    border: var(--border-width) solid rgb(51 204 204 / 0.14);
    border-radius: 1rem;
    background: var(--color-surface-muted);
    padding: var(--space-4);
  }

  .dashboard-batch-item {
    display: grid;
    gap: var(--space-3);
    border: var(--border-width) solid rgb(51 204 204 / 0.14);
    border-radius: 1rem;
    background: var(--color-surface-muted);
    padding: var(--space-4);
  }

  :is(.dashboard-activity-item__header, .dashboard-case-item__header) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .dashboard-batch-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  :is(.dashboard-activity-item__meta, .dashboard-case-item__meta) {
    display: grid;
    gap: 0.15rem;

    strong {
      font-size: var(--font-size-md);
    }

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
    }
  }

  .dashboard-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding-inline: var(--space-3);
    text-transform: lowercase;

    &.dashboard-pill--success {
      border: var(--border-width) solid #9ed4af;
      background: #eaf7ef;
      color: #166534;
    }

    &.dashboard-pill--warning {
      border: var(--border-width) solid #e6be63;
      background: #fff5de;
      color: #92400e;
    }

    &.dashboard-pill--info {
      border: var(--border-width) solid var(--dashboard-accent-border);
      background: var(--dashboard-accent-surface);
      color: var(--dashboard-accent-ink);
    }
  }

  .dashboard-case-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .dashboard-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    border: var(--border-width) solid var(--dashboard-accent-border);
    border-radius: var(--radius-pill);
    background: var(--dashboard-accent-surface);
    color: var(--dashboard-accent-ink);
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding-inline: var(--space-3);
  }

  :is(.dashboard-activity-item__actions, .dashboard-case-item__actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .dashboard-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: none;
    padding-inline: var(--space-3);

    &:is(:hover, :focus-visible) {
      transform: translateY(-1px);
    }

    &.dashboard-link-button--primary {
      background: var(--color-brand-primary);
      color: var(--dashboard-button-text);
      transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

      &:is(:hover, :focus-visible) {
        background: color-mix(in srgb, var(--color-brand-primary) 88%, white);
        border-color: var(--dashboard-accent-ink);
        color: var(--dashboard-button-text);
      }
    }

    &.dashboard-link-button--secondary {
      border-color: var(--color-border);
      background: var(--color-surface);
      color: var(--color-text);

      &:is(:hover, :focus-visible) {
        border-color: var(--dashboard-accent-ink);
        background: var(--dashboard-accent-surface);
        color: var(--color-text);
      }
    }

    &.dashboard-link-button--ghost {
      color: var(--color-text-muted);

      &:is(:hover, :focus-visible) {
        background: rgb(255 255 255 / 0.92);
        color: var(--color-text);
      }
    }
  }

  .dashboard-page {
    .ui-button {
      border-color: color-mix(in srgb, var(--dashboard-accent-ink) 16%, transparent);
      color: var(--dashboard-button-text);

      &:hover {
        background: color-mix(in srgb, var(--color-brand-primary) 88%, white);
        color: var(--dashboard-button-text);
      }

      &.ui-button--secondary {
        &:hover {
          border-color: var(--dashboard-accent-ink);
          background: var(--dashboard-accent-surface);
          color: var(--color-text);
        }
      }

      &.ui-button--accent {
        background: #c94808;
        border-color: #c94808;
        color: var(--cidti-white);

        &:hover {
          background: #8a3b00;
          border-color: #8a3b00;
          color: var(--cidti-white);
        }
      }

      &.ui-button--ghost {
        &:hover {
          background: var(--dashboard-accent-surface);
          color: var(--color-text);
        }
      }
    }
  }

  @media (max-width: 72rem) {
    :is(.dashboard-hero, .dashboard-grid) {
      grid-template-columns: 1fr;
    }
  }

  .dashboard-batch-item__meta {
    display: grid;
    gap: 0.15rem;

    strong {
      font-size: var(--font-size-md);
    }

    span {
      color: var(--color-text-muted);
      font-size: var(--font-size-sm);
      overflow-wrap: anywhere;
    }
  }

  .dashboard-batch-item__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .dashboard-batch-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  @media (max-width: 64rem) {
    .dashboard-header__menu-toggle {
      display: inline-grid;
      place-items: center;
    }

    .dashboard-app {
      width: min(100% - 1rem, 92rem);
      grid-template-columns: 1fr;
      padding-inline: var(--space-3);
    }

    .dashboard-sidebar {
      position: fixed;
      inset: 4.7rem auto 0 0;
      z-index: calc(var(--z-header) - 1);
      width: min(18rem, calc(100vw - 2rem));
      transform: translateX(-110%);
      transition: transform var(--transition-base);
    }

    .dashboard-page.is-nav-open .dashboard-sidebar {
      transform: translateX(0);
    }
  }

  @media (max-width: 48rem) {
    .dashboard-header__actions {
      width: 100%;
      flex-wrap: wrap;
      justify-content: stretch;
    }

    .dashboard-search {
      width: 100%;
      order: 3;
    }

    .dashboard-header__user {
      margin-left: auto;
    }

    :is(.dashboard-hero__summary, .dashboard-action-grid) {
      grid-template-columns: 1fr;
    }

    .dashboard-upload-panel .dashboard-upload-panel__actions,
    .dashboard-upload-modal .dashboard-upload-modal__header {
      align-items: stretch;
      flex-direction: column;
    }

    .dashboard-upload-modal {
      width: calc(100% - 1rem);
      max-height: calc(100dvh - 1rem);
    }
  }
}