/* Font, header and footer come from FireCad.Brand (brand.css). */

:root { --fg: #14171f; --muted: #4a5360; --accent: #b8430a; --cta: #c24409; --cta-dark: #a63a05; --navy: #0c1a2c; --navy-2: #12284a; --border: #d9dfe5; --bg: #eff2f5; }
* { box-sizing: border-box; }
html { font-family: var(--fc-font); color: var(--fg); line-height: 1.6; background: var(--bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); }
h1, h2, h3 { letter-spacing: -0.01em; line-height: 1.15; color: var(--fg); }
h1 { font-size: 1.9rem; margin-top: 0; }

/* the page card */
main.wrap { width: 100%; max-width: 30rem; margin: 2.5rem auto 3rem; padding: 2rem 2rem 2.2rem; background: #fff; border: 1px solid var(--border); border-top: 4px solid #f26522; border-radius: 8px; box-shadow: 0 18px 44px rgb(12 26 44 / 0.10); }
main.wrap:has(.login.wide) { max-width: 52rem; }

.login label { display: block; margin-top: 1rem; font-weight: 600; }
.login input[type=email], .login input[type=password], .login input[type=text] { width: 100%; padding: .65rem .75rem; margin-top: .25rem; border: 1.5px solid #8b95a1; border-radius: 4px; font: inherit; background: #fff; color: var(--fg); }
.login input:focus { outline: 3px solid #1d5f96; outline-offset: 1px; border-color: #1d5f96; }
.login .check { font-weight: 400; }
.login button { margin-top: 1.25rem; padding: .75rem 1.5rem; border: 0; border-radius: 4px; background: var(--cta); color: #fff; font: inherit; font-weight: 700; cursor: pointer; width: 100%; }
.login button:hover { background: var(--cta-dark); }
.error, .validation-message { color: #b00020; }
.login .or { text-align: center; color: var(--muted); margin: 1.5rem 0 .5rem; }
.login a.provider { display: block; margin-top: .5rem; padding: .65rem; border: 1.5px solid #8b95a1; border-radius: 4px; text-align: center; text-decoration: none; color: var(--fg); font-weight: 600; }
.login a.provider:hover { background: #f1f4f7; }
.login .more { margin-top: 1.5rem; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.details dt { font-weight: 600; } .details dd { margin: 0; }
.sites { padding-left: 1.2rem; }
.devices { list-style: none; padding: 0; }
.devices li { border: 1px solid var(--border); border-radius: 6px; padding: .75rem; margin-top: .6rem; }
.muted { color: var(--muted); font-size: .9rem; }
form.inline { display: inline; margin-left: .5rem; } form.inline button { margin-top: .4rem; padding: .3rem .8rem; width: auto; }
.details dd form.inline { margin-left: .5rem; }

/* licences and orders */
.login.wide { max-width: none; }
.licence { border: 1px solid var(--border); border-left: 4px solid #f26522; border-radius: 6px; padding: .25rem 1.1rem 1rem; margin: 1rem 0; background: #f8f9fb; }
.licence h2 { margin-bottom: .25rem; }
.expired { color: #b00020; }
.notice { background: #e8f3ec; border-radius: 6px; padding: .6rem .8rem; }
.orders { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.orders th, .orders td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--border); }
.orders th { font-size: .85rem; color: var(--muted); border-bottom: 2px solid var(--fg); }
.devices .muted { font-size: .9rem; }
.offline { margin-top: .9rem; }
.offline summary { cursor: pointer; font-weight: 600; }
.offline form { display: grid; gap: .5rem; max-width: 32rem; }
.offline label { display: grid; gap: .2rem; }
.offline .muted { font-size: .9rem; }
.licence .download { font-weight: 600; }
.search { display: flex; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.search label { flex: 1; display: grid; gap: .2rem; }
.login .search button { width: auto; margin-top: 0; }
.orders.admin td { vertical-align: top; }
.refund { margin-top: .4rem; display: grid; gap: .3rem; }
.login .refund button { width: auto; margin-top: 0; padding: .4rem .8rem; }
.login button.small { width: auto; margin: .2rem .3rem 0 0; padding: .35rem .7rem; font-size: .9rem; }
/* Narrow screens: tables scroll inside the card instead of widening the page. */
.orders { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 36rem) {
  main.wrap { margin: 1rem auto 2rem; padding: 1.25rem 1rem 1.5rem; border-radius: 0; border-inline: 0; }
}
h1:focus { outline: none; }   /* Blazor focuses the heading after navigation; no ring for that */