/* The app's frame, as shadcn/ui's inset sidebar (sidebar-07): layouts/application,
/* layouts/shared/_admin_menu (the sidebar), _client_switcher, _admin_bar (the inset's header),
/* _agent_status, _notification_bell, _theme_toggle and the flash's toasts.
/*
/* The sidebar is fixed down the left on the sidebar's gray; the page sits beside it in an
/* inset panel (rounded, a hairline and a shadow) with a slim header. html[data-menu="folded"]
/* folds the sidebar to icons (collapsible="icon"); below 768px it is a drawer that
/* html[data-menu-open] slides in (admin_menu_controller sets both). Reads only the kit's
/* tokens (ui/tokens.css). */
@layer ui {
  :root {
    --sidebar-width: 16rem;
    --sidebar-width-icon: 3rem;
    --app-header-height: 3.5rem;
    --app-gutter: clamp(1rem, 3vw, 1.5rem);
  }

  body.app {
    background-color: var(--sidebar);
  }

  .app__skip-link {
    inset: 0.5rem auto auto 0.5rem;
    position: fixed;
    transform: translateY(-200%);
    z-index: var(--z-nav-open);

    &:focus-visible {
      transform: none;
    }
  }

  .app__frame {
    display: flex;
    min-block-size: 100dvh;
  }

  /* The page: an inset panel beside the sidebar, its own stacking context so nothing on a page
  /* draws over the sidebar or its popovers. */
  .app__inset {
    background-color: var(--background);
    display: flex;
    flex: 1;
    flex-direction: column;
    isolation: isolate;
    min-inline-size: 0;

    #global-container:has(#admin-menu) & {
      @media (min-width: 768px) {
        border: 1px solid var(--sidebar-border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        margin: 0.5rem 0.5rem 0.5rem calc(var(--sidebar-width) + 0.5rem);
        min-block-size: calc(100dvh - 1rem);
        transition: margin-inline-start 200ms ease;

        :root[data-menu="folded"] & {
          margin-inline-start: calc(var(--sidebar-width-icon) + 1rem);
        }
      }
    }
  }

  /* A screen's content: its parts one under another, 16px apart (the title row adds a little
  /* more under itself), up to 80rem wide. */
  .app__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: calc(80rem + 2 * var(--app-gutter));
    padding: 1.5rem var(--app-gutter) 3rem;
  }

  /* Sidebar */

  .app-sidebar {
    color: var(--sidebar-foreground);
    display: flex;
    flex-direction: column;
    font-size: var(--text-sm);
    gap: 0.5rem;
    inline-size: var(--sidebar-width);
    inset: 0 auto 0 0;
    padding: 0.5rem;
    position: fixed;
    transition: inline-size 200ms ease;
    z-index: var(--z-nav);

    :root[data-menu="folded"] & {
      @media (min-width: 768px) {
        inline-size: calc(var(--sidebar-width-icon) + 1rem);

        .app-sidebar__label,
        .app-sidebar__brand-text,
        .app-sidebar__caret,
        .app-sidebar__group-label,
        .app-sidebar__sub {
          display: none;
        }

        .app-sidebar__button {
          justify-content: center;
          padding: 0.5rem;
        }
      }
    }

    @media (max-width: 767px) {
      background-color: var(--sidebar);
      border-inline-end: 1px solid var(--sidebar-border);
      inline-size: min(var(--sidebar-width), 85vw);
      transform: translateX(-100%);
      transition: transform 200ms ease;

      :root[data-menu-open] & {
        box-shadow: var(--shadow-lg);
        transform: none;
      }
    }
  }

  .app-sidebar__backdrop {
    display: none;

    @media (max-width: 767px) {
      :root[data-menu-open] & {
        background-color: rgb(0 0 0 / 50%);
        display: block;
        inset: 0;
        position: fixed;
        z-index: calc(var(--z-nav) - 1);
      }
    }
  }

  .app-sidebar__header,
  .app-sidebar__footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .app-sidebar__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .app-sidebar__group {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .app-sidebar__group-label {
    align-items: center;
    block-size: 2rem;
    color: color-mix(in oklch, var(--sidebar-foreground) 70%, transparent);
    display: flex;
    font-size: var(--text-xs);
    font-weight: 500;
    margin: 0;
    padding-inline: 0.5rem;
  }

  .app-sidebar__menu,
  .app-sidebar__sub {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* SidebarMenuButton: an icon and a label in a row, rounded, accented on hover and when
  /* current. Also the brand, the client switcher's trigger and the user's button (size lg). */
  .app-sidebar__button {
    align-items: center;
    background: none;
    block-size: 2rem;
    border: 0;
    border-radius: var(--radius-md);
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 0.5rem;
    inline-size: 100%;
    outline: none;
    overflow: hidden;
    padding: 0.5rem;
    text-align: start;
    text-decoration: none;

    &:hover {
      background-color: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
    }

    &:focus-visible {
      box-shadow: var(--ring-focus);
    }

    &[aria-current="page"],
    .app-sidebar__item--current > & {
      background-color: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
      font-weight: 500;
    }

    .icon {
      --icon-size: 1rem;

      flex-shrink: 0;
    }
  }

  .app-sidebar__label {
    flex: 1;
  }

  /* SidebarMenuSub: the current item's pages, indented behind a hairline. */
  .app-sidebar__sub {
    border-inline-start: 1px solid var(--sidebar-border);
    gap: 0.125rem;
    margin: 0.125rem 0 0.25rem 0.875rem;
    padding: 0.125rem 0 0.125rem 0.625rem;
  }

  .app-sidebar__sub-button {
    align-items: center;
    block-size: 1.75rem;
    border-radius: var(--radius-md);
    color: var(--sidebar-foreground);
    display: flex;
    padding-inline: 0.5rem;
    text-decoration: none;

    &:hover {
      background-color: var(--sidebar-accent);
    }

    &[aria-current="page"] {
      background-color: var(--sidebar-accent);
      font-weight: 500;
    }
  }

  /* size="lg": the brand, the client and the person, a mark and two lines. */
  .app-sidebar__brand,
  .client-switcher__trigger,
  .app-sidebar__user {
    block-size: 3rem;
  }

  .app-sidebar__brand-mark,
  .client-switcher__mark {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--background);
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-shrink: 0;
    inline-size: 2rem;
    justify-content: center;
    overflow: hidden;

    img {
      block-size: 100%;
      inline-size: 100%;
      object-fit: contain;
      padding: 0.125rem;
    }
  }

  .client-switcher__mark {
    background-color: var(--primary);
    border-color: transparent;
    color: var(--primary-foreground);

    &:has(img) {
      background-color: var(--background);
      border-color: var(--sidebar-border);
    }
  }

  .app-sidebar__brand-text {
    display: grid;
    flex: 1;
    line-height: 1.25;
    min-inline-size: 0;
  }

  .app-sidebar__brand-name {
    font-weight: 600;
  }

  .app-sidebar__brand-sub {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
  }

  .app-sidebar__caret {
    --icon-size: 1rem;

    color: var(--muted-foreground);
    margin-inline-start: auto;
  }

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

  .app-sidebar__user-menu {
    min-inline-size: 14rem;
  }

  .client-switcher {
    display: contents;
  }

  /* The client switcher's list: the width of a team switcher, scrolling when long. */
  .client-switcher__menu {
    max-block-size: min(32rem, calc(100dvh - 6rem));
    min-inline-size: 16rem;
    overflow-y: auto;
  }

  .client-switcher__search {
    margin: 0.25rem 0.25rem 0.5rem;
  }

  .client-switcher__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .client-switcher__option {
    inline-size: 100%;

    &[aria-current="true"] {
      font-weight: 500;
    }
  }

  .client-switcher__option-text {
    display: grid;
    min-inline-size: 0;
  }

  .client-switcher__domain {
    font-size: var(--text-xs);
  }

  /* The inset's header */

  .app-header {
    align-items: center;
    background-color: color-mix(in oklch, var(--background) 85%, transparent);
    backdrop-filter: blur(8px);
    block-size: var(--app-header-height);
    border-block-end: 1px solid var(--border);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
    inset-block-start: 0;
    padding-inline: 1rem;
    position: sticky;
    z-index: var(--z-bar);

    @media (min-width: 768px) {
      inset-block-start: 0.5rem;
    }
  }

  .app-header__trigger {
    margin-inline-start: -0.25rem;
  }

  .app-header .app-header__separator {
    align-self: center;
    block-size: 1rem;
  }

  /* The brand in the header only where the sidebar isn't showing it: on a phone. */
  .app-header__brand {
    display: none;

    @media (max-width: 767px) {
      display: flex;
    }
  }

  .app-header__logo {
    block-size: 1.75rem;
    inline-size: auto;
    max-inline-size: 10rem;
    object-fit: contain;
  }

  .app-header__tools {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    margin-inline-start: auto;
  }

  /* The command menu's door, drawn as shadcn's docs draw it: an outlined field with ⌘K. */
  .app-header__search {
    align-items: center;
    background-color: var(--muted);
    block-size: 2rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    color: var(--muted-foreground);
    display: inline-flex;
    font-size: var(--text-sm);
    gap: 0.5rem;
    inline-size: 15rem;
    padding-inline: 0.625rem 0.375rem;
    text-decoration: none;

    &:hover {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    .icon {
      --icon-size: 1rem;
    }

    .ui-kbd-group {
      margin-inline-start: auto;
    }

    @media (max-width: 767px) {
      background: none;
      border-color: transparent;
      inline-size: 2rem;
      justify-content: center;
      padding: 0;

      .app-header__search-label,
      .ui-kbd-group {
        display: none;
      }
    }
  }

  .app-header__status {
    align-items: center;
    display: flex;
    gap: 0.125rem;
  }

  .app-header__label {
    @media (max-width: 767px) {
      display: none;
    }
  }

  .app-header__spend {
    min-inline-size: 16rem;
  }

  .app-header__spend-line {
    display: flex;
    font-size: var(--text-sm);
    gap: 1rem;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
  }

  /* Agents running: the live view's door in green, breathing. */
  .app-header__pulse {
    color: var(--success);

    .icon {
      animation: app-pulse 1.6s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .icon {
        animation: none;
      }
    }
  }

  .app-header__bell {
    position: relative;
  }

  .app-header__dot {
    background-color: var(--destructive);
    block-size: 0.5rem;
    border: 2px solid var(--background);
    border-radius: 999px;
    box-sizing: content-box;
    inline-size: 0.5rem;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    position: absolute;
  }

  /* The one-button theme toggle: a moon while light, a sun while dark. */
  .theme-toggle__sun {
    display: none;
  }

  html[data-theme="dark"] .theme-toggle {
    .theme-toggle__moon { display: none; }
    .theme-toggle__sun { display: inline-block; }
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .theme-toggle {
      .theme-toggle__moon { display: none; }
      .theme-toggle__sun { display: inline-block; }
    }
  }

  @keyframes app-pulse {
    50% { opacity: 0.45; }
  }

  /* Toasts: an alert or warning stays until dismissed; the rest fade (ui-toast). */
  .ui-toast--lingers {
    animation: ui-toast-in 200ms ease-out both;
  }

  .ui-toast--warning .icon {
    color: var(--warning);
  }

  .ui-toast__dismiss {
    margin: -0.375rem -0.375rem -0.375rem 0;
  }

  @keyframes ui-toast-in {
    from { opacity: 0; translate: 0 -0.5rem; }
  }

  /* Signed-out pages (layouts/public): the workspace's mark over a centred card. */
  .site-logo {
    block-size: 2.5rem;
    inline-size: auto;
    max-inline-size: 14rem;
    object-fit: contain;
  }
}