/* public/css/surfaces.css — the surface standard (docs/DESIGN_STANDARD.md)
 *
 * Loaded LAST (after components.css). It decides only four things for every
 * block on the site: background, border, border-radius, box-shadow. Layout
 * (padding, width, grid, alignment) stays in the page CSS.
 *
 *   L0 canvas   page background. Page wrappers and page heads paint nothing.
 *   L1 card     every content block: one colour, one border, one radius.
 *   L2 inset    rows / list items INSIDE a card.
 *   L3 overlay  modals, dropdowns, popovers.
 *   featured    at most one highlighted card per view (cyan border only).
 *   tints       status colours (info/success/warning/danger/neutral).
 *
 * New markup should use the generic classes (.card, .card-inset, .page-head,
 * .alert-*). The long selector lists below map legacy page classes onto the
 * same standard; !important is needed because theme.css used it everywhere.
 */

/* ── L0: page wrappers + page heads paint nothing ───────────────────────── */
.page-head,
.hero-section-home,
.guide-hero,
.tp-hero,
.home-section,
.profile-container,
.matches-container,
.match-detail-container,
.join-container,
.lb-page,
.admin-container,
.rt-wrap,
.footer-content,
.footer-card {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Footer is part of the page (L0): flat columns under one quiet divider. */
.footer { border-top: 1px solid var(--surface-border) !important; background: transparent !important; }
.footer-card { padding-left: 0 !important; padding-right: 0 !important; }

/* Page heads: no coloured band; a quiet divider separates them from content. */
.guide-hero { padding-bottom: 1.5rem; }
.admin-header { border-bottom: 1px solid var(--surface-border) !important; }

/* Generic page head for new pages */
.page-head { margin: 0 0 24px; }
.page-head h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text-primary); }
.page-head p  { margin: 6px 0 0; color: var(--text-secondary); }

/* ── L1: cards ──────────────────────────────────────────────────────────── */
.card,
.arena-card,
.info-card,
.rental-form-card,
.settings-section,
.guide-step,
.guide-card,
.admin-panel,
.stat-card,
.action-card,
.rcon-section,
.activity-table table,
.rentals-table,
.servers-table,
.sp-table-wrap,
.lb-table-wrap,
.mh-stat-strip,
.tp-card,
.tp-info-card,
.join-card,
.sell-server-panel,
.sf-card,
.team-section,
.empty-state,
.stat-box,
.phase-container,
.rental-row,          /* my_rentals: list rows sit straight on the page → L1 */
.tl-hero {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--card-shadow) !important;
}
/* A table that IS the card keeps its rows inside the rounded corners. */
.activity-table table,
.rentals-table,
.servers-table { overflow: hidden; border-collapse: separate; border-spacing: 0; }

/* Interactive cards: same surface, lifted border on hover only. */
.action-card:hover,
.guide-card:hover { border-color: var(--surface-border-strong) !important; }

/* ── Featured: one highlighted card per view (cyan border, same surface) ── */
.card.is-featured,
.arena-card.glow,
.quick-create-bar,
.tp-price-banner,
.team-section.winner-section {
    background: var(--surface) !important;
    background-image: none !important;
    border: 1px solid var(--surface-featured-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--card-shadow) !important;
}

/* ── L2: rows / list items inside a card ────────────────────────────────── */
.card-inset,
.arena-row,
.home-match-row,
.mp-row,
.ss-actions-bar {
    background: var(--surface-inset) !important;
    background-image: none !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}
.mp-row.mp-inactive { opacity: .6; }

/* ── L3: overlays ───────────────────────────────────────────────────────── */
.user-dropdown,
.admin-nav-drop-menu,
.cdlg-box {
    background: var(--surface-overlay) !important;
    border: 1px solid var(--surface-border-strong) !important;
    box-shadow: 0 12px 40px var(--shadow-strong) !important;
}

/* ── Code / console ─────────────────────────────────────────────────────── */
.guide-console {
    background: var(--surface-code) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-md) !important;
}

/* ── Status tints (alerts, notices, highlighted boxes) ──────────────────── */
.alert-info,    .guide-alert-info                       { background: var(--tint-info-bg) !important;    border: 1px solid var(--tint-info-border) !important;    color: var(--tint-info-text) !important; }
.alert-success, .guide-alert-success                    { background: var(--tint-success-bg) !important; border: 1px solid var(--tint-success-border) !important; color: var(--tint-success-text) !important; }
.alert-warning, .guide-alert-warning, .rt-paused, .cu-status--paused
                                                        { background: var(--tint-warning-bg) !important; border: 1px solid var(--tint-warning-border) !important; }
.alert-danger,  .guide-alert-danger                     { background: var(--tint-danger-bg) !important;  border: 1px solid var(--tint-danger-border) !important;  color: var(--tint-danger-text) !important; }
.alert-accent,  .tp-bank-box, .mvp-card                 { background: var(--tint-accent-bg) !important;  border: 1px solid var(--tint-accent-border) !important; }
.cu-status--open                                        { background: var(--tint-success-bg) !important; border: 1px solid var(--tint-success-border) !important; }
.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-accent,
.guide-alert, .rt-paused, .cu-status, .tp-bank-box      { border-radius: var(--radius-md) !important; }
.guide-alert-warning { color: var(--tint-warning-text) !important; }

/* ── Form controls: one field style everywhere ──────────────────────────── */
input[type="text"], input[type="number"], input[type="search"], input[type="email"],
input[type="password"], input[type="date"], input[type="datetime-local"], input[type="url"],
select, textarea {
    border-radius: var(--radius-sm) !important;
}

/* Section headers inside a card stay flat (no gradient strip). */
.sell-server-header { background: transparent !important; background-image: none !important; }
/* ── Phones: slightly tighter card radius ───────────────────────────────── */
@media (max-width: 640px) {
    :root { --radius-card: 14px; --space-card: 20px; }
}