/* ---------------------------------------------------------------------------
   Theme gallery

   Everything below the chrome is painted from CSS custom properties that
   app.js writes onto :root. Switching theme sets those variables and nothing
   else, which is the same mechanism the generated projects use - so what you
   see here is what variables.css will produce.

   The gallery's own chrome (top bar, theme list, tabs) keeps a fixed neutral
   palette on purpose. If the chrome changed colour too, you could not tell
   where the theme ended and the tool began.
--------------------------------------------------------------------------- */

:root {
  --chrome-bg:      #ffffff;
  --chrome-alt:     #f6f8fb;
  --chrome-edge:    #dce5f0;
  --chrome-ink:     #172538;
  --chrome-muted:   #64748b;
  --chrome-accent:  #1677ff;

  /* Overwritten by app.js for every theme. */
  --sidebar: #143655;
  --sidebar-deep: #0b1c31;
  --sidebar-hover: #22425f;
  --sidebar-active: #294c4f;
  --submenu: #102b44;
  --sidebar-text: #dbe6ef;
  --sidebar-muted: #b8c8d8;
  --chevron: #b8c8d8;
  --chevron-active: #88b236;
  --accent: #88b236;
  --accent-hover: #769d2e;
  --accent-soft: rgba(136, 178, 54, .15);
  --on-accent: #17212b;
  --secondary: #2c6d91;
  --page: #f4f8fb;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #23303d;
  --muted: #5a7184;
  --success: #16803c;
  --warning: #b45309;
  --danger: #d92d20;
  --success-soft: rgba(22, 128, 60, .12);
  --warning-soft: rgba(180, 83, 9, .12);
  --danger-soft: rgba(217, 45, 32, .12);
  --surface-alt: #eef2f7;
  --row-line: #eaeff5;
  --row-hover: #f7fafc;
  --login-brand-bg: #0b1c31;
  --login-brand-text: #ffffff;
  --topbar-text: #ffffff;
  --topbar-muted: rgba(255,255,255,.75);
  --topbar-line: transparent;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--chrome-alt);
  color: var(--chrome-ink);
}

/* ============================================================== top bar */

.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  min-height: 56px; padding: 8px 16px;
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--chrome-edge);
}
.topbar__title { font-size: 15px; font-weight: 600; }
.topbar__count { font-size: 12px; color: var(--chrome-muted); }

.topbar__field { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.topbar__field span { color: var(--chrome-muted); }
.topbar__field select {
  height: 30px; padding: 0 7px;
  border: 1px solid #cbd5e1; border-radius: 6px;
  font: inherit; font-size: 12px; color: var(--chrome-ink); background: #fff;
}
.topbar__field input {
  height: 30px; width: 190px; padding: 0 9px;
  border: 1px solid #cbd5e1; border-radius: 6px;
  font: inherit; font-size: 12px; color: var(--chrome-ink); background: #fff;
}
.topbar__field input:focus { outline: none; border-color: var(--chrome-accent); }

.topbar__action {
  margin-left: auto; height: 32px; padding: 0 14px;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #fff;
  font: inherit; font-size: 12px; color: var(--chrome-ink); cursor: pointer;
}
.topbar__action:hover { border-color: var(--chrome-accent); color: var(--chrome-accent); }
.topbar__action.is-done { border-color: #16803c; color: #16803c; }

/* =========================================================== theme list */

.layout { display: flex; align-items: stretch; height: calc(100% - 56px); }

.themes {
  flex: 0 0 216px; display: flex; flex-direction: column;
  background: var(--chrome-bg); border-right: 1px solid var(--chrome-edge);
}
.themes__search { padding: 10px; border-bottom: 1px solid var(--chrome-edge); }
.themes__search input {
  width: 100%; height: 30px; padding: 0 9px;
  border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; font-size: 12px;
}
.themes__search input:focus { outline: none; border-color: var(--chrome-accent); }

.themes__list { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 16px; }

.family {
  padding: 12px 14px 5px; font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: #94a3b8;
}
.theme-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 14px; border: 0; background: none;
  font: inherit; font-size: 12.5px; color: var(--chrome-ink);
  text-align: left; cursor: pointer;
}
.theme-item:hover { background: var(--chrome-alt); }
.theme-item.is-active { background: #eaf2ff; color: var(--chrome-accent); font-weight: 600; }
.theme-item__dot {
  width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.14);
}

/* ================================================================ stage */

.stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.tabs {
  display: flex; gap: 20px; padding: 0 18px;
  background: var(--chrome-bg); border-bottom: 1px solid var(--chrome-edge);
}
.tab {
  padding: 13px 0 11px; border: 0; border-bottom: 2px solid transparent;
  background: none; font: inherit; font-size: 13px; color: var(--chrome-muted);
  cursor: pointer;
}
.tab:hover { color: var(--chrome-ink); }
.tab.is-active { color: var(--chrome-accent); border-bottom-color: var(--chrome-accent); font-weight: 600; }

.meta {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; background: var(--chrome-bg);
  border-bottom: 1px solid var(--chrome-edge);
}
.meta__name { font-size: 13px; font-weight: 600; }
.meta__character { font-size: 12px; color: var(--chrome-muted); }
.meta__swatches { display: flex; gap: 4px; margin-left: 10px; }
.meta__swatches i {
  width: 26px; height: 17px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,.14); display: block;
}
.meta__hex { margin-left: auto; font-size: 11.5px; color: #94a3b8;
             font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.panel { display: none; flex: 1 1 auto; overflow-y: auto; }
.panel.is-active { display: block; }

/* ================================================== themed: login page */

.login-page {
  min-height: 100%; padding: 40px 24px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--login-brand-bg) 0%, var(--secondary) 100%);
}
.login-card {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; max-width: 940px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}
.login-brand { background: var(--login-brand-bg); color: var(--login-brand-text); padding: 40px 38px; }
.login-brand h1 { margin: 0; font-size: 31px; font-weight: 700; line-height: 1.15; }
.login-brand__tagline { margin: 7px 0 0; font-size: 13px; opacity: .82; }
.login-rule { width: 46px; height: 3px; background: var(--accent); margin: 22px 0 24px; border-radius: 2px; }

.login-features { list-style: none; margin: 0; padding: 0; }
.login-features li { padding: 9px 0 9px 20px; font-size: 13.5px; opacity: .92; position: relative; }
.login-features li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.login-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px;
               padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
.login-chips span {
  font-size: 11px; padding: 5px 11px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.28); opacity: .9;
}

.login-form { background: var(--card); color: var(--text); padding: 40px 38px; }
.login-form h2 { margin: 0; font-size: 26px; font-weight: 700; }
.login-forgot { margin: 8px 0 18px; text-align: right; font-size: 12.5px; }
.login-foot { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
              font-size: 11.5px; color: var(--muted); text-align: center; }

/* ======================================================= themed: shell */

.shell { display: flex; min-height: 100%; background: var(--page); }

.shell__rail {
  flex: 0 0 248px; background: var(--sidebar); color: var(--sidebar-text);
  display: flex; flex-direction: column; padding-bottom: 8px;
}
.rail__brand { padding: 18px 16px 14px; }
.rail__brand strong { display: block; font-size: 16px; letter-spacing: .06em; }
.rail__brand span { display: block; margin-top: 4px; font-size: 11px; color: var(--sidebar-muted); }

.rail__user {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px;
  border-top: 1px solid var(--sidebar-hover); border-bottom: 1px solid var(--sidebar-hover);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.rail__user-block { min-width: 0; }
.rail__user-block b { display: block; font-size: 13px; font-weight: 600; }
.rail__user-block em {
  display: block; margin-top: 2px; font-size: 10.5px; font-style: normal;
  color: var(--sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rail__menu { list-style: none; margin: 0; padding: 8px 0 0; flex: 1 1 auto; }
.rail__menu li {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px; font-size: 13px; color: var(--sidebar-muted); cursor: default;
}
.rail__menu .ic { font-size: 15px; width: 19px; text-align: center; flex: 0 0 auto; }
.rail__menu .chev, .rail__menu .star {
  margin-left: auto; font-style: normal; font-size: 11px; color: var(--chevron);
}
.rail__menu .star { color: var(--chevron-active); font-size: 13px; }
.rail__menu li.is-hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.rail__menu li.is-active {
  background: var(--sidebar-active); color: var(--sidebar-text);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rail__menu li.is-active .chev { color: var(--chevron-active); }

.rail__signout {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 16px; margin-top: 8px; font-size: 13px;
  color: var(--sidebar-muted); border-top: 1px solid var(--sidebar-hover);
}
.rail__signout .ic { font-size: 15px; width: 19px; text-align: center; }

.shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.shell__topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; height: 56px;
  background: var(--sidebar-deep); color: var(--topbar-text);
  border-bottom: 1px solid var(--topbar-line);
}
.shell__topbar-title { font-size: 16px; font-weight: 600; }
.burger { font-size: 17px; color: var(--topbar-muted); }
.shell__topbar-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 7px;
  font-size: 12px; color: var(--topbar-muted);
}
.chip--solid { background: var(--card); color: var(--text); font-weight: 600; }

.shell__body { padding: 20px; }

.hero {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(120deg, var(--sidebar) 0%, var(--sidebar-deep) 100%);
  color: var(--sidebar-text); border-radius: 12px; padding: 24px 26px;
}
.hero__text { flex: 1 1 auto; min-width: 0; }
.hero h2 { margin: 0; font-size: 22px; }
.hero p { margin: 7px 0 0; font-size: 13px; color: var(--sidebar-muted); }
.hero__date { font-size: 12.5px; }
.hero__flag {
  flex: 0 0 auto; text-align: center; padding: 12px 18px;
  border-radius: 10px; background: var(--sidebar-hover);
}
.hero__flag-mark { display: block; font-size: 30px; line-height: 1.1; }
.hero__flag-name { display: block; margin-top: 5px; font-size: 11px; color: var(--sidebar-muted); }

.modules-head {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 14px;
}
.modules-head h3 {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: 17px; color: var(--text);
}
.pills { margin-left: auto; display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 8px;
  font-size: 12.5px; color: var(--muted);
  background: var(--card); border: 1px solid var(--border);
}
.pill.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }

.modules {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 14px;
}
.module {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 12px 18px; text-align: center;
}
.module__ic { display: block; font-size: 32px; line-height: 1.1; }
.module__name {
  display: block; margin-top: 14px; font-size: 13px;
  font-weight: 600; color: var(--text);
}

/* ================================================ themed: page, cards */

.page { min-height: 100%; background: var(--page); padding: 20px; color: var(--text); }
.page--split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.card__head { padding: 15px 17px; border-bottom: 1px solid var(--border); }
.card__head h3, .card__toolbar h3 { margin: 0; font-size: 15px; color: var(--text); }
.card__pad { padding: 16px 17px 20px; }

.card__toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 17px; border-bottom: 1px solid var(--border);
}
.card__toolbar h3 { margin-right: 6px; }
.input--search { flex: 1 1 auto; max-width: 320px; }

.card__foot {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 17px; border-top: 1px solid var(--border); font-size: 12.5px;
}
.card__foot--actions { gap: 10px; }
.pager { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pager b { color: var(--accent); }

/* ================================================= themed: data grid */

.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th {
  text-align: left; padding: 10px 17px; background: var(--surface-alt);
  color: var(--muted); font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.grid td { padding: 12px 17px; border-top: 1px solid var(--row-line); color: var(--text); }
.grid tbody tr:hover, .grid tbody tr.is-hover { background: var(--row-hover); }

/* ============================================== themed: form controls */

.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 17px;
}
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.field--wide { grid-column: 1 / -1; }
.field--check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }

.input {
  width: 100%; padding: 8px 11px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 6px;
}
.input::placeholder { color: var(--muted); opacity: .8; }
.input:focus, .input.is-focused {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled { background: var(--surface-alt); color: var(--muted); }
textarea.input { resize: vertical; }

.field-label {
  display: block; margin: 14px 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted);
}

/* ==================================================== themed: buttons */

.btn {
  padding: 9px 17px; font: inherit; font-size: 13px; font-weight: 600;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer;
}
.btn--block { width: 100%; padding: 12px; font-size: 14px; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: var(--card); color: var(--text); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--danger { background: var(--danger); color: #fff; }

a { color: var(--secondary); text-decoration: none; }
a:hover { text-decoration: underline; }
.link-danger { color: var(--danger); font-size: 13px; margin-left: auto; }
.muted { color: var(--muted); font-size: 13px; }
.sub-head { margin: 20px 0 9px; font-size: 12px; font-weight: 600;
            letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sub-head:first-child { margin-top: 0; }
.row-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row-gap .input { width: auto; min-width: 150px; }

/* ============================================ themed: tags and alerts */

.tag {
  display: inline-block; padding: 3px 11px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600;
}
.tag--success { background: var(--success-soft); color: var(--success); }
.tag--warning { background: var(--warning-soft); color: var(--warning); }
.tag--danger  { background: var(--danger-soft);  color: var(--danger); }
.tag--accent  { background: var(--accent-soft);  color: var(--accent); }

.alert {
  padding: 11px 15px; border-radius: 7px; font-size: 13px;
  margin-bottom: 9px; border-left: 3px solid;
}
.alert--success { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.alert--warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.alert--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger); }

/* ============================================================ narrow */

@media (max-width: 1100px) {
  .login-card, .page--split, .form-grid { grid-template-columns: 1fr; }
  .themes { flex-basis: 178px; }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px; }
  .topbar__field input { width: 140px; }
  .shell__rail { flex-basis: 180px; }
}

/* ============================================================== branding

   Which logo a surface gets is decided by the surface, not the theme. The
   login panel is always a colour so it always takes the white artwork, while
   the sidebar and the top bar depend on the preset. Dark ink on a navy rail,
   or white ink on a cream one, is invisible either way.
--------------------------------------------------------------------------- */

.brand-logo { display: block; }
.rail-logo { height: 26px; width: auto; }
#loginLogo { height: 46px; width: auto; }
.top-symbol { height: 22px; width: auto; display: block; }

.is-text .brand-logo { display: none; }
.is-logo .brand-text { display: none; }

/* The full lockup has "Excellence beyond bearings" drawn into it, so the
   separate tagline line would repeat it. The rail uses the wordmark, which
   has no tagline, so its line stays. */
.is-logo .login-brand__tagline { display: none; }
.is-logo .rail__brand span { margin-top: 8px; }

/* ================================================================= flags

   Regional-indicator emoji such as U+1F1E6 U+1F1FA render as a flag on macOS
   and iOS but as the bare letters "AU" on Windows, which has no flag glyphs
   in Segoe UI Emoji. An inline SVG renders the same everywhere.
--------------------------------------------------------------------------- */

.flag-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.flag {
  display: inline-block; vertical-align: middle;
  width: 1.5em; aspect-ratio: 2 / 1; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.rail__menu .ic .flag { width: 19px; }
.module__ic .flag { width: 42px; }
.hero__flag-mark .flag { width: 46px; }