/* UNFINITX Admin — calm, dense, readable. Shares the brand tokens of the public site. */
@layer reset, tokens, base, layout, components;

/* Fonts: SIL OFL 1.1, self-hosted (see wwwroot/fonts/README.md). Inter for Latin/Cyrillic, Noto Sans Armenian for Armenian. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans Armenian"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/noto-sans-armenian-armenian-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    --c-bg: #f6f6f1;
    --c-surface: #ffffff;
    --c-surface-2: #faf9f6;
    --c-ink: #0b0c0a;
    --c-ink-2: #3b3d42;
    --c-muted: #62656b;
    --c-line: #e2ded5;
    --c-line-strong: #c9c4b8;
    --c-accent: #ecf76d;
    --c-accent-soft: #f4f9c4;
    --c-success: #1e6b45;
    --c-success-bg: #e3efe7;
    --c-error: #b42318;
    --c-error-bg: #f8e4e1;
    --c-warning: #8a5a00;
    --c-warning-bg: #f6ecd6;
    --c-info-bg: #e8eaf0;
    --font: "Inter", "Noto Sans Armenian", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --r-sm: 6px;
    --r-md: 10px;
    --sidebar-w: 16rem;
    --control-h: 2.75rem;
    --shadow: 0 1px 2px rgb(18 19 21 / 0.06), 0 1px 1px rgb(18 19 21 / 0.04);
    --shadow-pop: 0 12px 32px -12px rgb(18 19 21 / 0.3);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

@layer base {
  body { background: var(--c-bg); color: var(--c-ink); font-family: var(--font); font-size: 0.9375rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  h1 { font-size: 1.625rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; }
  h2 { font-size: 1.125rem; font-weight: 650; }
  h3 { font-size: 1rem; font-weight: 650; }
  a { color: var(--c-ink); text-underline-offset: 0.2em; }
  :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 3px; }
  .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: 0.5rem 1rem; background: var(--c-ink); color: #fff; border-radius: 999px; }
  .skip-link:focus { top: 0.75rem; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85em; }
}

@layer layout {
  .shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) { .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } }

  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(var(--sidebar-w), 85vw); overflow-y: auto; background: var(--c-ink); color: #d9dadc; padding: 1rem 0.75rem 2rem; transform: translateX(-100%); visibility: hidden; transition: transform 200ms var(--ease), visibility 0s linear 200ms; }
  .sidebar.is-open { transform: none; visibility: visible; box-shadow: var(--shadow-pop); transition: transform 200ms var(--ease); }
  @media (min-width: 1024px) { .sidebar { position: sticky; top: 0; height: 100vh; transform: none; visibility: visible; width: auto; } }
  .sidebar__brand { display: flex; align-items: baseline; justify-content: space-between; padding: 0.5rem 0.75rem 1.25rem; }
  .sidebar__brand .wordmark { color: #fff; }
  .sidebar__env { font-size: 0.75rem; color: #a9abb0; }
  .sidebar__group { margin: 1.25rem 0.75rem 0.375rem; font-size: 0.75rem; font-weight: 600; color: #8b8e94; }
  .sidebar__list { list-style: none; padding: 0; }
  .sidebar__link { display: flex; align-items: center; min-height: 2.5rem; padding: 0.375rem 0.75rem; border-radius: var(--r-sm); color: #d9dadc; text-decoration: none; font-size: 0.9375rem; }
  .sidebar__link:hover { background: #222327; color: #fff; }
  .sidebar__link.is-active { background: #2a2c31; color: #fff; box-shadow: inset 3px 0 0 var(--c-accent); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 30; background: rgb(18 19 21 / 0.45); }

  .workspace { min-width: 0; display: flex; flex-direction: column; }
  .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0 1.25rem; background: rgb(245 243 238 / 0.95); border-bottom: 1px solid var(--c-line); }
  .topbar__menu { min-height: var(--control-h); padding: 0 0.875rem; border: 1px solid var(--c-line-strong); border-radius: 999px; font-weight: 600; }
  @media (min-width: 1024px) { .topbar__menu { display: none; } }
  .topbar__title { font-weight: 600; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__user { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--c-muted); }
  .topbar__user span { display: none; }
  @media (min-width: 640px) { .topbar__user span { display: inline; } }
  .main { padding: 1.5rem 1.25rem 4rem; max-width: 84rem; width: 100%; }
  @media (min-width: 768px) { .main { padding: 2rem 2.5rem 5rem; } }
  .main:focus { outline: none; }
}

@layer components {
  .wordmark { font-weight: 700; letter-spacing: 0.16em; text-decoration: none; font-size: 1rem; }

  .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
  .page-head p { color: var(--c-muted); margin-top: 0.25rem; max-width: 70ch; }
  .page-head__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .crumbs { font-size: 0.875rem; color: var(--c-muted); margin-bottom: 0.5rem; }
  .crumbs a { color: var(--c-muted); }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--control-h); padding: 0 1.125rem; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; transition: background-color 140ms var(--ease), border-color 140ms var(--ease); }
  .btn:hover { border-color: var(--c-ink); }
  .btn:active { transform: translateY(1px); }
  .btn--primary { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
  .btn--primary:hover { background: #000; }
  .btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
  .btn--accent:hover { background: #f0663e; border-color: #f0663e; }
  .btn--danger { color: var(--c-error); border-color: #e7b9b3; }
  .btn--danger:hover { background: var(--c-error-bg); border-color: var(--c-error); }
  .btn--ghost { border-color: transparent; background: transparent; }
  .btn--ghost:hover { background: rgb(18 19 21 / 0.06); border-color: transparent; }
  .btn--sm { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.875rem; }
  .btn--block { width: 100%; }
  .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

  .panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 1.25rem; box-shadow: var(--shadow); }
  .panel + .panel { margin-top: 1rem; }
  .panel__title { margin-bottom: 1rem; }
  .panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
  .stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 1.5rem; }
  .stat { display: grid; gap: 0.25rem; padding: 1rem 1.125rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); text-decoration: none; box-shadow: var(--shadow); }
  a.stat:hover { border-color: var(--c-ink); }
  .stat__value { font-size: 1.75rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .stat__label { font-size: 0.875rem; color: var(--c-muted); }

  .table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow); }
  .table { width: 100%; font-size: 0.9rem; }
  .table th { text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--c-muted); padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--c-line); background: var(--c-surface-2); white-space: nowrap; }
  .table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
  .table tr:last-child td { border-bottom: 0; }
  .table tbody tr:hover { background: var(--c-surface-2); }
  .table a { font-weight: 600; text-decoration: none; }
  .table a:hover { text-decoration: underline; }
  .table__actions { text-align: right; white-space: nowrap; }
  .table code, .table time { white-space: nowrap; }
  .panel .table th { background: transparent; }

  .tag { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.5rem; padding: 0 0.5rem; border-radius: 999px; background: #eeebe4; color: var(--c-ink-2); font-size: 0.75rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
  .tag--published { background: var(--c-success-bg); color: var(--c-success); }
  .tag--changed { background: var(--c-warning-bg); color: var(--c-warning); }
  .tag--draft { background: #eeebe4; color: var(--c-muted); }
  .tag--archived { background: #e4e4e4; color: #555; }
  .tag--new { background: var(--c-accent-soft); color: #9a3412; }
  .tag--error { background: var(--c-error-bg); color: var(--c-error); }
  .langs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }

  .notice { padding: 0.75rem 1rem; border-radius: var(--r-sm); border: 1px solid; margin-bottom: 1rem; font-size: 0.9rem; }
  .notice--success { background: var(--c-success-bg); border-color: #b9d8c4; color: var(--c-success); }
  .notice--error { background: var(--c-error-bg); border-color: #e7b9b3; color: var(--c-error); }
  .notice--warning { background: var(--c-warning-bg); border-color: #e5cf9e; color: var(--c-warning); }
  .notice--info { background: var(--c-info-bg); border-color: #cfd3dc; color: var(--c-ink-2); }
  .notice ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

  .stack > * + * { margin-top: 1rem; }
  .form-grid { display: grid; gap: 1rem; }
  @media (min-width: 768px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .field { display: grid; gap: 0.375rem; align-content: start; }
  .field__label { font-weight: 600; font-size: 0.875rem; }
  .field__hint { font-size: 0.8125rem; color: var(--c-muted); }
  .field__error { font-size: 0.8125rem; color: var(--c-error); font-weight: 500; }
  .field__error:empty { display: none; }
  .field__input { width: 100%; min-height: var(--control-h); padding: 0.5rem 0.75rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff; font-size: 0.9375rem; transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease); }
  .field__input:hover { border-color: #9d988d; }
  .field__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgb(228 83 42 / 0.3); }
  .field__input:disabled, .field__input[readonly] { background: var(--c-surface-2); color: var(--c-muted); }
  .field__input.input-validation-error, .field__input[aria-invalid="true"] { border-color: var(--c-error); }
  textarea.field__input { min-height: 6rem; resize: vertical; line-height: 1.5; }
  textarea.field__input--tall { min-height: 16rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.875rem; }
  select.field__input { appearance: none; padding-right: 2.25rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23121315' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center; }
  .check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; cursor: pointer; }
  .check input { width: 1.125rem; height: 1.125rem; accent-color: var(--c-ink); }
  .fieldset { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 1rem; background: var(--c-surface-2); min-width: 0; }
  .fieldset > legend { padding: 0 0.375rem; font-weight: 650; font-size: 0.9rem; }
  .form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.875rem 0; margin-top: 1.5rem; background: linear-gradient(to top, var(--c-bg) 75%, transparent); }
  .form-actions__hint { font-size: 0.8125rem; color: var(--c-muted); margin-left: auto; }

  .repeater { display: grid; gap: 0.75rem; }
  .repeater__list { display: grid; gap: 0.75rem; }
  .repeater__row { display: grid; gap: 0.5rem; padding: 0.875rem; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: #fff; }
  .repeater__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; color: var(--c-muted); font-weight: 600; }

  .tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--c-line); margin-bottom: 1.25rem; }
  .tabs a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem; text-decoration: none; color: var(--c-muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .tabs a:hover { color: var(--c-ink); }
  .tabs a[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }

  .two-col { display: grid; gap: 1rem; }
  @media (min-width: 1200px) { .two-col { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .two-col__aside { position: sticky; top: 4.5rem; } }
  .meta-list { display: grid; gap: 0.125rem; font-size: 0.875rem; }
  .meta-list dt { color: var(--c-muted); font-size: 0.8125rem; }
  .meta-list dd { margin: 0 0 0.5rem; word-break: break-word; }
  .toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-bottom: 1rem; }
  .toolbar .field { min-width: 10rem; }
  .inline-form { display: inline; }
  .empty { padding: 2rem 1rem; text-align: center; color: var(--c-muted); }
  .history { list-style: none; padding: 0; display: grid; gap: 0.5rem; font-size: 0.8125rem; }
  .history li { display: grid; gap: 0.125rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-line); }
  .history time { color: var(--c-muted); }
  .thumb { width: 3.5rem; height: 2.75rem; object-fit: cover; border-radius: 4px; background: #eeebe4; }
  .media-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
  .media-card { display: grid; gap: 0.375rem; padding: 0.5rem; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 0.8125rem; }
  .media-card img, .media-card__file { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: #eeebe4; display: grid; place-items: center; color: var(--c-muted); font-weight: 600; }
  .media-grid { list-style: none; padding: 0; }
  .media-preview { width: 100%; max-height: 32rem; object-fit: contain; background: #eeebe4; border-radius: 4px; }
  .media-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dl-grid { display: grid; gap: 0.75rem 1.5rem; grid-template-columns: minmax(8rem, max-content) 1fr; font-size: 0.9rem; }
  .dl-grid dt { color: var(--c-muted); }
  .dl-grid dd { margin: 0; word-break: break-word; }
  .pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  .mt-4 { margin-top: 1rem; }

  .auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
  .auth__card { width: min(26rem, 100%); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; padding: 2rem; box-shadow: var(--shadow-pop); }
  .auth__brand { margin-bottom: 1.5rem; font-size: 1.125rem; }
  .auth__title { font-size: 1.375rem; margin-bottom: 1.25rem; }
}

@layer components {
  .input--narrow { width: 5.5rem; }
}

/* v2 brand: official logos, lime used as a highlighter */
@layer components {
  .sidebar { background: #0b0c0a; }
  .sidebar__logo img { height: 1.375rem; width: auto; display: block; }
  .sidebar__brand { align-items: center; }
  .sidebar__link.is-active { background: #1e211b; box-shadow: inset 3px 0 0 var(--c-accent); }
  .auth__brand img { height: 2.75rem; width: auto; }
  .btn--accent { color: #0b0c0a; }
  .btn--accent:hover { background: #e1ef45; border-color: #e1ef45; }
  :focus-visible { outline-color: #0b0c0a; }
  .sidebar :focus-visible { outline-color: var(--c-accent); }
  .field__input:focus { box-shadow: 0 0 0 3px rgb(236 247 109 / 0.75); }
  .tag--new { background: #f1f8b6; color: #3d4500; }
}

/* v2 refinement: 4/8px shapes instead of pills, mobile-safe grids, confirmation dialog */
@layer components {
  .btn, .topbar__menu, .skip-link { border-radius: 8px; }
  .tag { border-radius: 4px; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .table-wrap { max-width: 100%; }

  .confirm { width: min(28rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); color: var(--c-ink); box-shadow: 0 24px 48px -20px rgb(11 12 10 / 0.45); }
  .confirm::backdrop { background: rgb(11 12 10 / 0.55); }
  .confirm__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.45; margin: 0; }
  .confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
}