/* yamocir web UI -- page-content styling loaded after the shared
   yetano-webui-template stylesheet, which owns navbar, sidebar, footer,
   the --yw-* palette and Bootstrap's colors (see ui.go's newPage). This
   file only carries page-content styling: cards, tables, badges,
   buttons, forms, flash messages, the login card, the JSON details/pre
   viewer, stats, breadcrumbs, permission rows, the namespace tree.

   Themes: the template sets the mode (<html data-theme>, unset = dark)
   and the palette (<html data-palette>), chosen in its appearance menu.
   yamocir's own --mc-* tokens either point at a --yw-* token (possibly
   mixed), so they follow the palette, or -- for category/status colors
   that mean the same in every palette (badges, the danger button) --
   are one light-dark(<light>, <dark>) pair. Never redefine --yw-* here
   and never switch on data-theme/prefers-color-scheme (see the
   template's README, Theming); TestStyleTokens checks the form.
   login.html loads the template stylesheet too, for the tokens. */

:root {
  --mc-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --mc-card-bg: var(--yw-surface);
  --mc-card-border: var(--yw-border);
  --mc-rule: color-mix(in srgb, var(--yw-border) 70%, var(--yw-surface));
  --mc-head-bg: color-mix(in srgb, var(--yw-bg) 50%, var(--yw-surface));
  --mc-head-text: var(--yw-muted);
  --mc-faint: color-mix(in srgb, var(--yw-muted) 80%, var(--yw-bg));
  --mc-fainter: color-mix(in srgb, var(--yw-muted) 60%, var(--yw-bg));
  --mc-soft-text: color-mix(in srgb, var(--yw-text) 50%, var(--yw-muted));
  --mc-tree-link: color-mix(in srgb, var(--yw-link) 50%, var(--yw-text));
  --mc-input-bg: var(--yw-bg);
  --mc-input-border: color-mix(in srgb, var(--yw-border) 88%, var(--yw-text));
  --mc-hover-bg: var(--yw-surface-2);
  --mc-row-hover: color-mix(in srgb, var(--yw-accent) 6%, transparent);
  --mc-focus-ring: color-mix(in srgb, var(--yw-accent) 15%, transparent);
  --mc-selected-bg: color-mix(in srgb, var(--yw-primary) 25%, var(--yw-surface));
  --mc-selected-text: color-mix(in srgb, var(--yw-accent) 70%, var(--yw-text-strong));
  --mc-code-bg: color-mix(in srgb, var(--yw-bg) 60%, light-dark(#dfe3ea, #000000));
  --mc-code-border: var(--yw-chrome-border);
  --mc-folder: color-mix(in srgb, var(--yw-accent) 45%, var(--yw-surface));
  --mc-shadow: light-dark(rgba(0, 0, 0, .08), rgba(0, 0, 0, .35));

  /* Category badges and the danger button: the same meaning in every
     palette, so fixed pairs (dark = the original values). */
  --mc-blue-bg: light-dark(#ddeef8, #1d3a4a);
  --mc-blue-text: light-dark(#0b5a80, #5ab4d8);
  --mc-purple-bg: light-dark(#f0e4f7, #3a1d4a);
  --mc-purple-text: light-dark(#7a2e9e, #b45ad8);
  --mc-teal-bg: light-dark(#dcf3ee, #1d4a42);
  --mc-teal-text: light-dark(#11695a, #5ad8c0);
  --mc-green-bg: light-dark(#e0f4e6, #1d4a2e);
  --mc-green-text: light-dark(#1c6e3a, #5ad880);
  --mc-red-bg: light-dark(#fbe3e6, #4a1820);
  --mc-red-text: light-dark(#9b2335, #e07080);
  --mc-danger-btn: light-dark(#b02a3c, #8b2030);
}

a { color: var(--yw-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Page heading ---------- */
.page-hd {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

/* ---------- Cards ---------- */
.card {
  background: var(--mc-card-bg);
  border: 1px solid var(--mc-card-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  transition: border-color .15s;
}

.card-hd {
  padding: .85rem 1.5rem;
  border-bottom: 1px solid var(--mc-card-border);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.card-title {
  font-weight: 600;
  font-size: .95rem;
  margin: 0;
  flex: 1;
  color: var(--yw-accent);
}

.card-body { padding: 1.25rem 1.5rem; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: .5rem 1.5rem;
  background: var(--mc-head-bg);
  border-bottom: 1px solid var(--yw-border);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mc-head-text);
  font-weight: 600;
}

td {
  padding: .65rem 1.5rem;
  border-bottom: 1px solid var(--mc-rule);
  vertical-align: middle;
  font-size: .9rem;
  color: var(--yw-text);
}

tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--mc-row-hover); }

/* ---------- Utilities ---------- */
.mono {
  font-family: var(--mc-mono);
  font-size: .8rem;
  color: var(--yw-text);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: .15em .55em;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
}

.bg-blue   { background: var(--mc-blue-bg); color: var(--mc-blue-text); }
.bg-purple { background: var(--mc-purple-bg); color: var(--mc-purple-text); }
.bg-teal   { background: var(--mc-teal-bg); color: var(--mc-teal-text); }
.bg-green  { background: var(--mc-green-bg); color: var(--mc-green-text); }
.bg-gray   { background: var(--yw-surface-2); color: var(--yw-muted); }
.bg-red    { background: var(--mc-red-bg); color: var(--mc-red-text); }

/* ---------- Buttons ---------- */
.actions { display: flex; gap: .4rem; align-items: center; }
/* A table cell stays a table cell: as a flex box it lost the row's
   height and border, so its line sat apart from the rest of the row. */
td.actions { display: table-cell; white-space: nowrap; vertical-align: middle; }
td.actions > * + * { margin-left: .4rem; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: .4rem .85rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
}

.btn:hover { filter: brightness(1.12); text-decoration: none; }

/* .btn-primary's colors come from the template (--yw-primary). */
.btn-danger  { background: var(--mc-danger-btn); color: #fff; }
.btn-ghost   { background: transparent; color: var(--yw-muted); border: 1px solid var(--mc-input-border); }
.btn-ghost:hover { background: var(--mc-hover-bg); color: var(--yw-text); filter: none; }
.btn-sm { padding: .25rem .6rem; font-size: .78rem; }
/* The template's navbar buttons (appearance menu, logout) keep their
   Bootstrap outline, which .btn's "border: none" would drop, and the
   gap between symbol and label that inline-flex would collapse. */
.navbar .btn { gap: .3rem; border: 1px solid var(--bs-btn-border-color); }

/* ---------- Flash messages ---------- */
.flash {
  padding: .7rem 1.5rem;
  font-size: .88rem;
  border-left: 4px solid;
}

.flash-success { background: var(--yw-success-bg); color: var(--yw-success-text); border-color: var(--yw-success-border); }
.flash-error   { background: var(--yw-danger-bg); color: var(--yw-danger-text); border-color: var(--yw-danger-border); }
.flash-info    { background: var(--yw-info-bg); color: var(--yw-info-text); border-color: var(--yw-info-border); }

/* ---------- Forms ---------- */
input[type=text],
input[type=password],
select {
  padding: .45rem .75rem;
  border: 1px solid var(--mc-input-border);
  border-radius: 6px;
  font-size: .9rem;
  width: 100%;
  outline: none;
  background: var(--mc-input-bg);
  color: var(--yw-text);
  transition: border-color .15s, box-shadow .15s;
}

input[type=text]:focus,
input[type=password]:focus,
select:focus {
  border-color: var(--yw-accent);
  box-shadow: 0 0 0 3px var(--mc-focus-ring);
}

.form-row   { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.fg1        { flex: 1; min-width: 120px; }

label { font-size: .82rem; font-weight: 500; color: var(--yw-muted); }

.chk-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; padding: .4rem 0; }
.chk     { display: flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--yw-text); cursor: pointer; }
.chk input { width: auto; cursor: pointer; }

/* ---------- Login (login.html -- standalone, not part of the shared
   layout, see ui.go's renderLogin). A column: the card centered by its
   auto margins, the shared footer across the bottom. ---------- */
body.login-page {
  background: var(--yw-bg);
  color: var(--yw-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
}

.login-wrap { max-width: 380px; width: calc(100% - 2rem); margin: auto 1rem; }
body.login-page > .footer { align-self: stretch; }

.login-card {
  background: var(--mc-card-bg);
  border: 1px solid var(--mc-card-border);
  border-radius: 14px;
  box-shadow: 0 4px 24px var(--mc-shadow);
  padding: 2.5rem;
}

.login-brand { font-size: 1.5rem; font-weight: 700; color: var(--yw-brand); margin-bottom: .25rem; letter-spacing: 1px; }
.login-sub   { color: var(--yw-muted); font-size: .9rem; margin-bottom: 2rem; }
.login-card .form-group { margin-bottom: 1rem; }

/* ---------- Details / JSON ---------- */
details summary  { cursor: pointer; color: var(--yw-link); font-size: .85rem; user-select: none; }

details pre {
  margin-top: .5rem;
  background: var(--mc-code-bg);
  border: 1px solid var(--mc-code-border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  font-size: .78rem;
  line-height: 1.6;
  max-height: 350px;
  color: var(--yw-text);
}

/* ---------- Stats row ---------- */
.stat-row {
  display: flex;
  gap: 2.5rem;
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--mc-rule);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.stat   { display: flex; flex-direction: column; gap: .1rem; }
.stat-v { font-size: 1.2rem; font-weight: 700; color: var(--yw-accent); }
.stat-l { font-size: .75rem; color: var(--mc-faint); }

/* ---------- Breadcrumb ---------- */
.breadcrumb     { font-size: .85rem; color: var(--yw-muted); margin-bottom: .75rem; }
.breadcrumb a   { color: var(--yw-link); }
.breadcrumb .sep { margin: 0 .4rem; color: var(--mc-fainter); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 3rem 1rem; color: var(--mc-faint); font-size: .9rem; }

/* ---------- Misc ---------- */
.w100  { width: 100%; }
.block { display: block; }

/* ---------- Permissions ---------- */
.perm-row {
  display: flex;
  gap: .5rem 1.5rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid var(--mc-rule);
  flex-wrap: wrap;
}

.perm-row:last-child { border-bottom: none; }

.perm-repo {
  font-family: var(--mc-mono);
  font-size: .85rem;
  flex: 0 0 140px;
  font-weight: 500;
}

/* ---------- Structured forms (users / user / account) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 1.25rem;
}

.form-grid + .form-grid { margin-top: 1.25rem; }
.form-grid .span-all    { grid-column: 1 / -1; }

.form-section {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mc-head-text);
  margin: 0 0 .75rem;
}

.form-grid + .form-section { margin-top: 1.5rem; }

.form-hint { font-size: .76rem; color: var(--mc-faint); line-height: 1.4; }
.form-hint code { color: var(--mc-tree-link); }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mc-rule);
}

.note {
  background: var(--yw-info-bg);
  border: 1px solid var(--yw-info-border);
  border-radius: 6px;
  color: var(--yw-info-text);
  font-size: .84rem;
  padding: .6rem .85rem;
  margin-bottom: 1.25rem;
}

.muted { color: var(--mc-faint); font-size: .88rem; }

/* Checkbox pills: <label class="pill"><input type=checkbox><span>pull</span></label> */
.pill-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill { position: relative; margin: 0; cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block;
  padding: .38rem .9rem;
  border: 1px solid var(--mc-input-border);
  border-radius: 100px;
  font-size: .82rem;
  color: var(--yw-muted);
  background: var(--mc-input-bg);
  user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.pill:hover span              { border-color: var(--mc-fainter); color: var(--yw-text); }
.pill input:checked + span    { background: var(--mc-selected-bg); border-color: var(--yw-primary); color: var(--mc-selected-text); }
.pill input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--yw-accent) 25%, transparent); }

/* Definition list for account details */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; }
.kv dt { font-size: .82rem; color: var(--mc-head-text); font-weight: 500; }
.kv dd { margin: 0; color: var(--yw-text); }

/* Two cards side by side on wide screens */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 0 1.5rem;
  align-items: start;
}

.card-flush > table td:last-child,
.card-flush > table th:last-child { text-align: right; }
.card-flush .actions { justify-content: flex-end; }

/* Bootstrap is loaded underneath (shared chrome) -- keep its :hover
   background from overriding the danger button's color. */
.btn-danger:hover  { background: var(--mc-danger-btn); color: #fff; }

/* ---------- Package listing (repos.html / repo.html) ---------- */
.pkg-filter { margin-bottom: 1.5rem; }
.pkg-sub   { font-size: .78rem; color: var(--mc-faint); margin-top: .15rem; }
.pkg-desc  { font-size: .85rem; color: var(--mc-soft-text); margin: .25rem 0 0; }
.pkg-info .pkg-desc { margin: 0 0 .6rem; font-size: .92rem; }
.pkg-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.pkg-chips a.badge:hover, td > a.badge:hover { text-decoration: none; filter: brightness(1.2); }

/* ---------- Bulk selection (repos.html / repo.html) ---------- */
th.sel, td.sel { width: 1%; padding-right: 0; }
td.sel input, th.sel input { width: auto; cursor: pointer; }
.bulk-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
  margin: 0 0 .75rem; font-size: .85rem; color: var(--mc-faint);
}
.bulk-bar.active { color: var(--yw-danger-text); }

/* ---------- Referrer/signature tags (repo.html) ---------- */
details.referrers summary { cursor: pointer; color: var(--yw-muted); font-size: .85rem; font-weight: 600; list-style: revert; }
details.referrers[open] summary { border-bottom: 1px solid var(--mc-card-border); }

/* ---------- Namespace browsing + sortable headers (repos.html / repo.html) ---------- */
.browse.with-tree {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 0 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .browse.with-tree { grid-template-columns: minmax(0, 1fr); }
}
.browse-main { min-width: 0; }

.ns-tree { font-size: .86rem; padding-bottom: .5rem; }
.ns-tree ul { list-style: none; margin: 0; padding: 0 0 0 .9rem; }
.ns-tree > ul { padding: .35rem .5rem 0 .5rem; }
.ns-tree > ul.ns-root { padding-bottom: 0; }
.ns-tree li { margin: .1rem 0; }
.ns-tree summary { list-style: none; display: flex; align-items: center; gap: .35rem; color: var(--yw-text); }
.ns-tree summary::-webkit-details-marker { display: none; }
.ns-tree summary::before {
  content: "▸"; color: var(--mc-faint); width: .8rem; flex: none; font-size: .75rem;
  transition: transform .12s;
}
.ns-tree details[open] > summary::before { transform: rotate(90deg); }
.ns-tree a.leaf { margin-left: 1.15rem; }
.ns-tree a { color: var(--mc-tree-link); padding: .1rem .3rem; border-radius: 4px; }
.ns-tree a.current { background: var(--mc-selected-bg); color: var(--mc-selected-text); font-weight: 600; }
.ns-count { color: var(--mc-faint); font-size: .72rem; margin-left: .35rem; }
.ns-tree li > .ns-count { margin-left: .35rem; }

.ns-row .ns-link { font-weight: 600; color: var(--yw-text); display: inline-flex; align-items: center; gap: .45rem; }
.ns-icon {
  width: 1rem; height: .75rem; border-radius: 2px; background: var(--mc-folder); position: relative; flex: none;
}
.ns-icon::before {
  content: ""; position: absolute; left: 0; top: -.18rem; width: .45rem; height: .25rem;
  background: var(--mc-folder); border-radius: 2px 2px 0 0;
}

th.sortable { padding: 0; }
th.sortable a {
  display: block; padding: .5rem 1.5rem; color: inherit; text-decoration: none; white-space: nowrap;
}
th.sortable a:hover { color: var(--yw-text); background: var(--mc-hover-bg); }
th.sorted { color: var(--yw-accent); }
.sort-arrow { font-size: .65rem; }

/* Utility classes for what used to be style="" attributes -- the
   Content-Security-Policy (httpsec.DefaultCSP) forbids inline styles. */
.inline-form { display: inline; }
.ms-badge { margin-left: .3rem; }
.m-badge { margin: .1rem; }
.mw-360 { max-width: 360px; }
.form-group.form-group-tight { margin-bottom: .75rem; }
.mono-sm { font-size: .75rem; }
.mb-tight { margin-bottom: .35rem; }
.login-submit { margin-top: 1.5rem; }
.login-flash { margin: -1rem -1rem 1.5rem; border-radius: 8px 8px 0 0; }