/* ============================================================
   Seula — "regulatory editorial" theme
   Warm paper surface · ink navy · Yapi orange as signal colour
   Type: Bricolage Grotesque (display) · IBM Plex Sans/Mono
   ============================================================ */

:root {
    --ink: #232749;
    --ink-deep: #171a33;
    --ink-side: #1d2140;
    --paper: #f7f5f0;
    --card: #ffffff;
    --line: #e6e2d8;
    --line-soft: #efece4;
    --orange: #f7941d;
    --orange-deep: #d97e05;
    --orange-soft: #fdeeda;
    --muted: #6f7488;
    --ok: #1e7f4f;  --ok-bg: #e3f2ea;
    --warn: #8a6100; --warn-bg: #faf0d3;
    --bad: #b3372c;  --bad-bg: #fbe7e3;
    --info: #31569d; --info-bg: #e6edf9;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(35, 39, 73, 0.05), 0 8px 24px -18px rgba(35, 39, 73, 0.25);
    --font-display: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

html, body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
}

/* ---------- typography ---------- */

h1 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 2rem;
    margin-bottom: .35rem;
}

h1::before {
    content: "{ ";
    color: var(--orange);
    font-weight: 800;
}

h1:focus { outline: none; }

h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 1.4rem 0 .8rem;
}

code {
    font-family: var(--font-mono);
    font-size: .85em;
    color: var(--ink);
    background: var(--line-soft);
    padding: .1em .35em;
    border-radius: 4px;
}

a, .btn-link { color: var(--info); }

.text-muted { color: var(--muted) !important; }

/* page intro line under the h1 */
h1 + p.text-muted, h1 + p {
    max-width: 68ch;
}

/* ---------- content entrance ---------- */

@keyframes seula-rise {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

.content > * { animation: seula-rise .35s ease-out backwards; }
.content > *:nth-child(2) { animation-delay: .04s; }
.content > *:nth-child(3) { animation-delay: .08s; }
.content > *:nth-child(4) { animation-delay: .12s; }
.content > *:nth-child(5) { animation-delay: .16s; }

.content { padding-top: 1.6rem; padding-bottom: 3rem; }

/* ---------- cards ---------- */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .8rem 1.15rem .65rem;
}

.card-body { padding: 1.15rem; }

.card.border-primary { border-color: var(--orange); }

/* ---------- forms ---------- */

.form-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink);
    margin-bottom: .3rem;
}

.form-control, .form-select {
    border-color: var(--line);
    border-radius: 8px;
    background-color: #fffdfa;
    color: var(--ink);
    font-size: .9rem;
    padding: .48rem .7rem;
}

.form-control::placeholder { color: #b3b6c2; }

.form-control:focus, .form-select:focus,
.btn:focus, .btn:active:focus, .form-check-input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 0.22rem rgba(247, 148, 29, 0.22);
}

/* ---------- buttons ---------- */

.btn {
    white-space: nowrap;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    color: #fff;
    background-color: var(--orange);
    border-color: var(--orange);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--orange-deep) !important;
    border-color: var(--orange-deep) !important;
    color: #fff;
}

.btn-primary:disabled {
    background-color: var(--orange);
    border-color: var(--orange);
    opacity: .55;
}

.btn-outline-secondary {
    color: var(--ink);
    border-color: var(--line);
    background: #fff;
}

.btn-outline-secondary:hover {
    background: var(--line-soft);
    color: var(--ink);
    border-color: var(--line);
}

.btn-outline-success { color: var(--ok); border-color: var(--ok); }
.btn-outline-success:hover { background: var(--ok); border-color: var(--ok); }
.btn-outline-danger { color: var(--bad); border-color: var(--bad); }
.btn-outline-danger:hover { background: var(--bad); border-color: var(--bad); }

/* ---------- tables ---------- */

.table {
    --bs-table-bg: transparent;
    border-color: var(--line-soft);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.table thead th {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    background: #fbfaf6;
    border-bottom: 1px solid var(--line);
    padding: .65rem .9rem;
    white-space: nowrap;
}

.table tbody td {
    padding: .62rem .9rem;
    border-color: var(--line-soft);
    vertical-align: middle;
}

.table tbody tr:hover td { background: #fbf8f2; }

.table tbody tr.table-danger td { background: var(--bad-bg); }

/* numbers & timestamps in data cells read best in mono */
.table td:nth-last-child(-n+3) { font-variant-numeric: tabular-nums; }

/* ---------- badges: soft chips ---------- */

.badge {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .32em .72em;
}

.badge.bg-success   { background: var(--ok-bg) !important;   color: var(--ok); }
.badge.bg-warning   { background: var(--warn-bg) !important; color: var(--warn); }
.badge.bg-danger    { background: var(--bad-bg) !important;  color: var(--bad); }
.badge.bg-info      { background: var(--info-bg) !important; color: var(--info); }
.badge.bg-primary   { background: var(--orange-soft) !important; color: var(--orange-deep); }
.badge.bg-secondary { background: var(--line-soft) !important; color: var(--muted); }
.badge.text-dark    { color: var(--warn) !important; }

/* ---------- alerts ---------- */

.alert {
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: .9rem;
}

.alert-success { background: var(--ok-bg);   color: var(--ok);   border-color: #c6e5d4; }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: #eeddad; }
.alert-danger  { background: var(--bad-bg);  color: var(--bad);  border-color: #f2ccc5; }
.alert-info    { background: var(--info-bg); color: var(--info); border-color: #ccd9f0; }

/* ---------- login ---------- */

.login-hero {
    position: relative;
    min-height: calc(100vh - 3.5rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 9vh;
    overflow: hidden;
}

.login-hero::before, .login-hero::after {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34rem;
    line-height: 1;
    color: var(--orange);
    opacity: .07;
    position: absolute;
    top: 50%;
    transform: translateY(-55%);
    pointer-events: none;
    user-select: none;
}

.login-hero::before { content: "{"; left: 4vw; }
.login-hero::after  { content: "}"; right: 4vw; }

.login-hero .card {
    width: 25rem;
    z-index: 1;
    animation: seula-rise .45s ease-out backwards;
}

.login-hero .card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
}

/* ---------- misc ---------- */

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }
.invalid { outline: 1px solid var(--bad); }
.validation-message { color: var(--bad); }

.blazor-error-boundary {
    background: var(--bad);
    padding: 1rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- relation list links ---------- */

.relation-link {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.relation-link:hover {
    color: var(--orange-deep);
    border-bottom-color: var(--orange);
}