/*
 * BroAdmin - shared stylesheet for every surface on broadmin.hu: the pages of
 * this folder (the editors, rendered by private/website.php around the BroAdmin
 * repo's page cores, and the admin surface) and the login screen
 * (private/auth.php). Linked by app_assets() in private/auth.php.
 *
 * Only what they all share lives here: the palette, the page base and the
 * primitives (buttons, badges, status colours). Page-specific layout stays in
 * the page's own <style> block, which comes after this file and wins.
 */

/* The BroAdmin app's own typeface (BroAdmin repo img/asap*.ttf, uploaded to
   /img/ by its tools/release.ps1). Both files are variable fonts, so one face
   per style covers every weight; the italic one is only fetched if something
   actually renders in italics. */
@font-face {
    font-family: 'Asap';
    src: url('/img/asap.ttf') format('truetype');
    font-weight: 100 200 300 400 500 600 700 800 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Asap';
    src: url('/img/asap-italic.ttf') format('truetype');
    font-weight: 100 200 300 400 500 600 700 800 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg: #12151a;
    --panel: #1a1f27;
    --panel2: #222834;
    --border: #2e3644;
    --text: #dce3ec;
    --muted: #8894a3;
    --accent: #b7e81f;
    --blue: #4da3ff; /* the secondary brand colour: "Meta" in the header */
    --gray: #76777b;
    /* ink for text sitting ON an accent/status coloured surface */
    --on-accent: #12151a;

    /* the seven findmeta statuses: 0 new (white), 1 delete (red), 2 bad (orange),
       3 incomplete (yellow), 4 review (purple), 5 ready (teal), 6 accepted (green) */
    --new: #f2f5f9;
    --del: #e05c5c;
    --bad: #ef8b3c;
    --warn: #e3c93c;
    --review: #a678e8;
    --ready: #2fb3a8;
    --ok: #45c26b;
    --err: var(--del); /* the same red under the name the findmeta/login pages use */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 Asap, "Segoe UI", system-ui, sans-serif;
}

/* form controls default to the UA font, so they have to be told */
input, select, textarea, button { font-family: inherit; }

a { color: var(--accent); }

/* ----------------------------------------------------------------- brand */

/* The name of the application, written by app_brand() in private/auth.php:
   the same line in the page header and on the login screen. */
.brand { font-size: 24px; font-weight: 300; }
.brand a, .brand a:hover { color: inherit; text-decoration: none; }
.brand span { color: var(--accent); }
.brand span.alt { color: var(--blue); }

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

/* Works on <button> and on <a> alike (the header's Kilépés is a link), so the
   selectors are on the class alone and links get told they are not underlined
   text - the pages set a:hover { text-decoration: underline } for real links. */
.btn {
    display: inline-block;
    background: var(--gray); color: #fff; border: 0; border-radius: 6px;
    padding: 8px 14px; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.3;
    text-decoration: none;
}
.btn:hover { background: var(--accent); color: var(--on-accent); }
a.btn, a.btn:hover { text-decoration: none; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.danger { background: #7d2f2f; color: #fff; }
.btn.danger:hover { background: var(--del); color: #fff; }

/* ---------------------------------------------------------------- header */

/*
 * The page header of every surface here, written by app_head() in
 * private/website.php: the brand line, the page navigation, the current page's own
 * tabs and the user block on the right. It lives in this shared file rather
 * than in website.php so that every page carries exactly the same bar.
 *
 * Modelled on the BroAdmin app's own menu (#menu in the BroAdmin repo's
 * style.css): items at nearly the brand's size in the app's typeface, filling
 * the whole height of the bar, with a soft fill sliding in under the pointer
 * instead of an underline. Only the palette is this site's.
 */
header.app-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 56px;
    padding: 0 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

header.app-header .brand { padding-right: 30px; white-space: nowrap; }

/* stretched, so the links inside can fill the bar top to bottom */
header.app-header nav { display: flex; flex-wrap: wrap; align-items: stretch; align-self: stretch; }

/* the pages */
header.app-header nav a {
    display: flex; align-items: center;
    padding: 0 14px;
    color: var(--muted);
    font-size: 18px; font-weight: 350; line-height: 1;
    white-space: nowrap; text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: background .3s, color .3s;
}
header.app-header nav a:hover { background: rgba(255, 255, 255, .07); color: var(--text); text-decoration: none; }
header.app-header nav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* the current page's own tabs, in the same bar one level down: a step smaller
   and a shade quieter than the pages, the open one in the accent colour */
header.app-header nav .sep { align-self: center; width: 1px; height: 24px; margin: 0 10px; background: var(--border); }
header.app-header nav a.sub { font-size: 14px; font-weight: 500; padding: 0 12px; }
header.app-header nav a.sub.active { color: var(--accent); border-bottom-color: var(--accent); }

/* who is logged in, and the way out */
header.app-header .who { padding-right: 14px; }

@media (max-width: 700px) {
    header.app-header { padding: 0 12px; gap: 6px 0; }
    header.app-header .brand { padding-right: 0; }
    header.app-header nav a { font-size: 16px; padding: 0 10px; }
}

/* ------------------------------------------------- status colours, badges */

/* --c is the status colour every status-coloured element picks up */
.s0 { --c: var(--new); }
.s1 { --c: var(--del); }
.s2 { --c: var(--bad); }
.s3 { --c: var(--warn); }
.s4 { --c: var(--review); }
.s5 { --c: var(--ready); }
.s6 { --c: var(--ok); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge.s0, .badge.s1, .badge.s2, .badge.s3, .badge.s4, .badge.s5, .badge.s6 { background: rgba(255,255,255,.08); color: var(--c); }
.badge.on { background: rgba(69,194,107,.15); color: var(--ok); }
.badge.off { background: rgba(136,148,163,.15); color: var(--muted); }

/* --------------------------------------------------------------- helpers */

.spacer { flex: 1; }
.who { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------- findmeta page area */

/* The grid and the record sheet (core.cloud.php / soundform.php, both below
   the header in body.page-findmeta's main.app-main) are shared 1:1 with the
   BroAdmin app, where the page content sits on a plain white background
   (main { background-color: var(--white) } in the app's own style.css) -
   not this site's dark --bg/--text. Scoped to this page only (by the
   app_head() $active class on <body>) so the admin surface, which still
   wants the dark theme, is untouched. */
body.page-findmeta main.app-main {
    background: #FFFFFF;
    color: #283338;
    font-size: 16px;
}