/* =====================================================================
   TopsOJ — Admin / Organization / Tournament management pages
   Shared utility layer, loaded per-page via {% block preload %}.
   Uses the global tokens defined in style.css (light + .dark parity).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Page header
   --------------------------------------------------------------------- */
.ao-head {
    margin-bottom: var(--sp-6);
}

.ao-head h1 {
    font-size: var(--fs-200);
    font-weight: var(--fw-display);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: var(--sp-1);
    color: var(--text-strong);
}

/* Eyebrow + rule combo that opens management page headers */
.ao-head .con-eyebrow {
    margin-bottom: var(--sp-2);
}

.ao-head .con-rule {
    margin: var(--sp-4) 0 0;
}

.ao-head .ao-sub {
    color: var(--text-muted);
    margin: 0;
    max-width: 70ch;
}

.dark .ao-head .ao-sub {
    color: var(--dark-muted);
}

/* Action rows under page titles */
.ao-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0;
}

/* ---------------------------------------------------------------------
   Brand outline button — quiet default action for management pages
   --------------------------------------------------------------------- */
.btn-outline-brand {
    color: var(--brand);
    background-color: transparent;
    border: var(--border-thick) solid var(--brand);
    font-weight: 700;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand);
}

.btn-outline-brand:active {
    color: #fff !important;
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
}

.btn-outline-brand:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.dark .btn-outline-brand {
    color: var(--dark-link);
    border-color: rgba(123, 215, 255, 0.45);
}

.dark .btn-outline-brand:hover,
.dark .btn-outline-brand:focus {
    color: #04111a;
    background-color: var(--dark-link);
    border-color: var(--dark-link);
}

/* ---------------------------------------------------------------------
   Table card: bordered, dense, scannable
   --------------------------------------------------------------------- */
.ao-table-card {
    border: var(--border-thick) solid var(--structure);
    background: var(--surface);
    box-shadow: var(--shadow-hard);
    overflow: hidden;
}

.ao-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ao-table-card table {
    margin: 0;
}

.ao-table-card thead.table-dark th {
    background-color: var(--brand);
    color: #fff;
    border-bottom: none;
    border-color: rgba(255, 255, 255, 0.08);
    font-size: var(--fs-75);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}

.ao-table-card tbody td {
    vertical-align: middle;
    font-size: var(--fs-875);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.dark .ao-table-card {
    background: var(--dark-surface);
    border-color: var(--structure);
}

.dark .ao-table-card thead.table-dark th {
    background-color: var(--dark-surface-2);
    color: var(--dark-text);
    border-color: var(--dark-border);
}

/* Right-aligned numerics with tabular figures */
.ao-table-card td.num,
.ao-table-card th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Empty-state row */
.ao-empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--sp-10) var(--sp-4) !important;
}

.dark .ao-empty {
    color: var(--dark-muted) !important;
}

/* ---------------------------------------------------------------------
   Split layout (table + sticky filter sidebar); pairs with .flex-desktop
   --------------------------------------------------------------------- */
.ao-split-main {
    flex: 3;
    min-width: 0;
}

.ao-split-side {
    flex: 1;
    min-width: 240px;
}

@media screen and (min-width: 991px) {
    .ao-split-side {
        margin-left: var(--sp-4);
    }
}

/* Filter / search side card */
.ao-side-card h3 {
    font-size: var(--fs-125);
    font-weight: 700;
    margin-bottom: var(--sp-3);
}

.ao-side-card .btn {
    width: 100%;
}

/* ---------------------------------------------------------------------
   Admin console / org dashboard tiles
   --------------------------------------------------------------------- */
.ao-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    margin-bottom: var(--sp-6);
}

.ao-tile {
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ao-tile:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--structure);
}

.ao-tile-title {
    font-size: var(--fs-125);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text-strong);
}

.ao-tile-desc {
    color: var(--text-muted);
    font-size: var(--fs-875);
    margin: 0 0 var(--sp-1);
}

.ao-tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: auto;
}

.ao-tile-group-label {
    font-size: var(--fs-75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: var(--sp-2) 0 0;
}

.dark .ao-tile {
    background: var(--dark-surface);
    border-color: var(--structure);
    border-left-color: var(--brand);
}

.dark .ao-tile:hover {
    box-shadow: 7px 7px 0 var(--structure);
}

.dark .ao-tile-title {
    color: var(--dark-text);
}

.dark .ao-tile-desc,
.dark .ao-tile-group-label {
    color: var(--dark-muted);
}

/* ---------------------------------------------------------------------
   Markdown editor panes (create/edit announcement, org, problem, homepage)
   --------------------------------------------------------------------- */
.md-editor-row {
    margin-top: var(--sp-3);
}

.md-pane-title {
    font-size: var(--fs-75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.dark .md-pane-title {
    color: var(--dark-muted) !important;
}

.md-pane-body {
    border: var(--border-thin) dashed var(--structure);
    background: var(--surface-2);
    padding: var(--sp-3);
    min-height: 56px;
    overflow-x: auto;
}

.dark .md-pane-body {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.ao-form {
    max-width: 760px;
}

.ao-form-narrow {
    max-width: 480px;
}

.ao-form .form-check,
.ao-form .ao-check {
    margin: var(--sp-3) 0;
}

.ao-form-note {
    color: var(--text-muted);
    font-size: var(--fs-875);
}

.dark .ao-form-note {
    color: var(--dark-muted);
}

/* Inline warning text (irreversible actions etc.) */
.ao-danger-text {
    color: #b02a37 !important;
    font-weight: 600;
}

.dark .ao-danger-text {
    color: var(--dark-danger) !important;
}

/* Danger zone panel — square, hard ink frame with a hazard accent edge */
.ao-danger-zone {
    border: var(--border-thick) solid #b02a37;
    border-left: var(--border-bold) solid #b02a37;
    box-shadow: var(--shadow-hard);
    background: rgba(220, 53, 69, 0.05);
    padding: var(--sp-4);
    margin-top: var(--sp-4);
}

.ao-danger-zone .ao-danger-title {
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b02a37;
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-1125);
}

.dark .ao-danger-zone {
    border-color: var(--dark-danger);
    background: rgba(240, 123, 135, 0.08);
}

.dark .ao-danger-zone .ao-danger-title {
    color: var(--dark-danger);
}

/* ---------------------------------------------------------------------
   Status chips used as buttons (admin submissions viewer)
   --------------------------------------------------------------------- */
button.status-chip {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

button.status-chip:hover {
    filter: brightness(0.96);
}

button.status-chip:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
    outline: none;
}

/* Banned-user treatment (softer than the legacy global red) */
.ao-table-card .user-ban {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #b02a37;
}

.dark .ao-table-card .user-ban {
    background-color: rgba(240, 123, 135, 0.12) !important;
    color: var(--dark-danger);
}

/* Row of icon actions inside tables */
.ao-icon-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
}

.ao-icon-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: background-color 0.15s ease;
}

.ao-icon-actions a:hover,
.ao-icon-actions a:focus-visible {
    background-color: rgba(116, 31, 34, 0.08);
}

.dark .ao-icon-actions a:hover,
.dark .ao-icon-actions a:focus-visible {
    background-color: rgba(123, 215, 255, 0.12);
}

/* ---------------------------------------------------------------------
   Organizations index: segmented Public/Private tabs
   --------------------------------------------------------------------- */
.org-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    padding: 0;
}

.org-tabs .nav-item {
    list-style: none;
}

.org-tabs .nav-item + .nav-item .nav-link {
    border-left: var(--border-thick) solid var(--structure);
}

.org-tabs .nav-link,
.org-tabs a.tab {
    display: inline-block;
    border: 0;
    padding: 8px 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted) !important;
    text-align: center;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.org-tabs .nav-link:hover,
.org-tabs .nav-link:focus {
    color: var(--brand) !important;
    background-color: rgba(116, 31, 34, 0.08);
}

.org-tabs .nav-link.active-tab,
.org-tabs .nav-link.active-tab:hover {
    background-color: var(--brand);
    color: #fff !important;
}

.dark .org-tabs {
    background: var(--dark-surface);
    border-color: var(--structure);
}

.dark .org-tabs .nav-item + .nav-item .nav-link {
    border-left-color: var(--structure);
}

.dark .org-tabs .nav-link {
    color: var(--dark-muted) !important;
}

.dark .org-tabs .nav-link:hover,
.dark .org-tabs .nav-link:focus {
    color: var(--dark-text) !important;
    background-color: rgba(123, 215, 255, 0.12);
}

.dark .org-tabs .nav-link.active-tab,
.dark .org-tabs .nav-link.active-tab:hover {
    background-color: var(--brand);
    color: #fff !important;
}

/* Header row that holds the H1 + the tabs */
.ao-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.ao-head-row h1 {
    margin: 0;
    font-size: var(--fs-200);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------
   Organization page: sidebar panels + meta list
   --------------------------------------------------------------------- */
.org-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    align-items: flex-start;
}

.org-main {
    flex: 3 1 420px;
    min-width: 0;
    word-break: break-word;
}

.org-side {
    flex: 1.5 1 280px;
    min-width: 260px;
}

.org-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
    margin: var(--sp-2) 0 var(--sp-4);
    padding: 0;
    list-style: none;
}

.org-meta .org-meta-label {
    display: block;
    font-size: var(--fs-75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.dark .org-meta .org-meta-label {
    color: var(--dark-muted) !important;
}

.org-meta .org-meta-value {
    font-size: var(--fs-100);
    font-weight: 600;
}

.org-side-panel {
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.org-side-panel h3 {
    font-size: var(--fs-1125);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--sp-3);
}

.org-side-panel .ao-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.dark .org-side-panel {
    background: var(--dark-surface);
    border-color: var(--structure);
}

/* Section headings inside long management pages */
.ao-section-title {
    font-size: var(--fs-125);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: var(--sp-6) 0 var(--sp-3);
}

/* Subtle informational note (replaces gradient banners) */
.ao-note {
    border: var(--border-thin) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
    background: var(--rose-50);
    color: var(--text-strong);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-3) 0;
    font-size: var(--fs-875);
}

.dark .ao-note {
    background: var(--dark-surface-2);
    border-color: var(--structure);
    border-left-color: var(--brand);
    color: var(--dark-text);
}

/* ---------------------------------------------------------------------
   Tournament: team / multiplier cards
   --------------------------------------------------------------------- */
.ao-team-card {
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ao-team-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--structure);
}

.dark .ao-team-card {
    border-color: var(--structure);
}

.dark .ao-team-card:hover {
    box-shadow: 7px 7px 0 var(--structure);
}

/* Trash icons in list-group rows */
.ao-trash-icon {
    height: 16px;
    width: 16px;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   info/team.html — Constructivist people grid
   --------------------------------------------------------------------- */
.team-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin: var(--sp-6) 0;
}

.team-card {
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.team-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--structure);
}

.team-card .team-role {
    margin-top: auto;
}

.team-card .team-name {
    font-size: var(--fs-125);
    font-weight: var(--fw-display);
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text-strong);
}

.dark .team-card {
    background: var(--dark-surface);
    border-color: var(--structure);
}

.dark .team-card:hover {
    box-shadow: 7px 7px 0 var(--structure);
}

.dark .team-card .team-name {
    color: var(--dark-text);
}

/* ---------------------------------------------------------------------
   info/changelog.html — square release blocks
   --------------------------------------------------------------------- */
.changelog-entry {
    border-left: var(--border-bold) solid var(--brand);
    padding-left: var(--sp-4);
    margin: var(--sp-4) 0;
}

.changelog-version {
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: var(--fs-150);
    color: var(--text-strong);
    margin: 0 0 var(--sp-1);
}

.changelog-date {
    font-size: var(--fs-75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.dark .changelog-version {
    color: var(--dark-text);
}

.dark .changelog-date {
    color: var(--dark-muted);
}

/* ---------------------------------------------------------------------
   Long-form legal/info pages — readable measure
   --------------------------------------------------------------------- */
.ao-prose {
    max-width: 70ch;
}

.ao-prose h1 {
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ao-tile,
    .ao-team-card,
    .team-card,
    .btn-outline-brand,
    .org-tabs .nav-link,
    .ao-icon-actions a,
    button.status-chip {
        transition: none !important;
        animation: none !important;
    }

    .ao-tile:hover,
    .ao-team-card:hover,
    .team-card:hover {
        transform: none;
    }
}