/**
 * Swiss Floorball API Admin Styles
 * Inspired by modern sports websites like Swiss Unihockey
 */

/* Color Scheme - Swiss Unihockey Branding */
:root {
    --sfa-primary: #0066cc;
    --sfa-primary-dark: #004c99;
    --sfa-primary-light: #3385d6;
    --sfa-secondary: #ff6600;
    --sfa-secondary-dark: #cc5200;
    --sfa-light-bg: #f8f9fa;
    --sfa-border: #e0e0e0;
    --sfa-text: #2c3e50;
    --sfa-text-light: #7f8c8d;
    --sfa-success: #27ae60;
    --sfa-warning: #f39c12;
    --sfa-danger: #e74c3c;
}

/* Design tokens (--sfa-sys-*). Defined in the plugin scope only; :root and dark mode stay untouched.
   Tokens with a legacy counterpart reference the --sfa-* variable so :root overrides keep working. */
.sfa-admin-wrap {
    /* Color */
    --sfa-sys-color-primary: var(--sfa-primary, #0066cc);
    --sfa-sys-color-on-primary: #ffffff;
    --sfa-sys-color-primary-container: #d6e6f7;
    --sfa-sys-color-on-primary-container: #00294d;
    --sfa-sys-color-secondary: var(--sfa-secondary, #ff6600);
    --sfa-sys-color-on-secondary: #ffffff;
    --sfa-sys-color-secondary-container: #ffe0cc;
    --sfa-sys-color-on-secondary-container: #4d1f00;
    --sfa-sys-color-tertiary: #7a5900;
    --sfa-sys-color-on-tertiary: #ffffff;
    --sfa-sys-color-tertiary-container: #ffe4a8;
    --sfa-sys-color-on-tertiary-container: #261a00;
    --sfa-sys-color-error: var(--sfa-danger, #e74c3c);
    --sfa-sys-color-on-error: #ffffff;
    --sfa-sys-color-surface: var(--sfa-light-bg, #f8f9fa);
    --sfa-sys-color-on-surface: var(--sfa-text, #2c3e50);
    --sfa-sys-color-on-surface-variant: var(--sfa-text-light, #7f8c8d);
    --sfa-sys-color-surface-container: #eef1f4;
    --sfa-sys-color-outline: var(--sfa-border, #e0e0e0);

    /* Typography */
    --sfa-sys-font-family: 'SFA Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sfa-sys-font-weight-regular: 400;
    --sfa-sys-font-weight-medium: 500;
    --sfa-sys-font-weight-bold: 700;
    --sfa-sys-font-size-label: 0.75rem;
    --sfa-sys-font-size-body: 0.875rem;
    --sfa-sys-font-size-title: 1rem;
    --sfa-sys-font-size-headline: 1.5rem;
    --sfa-sys-font-size-display: 2rem;
    --sfa-sys-line-height-tight: 1.25;
    --sfa-sys-line-height-body: 1.5;

    /* Shape */
    --sfa-sys-shape-corner-none: 0;
    --sfa-sys-shape-corner-xs: 4px;
    --sfa-sys-shape-corner-sm: 8px;
    --sfa-sys-shape-corner-md: 12px;
    --sfa-sys-shape-corner-lg: 16px;
    --sfa-sys-shape-corner-xl: 28px;
    --sfa-sys-shape-corner-full: 9999px;

    /* Elevation */
    --sfa-sys-elevation-0: none;
    --sfa-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --sfa-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --sfa-sys-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    --sfa-sys-elevation-4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
    --sfa-sys-elevation-5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
    font-family: 'SFA Roboto', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1400px;
    margin: 20px 0;
}

/* Self-hosted Roboto (variable font, Latin + Latin Extended) — no request to Google at runtime */
@font-face {
    font-family: 'SFA Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/roboto-v51-latin-ext.woff2') format('woff2-variations'), url('../../fonts/roboto-v51-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'SFA Roboto';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/roboto-v51-latin.woff2') format('woff2-variations'), url('../../fonts/roboto-v51-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inline SVG icons (Material Symbols) */
.sfa-admin-wrap .sfa-icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* WordPress Admin Notices - Fix white text on white background */
.sfa-admin-wrap .notice,
.sfa-admin-wrap .updated,
.sfa-admin-wrap .error,
.sfa-admin-wrap .settings-error {
    background: white !important;
    border-left: 4px solid var(--sfa-primary) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04) !important;
    margin: 15px 0 !important;
    padding: 12px !important;
}

.sfa-admin-wrap .notice p,
.sfa-admin-wrap .updated p,
.sfa-admin-wrap .error p,
.sfa-admin-wrap .settings-error p {
    margin: 0.5em 0 !important;
    padding: 2px !important;
    color: #2c3e50 !important;
    font-size: 14px !important;
}

.sfa-admin-wrap .notice.notice-success,
.sfa-admin-wrap .updated {
    border-left-color: var(--sfa-success) !important;
}

.sfa-admin-wrap .notice.notice-error,
.sfa-admin-wrap .error {
    border-left-color: var(--sfa-danger) !important;
}

.sfa-admin-wrap .notice.notice-warning {
    border-left-color: var(--sfa-warning) !important;
}

.sfa-admin-wrap .notice.notice-info {
    border-left-color: var(--sfa-primary) !important;
}

.sfa-admin-wrap .notice-dismiss {
    color: #2c3e50 !important;
}

.sfa-admin-wrap .notice-dismiss:hover,
.sfa-admin-wrap .notice-dismiss:focus {
    color: var(--sfa-danger) !important;
}

/* Section title used in display templates */
.sfa-section-title {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: var(--sfa-primary);
}

/* Inline team logo in calendar/game rows */
.sfa-logo-inline {
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

/* Calendar subscribe link */
.sfa-calendar-subscribe {
    text-decoration: underline;
    color: var(--sfa-text-light);
}

/* Flat table container (no shadow/border) */
.sfa-table-container-flat {
    box-shadow: none;
    padding: 0;
    border: none;
}

/* Image inside a table cell */
.sfa-cell-image {
    max-width: 50px;
    height: auto;
}

/* Logo in game cards */
.sfa-card-logo {
    max-height: 75px;
    height: auto;
}

/* Region title inside match details */
.sfa-region-title {
    margin-top: 20px;
    color: var(--sfa-primary);
}

/* Quick-access nav description */
.sfa-nav-description {
    margin: 0 0 15px 0;
    color: var(--sfa-text-light);
}

/* Quick-access nav item paragraph */
.sfa-nav-item {
    margin: 5px 0;
}

/* Card spacing modifiers */
.sfa-card--spaced-top {
    margin-top: 30px;
}

.sfa-card--spaced-bottom {
    margin-bottom: 30px;
}

/* Section divider */
.sfa-divider {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--sfa-border);
}

/* Spaced form */
.sfa-form--spaced-top {
    margin-top: 15px;
}

/* Info box (used in shortcodes page) */
.sfa-info-box {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--sfa-light-bg);
    border-left: 4px solid var(--sfa-primary);
    border-radius: 4px;
}

.sfa-info-box__title {
    margin-top: 0;
    color: var(--sfa-primary);
}

/* Shortcode table column widths */
.sfa-col-shortcode  { width: 20%; }
.sfa-col-description { width: 30%; }
.sfa-col-params     { width: 25%; }
.sfa-col-example    { width: 25%; }
.sfa-col-function   { width: 25%; }
.sfa-col-description-wide { width: 40%; }
.sfa-col-usage      { width: 35%; }

/* Main Container */

/* Header with Gradient */
.sfa-admin-header {
    background: var(--sfa-sys-color-primary);
    color: var(--sfa-sys-color-on-primary);
    padding: 40px;
    border-radius: var(--sfa-sys-shape-corner-lg);
    margin-bottom: 30px;
    box-shadow: var(--sfa-sys-elevation-2);
    position: relative;
    overflow: hidden;
}

.sfa-admin-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
}

.sfa-admin-header h1 {
    margin: 0;
    font-size: var(--sfa-sys-font-size-display);
    font-weight: var(--sfa-sys-font-weight-bold);
    line-height: var(--sfa-sys-line-height-tight);
    color: var(--sfa-sys-color-on-primary);
    position: relative;
    z-index: 1;
}

.sfa-admin-header p {
    margin: 10px 0 0 0;
    opacity: 0.95;
    font-size: 15px;
    position: relative;
    z-index: 1;
}

/* Enhanced Card Layout */
.sfa-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.sfa-card {
    background: white;
    border: 1px solid var(--sfa-sys-color-outline);
    border-radius: var(--sfa-sys-shape-corner-md);
    padding: 28px;
    box-shadow: var(--sfa-sys-elevation-1);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sfa-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--sfa-primary) 0%, var(--sfa-secondary) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sfa-card:hover {
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.12);
    transform: translateY(-4px);
    border-color: var(--sfa-primary-light);
}

.sfa-card:hover::before {
    opacity: 1;
}

.sfa-card h3 {
    margin: 0 0 20px 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--sfa-text);
    border-bottom: 2px solid var(--sfa-light-bg);
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sfa-card h3 .sfa-icon {
    font-size: 22px;
}

/* Quick Access Buttons */
.sfa-admin-wrap .sfa-card .button {
    display: inline-block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    min-height: 48px;
    line-height: 28px;
    padding: 10px 16px;
    margin: 6px 0;
    border-radius: var(--sfa-sys-shape-corner-xl);
    background: var(--sfa-sys-color-surface);
    color: var(--sfa-sys-color-on-surface);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: var(--sfa-sys-font-weight-medium);
    border: 1px solid transparent;
}

.sfa-admin-wrap .sfa-card .button:hover,
.sfa-admin-wrap .sfa-card .button:focus-visible {
    background: var(--sfa-sys-color-primary-container);
    color: var(--sfa-sys-color-on-primary-container);
    border-color: var(--sfa-sys-color-primary);
}

.sfa-admin-wrap .sfa-card .button:focus-visible {
    outline: 2px solid var(--sfa-sys-color-primary);
    outline-offset: 2px;
}

/* Settings Table */
.sfa-settings-table {
    width: 100%;
    border-collapse: collapse;
}

.sfa-settings-table tr {
    border-bottom: 1px solid var(--sfa-light-bg);
    transition: background 0.2s ease;
}

.sfa-settings-table tr:last-child {
    border-bottom: none;
}

.sfa-settings-table tr:hover {
    background: rgba(0, 102, 204, 0.02);
}

.sfa-settings-table td {
    padding: 14px 0;
    font-size: 14px;
}

.sfa-settings-table td:first-child {
    color: var(--sfa-text-light);
    font-weight: 500;
    width: 45%;
}

.sfa-settings-table td:last-child {
    color: var(--sfa-text);
    font-weight: 600;
}

/* Enhanced Data Tables */
.sfa-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--sfa-sys-shape-corner-md);
    overflow: hidden;
    box-shadow: var(--sfa-sys-elevation-1);
    border: 1px solid var(--sfa-sys-color-outline);
}

.sfa-data-table thead {
    background: var(--sfa-sys-color-surface-container);
}

.sfa-data-table th {
    padding: 16px 18px;
    text-align: left;
    font-weight: 600;
    color: var(--sfa-text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 2px solid var(--sfa-primary);
}

.sfa-data-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--sfa-light-bg);
    color: var(--sfa-text);
    font-size: 14px;
}

.sfa-data-table tbody tr {
    transition: all 0.2s ease;
}

.sfa-data-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.03) 0%, transparent 100%);
    transform: scale(1.01);
}

.sfa-data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Striped rows for better readability */
.sfa-data-table tbody tr:nth-child(even) {
    background: rgba(248, 249, 250, 0.5);
}

/* Table Container with Enhanced Shadow */
.sfa-table-container {
    background: white;
    border: 1px solid var(--sfa-border);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.sfa-table-container h2 {
    margin: 0 0 24px 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--sfa-primary);
    padding-bottom: 12px;
    border-bottom: 3px solid var(--sfa-light-bg);
}

/* Form Styling */
.sfa-form-section {
    background: white;
    border: 1px solid var(--sfa-border);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.sfa-form-section h2 {
    margin: 0 0 24px 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--sfa-primary);
    border-bottom: 3px solid var(--sfa-light-bg);
    padding-bottom: 12px;
}

.sfa-admin-wrap .form-table th {
    padding: 16px 12px 16px 0;
    font-weight: 600;
    color: var(--sfa-text);
}

.sfa-admin-wrap .form-table td {
    padding: 12px 12px;
}

.sfa-admin-wrap .form-table input[type="text"],
.sfa-admin-wrap .form-table input[type="number"],
.sfa-admin-wrap .form-table input[type="password"],
.sfa-admin-wrap .form-table select {
    box-sizing: border-box;
    width: 100%;
    max-width: 350px;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--sfa-sys-color-on-surface-variant);
    border-radius: var(--sfa-sys-shape-corner-xs);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sfa-admin-wrap .form-table input[type="text"]:focus,
.sfa-admin-wrap .form-table input[type="number"]:focus,
.sfa-admin-wrap .form-table input[type="password"]:focus,
.sfa-admin-wrap .form-table select:focus {
    border-color: var(--sfa-sys-color-primary);
    outline: none;
    box-shadow: 0 0 0 1px var(--sfa-sys-color-primary);
}

.sfa-admin-wrap .form-table input[aria-invalid="true"] {
    border-color: var(--sfa-sys-color-error);
    box-shadow: 0 0 0 1px var(--sfa-sys-color-error);
}

/* Enhanced Submit Button */
.sfa-admin-wrap .button-primary {
    background: var(--sfa-sys-color-primary) !important;
    color: var(--sfa-sys-color-on-primary) !important;
    border: none !important;
    text-shadow: none !important;
    box-shadow: var(--sfa-sys-elevation-0) !important;
    min-height: 48px !important;
    padding: 0 28px !important;
    font-size: var(--sfa-sys-font-size-body) !important;
    font-weight: var(--sfa-sys-font-weight-medium) !important;
    border-radius: var(--sfa-sys-shape-corner-full) !important;
    transition: box-shadow 0.2s ease, filter 0.2s ease !important;
}

.sfa-admin-wrap .button-primary:hover,
.sfa-admin-wrap .button-primary:focus-visible {
    background: var(--sfa-sys-color-primary) !important;
    filter: brightness(1.1);
    box-shadow: var(--sfa-sys-elevation-1) !important;
}

.sfa-admin-wrap .button-primary:focus-visible {
    outline: 2px solid var(--sfa-sys-color-primary);
    outline-offset: 2px;
}

.sfa-admin-wrap .button-secondary {
    min-height: 48px;
    padding: 0 24px;
    border-radius: var(--sfa-sys-shape-corner-full);
    border-color: var(--sfa-sys-color-outline);
    color: var(--sfa-sys-color-primary);
}

.sfa-admin-wrap .button-secondary:hover,
.sfa-admin-wrap .button-secondary:focus-visible {
    background: var(--sfa-sys-color-primary-container);
    color: var(--sfa-sys-color-on-primary-container);
}

/* Badge/Pill Styling */
.sfa-badge {
    display: inline-block;
    padding: 6px 14px;
    background: var(--sfa-light-bg);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sfa-text);
    border: 1px solid var(--sfa-border);
}

.sfa-badge-primary {
    background: linear-gradient(135deg, var(--sfa-primary) 0%, var(--sfa-primary-dark) 100%);
    color: white;
    border: none;
}

.sfa-badge-secondary {
    background: linear-gradient(135deg, var(--sfa-secondary) 0%, var(--sfa-secondary-dark) 100%);
    color: white;
    border: none;
}

.sfa-badge-success {
    background: var(--sfa-success);
    color: white;
    border: none;
}

/* Helper Text */
.sfa-helper-text {
    color: var(--sfa-sys-color-on-surface);
    opacity: 0.8;
    font-size: var(--sfa-sys-font-size-label);
    margin-top: 6px;
    font-style: italic;
    line-height: 1.5;
}

/* Responsive Design */
@media screen and (max-width: 782px) {
    .sfa-cards-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sfa-admin-header {
        padding: 24px;
    }

    .sfa-admin-header h1 {
        font-size: 24px;
    }

    .sfa-data-table {
        font-size: 13px;
    }

    .sfa-data-table th,
    .sfa-data-table td {
        padding: 12px;
    }

    .sfa-table-container,
    .sfa-form-section {
        padding: 20px;
    }
}

/* Loading State */
.sfa-loading {
    text-align: center;
    padding: 50px;
    color: var(--sfa-text-light);
}

.sfa-loading::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--sfa-light-bg);
    border-top-color: var(--sfa-primary);
    border-radius: 50%;
    animation: sfa-spin 0.8s linear infinite;
}

@keyframes sfa-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.sfa-empty-state {
    text-align: center;
    padding: 70px 24px;
    color: var(--sfa-text-light);
    background: var(--sfa-light-bg);
    border-radius: 12px;
    border: 2px dashed var(--sfa-border);
}

.sfa-empty-state-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.sfa-empty-state-text {
    font-size: 16px;
    font-weight: 500;
}

/* Stat Cards */
.sfa-stat-card {
    background: linear-gradient(135deg, white 0%, var(--sfa-light-bg) 100%);
    border: 1px solid var(--sfa-border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.sfa-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.sfa-stat-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--sfa-primary);
    margin: 8px 0;
}

.sfa-stat-label {
    font-size: 13px;
    color: var(--sfa-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Search Container */
.sfa-search-container {
    position: relative;
    max-width: 500px;
    margin-bottom: 24px;
}

.sfa-search-container .sfa-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--sfa-text-light);
    pointer-events: none;
}

.sfa-search-input {
    width: 100%;
    max-width: 500px;
    min-height: 48px;
    padding: 12px 18px 12px 42px;
    font-size: var(--sfa-sys-font-size-title);
    border: 1px solid var(--sfa-sys-color-outline);
    border-radius: var(--sfa-sys-shape-corner-xl);
    transition: all 0.3s ease;
    background: white;
    color: var(--sfa-text);
}

.sfa-search-input:focus {
    outline: none;
    border-color: var(--sfa-sys-color-primary);
    box-shadow: 0 0 0 1px var(--sfa-sys-color-primary);
}

.sfa-search-input::placeholder {
    color: var(--sfa-text-light);
    opacity: 0.7;
}

/* Dark mode. Auto follows the system setting; data-sfa-theme="light" opts out, "dark" forces it.
   The two blocks below are intentionally identical: CSS cannot share selectors across a media query. */
@media (prefers-color-scheme: dark) {
    .sfa-admin-wrap:not([data-sfa-theme="light"]) {
        --sfa-sys-color-primary: #8ab4f8;
        --sfa-sys-color-on-primary: #00315c;
        --sfa-sys-color-primary-container: #1f4a7a;
        --sfa-sys-color-on-primary-container: #d6e6f7;
        --sfa-sys-color-secondary: #ffb27a;
        --sfa-sys-color-on-secondary: #4d1f00;
        --sfa-sys-color-secondary-container: #7a3300;
        --sfa-sys-color-on-secondary-container: #ffe0cc;
        --sfa-sys-color-tertiary: #f2c14e;
        --sfa-sys-color-on-tertiary: #261a00;
        --sfa-sys-color-tertiary-container: #5c4300;
        --sfa-sys-color-on-tertiary-container: #ffe4a8;
        --sfa-sys-color-error: #ff8a80;
        --sfa-sys-color-on-error: #5c0a04;
        --sfa-sys-color-surface: #121417;
        --sfa-sys-color-on-surface: #e3e6ea;
        --sfa-sys-color-on-surface-variant: #b0b7bf;
        --sfa-sys-color-surface-container: #1c2024;
        --sfa-sys-color-outline: #3a4048;
        --sfa-light-bg: #1c2024;
        --sfa-border: #3a4048;
        --sfa-text: #e3e6ea;
        --sfa-text-light: #b0b7bf;
    }

    /* Admin containers and cards */
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-card,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-table-container,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-form-section,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-data-table,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-empty-state,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-stat-card {
        background: var(--sfa-sys-color-surface-container);
        border-color: var(--sfa-sys-color-outline);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-data-table thead {
        background: var(--sfa-sys-color-surface);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-data-table th,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-data-table td,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-card h3,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-settings-table td:last-child,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .form-table th {
        color: var(--sfa-sys-color-on-surface);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-data-table td,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-card h3,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-settings-table tr,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-table-container h2,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-form-section h2 {
        border-bottom-color: var(--sfa-sys-color-outline);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-data-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.03);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-data-table tbody tr:hover {
        background: linear-gradient(90deg, rgba(138, 180, 248, 0.12) 0%, transparent 100%);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-settings-table tr:hover {
        background: rgba(138, 180, 248, 0.08);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-settings-table td:first-child,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-empty-state,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-helper-text,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-stat-label {
        color: var(--sfa-sys-color-on-surface-variant);
    }

    /* Form elements, card buttons and search input */
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .form-table input[type="text"],
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .form-table input[type="number"],
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .form-table select,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-card .button,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-search-input {
        background: var(--sfa-sys-color-surface-container);
        border-color: var(--sfa-sys-color-outline);
        color: var(--sfa-sys-color-on-surface);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .form-table input[type="text"]:focus,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .form-table input[type="number"]:focus,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .form-table select:focus {
        background: var(--sfa-sys-color-surface);
        border-color: var(--sfa-sys-color-primary);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-search-input:focus {
        background: var(--sfa-sys-color-surface);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-card .button:hover {
        background: var(--sfa-sys-color-primary);
        color: var(--sfa-sys-color-on-primary);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-search-input::placeholder {
        color: var(--sfa-sys-color-on-surface-variant);
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-table-container h2,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .sfa-form-section h2 {
        color: var(--sfa-sys-color-primary);
    }

    /* WordPress notices - ensure readability in dark mode */
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .notice,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .updated,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .error,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .settings-error {
        background: var(--sfa-sys-color-surface-container) !important;
        border-left-color: var(--sfa-sys-color-primary) !important;
    }

    .sfa-admin-wrap:not([data-sfa-theme="light"]) .notice p,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .updated p,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .error p,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .settings-error p,
    .sfa-admin-wrap:not([data-sfa-theme="light"]) .notice-dismiss {
        color: var(--sfa-sys-color-on-surface) !important;
    }
}

.sfa-admin-wrap[data-sfa-theme="dark"] {
    --sfa-sys-color-primary: #8ab4f8;
    --sfa-sys-color-on-primary: #00315c;
    --sfa-sys-color-primary-container: #1f4a7a;
    --sfa-sys-color-on-primary-container: #d6e6f7;
    --sfa-sys-color-secondary: #ffb27a;
    --sfa-sys-color-on-secondary: #4d1f00;
    --sfa-sys-color-secondary-container: #7a3300;
    --sfa-sys-color-on-secondary-container: #ffe0cc;
    --sfa-sys-color-tertiary: #f2c14e;
    --sfa-sys-color-on-tertiary: #261a00;
    --sfa-sys-color-tertiary-container: #5c4300;
    --sfa-sys-color-on-tertiary-container: #ffe4a8;
    --sfa-sys-color-error: #ff8a80;
    --sfa-sys-color-on-error: #5c0a04;
    --sfa-sys-color-surface: #121417;
    --sfa-sys-color-on-surface: #e3e6ea;
    --sfa-sys-color-on-surface-variant: #b0b7bf;
    --sfa-sys-color-surface-container: #1c2024;
    --sfa-sys-color-outline: #3a4048;
    --sfa-light-bg: #1c2024;
    --sfa-border: #3a4048;
    --sfa-text: #e3e6ea;
    --sfa-text-light: #b0b7bf;
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-card,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-table-container,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-form-section,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-data-table,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-empty-state,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-stat-card {
    background: var(--sfa-sys-color-surface-container);
    border-color: var(--sfa-sys-color-outline);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-data-table thead {
    background: var(--sfa-sys-color-surface);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-data-table th,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-data-table td,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-card h3,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-settings-table td:last-child,
.sfa-admin-wrap[data-sfa-theme="dark"] .form-table th {
    color: var(--sfa-sys-color-on-surface);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-data-table td,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-card h3,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-settings-table tr,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-table-container h2,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-form-section h2 {
    border-bottom-color: var(--sfa-sys-color-outline);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-data-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-data-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(138, 180, 248, 0.12) 0%, transparent 100%);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-settings-table tr:hover {
    background: rgba(138, 180, 248, 0.08);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-settings-table td:first-child,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-empty-state,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-helper-text,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-stat-label {
    color: var(--sfa-sys-color-on-surface-variant);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .form-table input[type="text"],
.sfa-admin-wrap[data-sfa-theme="dark"] .form-table input[type="number"],
.sfa-admin-wrap[data-sfa-theme="dark"] .form-table select,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-card .button,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-search-input {
    background: var(--sfa-sys-color-surface-container);
    border-color: var(--sfa-sys-color-outline);
    color: var(--sfa-sys-color-on-surface);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .form-table input[type="text"]:focus,
.sfa-admin-wrap[data-sfa-theme="dark"] .form-table input[type="number"]:focus,
.sfa-admin-wrap[data-sfa-theme="dark"] .form-table select:focus {
    background: var(--sfa-sys-color-surface);
    border-color: var(--sfa-sys-color-primary);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-search-input:focus {
    background: var(--sfa-sys-color-surface);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-card .button:hover {
    background: var(--sfa-sys-color-primary);
    color: var(--sfa-sys-color-on-primary);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-search-input::placeholder {
    color: var(--sfa-sys-color-on-surface-variant);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-table-container h2,
.sfa-admin-wrap[data-sfa-theme="dark"] .sfa-form-section h2 {
    color: var(--sfa-sys-color-primary);
}

.sfa-admin-wrap[data-sfa-theme="dark"] .notice,
.sfa-admin-wrap[data-sfa-theme="dark"] .updated,
.sfa-admin-wrap[data-sfa-theme="dark"] .error,
.sfa-admin-wrap[data-sfa-theme="dark"] .settings-error {
    background: var(--sfa-sys-color-surface-container) !important;
    border-left-color: var(--sfa-sys-color-primary) !important;
}

.sfa-admin-wrap[data-sfa-theme="dark"] .notice p,
.sfa-admin-wrap[data-sfa-theme="dark"] .updated p,
.sfa-admin-wrap[data-sfa-theme="dark"] .error p,
.sfa-admin-wrap[data-sfa-theme="dark"] .settings-error p,
.sfa-admin-wrap[data-sfa-theme="dark"] .notice-dismiss {
    color: var(--sfa-sys-color-on-surface) !important;
}
/* Tables in the shortcode (widget) look: flat, accent line under the header, thin row dividers.
   The [data-sfa-theme] selector raises the specificity above the dark-mode table rules. */
.sfa-admin-wrap[data-sfa-theme] .sfa-table-wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-data-table {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-data-table thead,
.sfa-admin-wrap[data-sfa-theme] .sfa-data-table th {
    background: transparent;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-data-table th {
    padding: 12px 16px;
    color: var(--sfa-table-header-color, var(--sfa-sys-color-on-surface));
    font-size: var(--sfa-sys-font-size-body);
    font-weight: var(--sfa-sys-font-weight-bold);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 2px solid var(--sfa-table-accent, var(--sfa-sys-color-primary));
}

.sfa-admin-wrap[data-sfa-theme] .sfa-data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sfa-table-divider, var(--sfa-sys-color-outline));
}

.sfa-admin-wrap[data-sfa-theme] .sfa-data-table tbody tr {
    background: transparent;
    transform: none;
    transition: background-color 150ms ease;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-data-table tbody tr:hover {
    background: var(--sfa-table-highlight, var(--sfa-sys-color-outline));
}

@supports (background-color: color-mix(in srgb, red 8%, transparent)) {

    .sfa-admin-wrap[data-sfa-theme] .sfa-data-table tbody tr:hover {
        background: var(--sfa-table-highlight, color-mix(in srgb, var(--sfa-table-accent, var(--sfa-sys-color-primary)) 12%, transparent));
    }
}

.sfa-admin-wrap[data-sfa-theme] .sfa-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.sfa-admin-wrap .sfa-data-table td.is-highlight,
.sfa-admin-wrap .sfa-data-table tr.is-highlight td {
    font-weight: var(--sfa-sys-font-weight-bold);
}

.sfa-admin-wrap .sfa-align-right {
    text-align: right;
}

.sfa-admin-wrap .sfa-club-logo {
    display: block;
    max-width: 28px;
    height: auto;
}

.sfa-admin-wrap .sfa-widget__subtitle {
    margin: 0 0 12px;
    color: var(--sfa-sys-color-on-surface-variant);
}

.sfa-admin-wrap .sfa-empty {
    padding: 16px 0;
    color: var(--sfa-sys-color-on-surface-variant);
}

/* Flat Material layout: no big boxes. Sections sit directly on the page, separated by whitespace and thin
   dividers; the header becomes a slim top app bar. The [data-sfa-theme] selector (always set on the wrap)
   raises the specificity above the dark-mode rules, and this block comes last. */
.sfa-admin-wrap[data-sfa-theme] .sfa-admin-header {
    padding: 8px 0 16px;
    margin-bottom: 24px;
    background: transparent;
    color: var(--sfa-sys-color-on-surface);
    border-bottom: 1px solid var(--sfa-sys-color-outline);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-admin-header::before {
    display: none;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-admin-header h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--sfa-sys-font-size-headline);
    font-weight: var(--sfa-sys-font-weight-medium);
    color: var(--sfa-sys-color-on-surface);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-admin-header .sfa-icon {
    color: var(--sfa-sys-color-primary);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-admin-header p {
    margin: 4px 0 0;
    opacity: 1;
    font-size: var(--sfa-sys-font-size-body);
    color: var(--sfa-sys-color-on-surface-variant);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-cards-container {
    gap: 32px;
    margin-bottom: 32px;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-card,
.sfa-admin-wrap[data-sfa-theme] .sfa-table-container,
.sfa-admin-wrap[data-sfa-theme] .sfa-form-section {
    padding: 0;
    margin-bottom: 32px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    overflow: visible;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-cards-container .sfa-card {
    margin-bottom: 0;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-card:hover {
    box-shadow: none;
    transform: none;
    border-color: transparent;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-card::before {
    display: none;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-card h3,
.sfa-admin-wrap[data-sfa-theme] .sfa-table-container h2,
.sfa-admin-wrap[data-sfa-theme] .sfa-form-section h2,
.sfa-admin-wrap[data-sfa-theme] .sfa-section-title {
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 0;
    font-size: var(--sfa-sys-font-size-title);
    font-weight: var(--sfa-sys-font-weight-medium);
    color: var(--sfa-sys-color-on-surface);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-card h3 .sfa-icon {
    font-size: 20px;
    color: var(--sfa-sys-color-primary);
}

/* Quick access: compact tonal buttons in a row instead of full-width bars. */
.sfa-admin-wrap[data-sfa-theme] .sfa-nav-item {
    display: inline-block;
    margin: 0 8px 8px 0;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-card .button {
    width: auto;
    min-height: 40px;
    line-height: 20px;
    margin: 0;
    padding: 10px 20px;
    background: var(--sfa-sys-color-primary-container);
    color: var(--sfa-sys-color-on-primary-container);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-card .button:hover,
.sfa-admin-wrap[data-sfa-theme] .sfa-card .button:focus-visible {
    border-color: transparent;
    filter: brightness(0.96);
}

/* Key/value list of the current settings. */
.sfa-admin-wrap[data-sfa-theme] .sfa-settings-table {
    border-bottom: 0;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-settings-table tr {
    border-bottom: 1px solid var(--sfa-sys-color-outline);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-settings-table tr:last-child {
    border-bottom: 0;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-settings-table td {
    padding: 10px 0;
    font-size: var(--sfa-sys-font-size-body);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-settings-table td:first-child {
    color: var(--sfa-sys-color-on-surface-variant);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-stat-card {
    background: transparent;
    border: 1px solid var(--sfa-sys-color-outline);
    border-radius: var(--sfa-sys-shape-corner-sm);
    transform: none;
    box-shadow: none;
}

.sfa-admin-wrap[data-sfa-theme] .sfa-empty-state {
    background: transparent;
    border: 1px dashed var(--sfa-sys-color-outline);
    border-radius: var(--sfa-sys-shape-corner-sm);
}

.sfa-admin-wrap[data-sfa-theme] .sfa-divider {
    border: 0;
    border-top: 1px solid var(--sfa-sys-color-outline);
    margin: 32px 0;
}

/* One button style for all admin pages: the tonal pill of the dashboard quick access. Primary actions
   (save, back) use the same shape, filled. !important is needed to beat the .button-primary rules above. */
.sfa-admin-wrap[data-sfa-theme] .button:not(.wp-color-result),
.sfa-admin-wrap[data-sfa-theme] .button-secondary:not(.wp-color-result),
.sfa-admin-wrap[data-sfa-theme] .button-small:not(.wp-color-result) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--sfa-sys-shape-corner-xl);
    background: var(--sfa-sys-color-primary-container);
    color: var(--sfa-sys-color-on-primary-container);
    font-size: var(--sfa-sys-font-size-body);
    font-weight: var(--sfa-sys-font-weight-medium);
    line-height: 20px;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.sfa-admin-wrap[data-sfa-theme] .button:not(.wp-color-result):hover,
.sfa-admin-wrap[data-sfa-theme] .button:not(.wp-color-result):focus-visible,
.sfa-admin-wrap[data-sfa-theme] .button-secondary:not(.wp-color-result):hover,
.sfa-admin-wrap[data-sfa-theme] .button-secondary:not(.wp-color-result):focus-visible {
    border-color: transparent;
    background: var(--sfa-sys-color-primary-container);
    color: var(--sfa-sys-color-on-primary-container);
    filter: brightness(0.96);
}

.sfa-admin-wrap[data-sfa-theme] .button:not(.wp-color-result):focus-visible {
    outline: 2px solid var(--sfa-sys-color-primary);
    outline-offset: 2px;
}

.sfa-admin-wrap[data-sfa-theme] .button.button-primary,
.sfa-admin-wrap[data-sfa-theme] .button-primary {
    min-height: 40px !important;
    padding: 10px 20px !important;
    border-radius: var(--sfa-sys-shape-corner-xl) !important;
    background: var(--sfa-sys-color-primary) !important;
    color: var(--sfa-sys-color-on-primary) !important;
    font-size: var(--sfa-sys-font-size-body) !important;
    line-height: 20px !important;
}

.sfa-admin-wrap[data-sfa-theme] .button-primary:hover,
.sfa-admin-wrap[data-sfa-theme] .button-primary:focus-visible {
    filter: brightness(1.1);
    box-shadow: none !important;
}

.sfa-admin-wrap[data-sfa-theme] .button .sfa-icon {
    vertical-align: middle;
}

/* Dashboard: stat tiles and navigation tiles. */
.sfa-admin-wrap .sfa-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: var(--sfa-sys-shape-corner-sm);
    background: var(--sfa-sys-color-warning-container, #fdebc8);
    color: var(--sfa-sys-color-on-warning-container, #3d2700);
}

.sfa-admin-wrap .sfa-callout span {
    flex: 1;
}

.sfa-admin-wrap .sfa-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.sfa-admin-wrap .sfa-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--sfa-sys-shape-corner-md);
    background: var(--sfa-sys-color-surface-container);
}

.sfa-admin-wrap .sfa-stat-tile__label {
    font-size: var(--sfa-sys-font-size-label);
    font-weight: var(--sfa-sys-font-weight-medium);
    color: var(--sfa-sys-color-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sfa-admin-wrap .sfa-stat-tile__value {
    font-size: var(--sfa-sys-font-size-headline);
    font-weight: var(--sfa-sys-font-weight-medium);
    line-height: var(--sfa-sys-line-height-tight);
    color: var(--sfa-sys-color-on-surface);
    overflow-wrap: anywhere;
}

.sfa-admin-wrap .sfa-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.sfa-admin-wrap .sfa-tile {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-areas: "icon title" "icon text";
    column-gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--sfa-sys-color-outline);
    border-radius: var(--sfa-sys-shape-corner-md);
    color: var(--sfa-sys-color-on-surface);
    text-decoration: none;
    transition: background-color 150ms ease;
}

.sfa-admin-wrap .sfa-tile:hover,
.sfa-admin-wrap .sfa-tile:focus-visible {
    background: var(--sfa-sys-color-surface-container);
    color: var(--sfa-sys-color-on-surface);
}

.sfa-admin-wrap .sfa-tile:focus-visible {
    outline: 2px solid var(--sfa-sys-color-primary);
    outline-offset: 2px;
}

.sfa-admin-wrap .sfa-tile__icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--sfa-sys-shape-corner-full);
    background: var(--sfa-sys-color-primary-container);
    color: var(--sfa-sys-color-on-primary-container);
}

.sfa-admin-wrap .sfa-tile__icon .sfa-icon {
    width: 24px;
    height: 24px;
}

.sfa-admin-wrap .sfa-tile__title {
    grid-area: title;
    font-size: var(--sfa-sys-font-size-title);
    font-weight: var(--sfa-sys-font-weight-medium);
}

.sfa-admin-wrap .sfa-tile__text {
    grid-area: text;
    font-size: var(--sfa-sys-font-size-body);
    color: var(--sfa-sys-color-on-surface-variant);
}

/* The WordPress colour picker brings its own swatch button (.wp-color-result); keep it out of the pill style
   above and only align it with the text field. */
.sfa-admin-wrap .wp-picker-container .wp-color-result.button {
    margin: 0 6px 0 0;
}

.sfa-admin-wrap .wp-picker-container .wp-picker-clear.button {
    min-height: 30px;
    padding: 0 10px;
    line-height: 28px;
}

.sfa-admin-wrap .wp-picker-container input[type="text"].wp-color-picker {
    width: 80px;
    min-height: 30px;
    padding: 0 8px;
    font-size: var(--sfa-sys-font-size-body);
    line-height: 28px;
}

.sfa-admin-wrap .sfa-autosave-status {
    display: block;
    margin: 1em 0;
}