/* i18n language switcher — modal dialog with 2-column locale grid.
 *
 * Markup (see auto_eju/app/templates/macros/i18n.html):
 *   <span class="i18n-switcher-wrap">
 *     <button class="i18n-switcher__trigger" data-i18n-trigger>...</button>
 *     <dialog class="i18n-switcher__dialog">
 *       <header class="i18n-switcher__dialog-header">...</header>
 *       <ul class="i18n-switcher__grid">...</ul>
 *     </dialog>
 *   </span>
 *
 * The dialog is rendered in the browser's top layer when opened via
 * showModal(), so it ignores any ancestor `overflow: hidden` clip — fixes
 * the previous bug where the dropdown was truncated at the bottom of the
 * login card.
 *
 * Web fonts: Noto Sans for the scripts not commonly preinstalled. The
 * :lang() rules below also apply inside the dialog because each <li>
 * carries the matching lang attribute.
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;600&family=Noto+Sans+Devanagari:wght@400;600&family=Noto+Sans+Thai:wght@400;600&family=Noto+Sans+Myanmar:wght@400;600&family=Noto+Sans+Sinhala:wght@400;600&family=Noto+Sans+Khmer:wght@400;600&display=swap');

:root {
  --i18n-trigger-fg: rgba(0, 0, 0, 0.75);
  --i18n-trigger-fg-hover: rgba(0, 0, 0, 0.9);
  --i18n-trigger-fg-dark: rgba(255, 255, 255, 0.8);
  --i18n-dialog-close-fg: rgba(15, 23, 42, 0.5);
}

:lang(bn) { font-family: 'Noto Sans Bengali', sans-serif; }
:lang(ne), :lang(hi) { font-family: 'Noto Sans Devanagari', sans-serif; }
:lang(th) { font-family: 'Noto Sans Thai', sans-serif; }
:lang(my) { font-family: 'Noto Sans Myanmar', sans-serif; }
:lang(si) { font-family: 'Noto Sans Sinhala', sans-serif; }
:lang(km) { font-family: 'Noto Sans Khmer', sans-serif; }


/* ------------------------------------------------------------------ */
/*  Trigger pill                                                       */
/* ------------------------------------------------------------------ */
.i18n-switcher-wrap {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  -webkit-user-select: none;
          user-select: none;
}

.i18n-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--i18n-trigger-fg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.i18n-switcher__trigger:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--i18n-trigger-fg-hover);
}
.i18n-switcher__trigger:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 1px;
}

.i18n-switcher__caret {
  font-size: 9px;
  opacity: 0.7;
}

/* Dark variant for sidebars / admin chrome that paint over a dark surface. */
.i18n-switcher__trigger.i18n-switcher--dark {
  background: rgba(255, 255, 255, 0.1);
  color: var(--i18n-trigger-fg-dark);
}
.i18n-switcher__trigger.i18n-switcher--dark:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ds-color-surface);
}


/* ------------------------------------------------------------------ */
/*  Modal dialog                                                       */
/* ------------------------------------------------------------------ */
dialog.i18n-switcher__dialog {
  /* Reset the browser's default dialog chrome and let our own styles take over. */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  width: min(440px, calc(100vw - 32px));
  max-width: 440px;
  max-height: min(560px, calc(var(--ds-vh-full) - 64px));
  background: var(--ds-color-surface);
  color: var(--ds-color-neutral-darknav);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28),
              0  4px 12px rgba(15, 23, 42, 0.10);
  overflow: hidden;       /* clip rounded corners against scrolling grid */
  /* Defaults to display: flex column when open so header + grid stack cleanly. */
}
dialog.i18n-switcher__dialog[open] {
  display: flex;
  flex-direction: column;
}
dialog.i18n-switcher__dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.i18n-switcher__dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

.i18n-switcher__dialog-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-color-neutral-darknav);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}

/* The close button is wrapped in <form method="dialog"> — submitting closes
 * the dialog without any JS. */
.i18n-switcher__dialog-close {
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--i18n-dialog-close-fg);
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.i18n-switcher__dialog-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--ds-color-neutral-darknav);
}
.i18n-switcher__dialog-close:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: 1px;
}


/* ------------------------------------------------------------------ */
/*  Locale grid                                                        */
/* ------------------------------------------------------------------ */
.i18n-switcher__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 12px;
  margin: 0;
  list-style: none;
  overflow-y: auto;        /* scroll inside the dialog when very long */
  flex: 1 1 auto;
}
.i18n-switcher__grid > li {
  margin: 0;
}

.i18n-switcher__cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  text-decoration: none;
  color: var(--ds-color-neutral-darknav);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;           /* override the wrap's tracking */
  text-transform: none;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.12s ease;
}
.i18n-switcher__cell:hover {
  background: rgba(102, 126, 234, 0.10);
  color: var(--ds-color-neutral-darknav);
  text-decoration: none;
}
.i18n-switcher__cell:focus-visible {
  outline: 2px solid var(--ds-color-primary);
  outline-offset: -2px;
}

.i18n-switcher__cell--active,
.i18n-switcher__cell--active:hover {
  background: rgba(102, 126, 234, 0.18);
  color: var(--ds-color-neutral-darknav);
  cursor: default;
  font-weight: 600;
}

.i18n-switcher__autonym {
  overflow: hidden;
  text-overflow: ellipsis;
}
.i18n-switcher__check {
  font-size: 13px;
  color: var(--ds-color-primary);
  flex-shrink: 0;
}


/* ------------------------------------------------------------------ */
/*  Mobile / narrow viewport                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 540px) {
  dialog.i18n-switcher__dialog {
    width: calc(100vw - 24px);
    max-height: calc(var(--ds-vh-full) - 48px);
  }
  .i18n-switcher__grid {
    grid-template-columns: 1fr;     /* single column on phones */
  }
  .i18n-switcher__cell {
    padding: 14px 16px;             /* bigger tap targets */
    font-size: 15px;
  }
}