/************************************************************************************************
 *
 * Project:     Harmonia
 * File:        /public_html/assets/css/master.css
 * Version:     v1.0.7
 * Purpose:     Sitewide base styles: reset, CSS custom properties, typography, and the shared
 *              .hx-container/.hx-panel/.hx-btn/.hx-badge/.hx-table/.hx-table-wrapper/.hx-brand/
 *              .hx-avatar/.hx-account-menu/.hx-tabs primitives used by both the public and admin
 *              layouts.
 *
 * Notes:
 * - Loaded via the @stylesheets Blade directive (App\Support\AssetManifest), which emits a
 *   separate parallel-loadable <link> tag per module — deliberately not using @import, which
 *   would force serial loading instead of parallel.
 * - .hx-brand__logo shrinks under a 480px breakpoint so the header logo plus its nav buttons have
 *   a realistic chance of fitting one row on a phone before wrapping is even needed (mobile audit,
 *   2026-09-17) — see public-layout.css/admin-layout.css for the row-level flex-wrap that's the
 *   actual overflow fix; this is a size assist, not the fix itself.
 * - Color tokens implement the Harmonia Dark Theme Color Palette v1.0 (brand spec, 2026-09-17;
 *   see project memory) as the site's one and only theme, not a prefers-color-scheme fallback —
 *   the brand's own usage principle is "Black is the environment," not "black is an option."
 *   Token values are traceable 1:1 to the spec's named swatches (see comments below); anything
 *   not named in the spec (e.g. --hx-radius) is this codebase's own addition.
 *
 ************************************************************************************************/

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* Surfaces — Black / Near Black / Charcoal / Raised Charcoal / Graphite */
    --hx-color-bg: #000000;
    --hx-color-panel-bg: #0b0b0d;
    --hx-color-surface-secondary: #151519;
    --hx-color-surface-raised: #1c1c21;
    --hx-color-surface-menu: #24242a;

    /* Borders — Subtle Border / Standard Border */
    --hx-color-border: #303038;
    --hx-color-border-subtle: #202026;

    /* Typography — Primary / Secondary / Muted / Disabled Text, Text on Gold */
    --hx-color-fg: #f7f4ef;
    --hx-color-fg-secondary: #c7c3bc;
    --hx-color-muted: #918e89;
    --hx-color-fg-disabled: #66646a;
    --hx-color-fg-on-gold: #111113;

    /* Interactive — Champagne Gold is the primary brand color */
    --hx-color-primary: #e5b37a;
    --hx-color-primary-hover: #f5cf9c;
    --hx-color-primary-active: #d8a16d;
    --hx-color-primary-fg: #111113;
    --hx-color-link: #e5b37a;
    --hx-color-link-hover: #f5cf9c;
    --hx-color-focus: #7657e8;

    /* Functional status — distinct from brand colors per spec */
    --hx-color-success: #4fc38a;
    --hx-color-warning: #e8b65c;
    --hx-color-danger: #e56b73;
    --hx-color-info: #55a9e8;

    /* Spectral accents — connection/discovery/creativity/identity/activity. Restrained use only:
       gradients, halos, borders, highlights, selected states — never large solid-color areas. */
    --hx-color-spectral-cyan: #32c8f4;
    --hx-color-spectral-blue: #4e78f5;
    --hx-color-spectral-violet: #7657e8;
    --hx-color-spectral-purple: #a85dd7;
    --hx-color-spectral-rose: #d66daf;
    --hx-color-spectral-warm: #f2b477;

    --hx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --hx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
    --hx-radius: 6px;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--hx-color-bg);
    color: var(--hx-color-fg);
    font-family: var(--hx-font-sans);
    line-height: 1.5;
}

a {
    color: var(--hx-color-link);
}

a:hover {
    color: var(--hx-color-link-hover);
}

.hx-container {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.hx-panel {
    background: var(--hx-color-panel-bg);
    border: 1px solid var(--hx-color-border);
    border-radius: var(--hx-radius);
    padding: 1.25rem;
    margin-block: 1.25rem;
}

.hx-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hx-btn {
    display: inline-block;
    font: inherit;
    padding: 0.5rem 0.9rem;
    border-radius: var(--hx-radius);
    border: 1px solid var(--hx-color-border);
    background: var(--hx-color-bg);
    color: var(--hx-color-fg);
    cursor: pointer;
    text-decoration: none;
}

.hx-btn--primary {
    background: var(--hx-color-primary);
    border-color: var(--hx-color-primary);
    color: var(--hx-color-primary-fg);
}

.hx-btn--danger {
    background: var(--hx-color-danger);
    border-color: var(--hx-color-danger);
    color: var(--hx-color-fg);
}

.hx-btn--ghost {
    background: transparent;
}

.hx-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hx-badge {
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--hx-color-border);
    color: var(--hx-color-muted);
}

.hx-badge--success {
    color: var(--hx-color-success);
    border-color: var(--hx-color-success);
}

.hx-badge--danger {
    color: var(--hx-color-danger);
    border-color: var(--hx-color-danger);
}

.hx-badge--warning {
    color: var(--hx-color-warning);
    border-color: var(--hx-color-warning);
}

.hx-badge--info {
    color: var(--hx-color-info);
    border-color: var(--hx-color-info);
}

.hx-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--hx-color-border);
    margin-block-end: 1.25rem;
}

.hx-tabs__tab {
    font: inherit;
    padding: 0.6rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--hx-color-muted);
    cursor: pointer;
}

.hx-tabs__tab:hover {
    color: var(--hx-color-fg);
}

.hx-tabs__tab--active {
    color: var(--hx-color-fg);
    border-bottom-color: var(--hx-color-primary);
    font-weight: 600;
}

.hx-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.hx-table {
    width: 100%;
    border-collapse: collapse;
}

.hx-table th,
.hx-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--hx-color-border);
    font-size: 0.9rem;
}

.hx-muted {
    color: var(--hx-color-muted);
}

.hx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hx-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.hx-brand__logo {
    display: block;
    height: 75px;
    width: auto;
}

@media (max-width: 480px) {
    .hx-brand__logo {
        height: 48px;
    }
}

.hx-brand__text {
    display: none;
    font-weight: 700;
    font-size: 1.1rem;
}

.hx-brand--fallback .hx-brand__logo {
    display: none;
}

.hx-brand--fallback .hx-brand__text {
    display: inline;
}

.hx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--hx-color-primary);
    color: var(--hx-color-primary-fg);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.hx-avatar--lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
}

.hx-account-menu {
    position: relative;
}

.hx-account-menu__trigger {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.hx-account-menu__panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 240px;
    max-width: calc(100vw - 2rem);
    background: var(--hx-color-surface-menu);
    border: 1px solid var(--hx-color-border);
    border-radius: var(--hx-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    z-index: 20;
}

.hx-account-menu.is-open .hx-account-menu__panel {
    display: block;
}

.hx-account-menu__profile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hx-account-menu__name {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
}

.hx-account-menu__email {
    margin: 0.1rem 0 0.35rem;
    color: var(--hx-color-muted);
    font-size: 0.8rem;
    word-break: break-all;
}

.hx-account-menu__divider {
    border-top: 1px solid var(--hx-color-border);
    margin-block: 0.65rem;
}

.hx-account-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font: inherit;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: var(--hx-radius);
    background: none;
    color: var(--hx-color-fg);
    cursor: pointer;
}

.hx-account-menu__item:hover {
    background: var(--hx-color-surface-raised);
}