/* ALPEX — the base both applications share: the design tokens and the element and utility rules
   the admin and the public site both render with (type, cards, messages, tables, pills, buttons).
   Served from this library as _content/Alpex.Web.Common/css/base.css and linked FIRST by each
   layout; the admin adds admin.css after it, the public site public.css.

   The palette is taken from the live site, whose accent is #e47e6e. Everything else is a warm
   neutral built around it, so the admin looks like it belongs to the same organisation as the
   public site rather than like a default scaffold. */

:root {
    --brand:        #e47e6e;   /* ALPEX accent, as used on the current site */
    --brand-deep:   #c85f4d;   /* hover / pressed — the accent is too light to carry a button alone */
    --brand-tint:   #fdf1ee;
    --brand-edge:   #f3cec5;

    --ink:          #17212b;   /* headings, the header bar */
    --ink-2:        #38424e;   /* body text */
    --muted:        #6b7784;   /* secondary text */
    --faint:        #96a0ab;

    --bg:           #f4f2f0;   /* page */
    --surface:      #ffffff;   /* cards, table bodies */
    --surface-2:    #faf9f8;   /* table heads, inset panels */
    --line:         #e2ddd8;
    --line-strong:  #cfc8c1;

    --good:         #1d6b3f;
    --good-tint:    #eef7f1;
    --warn:         #8a5a00;
    --warn-tint:    #fdf6e7;
    --bad:          #a3271f;
    --bad-tint:     #fdf0ef;

    --radius:       6px;
    --radius-lg:    10px;
    --shadow:       0 1px 2px rgba(23, 33, 43, .06), 0 1px 3px rgba(23, 33, 43, .04);
    --shadow-lift:  0 2px 4px rgba(23, 33, 43, .08), 0 4px 12px rgba(23, 33, 43, .06);
    --focus:        0 0 0 3px rgba(228, 126, 110, .35);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ── Type, cards, text utilities ────────────────────────────────────────────── */

h1 { font-size: 1.5rem; line-height: 1.25; color: var(--ink); margin: 0 0 1.25rem; font-weight: 650; }
h2 { font-size: 1.05rem; color: var(--ink); margin: 2rem 0 .7rem; font-weight: 650; }

.page-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head .button { margin-left: auto; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.1rem;
}
.card.muted { color: var(--muted); }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hint { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); }

/* ── Messages ───────────────────────────────────────────────────────────────── */

.msg {
    padding: .7rem 1rem;
    margin-bottom: 1.1rem;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--surface);
}
.msg.good { border-color: #bfe0cc; border-left-color: var(--good); background: var(--good-tint); color: #11502e; }
.msg.warn { border-color: #ecd9a8; border-left-color: var(--warn); background: var(--warn-tint); color: #6d4700; }
.msg.bad  { border-color: #efc4c0; border-left-color: var(--bad);  background: var(--bad-tint);  color: #7f1e18; }
.msg ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
th, td { text-align: left; padding: .68rem .9rem; border-bottom: 1px solid var(--line); }
thead th {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--brand-tint); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.null { color: var(--faint); font-style: italic; }
td.actions, th.actions { text-align: right; white-space: nowrap; }
td.actions form { display: inline; margin-left: .3rem; }

/* ── Pills ──────────────────────────────────────────────────────────────────── */

.pill {
    display: inline-block;
    padding: .1rem .55rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-2);
    vertical-align: middle;
}
.pill.good { border-color: #bfe0cc; background: var(--good-tint); color: var(--good); }
.pill.warn { border-color: #ecd9a8; background: var(--warn-tint); color: var(--warn); }
.pill.brand { border-color: var(--brand-edge); background: var(--brand-tint); color: var(--brand-deep); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */

button, a.button {
    display: inline-block;
    font: inherit;
    font-size: .92rem;
    font-weight: 550;
    padding: .45rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-2);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
button:hover, a.button:hover { background: var(--surface-2); border-color: var(--faint); color: var(--ink); }
button:focus-visible, a.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-color: var(--brand);
}

button.primary, a.button.primary {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    color: #fff;
}
button.primary:hover, a.button.primary:hover { background: #b3503f; border-color: #b3503f; color: #fff; }

button.danger { color: var(--bad); border-color: #e7c3bf; background: var(--surface); }
button.danger:hover { background: var(--bad-tint); border-color: var(--bad); color: var(--bad); }

.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }