/* Everything Tailwind's utilities do not cover: the reusable component classes,
   the background texture, and the scroll-reveal states.
   Written as plain CSS rather than @apply so there is no build step — mhttp
   serves this file as it is. */

.bg-grid {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, .045) 1px, transparent 1px);
    background-size: 56px 56px;
}

/* ---------------------------------------------------------------- controls */

.navlink {
    padding: .45rem .7rem;
    border-radius: .6rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgb(71 85 105);
    transition: color .18s, background-color .18s;
}
.navlink:hover { color: rgb(11 126 109); background: rgb(234 251 247); }

/* The admin sub-nav. Quieter than .navlink on purpose — it is a second level,
   and two rows of equally loud links read as one confusing row. */
.subnav {
    padding: .3rem .65rem;
    border-radius: .5rem;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    color: rgb(100 116 139);
    transition: color .18s, background-color .18s;
}
.subnav:hover { color: rgb(11 126 109); background: rgb(255 255 255); }
.subnav-on {
    color: rgb(11 126 109);
    background: #fff;
    font-weight: 650;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.05rem; border-radius: .7rem;
    font-size: .875rem; font-weight: 650; color: #fff;
    background-image: linear-gradient(135deg, #12A78F, #5B3FE0);
    box-shadow: 0 8px 20px -8px rgba(15, 158, 136, .55);
    transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, filter .18s;
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 14px 28px -10px rgba(15, 158, 136, .6);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: .7rem;
    font-size: .875rem; font-weight: 550; color: rgb(51 65 85);
    border: 1px solid rgb(226 232 240);
    background: #fff;
    transition: border-color .18s, color .18s, transform .18s;
}
.btn-ghost:hover { color: rgb(11 126 109); border-color: rgb(157 234 219); transform: translateY(-1px); }

.btn-sm { padding: .3rem .65rem; font-size: .78rem; border-radius: .55rem; }

/* ------------------------------------------------------------------ surfaces */

.card {
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / .9);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 28px -18px rgba(15, 23, 42, .18);
    transition: box-shadow .25s, transform .25s cubic-bezier(.22,1,.36,1), border-color .25s;
}
.card-hover:hover {
    transform: translateY(-3px);
    border-color: rgb(157 234 219);
    box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 44px -24px rgba(15, 158, 136, .45);
}

.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 650; letter-spacing: .02em;
}
.chip-ok   { background: rgb(234 251 247); color: rgb(11 126 109); }
.chip-warn { background: rgb(254 242 232); color: rgb(154 68 20); }
.chip-bad  { background: rgb(254 238 240); color: rgb(159 30 53); }
.chip-mute { background: rgb(241 245 249); color: rgb(100 116 139); }

.field {
    width: 100%; padding: .65rem .85rem;
    border-radius: .7rem; border: 1px solid rgb(226 232 240);
    background: #fff; font-size: .9rem; color: rgb(15 23 42);
    transition: border-color .18s, box-shadow .18s;
}
.field:focus {
    outline: none; border-color: rgb(47 191 168);
    box-shadow: 0 0 0 4px rgba(47, 191, 168, .16);
}
.label { display: block; font-size: .78rem; font-weight: 600; color: rgb(71 85 105); margin-bottom: .35rem; }

/* --------------------------------------------------------------- animation */

/* Elements start hidden and are revealed as they scroll in. Kept in CSS rather
   than inline styles so a browser with JS off still shows everything: the
   observer adds .in, and no-js falls back to the .in state via the class on
   <html> that app.js never gets to remove. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.no-js .reveal { opacity: 1; transform: none; }

/* Stagger children so a row of cards arrives in sequence rather than as a slab. */
.reveal.d1 { transition-delay: .06s; }
.reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; }
.reveal.d4 { transition-delay: .24s; }

/* Leaving the page: main slides out before the browser navigates, which turns
   a hard cut into a movement. */
#page.leaving { opacity: 0; transform: translateY(-8px); transition: opacity .18s ease-in, transform .18s ease-in; }

@media (prefers-reduced-motion: reduce) {
    /* Motion is decoration here; anyone who has asked for less should get the
       page immediately and completely. */
    .reveal, .reveal.in, #page, #page.leaving {
        opacity: 1 !important; transform: none !important; transition: none !important;
        animation: none !important;
    }
}

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

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th {
    text-align: left; padding: .6rem 1rem; font-size: .7rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: rgb(100 116 139);
    border-bottom: 1px solid rgb(226 232 240);
}
.tbl td { padding: .75rem 1rem; border-bottom: 1px solid rgb(241 245 249); font-size: .875rem; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: rgb(248 250 252); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }

/* ----------------------------------------------------- the admin app shell */

/* The two-pane admin chrome. admin_base.html is a standalone, full-width app
   layout — no marketing max-w wrapper — so the shell spans the whole viewport:
   a fixed 240px sidebar rail and a body that takes the rest and scrolls. It
   lives only in admin_base.html, so none of this can reach a public page. */
.admin-shell {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 61px);  /* fills the viewport below the top bar */
}
.admin-side {
    flex: 0 0 240px;
    width: 240px;
    align-self: stretch;
    padding: 14px 10px 28px;
    border-right: 1px solid rgb(226 232 240);
    background: #f8fafc;
    position: sticky;
    top: 61px;                       /* clears the sticky admin top bar */
    max-height: calc(100vh - 61px);
    overflow: auto;
}
.admin-body { flex: 1 1 auto; min-width: 0; }

.admin-viewsite {
    display: inline-flex; align-items: center; gap: .3rem;
    margin: 2px 8px 10px; padding: .3rem .6rem;
    font-size: .78rem; color: rgb(71 85 105);
    border: 1px solid rgb(226 232 240); border-radius: 999px; background: #fff;
    transition: color .18s, border-color .18s;
}
.admin-viewsite:hover { color: rgb(11 126 109); border-color: rgb(157 234 219); }

.admin-grp { margin-bottom: 4px; }
.admin-grp-hd {
    display: flex; align-items: center; gap: 9px; width: 100%;
    border: 0; background: none; cursor: pointer;
    padding: 8px 10px; border-radius: .55rem;
    color: rgb(71 85 105); font-weight: 650; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .03em;
    font-family: inherit;
}
.admin-grp-hd:hover { background: rgb(238 242 246); }
.admin-grp-hd .ic { width: 17px; height: 17px; color: rgb(148 163 184); flex: 0 0 auto; }
.admin-grp-hd span { margin-right: auto; text-align: left; }
.admin-grp-hd .car { width: 15px; height: 15px; color: rgb(148 163 184); transition: transform .15s; }
.admin-grp.open .admin-grp-hd .car { transform: rotate(90deg); }

.admin-grp-items { display: none; padding: 2px 0 6px 8px; }
.admin-grp.open .admin-grp-items { display: block; }

.admin-tab {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; margin: 1px 0; border-radius: .5rem;
    color: rgb(71 85 105); font-size: .8125rem; font-weight: 500;
    border: 1px solid transparent;
    transition: color .15s, background-color .15s, border-color .15s;
}
.admin-tab:hover { background: rgb(238 242 246); color: rgb(15 23 42); }
.admin-tab .dot { width: 5px; height: 5px; border-radius: 50%; background: rgb(148 163 184); flex: 0 0 auto; }
/* The active tab reuses the teal .subnav-on look, so the two selection styles
   read as one system rather than two. */
.admin-tab-on {
    background: #fff; color: rgb(11 126 109); font-weight: 650;
    border-color: rgb(215 238 233);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.admin-tab-on .dot { background: rgb(18 167 143); }

.admin-badge {
    margin-left: auto; background: rgb(254 226 226); color: rgb(185 28 28);
    border-radius: 999px; font-size: .66rem; font-weight: 700; padding: 1px 7px;
}

/* ------------------------------------------------------- the overview dashboard */

.admin-main { padding: 26px 28px 40px; }
.admin-crumb { font-size: .75rem; color: rgb(148 163 184); margin-bottom: 3px; }
.admin-h1 { font-size: 1.35rem; font-weight: 750; letter-spacing: -.01em; color: rgb(15 23 42); margin: 0 0 4px; }
.admin-sub { color: rgb(71 85 105); font-size: .84rem; margin: 0 0 20px; }

.tiles {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.tile { border: 1px solid rgb(226 232 240); border-radius: .8rem; padding: 14px; background: #fff; }
.tile .k { font-size: .68rem; color: rgb(148 163 184); text-transform: uppercase; letter-spacing: .03em; }
.tile .v { font-size: 1.4rem; font-weight: 750; margin-top: 5px; letter-spacing: -.01em; color: rgb(15 23 42); }
.tile .v small { font-size: .78rem; color: rgb(148 163 184); font-weight: 600; }
.tile.alert .v { color: rgb(185 28 28); }
.tile.good .v { color: rgb(11 126 109); }

.panel-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.panel { border: 1px solid rgb(226 232 240); border-radius: .8rem; padding: 15px 16px; background: #fff; }
.panel h3 { margin: 0 0 10px; font-size: .82rem; font-weight: 700; color: rgb(15 23 42); }

.attn { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgb(241 245 249); }
.attn:first-of-type { border-top: 0; }
.attn .bd { font-size: .8rem; color: rgb(71 85 105); line-height: 1.45; }
.attn .bd b { color: rgb(15 23 42); font-weight: 650; }
.attn .chip { margin-left: auto; flex: 0 0 auto; }
.attn .ver {
    font-family: ui-monospace, Consolas, monospace; font-size: .72rem;
    color: rgb(11 126 109); background: rgb(234 251 247);
    border-radius: .4rem; padding: 2px 7px; height: fit-content; white-space: nowrap; flex: 0 0 auto;
}

/* Under ~880px the sidebar stops being a rail and sits as a collapsible strip
   above the page, so the admin section stays usable on a phone. */
@media (max-width: 880px) {
    .admin-shell { flex-direction: column; }
    .admin-side {
        position: static; width: auto; flex-basis: auto; max-height: none;
        border-right: 0; border-bottom: 1px solid rgb(226 232 240);
    }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel-grid { grid-template-columns: 1fr; }
    .admin-main { padding: 20px 18px 32px; }
}

/* ------------------------------------------- the .bot source tab and its tabs */

.tab-btn {
    padding: .55rem 1rem; font-size: .875rem; font-weight: 600; color: rgb(100 116 139);
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: rgb(51 65 85); }
.tab-btn.tab-on { color: rgb(29 78 216); border-bottom-color: rgb(29 78 216); }

/* overflow-x on the block itself, never on the page: a script with one long
   line must scroll inside its own box rather than widening the whole listing. */
.bot-src {
    font-family: ui-monospace, Consolas, monospace;
    overflow-x: auto; white-space: pre; tab-size: 4;
    color: rgb(51 65 85);
}

/* Every one of these classes is decided by Highlight.java from the real lexer's
   tokens. There is no keyword list here or there — adding a colour means adding
   a case in that file, not a word to a list in this one. */
.bot-kw  { color: rgb(126 34 206); font-weight: 600; }   /* reserved words */
.bot-cmd { color: rgb(29 78 216); }                       /* a bound command */
.bot-hdr { color: rgb(180 83 9); font-weight: 600; }      /* script/author/... */
.bot-id  { color: rgb(51 65 85); }                        /* everything named */
.bot-lit { color: rgb(4 120 87); }                        /* numbers, strings */
.bot-op  { color: rgb(100 116 139); }                     /* punctuation */
.bot-cm  { color: rgb(148 163 184); font-style: italic; } /* # to end of line */

/* ------------------------------------------------------------------ BBCode --
   The classes BBCode.render emits. This is the single copy: forum topics,
   member profiles and the updates changelog all show rendered BBCode and all
   load this file through their base templates — style a tag here, everywhere
   follows. The click-to-reveal for .fbb-spoiler lives in app.js. */
.fbb-body { word-break: break-word; }
.fbb-body strong { color:#1e293b; }
.fbb-code { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:10px 12px; font-family:ui-monospace,monospace; font-size:13px; overflow-x:auto; white-space:pre-wrap; margin:8px 0; color:#334155; }
.fbb-quote { border-left:3px solid #63D8C4; background:#EAFBF7; border-radius:0 8px 8px 0; padding:8px 12px; margin:8px 0; color:#475569; }
.fbb-quote cite { display:block; font-size:11px; font-weight:700; color:#0B7E6D; font-style:normal; margin-bottom:2px; }
.fbb-img { max-width:min(100%,480px); border-radius:10px; margin:8px 0; }
.fbb-link { color:#0F9E88; text-decoration:underline; }
.fbb-spoiler { background:#334155; color:transparent; border-radius:4px; padding:0 4px; cursor:pointer; transition:color .12s,background .12s; }
.fbb-spoiler.on, .fbb-spoiler:focus { background:#e2e8f0; color:inherit; outline:none; }
.fbb-hr { border:0; border-top:1px solid #e2e8f0; margin:10px 0; }
.fbb-h { font-weight:700; color:#0B5148; margin:8px 0 2px; font-size:15px; }
.fbb-list { list-style:disc; margin:6px 0 6px 20px; }
.fbb-list li { margin:2px 0; }

/* Java inside [code] blocks — the Eclipse palette, because it is the one every
   Java programmer already reads all day. The classes come from JavaHighlight,
   which escapes every slice before wrapping it. .bot blocks reuse the bot-*
   classes above, decided by the engine's real lexer via Highlight.java. */
.fbb-code .cj-kw  { color:#7f0055; font-weight:700; }
.fbb-code .cj-str { color:#2a00ff; }
.fbb-code .cj-cmt { color:#3f7f5f; font-style:italic; }
.fbb-code .cj-doc { color:#3f5fbf; font-style:italic; }
.fbb-code .cj-ann { color:#646464; }