/* TerraLab brand for License Monitor (docs/BRANDBOOK.md, spec §7.1). Pages run under a strict CSP: no inline styles. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  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: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  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;
}

:root {
  /* Brand (BRANDBOOK §3.1): red is an accent only */
  --brand: #BE1E2D;
  --brand-hover: #A31826;
  --black: #000000;
  --white: #FFFFFF;
  --grey-bg: #F0F2F1;
  /* Untitled UI (BRANDBOOK §3.2) */
  --gray-200: #EAECF0;
  --gray-300: #D0D5DD;
  --gray-500: #667085;
  --gray-700: #344054;
  --ok-bg: #ECFDF3;
  --ok-fg: #067647;
  --ok-line: #ABEFC6;
  --warn-bg: #FFFAEB;
  --warn-fg: #B54708;
  --warn-line: #FEDF89;
  --err-bg: #FEF3F2;
  --err-fg: #B42318;
  --err-line: #FECDCA;
  /* 8 pt grid, square shapes; 4 px radius only on buttons and chips (BRANDBOOK §5, §6) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --radius: 4px;
  --font: "Montserrat", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 16px/24px var(--font); color: var(--black); background: var(--white); }
a { color: var(--black); text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brand); }
h1, h2, h3 { margin: 0 0 var(--s2); font-weight: 600; }
.page-title { font-size: 30px; line-height: 38px; }
h2 { font-size: 24px; line-height: 32px; }
h3 { font-size: 18px; line-height: 28px; }
p { margin: 0 0 var(--s2); }
.icon { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.muted { color: var(--gray-500); }
.small { font-size: 14px; line-height: 20px; }
[hidden] { display: none !important; }

/* Shell: header, side menu, main area */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); height: 64px; padding: 0 var(--s3); border-bottom: 1px solid var(--gray-200); }
.topbar-brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; font-size: 18px; font-weight: 600; }
.topbar-brand img { height: 28px; width: auto; }
.topbar-user { display: flex; align-items: center; gap: var(--s1); font-size: 14px; }
.topbar-user form { margin: 0; }
.topbar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--grey-bg); font-size: 12px; font-weight: 700; }
.shell { display: flex; min-height: calc(100vh - 64px); }
.sidebar { width: 232px; flex: none; padding: var(--s2) 0; background: var(--grey-bg); }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar a { display: flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3); border-left: 4px solid transparent; font-size: 14px; font-weight: 500; text-decoration: none; }
.sidebar a:hover { background: var(--gray-200); }
.sidebar a.active { border-left-color: var(--brand); background: var(--white); font-weight: 600; }
.sidebar a.active .icon { color: var(--brand); }
.main { flex: 1; min-width: 0; padding: var(--s3) var(--s4); }
.narrow { max-width: 1216px; }

/* Status counters under the header (spec §7.2) */
.counters { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.counter { display: flex; align-items: baseline; gap: var(--s1); padding: var(--s1) var(--s2); border: 1px solid var(--gray-200); text-decoration: none; }
.counter:hover { border-color: var(--gray-300); }
.counter-value { font-size: 24px; line-height: 32px; font-weight: 700; }
.counter-label { font-size: 14px; color: var(--gray-700); }
.counter-ok .counter-value { color: var(--ok-fg); }
.counter-warning .counter-value { color: var(--warn-fg); }
.counter-expired .counter-value { color: var(--err-fg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--s1); height: 40px; padding: 0 var(--s2); border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--black); font: 500 14px/20px var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--brand); color: var(--white); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { border-color: var(--gray-300); background: var(--white); }
.btn-secondary:hover { background: var(--grey-bg); }
.btn-danger { border-color: var(--err-line); background: var(--white); color: var(--err-fg); }
.btn-danger:hover { background: var(--err-bg); }
.btn-ghost:hover { background: var(--grey-bg); }
.btn-wide { width: 100%; justify-content: center; height: 48px; font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: var(--s2) 0; }
.actions form { margin: 0; }

/* Chips: statuses (Untitled UI semantic colours) */
.chip { display: inline-block; padding: 2px var(--s1); border: 1px solid var(--gray-200); border-radius: var(--radius); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.chip-neutral { background: var(--grey-bg); }
.chip-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-fg); }
.chip-warning { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-fg); }
.chip-expired, .chip-error { border-color: var(--err-line); background: var(--err-bg); color: var(--err-fg); }

/* Tables: full width, grey header strip */
.table-wrap { overflow-x: auto; margin-bottom: var(--s2); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
table.data th { padding: var(--s1) 12px; background: var(--grey-bg); font-weight: 600; text-align: left; white-space: nowrap; }
table.data td { padding: var(--s1) 12px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
table.data td.empty { padding: var(--s3); color: var(--gray-500); text-align: center; }
table.data tr.current td { background: var(--ok-bg); }
.sort { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.sort-active { color: var(--brand); }
pre, .code { margin: 0; font: 13px/20px var(--mono); white-space: pre-wrap; word-break: break-all; }
.cell-code { min-width: 160px; max-width: 480px; }

/* Forms */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2); margin-bottom: var(--s3); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; }
label.check { flex-direction: row; align-items: center; gap: var(--s1); }
input[type=text], input[type=search], input[type=email], input[type=date], input[type=number], input[type=file], select, textarea {
  min-height: 40px; padding: var(--s1) 12px; border: 1px solid var(--gray-300); border-radius: 0; background: var(--white); font: 400 14px/20px var(--font);
}
textarea { width: 100%; font-family: var(--mono); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.form { display: grid; gap: var(--s2); max-width: 640px; }
.form-wide { max-width: 960px; }
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s1); margin: 0; }
.hint { color: var(--gray-500); font-size: 12px; line-height: 18px; font-weight: 400; }
progress { width: 100%; height: 8px; accent-color: var(--brand); }

/* Cards, properties */
.card { margin-bottom: var(--s3); padding: var(--s3); border: 1px solid var(--gray-200); }
.card-danger { border-color: var(--err-line); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--s3); }
dl.props { display: grid; grid-template-columns: 200px 1fr; gap: var(--s1) var(--s2); margin: 0; font-size: 14px; }
dl.props dt { color: var(--gray-500); }
dl.props dd { margin: 0; word-break: break-all; }

/* Flash messages, pager */
.flash { margin-bottom: var(--s2); padding: 12px var(--s2); border: 1px solid; font-size: 14px; }
.flash-success { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-fg); }
.flash-error { border-color: var(--err-line); background: var(--err-bg); color: var(--err-fg); }
.pager { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0; font-size: 14px; }
.filter-note { font-size: 14px; }

/* Login, no access, errors: logo in the centre (spec §7.1) */
.standalone { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--grey-bg); }
.standalone-box { width: 400px; max-width: calc(100% - 32px); padding: var(--s4); background: var(--white); text-align: center; }
.standalone-logo { height: 48px; width: auto; }
.standalone-title { margin: var(--s2) 0 var(--s3); font-size: 24px; line-height: 32px; }
.standalone-box p { font-size: 14px; line-height: 20px; }

@media (max-width: 767px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 64px; padding: var(--s1) var(--s2); }
  .topbar-user { min-width: 0; max-width: 100%; }
  .topbar-name { max-width: 160px; }
  .shell { flex-direction: column; }
  .sidebar { width: auto; }
  .main { padding: var(--s2); }
  .counters { flex-wrap: wrap; }
  dl.props { grid-template-columns: 1fr; }
}