/* Final acceptance polish for the Ellipse operational redesign. */

/* Sidebar layout is owned by sidebar.css. Keep this visual layer from adding a second offset. */
@media (min-width: 1024px) {
  #app-shell,
  #app-shell[data-sidebar-pinned="true"],
  #app-shell[data-sidebar-pinned="false"] {
    margin-left: 0 !important;
  }

  #app-sidebar {
    width: 4.5rem !important;
  }

  #app-sidebar[data-pinned="true"],
  #app-sidebar[data-expanded="true"] {
    width: 16rem !important;
  }
}

#app-shell > main {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* One consistent keyboard focus treatment across the authenticated workspace. */
#app-shell a:focus-visible,
#app-shell button:focus-visible,
#app-shell input:focus-visible,
#app-shell select:focus-visible,
#app-shell textarea:focus-visible,
#app-shell summary:focus-visible,
#app-shell [tabindex="0"]:focus-visible,
#feedback-open:focus-visible,
#feedback-modal :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(79% 0.11 202 / 0.5) !important;
}

/* Keep interactive targets comfortably usable with mouse, touch and keyboard. */
#app-shell button,
#app-shell [role="button"],
#app-shell summary,
#app-shell .ellipse-btn,
#app-shell header a[aria-label],
#app-shell header button,
#mobile-sidebar a,
#mobile-sidebar summary,
#mobile-sidebar button,
#feedback-open,
#feedback-close {
  min-height: 44px;
}

#mobile-sidebar a,
#mobile-sidebar summary {
  display: flex;
  align-items: center;
}

/* Disabled actions should read as unavailable, not merely quieter. */
#app-shell button:disabled,
#app-shell input:disabled,
#app-shell select:disabled,
#app-shell textarea:disabled,
#feedback-modal button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Shared invalid-field treatment for screens that expose ARIA validation state. */
#app-shell input[aria-invalid="true"],
#app-shell select[aria-invalid="true"],
#app-shell textarea[aria-invalid="true"],
#feedback-modal input[aria-invalid="true"],
#feedback-modal select[aria-invalid="true"],
#feedback-modal textarea[aria-invalid="true"] {
  border-color: oklch(61% 0.17 27) !important;
  box-shadow: 0 0 0 3px oklch(88% 0.06 27 / 0.55) !important;
}

#app-shell .field-error,
#app-shell .form-error,
#app-shell [data-field-error] {
  margin-top: 6px;
  color: oklch(46% 0.16 27);
  font-size: 12px;
  line-height: 1.45;
}

/* Keyboard-operable row links receive the same cue as ordinary links. */
#app-shell [data-href][tabindex="0"] {
  cursor: pointer;
}

#app-shell [data-href][tabindex="0"]:focus-visible {
  position: relative;
  z-index: 1;
}

.ellipse-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid oklch(84% 0.05 202);
  border-radius: 999px;
  background: var(--ellipse-soft);
  color: var(--ellipse-deep);
  font-size: 12px;
  font-weight: 700;
}

.ellipse-filter-chip:hover {
  border-color: var(--ellipse-accent);
  background: oklch(93% 0.03 202.17);
}

.ellipse-filter-chip:focus-visible {
  box-shadow: 0 0 0 3px oklch(79% 0.11 202 / 0.5) !important;
}

.ellipse-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 16px;
}

/* Prevent nested grid/flex content from forcing horizontal page overflow. */
#app-shell main,
#app-shell main > *,
#app-shell main section,
#app-shell main article,
#app-shell main form,
#app-shell main nav,
#app-shell main div,
#app-shell main aside {
  min-width: 0;
}

#app-shell main .overflow-x-auto,
#app-shell main .overflow-auto {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

#app-shell main table {
  border-collapse: collapse;
}

/* Keep long references, email addresses and uploaded filenames inside their surfaces. */
#app-shell main a,
#app-shell main p,
#app-shell main td,
#app-shell main th,
#app-shell main dd,
#app-shell main code {
  overflow-wrap: anywhere;
}

/* Consistent treatment for global flash feedback. */
#app-shell [data-flash-messages] [role="status"] {
  border-radius: 12px;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.5;
}

/* Anchored content should not disappear behind the sticky topbar. */
#app-shell main [id] {
  scroll-margin-top: 92px;
}

/* Feedback dialog is a global surface, so give it the same interaction contract. */
#feedback-modal [role="document"] {
  max-height: min(90vh, 760px);
  overflow-y: auto;
}

#feedback-modal select,
#feedback-modal textarea,
#feedback-modal button {
  border-radius: 12px;
}

@media (max-width: 760px) {
  #app-shell > main {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .ellipse-filter-bar > * {
    max-width: 100%;
  }

  .ellipse-filter-search {
    min-width: 0;
    width: 100%;
  }

  #app-shell main .ellipse-actions,
  #app-shell main .portal-form-actions {
    align-items: stretch;
  }

  #feedback-open {
    right: 16px;
    bottom: 16px;
  }
}

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