/*
 * public/themes/modern-white/assets/css/layout.css
 *
 * Studium360 · Application Shell
 *
 * Responsabilidad:
 *
 * - header global;
 * - marca;
 * - workspace switcher;
 * - cuenta/salida;
 * - adaptación responsive del shell.
 *
 * No contiene navegación interna de Admin, Student,
 * Instructor o Enterprise.
 *
 * Todos los valores visuales reutilizables proceden de
 * tokens.css.
 */

/* ==========================================================================
   Application header
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;

  width: 100%;

  background:
    color-mix(
      in srgb,
      var(--c-surface) 94%,
      transparent
    );

  border-bottom:
    1px solid
    var(--c-border);

  backdrop-filter:
    blur(var(--space-2));

  -webkit-backdrop-filter:
    blur(var(--space-2));
}

.nav-inner {
  width: 100%;
  max-width: var(--container);

  min-height:
    calc(
      var(--space-6)
      + var(--space-3)
    );

  margin: 0 auto;

  padding:
    var(--space-2)
    var(--gutter-x);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  align-items: center;

  gap: var(--space-3);
}

/* ==========================================================================
   Brand
   ========================================================================== */

.brand {
  min-width: 0;

  display: inline-flex;
  align-items: center;

  justify-self: start;

  gap: var(--space-2);

  color: var(--c-text-strong);
  text-decoration: none;
}

.brand:hover {
  color: var(--c-text-strong);
  text-decoration: none;
}

.brand-logo {
  width: var(--space-6);
  height: var(--space-6);

  object-fit: contain;

  flex: 0 0 auto;
}

.brand-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  line-height: var(--line-tight);
}

.brand-title {
  color: var(--c-text-strong);

  font-size: var(--text-base);
  font-weight: 800;

  white-space: nowrap;
}

.brand-subtitle {
  margin-top:
    calc(
      var(--space-1) / 4
    );

  color: var(--c-muted);

  font-size: var(--text-sm);
  font-weight: 500;

  white-space: nowrap;
}

/* ==========================================================================
   Workspace switcher
   ========================================================================== */

.workspace-switcher {
  position: relative;

  min-width: 0;

  justify-self: center;
}

.workspace-switcher__details {
  position: relative;
}

.workspace-switcher__trigger {
  min-width: 15rem;
  max-width: 24rem;

  min-height:
    calc(
      var(--space-5)
      + var(--space-2)
    );

  padding:
    var(--space-1)
    var(--space-2);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-2);

  border:
    1px solid
    var(--c-border);

  border-radius:
    var(--radius-md);

  background:
    var(--c-surface);

  color:
    var(--c-text);

  cursor: pointer;

  user-select: none;

  list-style: none;

  box-shadow:
    var(--shadow-sm);
}

.workspace-switcher__trigger::-webkit-details-marker {
  display: none;
}

.workspace-switcher__trigger:hover {
  border-color:
    var(--border-2);

  background:
    var(--c-surface-muted);
}

.workspace-switcher__trigger:focus-visible {
  outline:
    2px solid
    var(--primary);

  outline-offset:
    2px;
}

.workspace-switcher__details[open]
.workspace-switcher__trigger {
  border-color:
    var(--border-2);
}

.workspace-switcher__trigger-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  text-align: left;
}

.workspace-switcher__eyebrow {
  color:
    var(--c-muted);

  font-size:
    var(--text-sm);

  font-weight: 600;

  line-height:
    var(--line-tight);
}

.workspace-switcher__current {
  margin-top:
    calc(
      var(--space-1) / 4
    );

  overflow: hidden;

  color:
    var(--c-text-strong);

  font-size:
    var(--text-base);

  font-weight: 750;

  line-height:
    var(--line-tight);

  text-overflow: ellipsis;

  white-space: nowrap;
}

.workspace-switcher__chevron {
  flex: 0 0 auto;

  color:
    var(--c-muted);

  font-size:
    var(--text-sm);

  transition:
    transform
    120ms ease;
}

.workspace-switcher__details[open]
.workspace-switcher__chevron {
  transform:
    rotate(180deg);
}

/* ==========================================================================
   Workspace menu
   ========================================================================== */

.workspace-switcher__menu {
  position: absolute;

  top:
    calc(
      100%
      + var(--space-1)
    );

  left: 50%;

  z-index: 100;

  width:
    max(
      100%,
      18rem
    );

  max-width:
    min(
      24rem,
      calc(
        100vw
        - var(--space-4)
      )
    );

  max-height:
    min(
      32rem,
      calc(
        100vh
        - var(--space-7)
      )
    );

  overflow-y: auto;

  padding:
    var(--space-1);

  border:
    1px solid
    var(--c-border);

  border-radius:
    var(--radius-md);

  background:
    var(--c-surface);

  box-shadow:
    var(--shadow-md);

  transform:
    translateX(-50%);
}

.workspace-switcher__group {
  padding:
    var(--space-2)
    var(--space-2)
    var(--space-1);

  color:
    var(--c-muted);

  font-size:
    var(--text-sm);

  font-weight: 700;

  line-height:
    var(--line-tight);
}

.workspace-switcher__group:not(:first-child) {
  margin-top:
    var(--space-1);

  border-top:
    1px solid
    var(--c-divider);
}

.workspace-switcher__item {
  width: 100%;

  min-height:
    calc(
      var(--space-5)
      + var(--space-1)
    );

  padding:
    var(--space-1)
    var(--space-2);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap:
    var(--space-2);

  border-radius:
    var(--radius-sm);

  color:
    var(--c-text);

  text-decoration: none;
}

.workspace-switcher__item:hover {
  background:
    var(--c-surface-muted);

  color:
    var(--c-text-strong);

  text-decoration: none;
}

.workspace-switcher__item:focus-visible {
  outline:
    2px solid
    var(--primary);

  outline-offset:
    -2px;
}

.workspace-switcher__item--current {
  background:
    var(--tone-info-bg);

  color:
    var(--c-text-strong);

  font-weight: 700;
}

.workspace-switcher__item--current:hover {
  background:
    var(--tone-info-bg);
}

.workspace-switcher__item-label {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.workspace-switcher__check {
  flex: 0 0 auto;

  color:
    var(--primary);

  font-weight: 800;
}

/* ==========================================================================
   Account
   ========================================================================== */

.nav-account {
  min-width: 0;

  justify-self: end;

  display: flex;
  align-items: center;

  gap:
    var(--space-2);
}

.nav-logout {
  margin: 0;

  display: inline-flex;
  align-items: center;
}

.nav-logout__button {
  white-space: nowrap;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 56rem) {

  .nav-inner {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;
  }

  .brand-subtitle,
  .brand .badge {
    display: none;
  }

  .workspace-switcher {
    width: 100%;
  }

  .workspace-switcher__trigger {
    width: 100%;
    min-width: 0;
  }

}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 40rem) {

  .nav-inner {
    min-height: 0;

    padding:
      var(--space-1)
      var(--space-2);

    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    gap:
      var(--space-1);
  }

  .brand {
    gap:
      var(--space-1);
  }

  .brand-logo {
    width:
      var(--space-5);

    height:
      var(--space-5);
  }

  .brand-text {
    display: none;
  }

  .workspace-switcher__trigger {
    min-height:
      var(--space-5);

    padding:
      calc(
        var(--space-1) / 2
      )
      var(--space-1);

    border-radius:
      var(--radius-sm);

    box-shadow:
      none;
  }

  .workspace-switcher__eyebrow {
    display: none;
  }

  .workspace-switcher__current {
    margin-top: 0;

    font-size:
      var(--text-sm);
  }

  .workspace-switcher__menu {
    position: fixed;

    top:
      calc(
        var(--space-6)
        + var(--space-3)
      );

    right:
      var(--space-2);

    left:
      var(--space-2);

    width: auto;

    max-width: none;

    max-height:
      calc(
        100vh
        - var(--space-7)
        - var(--space-4)
      );

    transform: none;
  }

  .nav-account .btn {
    min-height:
      var(--space-5);

    padding:
      calc(
        var(--space-1) / 2
      )
      var(--space-1);

    font-size:
      var(--text-sm);
  }

}

/* ==========================================================================
   Very small screens
   ========================================================================== */

@media (max-width: 24rem) {

  .nav-inner {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .nav-account {
    display: none;
  }

}

/*
 * A0.4.2 · Contextual menu
 *
 * Append to:
 * public/themes/modern-white/assets/css/layout.css
 */

.contextual-menu-shell {
  width: 100%;

  border-top:
    1px solid
    var(--c-divider);

  background:
    var(--c-surface);
}

.contextual-menu {
  width: 100%;
  max-width: var(--container);

  margin: 0 auto;

  padding:
    0
    var(--gutter-x);

  display: flex;
  align-items: center;

  gap:
    var(--space-1);

  overflow-x: auto;

  scrollbar-width: thin;
}

.contextual-menu__item {
  min-height:
    var(--space-6);

  padding:
    0
    var(--space-2);

  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  border-bottom:
    2px solid
    transparent;

  color:
    var(--c-muted);

  font-size:
    var(--text-sm);

  font-weight: 650;

  text-decoration: none;

  white-space: nowrap;
}

.contextual-menu__item:hover {
  color:
    var(--c-text-strong);

  text-decoration: none;

  background:
    var(--c-surface-muted);
}

.contextual-menu__item:focus-visible {
  outline:
    2px solid
    var(--primary);

  outline-offset:
    -2px;
}

.contextual-menu__item--active {
  color:
    var(--c-text-strong);

  border-bottom-color:
    var(--primary);

  font-weight: 750;
}

@media (max-width: 40rem) {

  .contextual-menu {
    padding:
      0
      var(--space-2);

    gap: 0;
  }

  .contextual-menu__item {
    min-height:
      var(--space-5);

    padding:
      0
      var(--space-2);

    font-size:
      var(--text-sm);
  }

}