/* =========================================================
   VRMS THEME BASIS
   ========================================================= */


body[data-theme="light"] {
    --VRMS_background: var(--VRMS_background-light);
    --VRMS_Background: var(--VRMS_background-light);
    --VRMS_foreground: var(--VRMS_foreground-light);
    --VRMS_table-bg: var(--VRMS_table-bg-light);
    --VRMS_table-striped: var(--VRMS_table-striped-light);
    --VRMS_infoText: var(--VRMS_infoText-light);
    --VRMS_button-bg: var(--VRMS_button-bg-light);
    --VRMS_button-font: var(--VRMS_button-font-light);
    --VRMS_button-font-hover: var(--VRMS_accent);
    --VRMS_optionbox-bg: var(--VRMS_optionbox-bg-light);
    --VRMS_optionbox-selected: var(--VRMS_optionbox-selected-light);
    --VRMS_optionbox-hover: var(--VRMS_optionbox-hover-light);
    --VRMS-navbar-bg: var(--VRMS-navbar-bg-light);
    --VRMS-navbar-text: var(--VRMS-navbar-text-light);
}

body[data-theme="dark"] {
    --VRMS_background: var(--VRMS_background-dark);
    --VRMS_Background: var(--VRMS_background-dark);
    --VRMS_foreground: var(--VRMS_foreground-dark);
    --VRMS_table-bg: var(--VRMS_table-bg-dark);
    --VRMS_table-striped: var(--VRMS_table-striped-dark);
    --VRMS_infoText: var(--VRMS_infoText-dark);
    --VRMS_button-bg: var(--VRMS_button-bg-dark);
    --VRMS_button-font: var(--VRMS_button-font-dark);
    --VRMS_button-font-hover: var(--VRMS_accent);
    --VRMS_optionbox-bg: var(--VRMS_optionbox-bg-dark);
    --VRMS_optionbox-selected: var(--VRMS_optionbox-selected-dark);
    --VRMS_optionbox-hover: var(--VRMS_optionbox-hover-dark);
    --VRMS-navbar-bg: var(--VRMS-navbar-bg-dark);
    --VRMS-navbar-text: var(--VRMS-navbar-text-dark);
}

/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    min-height: 100%;
    background-color: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

body,
.custom-bg,
.modal-header,
.modal-body,
.modal-title {
    background-color: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

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

a {
    color: var(--VRMS_foreground);
}

a:hover {
    color: var(--VRMS_accent);
}

img {
    max-width: 100%;
}

.text-muted {
    color: var(--VRMS_infoText) !important;
}

.global-container,
.content-container {
    width: 100%;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--VRMS_Shadow);
}

.global-container {
    margin-left: 30px;
    margin-right: 30px;
}

.alert-container {
    top: 75px;
}

.redFontColorForRow td {
    color: var(--VRMS_warning);
}

.d-none {
    display: none !important;
}

/* =========================================================
   BOOTSTRAP MODAL / OVERLAY FIX
   ========================================================= */

.modal-backdrop {
    z-index: 20000 !important;
}

.modal {
    z-index: 20001 !important;
}

.modal-content,
.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.modal-header,
.modal-body,
.modal-footer,
.vrms-modal-header,
.vrms-modal-body,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.modal-header,
.modal-footer,
.vrms-modal-header,
.vrms-modal-footer {
    border-color: var(--VRMS_foreground);
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close,
.btn-close {
    filter: invert(1);
}

/* =========================================================
   NAVBAR / DROPDOWNS
   ========================================================= */

.custom-navbar {
    background-color: var(--VRMS-navbar-bg) !important;
}

.custom-navbar .navbar-brand,
.custom-navbar .nav-link,
.custom-navbar .dropdown-toggle {
    margin-right: 10px;
    color: var(--VRMS-navbar-text) !important;
}

.custom-navbar .nav-link:hover,
.custom-navbar .dropdown-item:hover {
    text-decoration: underline;
}

.navbar-toggler {
    background-color: var(--VRMS_white);
}

.dropdown-menu {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.dropdown-item {
    color: var(--VRMS_foreground);
}

.dropdown-item:hover {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu > .dropdown-menu.show {
    display: block;
    z-index: 1000;
}

/* =========================================================
   BUTTONS / SYMBOLS
   ========================================================= */

.btn,
form .btn {
    background-color: var(--VRMS_button-bg);
    color: var(--VRMS_button-font);
    border: none;
    margin: 5px;
}

form .btn {
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
    font-size: 1rem !important;
}

.btn:hover {
    background-color: var(--VRMS_foreground);
    color: var(--VRMS_button-font-hover);
}

.btn-custom-danger {
    background-color: var(--VRMS_danger);
}

.btn-custom-success {
    background-color: var(--VRMS_success);
}

.btn-custom-waring,
.btn-custom-warning {
    background-color: var(--VRMS_warning);
}

.vrms-action-btn,
.vrms-icon-btn,
.vrms-table-action-btn,
.vrms-login-btn,
.person-open-btn {
    min-height: 42px;
    max-width: 100%;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-weight: 800;
    text-decoration: none;
    line-height: 1.2;
    white-space: normal;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-action-btn:hover,
.vrms-icon-btn:hover,
.vrms-table-action-btn:hover,
.vrms-login-btn:hover,
.person-open-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.btn-save {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
}

.btn-small,
.select-small {
    max-width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
}

.symbol-danger {
    color: var(--VRMS_danger);
}

.symbol-text {
    color: var(--VRMS_foreground);
}

.symbol-theme {
    color: var(--VRMS_background);
    background-color: var(--VRMS_foreground);
}

/* =========================================================
   FORMS
   ========================================================= */

.vrms-form-group {
    min-width: 0;
}

.vrms-form-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--VRMS_foreground);
    font-weight: 800;
}

.vrms-form-control,
.vrms-form-select,
.form-control,
.form-select {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-form-control,
.vrms-form-select {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    outline: none;
    font-weight: 650;
}

.vrms-form-control::placeholder,
.form-control::placeholder {
    color: var(--VRMS_foreground);
    opacity: 0.55;
}

.vrms-form-control:focus,
.vrms-form-select:focus,
.form-control:focus,
.form-select:focus {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--VRMS_accent) 24%, transparent);
}

.vrms-form-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vrms-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.vrms-checkbox-label {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--VRMS_foreground);
    font-weight: 750;
    cursor: pointer;
    user-select: none;
}

.vrms-checkbox-label input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--VRMS_accent);
}

.big-checkbox {
    transform: scale(1.5);
    margin-right: 10px;
}

/* =========================================================
   PANELS
   ========================================================= */

.vrms-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 1.5rem;
    padding: clamp(1rem, 2vw, 1.4rem);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    box-shadow: var(--VRMS_Shadow);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.vrms-panel-header {
    margin-bottom: 1rem;
}

.vrms-panel-header-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-panel-kicker {
    color: var(--VRMS_foreground);
    opacity: 0.7;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vrms-panel-title {
    margin: 0.15rem 0 0;
    color: var(--VRMS_foreground);
    font-size: clamp(1.35rem, 2vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

.vrms-panel-subtitle {
    margin: 0;
    color: var(--VRMS_foreground);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.vrms-empty-state {
    padding: 1.25rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 20%, transparent);
    font-weight: 800;
}

.vrms-empty-state-center {
    text-align: center;
}

/* =========================================================
   TABLES / DATATABLES
   ========================================================= */

table,
.custom-table,
.table-bordered,
table.dataTable {
    background-color: var(--VRMS_table-bg) !important;
    color: var(--VRMS_foreground) !important;
    --bs-table-bg: var(--VRMS_table-bg);
    --bs-table-color: var(--VRMS_foreground);
    --dt-row-stripe: var(--VRMS_table-striped);
    --dt-row-hover: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground) !important;
}

table thead th,
table.dataTable thead th {
    background-color: var(--VRMS_foreground) !important;
    color: var(--VRMS_table-bg) !important;
    border-color: var(--VRMS_table-bg) !important;
}

table.table-striped tbody tr:nth-of-type(odd),
table.dataTable.table-striped tbody tr.odd {
    background-color: var(--VRMS_table-striped) !important;
    color: var(--VRMS_background) !important;
    --bs-table-striped-bg: var(--VRMS_table-striped) !important;
    --bs-table-striped-color: var(--VRMS_background) !important;
}

table.dataTable.table-striped tbody tr.odd td {
    background-color: transparent !important;
    color: inherit !important;
}

table.table-hover tbody tr:hover,
table.dataTable.table-hover tbody tr:hover,
table.dataTable.table-hover tbody tr:hover > td {
    background-color: var(--VRMS_foreground) !important;
    color: var(--VRMS_background) !important;
    border-color: var(--VRMS_background) !important;
    --bs-table-hover-bg: var(--VRMS_foreground) !important;
    --bs-table-hover-color: var(--VRMS_background) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    color: var(--VRMS_foreground) !important;
    background-color: var(--VRMS_table-bg) !important;
    border: 1px solid var(--VRMS_foreground) !important;
}

/* =========================================================
   OPTION BOX / NAV PILLS
   ========================================================= */

.optionBox {
    display: inline-block;
    padding: 10px 15px;
    margin: 10px;
    border-radius: 20px;
    border: 2px solid var(--VRMS_accent);
    background-color: var(--VRMS_optionbox-bg);
    text-align: center;
    width: fit-content;
}

.optionBox .title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.optionBox .optionsRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.optionBox .option,
.optionBox .optionSelected {
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    color: var(--VRMS_foreground);
    transition: background-color 0.2s ease;
    background-color: var(--VRMS_optionbox-bg);
}

.optionBox .option:hover {
    background-color: var(--VRMS_optionbox-hover);
}

.optionBox .optionSelected {
    background-color: var(--VRMS_optionbox-selected);
}

.optionBox .optionSelected:hover {
    background-color: var(--VRMS_optionbox-hover);
}

.nav-pills .nav-link {
    background-color: transparent;
    color: var(--VRMS_foreground);
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    text-align: left;
}

.nav-pills .nav-link:hover {
    background-color: var(--VRMS_optionbox-hover);
    color: var(--VRMS_accent);
}

.nav-pills .nav-link.active {
    background-color: var(--VRMS_button-bg);
    color: var(--VRMS_button-font);
    border-color: var(--VRMS_accent);
    font-weight: bold;
}

/* =========================================================
   APPOINTMENTS / STATUS COLORS
   ========================================================= */

.appointment-container {
    border-style: solid;
    border-width: 5px;
    padding: 10px;
    margin: 10px;
    border-radius: 8px;
    border-color: var(--VRMS_create);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.appointment-container.appointed {
    border-color: var(--VRMS_appointment);
}

.appointment-container.released,
.appointment-container.changed {
    border-color: var(--VRMS_released);
}

.appointment-container.removed {
    border-color: var(--VRMS_removed);
}

.appointment-container.selectable {
    border-color: var(--VRMS_selectable);
}

.appointment-container.replacement {
    border-color: var(--VRMS_replacement);
}

.requestedContainer.pending {
    border-color: var(--VRMS_pending) !important;
}

.requestedContainer.rejected {
    border-color: var(--VRMS_rejected) !important;
}

.requestedContainer.accepted {
    border-color: var(--VRMS_accepted) !important;
}

.vrms-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    max-width: 100%;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: normal;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

/* =========================================================
   FLATPICKR
   ========================================================= */

.flatpickr-calendar.open,
.flatpickr-calendar.inline,
.flatpickr-rContainer,
.dayContainer,
.flatpickr-days,
.flatpickr-day {
    width: 100% !important;
    max-width: 100% !important;
}

.flatpickr-input {
    display: none;
}

/* =========================================================
   PUBLIC / INTERNAL GAME CARDS
   ========================================================= */

.vrms-public-games-container,
.vrms-game-card-grid {
    max-width: 1700px;
    margin-left: auto;
    margin-right: auto;
}

.vrms-public-games-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-public-games-header h1,
.vrms-public-games-header p {
    color: var(--VRMS_foreground);
}

.vrms-public-games-header h1 {
    margin-bottom: 0.35rem;
}

.vrms-public-games-header p {
    opacity: 0.85;
    margin-bottom: 0;
}

.vrms-public-games-range {
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    white-space: nowrap;
    font-weight: 600;
}

.vrms-game-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 1rem;
}

.vrms-game-card {
    border: 1px solid var(--VRMS_foreground);
    border-radius: 1rem;
    padding: 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.vrms-game-card.appointed {
 border-color: var(--VRMS-appointment);
}
.vrms-game-card.released {
  border-color: var(--VRMS_released);
}
.vrms-game-card.changed {
  border-color: var(--VRMS_released);
}
.vrms-game-card.removed {
  border-color: var(--VRMS_removed);
}
.vrms-game-card.selectable {
  border-color: var(--VRMS_selectable);
}
.vrms-game-card.replacement {
  border-color: var(--VRMS_replacement);
}

.vrms-game-card-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--VRMS_foreground);
    padding-bottom: 0.75rem;
    margin-bottom: 0.9rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-game-date,
.vrms-game-main,
.vrms-game-teams,
.vrms-game-venue,
.vrms-game-officials,
.vrms-official-card,
.vrms-official-name,
.vrms-official-meta,
.vrms-game-actions {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-game-date {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.vrms-game-date-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.vrms-game-date-day {
    font-weight: 700;
    font-size: 1.05rem;
}

.vrms-game-date-time {
    opacity: 0.85;
    font-size: 0.95rem;
}

.vrms-game-competition {
    text-align: right;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    color: var(--VRMS_foreground);
    font-size: 0.85rem;
}

.vrms-game-number {
    font-size: 0.8rem;
    opacity: 0.85;
    text-align: right;
}

.vrms-game-teams {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    text-align: center;
}

.vrms-game-team {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

.vrms-game-versus {
    justify-self: center;
    align-self: center;
    width: fit-content;
    padding: 0.1rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    opacity: 0.85;
}

.vrms-game-venue {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.vrms-game-map-link {
    color: var(--VRMS_foreground);
    text-decoration: none;
    opacity: 0.85;
}

.vrms-game-map-link:hover {
    color: var(--VRMS_foreground);
    opacity: 1;
}

.vrms-game-officials {
    border-top: 1px solid var(--VRMS_foreground);
    padding-top: 0.85rem;
}

.vrms-game-officials-title {
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.vrms-official-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 0.6rem;
}

.vrms-official-card {
    border: 1px solid var(--VRMS_foreground);
    border-radius: 0.75rem;
    overflow: hidden;
}

.vrms-official-function {
    width: 100%;
    text-align: center;
    padding: 0.35rem 0.5rem;
    font-weight: 700;
    border-bottom: 1px solid var(--VRMS_foreground);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    font-size: 0.85rem;
}

.vrms-official-name {
    text-align: center;
    padding: 0.55rem 0.5rem 0.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.vrms-official-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 0.45rem 0.55rem;
}

.vrms-official-meta span {
    display: inline-flex;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    font-size: 0.72rem;
    opacity: 0.9;
}

.vrms-game-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--VRMS_foreground);
}

.vrms-game-actions .btn {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-game-actions .btn:hover,
.vrms-game-actions .btn:focus {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-game-send-notice {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--VRMS_foreground);
    font-size: 0.9rem;
}

.vrms-game-send-notice input {
    accent-color: var(--VRMS_accent);
}

/* =========================================================
   PERSON CARDS
   ========================================================= */

.person-card-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: clamp(1rem, 1.4vw, 1.6rem);
    padding: clamp(0.75rem, 2vw, 2rem);
}

.person-card-wrapper {
    min-width: 0;
}

.person-card {
    position: relative;
    min-height: 280px;
    height: 100%;
    padding: clamp(1rem, 1.6vw, 1.4rem);
    border-radius: 2rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

.person-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, var(--VRMS_accent), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 45%);
    opacity: 0.18;
    pointer-events: none;
}

.person-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.24);
}

.person-card-image-wrap {
    position: relative;
    z-index: 1;
    width: clamp(82px, 6vw, 105px);
    height: clamp(82px, 6vw, 105px);
    border-radius: 50%;
    padding: 4px;
    background: var(--VRMS_Background);
    border: 3px solid var(--VRMS_Background);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
    flex: 0 0 auto;
}

.person-card-image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.person-card-body {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.person-card-status {
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.person-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border: 1px solid var(--VRMS_foreground);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.person-badge-disabled {
    opacity: 0.65;
}

.person-card-title {
    width: 100%;
    margin: 0.75rem 0 0.9rem;
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--VRMS_foreground);
    overflow-wrap: anywhere;
}

.person-card-meta {
    width: 100%;
    display: grid;
    gap: 0.55rem;
    margin-top: 0.25rem;
}

.person-meta-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 20%, transparent);
}

.person-meta-label {
    font-weight: 700;
    opacity: 0.8;
    color: var(--VRMS_foreground);
}

.person-meta-value {
    font-weight: 600;
    color: var(--VRMS_foreground);
    text-align: right;
    overflow-wrap: anywhere;
}

.person-card-actions {
    width: 100%;
    margin-top: auto;
    padding-top: 1.25rem;
}

.person-action-form {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    margin: 0;
}

.person-action-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.person-action-btn:hover {
    transform: translateY(-3px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.disabled-person {
    opacity: 0.52;
    filter: grayscale(0.85);
}

.disabled-person:hover {
    opacity: 0.7;
}

/* =========================================================
   REFEREE CARDS
   ========================================================= */

.referee-card .person-card-meta {
    gap: 0.5rem;
}

.referee-card .person-meta-row {
    align-items: center;
}

.referee-card .person-meta-value {
    max-width: 58%;
    overflow-wrap: anywhere;
}

/* =========================================================
   ACCOUNTING
   ========================================================= */

.vrms-page-container,
.vrms-accounting-detail-page {
    width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
}

.vrms-accounting-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.5rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    box-shadow: var(--VRMS_Shadow);
}

.vrms-accounting-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    overflow: hidden;
}

.vrms-accounting-table thead {
    background: color-mix(in srgb, var(--VRMS_foreground) 10%, transparent);
}

.vrms-accounting-table th,
.vrms-accounting-table td {
    padding: 1rem 1.1rem;
    color: var(--VRMS_foreground);
    vertical-align: middle;
}

.vrms-accounting-table th {
    font-weight: 850;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    text-align: left;
    border-bottom: 1px solid var(--VRMS_foreground);
    white-space: nowrap;
}

.vrms-accounting-table td {
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-accounting-table tbody tr:hover {
    background: color-mix(in srgb, var(--VRMS_accent) 12%, transparent);
}

.vrms-accounting-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-row-active {
    background: color-mix(in srgb, var(--VRMS_accent) 22%, transparent);
}

.vrms-table-link {
    color: var(--VRMS_foreground);
    text-decoration: none;
    font-weight: 800;
}

.vrms-table-link:hover {
    color: var(--VRMS_accent);
    text-decoration: none;
}

.vrms-amount-cell {
    text-align: right;
    white-space: nowrap;
    font-size: 1.02rem;
}

.vrms-summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 1.25rem;
    align-items: start;
}

.vrms-summary-facts {
    display: grid;
    gap: 0.65rem;
}

.vrms-summary-fact {
    display: grid;
    grid-template-columns: minmax(95px, 34%) 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-summary-label {
    color: var(--VRMS_foreground);
    opacity: 0.75;
    font-weight: 800;
}

.vrms-summary-value {
    color: var(--VRMS_foreground);
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.vrms-accounting-main-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(1rem, 2vw, 1.4rem);
    align-items: stretch;
}

.vrms-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.vrms-inline-warning {
    padding: 1rem;
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--VRMS_accent) 14%, transparent);
    border: 1px solid var(--VRMS_foreground);
    color: var(--VRMS_foreground);
}

.vrms-delete-person-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
    gap: 1rem;
    align-items: center;
    margin: 0;
}

/* =========================================================
   TOURNAMENT
   ========================================================= */

.vrms-tournament-page,
.vrms-tournament-list-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-tournament-page *,
.vrms-tournament-list-page * {
    box-sizing: border-box;
}

.vrms-tournament-header {
    position: relative;
}

.vrms-tournament-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, var(--VRMS_accent), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 45%);
    opacity: 0.14;
    pointer-events: none;
}

.vrms-tournament-header-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 540px);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: center;
}

.vrms-tournament-date {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--VRMS_foreground);
    opacity: 0.82;
    font-weight: 700;
}

.vrms-tournament-facts {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.vrms-fact-box,
.vrms-info-item {
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-fact-label,
.vrms-info-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--VRMS_foreground);
    opacity: 0.72;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vrms-fact-value,
.vrms-info-value {
    display: block;
    color: var(--VRMS_foreground);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.vrms-people-grid {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
}

.vrms-person-list {
    display: grid;
    gap: 0.75rem;
}

.vrms-person-row {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem;
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 20%, transparent);
    color: var(--VRMS_foreground);
}

.vrms-person-avatar {
    width: 54px;
    height: 54px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--VRMS_foreground);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.vrms-person-content {
    min-width: 0;
}

.vrms-person-name {
    color: var(--VRMS_foreground);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-person-meta {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    color: var(--VRMS_foreground);
    opacity: 0.78;
    font-size: 0.9rem;
    font-weight: 650;
}

.vrms-round-action-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-round-action-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-more-summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-weight: 850;
}

.vrms-games-panel,
.vrms-game-view-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.vrms-games-panel {
    overflow: hidden;
}

.vrms-game-safe-area {
    overflow: hidden;
}

.vrms-game-safe-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.35rem;
}

.vrms-game-safe-scroll > * {
    max-width: 100%;
}

.vrms-game-safe-scroll::-webkit-scrollbar {
    height: 8px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--VRMS_foreground) 10%, transparent);
    border-radius: 999px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-thumb {
    background: var(--VRMS_foreground);
    border-radius: 999px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--VRMS_accent);
}

/* Tournament list */

.vrms-season-form {
    width: 100%;
    max-width: 520px;
}

.vrms-tournament-card-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
    gap: clamp(1rem, 1.5vw, 1.4rem);
}

.vrms-tournament-form {
    margin: 0;
    min-width: 0;
}

.vrms-tournament-card {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 100%;
    border-radius: 1.5rem;
    padding: clamp(1rem, 2vw, 1.25rem);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

.vrms-tournament-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, var(--VRMS_accent), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 45%);
    opacity: 0.12;
    pointer-events: none;
}

.vrms-tournament-card > * {
    position: relative;
    z-index: 1;
}

.vrms-tournament-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vrms-tournament-card-title {
    margin: 0.15rem 0 0;
    color: var(--VRMS_foreground);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-tournament-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.vrms-tournament-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Status colors for tournament cards */

.vrms-tournament-card.appointed {
    border-color: var(--VRMS_appointment);
}

.vrms-tournament-card.appointed .vrms-status-badge {
    border-color: var(--VRMS_appointment);
    background: color-mix(in srgb, var(--VRMS_appointment) 24%, var(--VRMS_Background));
}

.vrms-tournament-card.released,
.vrms-tournament-card.changed,
.vrms-tournament-card.freigegeben {
    border-color: var(--VRMS_released);
}

.vrms-tournament-card.released .vrms-status-badge,
.vrms-tournament-card.changed .vrms-status-badge,
.vrms-tournament-card.freigegeben .vrms-status-badge {
    border-color: var(--VRMS_released);
    background: color-mix(in srgb, var(--VRMS_released) 24%, var(--VRMS_Background));
}

.vrms-tournament-card.removed,
.vrms-tournament-card.gesperrt,
.vrms-tournament-card.deleted,
.vrms-tournament-card.inactive {
    border-color: var(--VRMS_removed);
}

.vrms-tournament-card.removed .vrms-status-badge,
.vrms-tournament-card.gesperrt .vrms-status-badge,
.vrms-tournament-card.deleted .vrms-status-badge,
.vrms-tournament-card.inactive .vrms-status-badge {
    border-color: var(--VRMS_removed);
    background: color-mix(in srgb, var(--VRMS_removed) 24%, var(--VRMS_Background));
}

.vrms-tournament-card.selectable {
    border-color: var(--VRMS_selectable);
}

.vrms-tournament-card.selectable .vrms-status-badge {
    border-color: var(--VRMS_selectable);
    background: color-mix(in srgb, var(--VRMS_selectable) 24%, var(--VRMS_Background));
}

.vrms-tournament-card.replacement {
    border-color: var(--VRMS_replacement);
}

.vrms-tournament-card.replacement .vrms-status-badge {
    border-color: var(--VRMS_replacement);
    background: color-mix(in srgb, var(--VRMS_replacement) 24%, var(--VRMS_Background));
}

/* =========================================================
   LOGIN
   ========================================================= */

.vrms-login-page {
    min-height: calc(100vh - 2rem);
    width: 100%;
    display: grid;
    place-items: start center;
    padding: clamp(1rem, 4vw, 2rem);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-login-card {
    width: min(100%, 420px);
    border-radius: 2rem;
    padding: clamp(1.35rem, 4vw, 2rem);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
}

.vrms-login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, var(--VRMS_accent), transparent 35%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 46%);
    opacity: 0.16;
    pointer-events: none;
}

.vrms-login-header,
.vrms-login-form,
.vrms-language-form,
.vrms-login-error {
    position: relative;
    z-index: 1;
}

.vrms-login-header {
    text-align: center;
    margin-bottom: 1.35rem;
}

.vrms-login-kicker {
    color: var(--VRMS_foreground);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.vrms-login-logo {
    height: 5rem;
}

.vrms-login-title {
    margin: 0.2rem 0 0;
    color: var(--VRMS_foreground);
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 950;
    letter-spacing: 0.02em;
}

.vrms-login-error {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    text-align: center;
    font-weight: 800;
}

.vrms-login-form {
    display: grid;
    gap: 1rem;
}

.vrms-language-form {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.75rem;
}

.vrms-language-form select,
.vrms-language-form button,
.vrms-language-form input[type="submit"] {
    width: 100%;
    min-height: 42px;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    outline: none;
}

/* =========================================================
   DASHBOARD
   ========================================================= */

.vrms-dashboard-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-dashboard-page * {
    box-sizing: border-box;
}

.vrms-dashboard-welcome {
    position: relative;
}

.vrms-dashboard-welcome::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, var(--VRMS_accent), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 45%);
    opacity: 0.14;
    pointer-events: none;
}

.vrms-dashboard-welcome-content {
    position: relative;
    z-index: 1;
}

.vrms-dashboard-games-safe-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.vrms-dashboard-games-safe-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.35rem;
}

.vrms-debug-panel {
    border-style: dashed;
}

.vrms-debug-form {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vrms-debug-output {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-notice-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

/* =========================================================
   NEW GAME FORM / AUTOCOMPLETE
   ========================================================= */

.vrms-game-form-page {
    width: 100%;
    max-width: 100%;
    color: var(--VRMS_foreground);
}

.vrms-game-form-page * {
    box-sizing: border-box;
}

.vrms-game-form-panel {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.vrms-game-form-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at top left, var(--VRMS_accent), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 45%);
    opacity: 0.12;
    pointer-events: none;
}

.vrms-game-form-panel > * {
    position: relative;
    z-index: 1;
}

.vrms-message-container {
    margin-bottom: 1rem;
}

.vrms-game-form {
    display: grid;
    gap: 1.25rem;
}

.vrms-autocomplete {
    position: relative;
    width: 100%;
    min-width: 0;
    z-index: 10;
}

.vrms-autocomplete-results {
    position: absolute;
    z-index: 1040;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.4rem;
    border-radius: 1rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

/* Nur echte Treffer stylen */
.vrms-autocomplete-item {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 0.65rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: none;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    font-weight: 650;
    line-height: 1.25;
}

/* Abstand zwischen Treffern */
.vrms-autocomplete-item + .vrms-autocomplete-item {
    margin-top: 0.15rem;
}

/* Hover und Tastatur-Auswahl */
.vrms-autocomplete-item:hover,
.vrms-autocomplete-item.is-active {
    background: var(--VRMS_accent) !important;
    color: var(--VRMS_foreground) !important;
}

/* Kein-Treffer-Anzeige */
.vrms-autocomplete-empty {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 0.65rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    opacity: 0.7;
    font-style: italic;
}

/* Falls emptyText leer ist, keinen leeren Balken anzeigen */
.vrms-autocomplete-empty:empty {
    display: none !important;
}

/* Wenn ein Bootstrap-Modal offen ist, Autocomplete sicher verstecken */
body.modal-open .vrms-autocomplete-results {
    display: none !important;
}

.vrms-new-venue-wrapper {
    border-radius: 1.25rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-subsection-header {
    margin-bottom: 1rem;
}

/* =========================================================
   STATE HELPERS
   ========================================================= */

.referee-not-active {
    opacity: 0.55;
    filter: grayscale(0.4);
}

.referee-active {
    opacity: 1;
}

.officials-list {
    max-width: 350px;
    overflow-y: auto;
}

.newAssignedReferee {
    background-color: var(--VRMS_newAssignment);
}

.removeAssignedReferee {
    background-color: var(--VRMS_red-light);
}

.penaltyRefereeNoShow {
    background-color: var(--VRMS_red);
}

.functionDiv,
.selectedBox {
    border-radius: 0.375rem;
    border-style: solid;
    border-width: 2px;
    align-items: flex-start;
    justify-items: flex-start;
    width: 100%;
    padding: 3px;
    margin-top: 2px;
    margin-bottom: 3px;
}

.functionDiv {
    border-color: var(--VRMS_button-font);
}

.selectedBox {
    border-color: var(--VRMS_success);
}

.showApiKey {
    font-size: 0.8rem;
    margin-top: 4px;
    padding: 4px 8px;
    border: 1px dashed var(--VRMS_red);
    border-radius: 8px;
    display: inline-block;
    color: var(--VRMS_background);
    background-color: var(--VRMS_foreground);
}

.toggle-filter {
    background: var(--VRMS_foreground);
    color: var(--VRMS_background);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 1200px) {
    .person-card {
        min-height: 220px;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1.25rem;
    }

    .person-card-image-wrap {
        width: 92px;
        height: 92px;
    }

    .person-card-body {
        align-items: stretch;
        text-align: left;
    }

    .person-card-status {
        justify-content: flex-start;
        margin-top: 0;
        min-height: auto;
    }

    .person-card-title {
        margin: 0.55rem 0 0.75rem;
    }

    .person-action-form {
        justify-content: flex-start;
    }

    .referee-card {
        min-height: 250px;
    }
}

@media (min-width: 1400px) {
    .vrms-game-card-grid {
        grid-template-columns: 1fr;
        max-width: 1600px;
    }

    .vrms-game-card {
        display: grid;
        grid-template-columns: 260px minmax(360px, 1fr) minmax(420px, 1.4fr);
        gap: 1.25rem;
        align-items: stretch;
        padding: 1.25rem;
    }

    .vrms-game-card-top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-bottom: none;
        border-right: 1px solid var(--VRMS_foreground);
        padding-bottom: 0;
        padding-right: 1.25rem;
        margin-bottom: 0;
    }

    .vrms-game-officials {
        border-top: none;
        border-left: 1px solid var(--VRMS_foreground);
        padding-top: 0;
        padding-left: 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (min-width: 1600px) {
    .person-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    }
}

@media (min-width: 1800px) {
    .person-card {
        min-height: 230px;
        padding: 1.35rem;
    }

    .person-card-image-wrap {
        width: 98px;
        height: 98px;
    }
}

@media (min-width: 2200px) {
    .vrms-public-games-container,
    .vrms-game-card-grid {
        max-width: 1850px;
    }

    .vrms-game-card {
        grid-template-columns: 280px minmax(480px, 1fr) minmax(520px, 1.3fr);
    }

    .person-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .vrms-summary-layout,
    .vrms-accounting-main-grid,
    .vrms-tournament-header-layout {
        grid-template-columns: 1fr;
    }

    .vrms-people-grid {
        grid-template-columns: 1fr;
    }

    .vrms-tournament-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .vrms-form-grid,
    .vrms-filter-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .vrms-panel,
    .vrms-login-card,
    .vrms-tournament-card {
        border-radius: 1.25rem;
        padding: 1rem;
    }

    .vrms-page-container,
    .vrms-accounting-detail-page,
    .vrms-tournament-page,
    .vrms-tournament-list-page,
    .vrms-dashboard-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-panel-header-between,
    .vrms-tournament-card-header,
    .vrms-detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .vrms-action-btn,
    .vrms-icon-btn,
    .vrms-table-action-btn,
    .person-open-btn {
        width: 100%;
    }

    .vrms-action-grid,
    .vrms-release-form,
    .vrms-form-actions,
    .vrms-tournament-actions,
    .vrms-debug-form {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .vrms-tournament-facts,
    .vrms-tournament-info-grid {
        grid-template-columns: 1fr;
    }

    .vrms-person-row {
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
    }

    .vrms-person-avatar {
        width: 48px;
        height: 48px;
    }

    .vrms-row-action-form {
        grid-column: 1 / -1;
    }

    .vrms-round-action-btn {
        width: 100%;
        border-radius: 999px;
    }

    .person-card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem;
    }

    .person-card {
        min-height: auto;
        border-radius: 1.5rem;
        padding: 1rem;
        display: grid;
        grid-template-columns: 76px 1fr;
        column-gap: 1rem;
        align-items: center;
        text-align: left;
    }

    .person-card-image-wrap {
        width: 76px;
        height: 76px;
        margin: 0;
        grid-row: span 2;
    }

    .person-card-body {
        align-items: stretch;
        text-align: left;
    }

    .person-card-status {
        justify-content: flex-start;
        min-height: auto;
        margin-top: 0;
    }

    .person-meta-row {
        padding: 0.45rem 0.6rem;
        font-size: 0.9rem;
    }

    .vrms-accounting-table-wrap {
        overflow: visible;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .vrms-accounting-table,
    .vrms-accounting-table thead,
    .vrms-accounting-table tbody,
    .vrms-accounting-table tr,
    .vrms-accounting-table td {
        display: block;
        width: 100%;
    }

    .vrms-accounting-table {
        background: transparent;
    }

    .vrms-accounting-table thead {
        display: none;
    }

    .vrms-accounting-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-accounting-table tr {
        border-radius: 1.3rem;
        padding: 0.85rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-accounting-table td {
        display: grid;
        grid-template-columns: minmax(105px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
    }

    .vrms-accounting-table td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-accounting-table td:last-child {
        border-bottom: none;
    }

    .vrms-autocomplete-results {
        max-height: 220px;
    }

    .vrms-public-games-header {
        flex-direction: column;
    }

    .vrms-public-games-range {
        width: 100%;
        text-align: center;
    }

    .vrms-game-card-grid {
        grid-template-columns: 1fr;
    }

    .vrms-game-card {
        padding: 0.85rem;
        border-radius: 0.85rem;
    }

    .vrms-game-card-top {
        flex-direction: column;
    }

    .vrms-official-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .referee-card .person-meta-value {
        max-width: 55%;
    }
}

@media (max-width: 420px) {
    .vrms-panel-title {
        font-size: 1.15rem;
    }

    .vrms-panel-subtitle {
        font-size: 1rem;
    }

    .vrms-action-btn {
        min-height: 42px;
        font-size: 0.92rem;
    }

    .vrms-info-item,
    .vrms-fact-box {
        padding: 0.65rem 0.75rem;
    }

    .vrms-accounting-table td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-accounting-table td::before {
        font-size: 0.8rem;
    }

    .vrms-login-logo {
        height: 3rem;
    }

    .vrms-official-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   VRMS Autocomplete Layer Fix
   Geöffnete Autocomplete-Liste liegt über den folgenden Textfeldern
   ========================================================= */

.vrms-autocomplete {
    position: relative;
    width: 100%;
    min-width: 0;
    z-index: 1;
}

.vrms-autocomplete:focus-within {
    z-index: 3000;
}

.vrms-form-group:has(.vrms-autocomplete:focus-within) {
    position: relative;
    z-index: 3000;
}

.vrms-autocomplete-results {
    position: absolute;
    z-index: 3001;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.4rem;
    border-radius: 1rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.vrms-autocomplete-item {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 0.65rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: none;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    font-weight: 650;
    line-height: 1.25;
}

.vrms-autocomplete-item + .vrms-autocomplete-item {
    margin-top: 0.15rem;
}

.vrms-autocomplete-item:hover,
.vrms-autocomplete-item.is-active {
    background: var(--VRMS_accent) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-autocomplete-empty {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: 0.65rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    opacity: 0.7;
    font-style: italic;
}

.vrms-autocomplete-empty:empty {
    display: none !important;
}

/* Bei offenem Bootstrap-Modal Autocomplete sicher ausblenden */
body.modal-open .vrms-autocomplete-results {
    display: none !important;
}
/* =========================================================
   Calendar Devices View
   ========================================================= */

.vrms-calendar-devices-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-calendar-devices-page,
.vrms-calendar-devices-page * {
    box-sizing: border-box;
}

.vrms-calendar-devices-panel {
    overflow: visible;
}

.vrms-panel-description {
    margin: 0.65rem 0 0;
    max-width: 900px;
    color: var(--VRMS_foreground);
    opacity: 0.82;
    font-weight: 600;
    line-height: 1.5;
}

.vrms-alert-area {
    margin-bottom: 1rem;
}

.vrms-device-create-box,
.vrms-device-table-box {
    width: 100%;
    border-radius: 1.25rem;
    padding: clamp(1rem, 2vw, 1.25rem);
    background: color-mix(in srgb, var(--VRMS_foreground) 6%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-device-create-box {
    margin-bottom: 1rem;
}

.vrms-device-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 1rem;
    align-items: end;
}

.vrms-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 1rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-device-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-device-table thead {
    background: color-mix(in srgb, var(--VRMS_foreground) 10%, transparent);
}

.vrms-device-table th {
    padding: 1rem;
    color: var(--VRMS_foreground);
    font-weight: 850;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    text-align: left;
    border-bottom: 1px solid var(--VRMS_foreground);
    white-space: nowrap;
}

.vrms-device-table td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-device-table tbody tr:hover {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, transparent);
}

.vrms-device-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-device-table a {
    color: var(--VRMS_foreground);
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.vrms-device-table a:hover {
    color: var(--VRMS_accent);
}

.vrms-device-table .btn {
    min-height: 38px;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-weight: 800;
    text-decoration: none;
}

.vrms-device-table .btn:hover {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

/* Optional für Status-Ausgabe aus JS */
.vrms-device-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.vrms-device-status.active {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 22%, var(--VRMS_Background));
}

.vrms-device-status.disabled,
.vrms-device-status.inactive {
    border-color: var(--VRMS_removed);
    background: color-mix(in srgb, var(--VRMS_removed) 22%, var(--VRMS_Background));
    opacity: 0.82;
}

/* Link-/Token-Feld, falls JS einen langen Kalenderlink ausgibt */
.vrms-calendar-link-value {
    display: inline-block;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

/* =========================================================
   Mobile Card Table
   ========================================================= */

@media (max-width: 767.98px) {
    .vrms-calendar-devices-page {
        padding: 0.5rem;
    }

    .vrms-device-create-box,
    .vrms-device-table-box {
        border-radius: 1.15rem;
        padding: 1rem;
    }

    .vrms-device-create-grid {
        grid-template-columns: 1fr;
    }

    .vrms-table-scroll {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-device-table {
        display: block;
        min-width: 0;
        background: transparent;
    }

    .vrms-device-table thead {
        display: none;
    }

    .vrms-device-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-device-table tr {
        display: block;
        border-radius: 1.15rem;
        padding: 0.85rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-device-table td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .vrms-device-table td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-device-table td:last-child {
        border-bottom: none;
    }

    .vrms-device-table td[colspan] {
        display: block;
        text-align: center;
    }

    .vrms-device-table td[colspan]::before {
        content: "";
        display: none;
    }

    .vrms-calendar-link-value {
        max-width: 100%;
        white-space: normal;
        text-align: right;
    }

    .vrms-device-table .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-device-table td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-device-table td::before {
        font-size: 0.8rem;
    }

    .vrms-calendar-link-value {
        text-align: left;
    }
}

/* =========================================================
   VRMS Mail Notification Options
   ========================================================= */

.vrms-mail-options-panel {
    width: 100%;
    max-width: 100%;
}

.vrms-option-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-option-card-content {
    min-width: 0;
}

.vrms-option-title {
    color: var(--VRMS_foreground);
    font-weight: 900;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.vrms-option-description {
    margin-top: 0.25rem;
    color: var(--VRMS_foreground);
    opacity: 0.72;
    font-size: 0.9rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.vrms-option-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-option-btn {
    min-width: 88px;
    min-height: 40px;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--VRMS_foreground);
    font-weight: 850;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vrms-option-btn:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--VRMS_accent) 12%, transparent);
    border-color: var(--VRMS_foreground);
}

/* Kompatibel zu deiner bestehenden JS-Logik */
.vrms-option-btn.option {
    background: transparent;
    color: var(--VRMS_foreground);
}

.vrms-option-btn.optionSelected {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

@media (max-width: 767.98px) {
    .vrms-option-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-option-toggle {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-option-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Games Admin / Filter View
   ========================================================= */

.vrms-games-admin-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-games-admin-page,
.vrms-games-admin-page * {
    box-sizing: border-box;
}

.vrms-games-toolbar-panel {
    overflow: visible;
}

.vrms-games-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(260px, 520px) minmax(0, 1fr);
    gap: 1rem;
    align-items: end;
}

.vrms-season-select-wrap {
    min-width: 0;
}

.vrms-day-nav {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    justify-self: stretch;
}

.vrms-day-nav-btn {
    width: auto;
    min-width: 130px;
}

.vrms-current-day {
    min-height: 44px;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-weight: 850;
    text-align: center;
    overflow-wrap: anywhere;
}

.vrms-current-day-label {
    opacity: 0.72;
    font-weight: 800;
}

.vrms-current-day-value {
    font-weight: 950;
}

.vrms-filter-toggle-wrapper {
    margin-top: 1rem;
}

.vrms-filter-toggle-btn {
    width: auto;
}

.vrms-filter-box {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-filter-fields-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}

/* Falls JS Bootstrap col-* Felder in #filterFields einfügt */
#filterFields > [class*="col-"] {
    width: 100%;
    max-width: 100%;
}

#filterFields label,
#filterFields .form-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--VRMS_foreground);
    font-weight: 800;
}

#filterFields input,
#filterFields select,
#filterFields textarea,
#filterFields .form-control,
#filterFields .form-select {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    outline: none;
}

#filterFields input:focus,
#filterFields select:focus,
#filterFields textarea:focus,
#filterFields .form-control:focus,
#filterFields .form-select:focus {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--VRMS_accent) 24%, transparent);
}

.vrms-filter-actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vrms-filter-actions .vrms-action-btn {
    width: auto;
}

.vrms-view-switch {
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-weight: 850;
    cursor: pointer;
    user-select: none;
}

.vrms-view-switch input {
    cursor: pointer;
    accent-color: var(--VRMS_accent);
}

.vrms-games-result-panel {
    min-width: 0;
    overflow: hidden;
}

/*
   Wichtig:
   Die eigentlichen getGamesView()-Views werden nicht angegriffen.
   Sie werden nur sicher scrollbar gekapselt.
*/
.vrms-game-safe-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.vrms-game-safe-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.35rem;
}

.vrms-game-safe-scroll > * {
    max-width: 100%;
}

.vrms-game-safe-scroll::-webkit-scrollbar {
    height: 8px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--VRMS_foreground) 10%, transparent);
    border-radius: 999px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-thumb {
    background: var(--VRMS_foreground);
    border-radius: 999px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--VRMS_accent);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991.98px) {
    .vrms-games-toolbar {
        grid-template-columns: 1fr;
    }

    .vrms-day-nav {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .vrms-day-nav-btn {
        min-width: 52px;
    }
}

@media (max-width: 767.98px) {
    .vrms-games-admin-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-day-nav {
        grid-template-columns: 1fr;
    }

    .vrms-day-nav-btn {
        width: 100%;
    }

    .vrms-current-day {
        border-radius: 1rem;
        flex-direction: column;
        gap: 0.15rem;
    }

    .vrms-filter-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-filter-actions .vrms-action-btn,
    .vrms-view-switch,
    .vrms-filter-toggle-btn {
        width: 100%;
    }

    .vrms-view-switch {
        justify-content: center;
    }

    .vrms-filter-box {
        border-radius: 1rem;
        padding: 0.85rem;
    }
}

@media (max-width: 420px) {
    .vrms-current-day {
        font-size: 0.9rem;
    }
}

/* =========================================================
   Person Edit View
   ========================================================= */

.vrms-person-edit-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-person-edit-page,
.vrms-person-edit-page * {
    box-sizing: border-box;
}

.vrms-person-edit-panel {
    overflow: visible;
}

.vrms-person-edit-form {
    width: 100%;
}

.vrms-person-edit-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
}

.vrms-person-sidebar {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.vrms-profile-image-box {
    display: grid;
    gap: 1rem;
    justify-items: center;
    padding: 1rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-profile-image {
    width: 140px;
    height: 140px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: var(--VRMS_Background);
    border: 3px solid var(--VRMS_foreground);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.vrms-profile-upload {
    width: 100%;
}

.vrms-profile-upload .vrms-form-control {
    border-radius: 1rem;
    min-height: 42px;
    padding: 0.5rem 0.75rem;
}

.vrms-person-tabs {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-person-tabs .nav-link {
    width: 100%;
    min-height: 42px;
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 800;
    text-align: left;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vrms-person-tabs .nav-link:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--VRMS_accent) 14%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
}

.vrms-person-tabs .nav-link.active {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
}

.vrms-person-actions {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-person-actions .vrms-action-btn {
    width: 100%;
    margin: 0;
}

.vrms-person-content {
    min-width: 0;
}

.vrms-person-tab-content {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.25rem);
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

/* Enthaltene Tab-Views sanft an VRMS anpassen, ohne IDs anzufassen */

.vrms-person-tab-content .form-label,
.vrms-person-tab-content label {
    color: var(--VRMS_foreground);
    font-weight: 800;
}

.vrms-person-tab-content .form-control,
.vrms-person-tab-content .form-select,
.vrms-person-tab-content input,
.vrms-person-tab-content select,
.vrms-person-tab-content textarea {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-person-tab-content .form-control,
.vrms-person-tab-content .form-select {
    min-height: 42px;
    border-radius: 999px;
    padding: 0.55rem 1rem;
}

.vrms-person-tab-content textarea.form-control,
.vrms-person-tab-content textarea {
    border-radius: 1rem;
}

.vrms-person-tab-content .form-control:focus,
.vrms-person-tab-content .form-select:focus,
.vrms-person-tab-content input:focus,
.vrms-person-tab-content select:focus,
.vrms-person-tab-content textarea:focus {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--VRMS_accent) 24%, transparent);
    outline: none;
}

.vrms-person-tab-content .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 1rem;
}

.vrms-person-tab-content table {
    color: var(--VRMS_foreground);
}

.vrms-person-tab-content .btn {
    border-radius: 999px;
}

/* Mobile */

@media (max-width: 991.98px) {
    .vrms-person-edit-layout {
        grid-template-columns: 1fr;
    }

    .vrms-person-sidebar {
        position: static;
    }

    .vrms-profile-image-box {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: stretch;
    }

    .vrms-profile-image {
        width: 96px;
        height: 96px;
    }

    .vrms-person-tabs {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.65rem;
    }

    .vrms-person-tabs .nav-link {
        width: auto;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .vrms-person-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .vrms-person-edit-page {
        padding: 0.5rem;
    }

    .vrms-profile-image-box {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .vrms-person-actions {
        grid-template-columns: 1fr;
    }

    .vrms-person-tab-content {
        padding: 1rem;
        border-radius: 1.1rem;
    }

    .vrms-person-tabs .nav-link {
        min-height: 40px;
        font-size: 0.92rem;
    }
}

@media (max-width: 420px) {
    .vrms-profile-image {
        width: 84px;
        height: 84px;
    }
}

/* =========================================================
   Person Edit - Address Tab
   ========================================================= */

.vrms-address-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-tab-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.vrms-tab-title {
    margin: 0.15rem 0 0;
    color: var(--VRMS_foreground);
    font-size: clamp(1.2rem, 1.7vw, 1.6rem);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-add-entry-btn {
    width: auto;
    min-width: 130px;
}

.vrms-address-container {
    display: grid;
    gap: 1rem;
}

.vrms-address-entry {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vrms-address-entry-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-default-radio {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.vrms-default-radio input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--VRMS_accent);
}

.vrms-delete-entry-btn {
    width: auto;
    min-width: 120px;
}

.vrms-delete-entry-btn:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

@media (max-width: 767.98px) {
    .vrms-tab-header {
        flex-direction: column;
        align-items: stretch;
    }

    .vrms-add-entry-btn {
        width: 100%;
    }

    .vrms-address-grid {
        grid-template-columns: 1fr;
    }

    .vrms-address-entry {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-address-entry-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-default-radio,
    .vrms-delete-entry-btn {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   Person Edit - Contact Tab
   ========================================================= */

.vrms-contact-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-contact-container {
    display: grid;
    gap: 1rem;
}

.vrms-contact-entry {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-contact-grid {
    display: grid;
    grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 1rem;
}

.vrms-contact-entry-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-contact-type-badge {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-weight: 800;
}

.vrms-contact-type-badge i {
    color: var(--VRMS_foreground);
}

.vrms-delete-entry-btn {
    width: auto;
    min-width: 120px;
}

.vrms-delete-entry-btn:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Falls der Select disabled ist, soll er trotzdem lesbar bleiben */
.vrms-contact-entry select:disabled,
.vrms-contact-entry .form-control:disabled {
    opacity: 0.85;
    background: color-mix(in srgb, var(--VRMS_foreground) 8%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-color: color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
}

@media (max-width: 991.98px) {
    .vrms-contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .vrms-contact-descr-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .vrms-contact-grid {
        grid-template-columns: 1fr;
    }

    .vrms-contact-entry {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-contact-entry-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-contact-type-badge,
    .vrms-delete-entry-btn {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   Person Edit - Bank Tab
   ========================================================= */

.vrms-bank-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-bank-container {
    display: grid;
    gap: 1rem;
}

.vrms-bank-entry {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-bank-grid {
    display: grid;
    grid-template-columns: minmax(140px, 0.55fr) minmax(220px, 1fr) minmax(260px, 1.25fr) minmax(180px, 0.8fr);
    gap: 1rem;
}

.vrms-bank-entry-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-bank-status-badge {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-weight: 800;
}

.vrms-bank-status-badge.is-active {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 20%, var(--VRMS_Background));
}

.vrms-bank-status-badge.is-disabled {
    border-color: var(--VRMS_removed);
    background: color-mix(in srgb, var(--VRMS_removed) 20%, var(--VRMS_Background));
}

.vrms-delete-entry-btn {
    width: auto;
    min-width: 120px;
}

.vrms-delete-entry-btn:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

@media (max-width: 1199.98px) {
    .vrms-bank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .vrms-bank-grid {
        grid-template-columns: 1fr;
    }

    .vrms-bank-entry {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-bank-entry-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-bank-status-badge,
    .vrms-delete-entry-btn {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   Person Edit - User Account Tab
   ========================================================= */

.vrms-user-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-user-container {
    display: grid;
    gap: 1rem;
}

.vrms-user-entry {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-user-entry-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1rem;
}

.vrms-user-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.vrms-user-avatar i {
    font-size: 1.25rem;
}

.vrms-user-title-block {
    min-width: 0;
}

.vrms-user-title {
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-user-subtitle {
    margin-top: 0.25rem;
    color: var(--VRMS_foreground);
    opacity: 0.76;
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-user-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(260px, 1.25fr);
    gap: 1rem;
}

.vrms-user-entry-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vrms-user-entry-footer .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

.vrms-user-entry input:disabled,
.vrms-user-entry .form-control:disabled {
    opacity: 0.86;
    background: color-mix(in srgb, var(--VRMS_foreground) 8%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-color: color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
}

.vrms-delete-entry-btn:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

@media (max-width: 991.98px) {
    .vrms-user-grid {
        grid-template-columns: 1fr;
    }

    .vrms-user-entry-footer {
        justify-content: stretch;
    }

    .vrms-user-entry-footer .vrms-action-btn {
        flex: 1 1 180px;
    }
}

@media (max-width: 767.98px) {
    .vrms-user-entry {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-user-entry-header {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .vrms-user-avatar {
        width: 46px;
        height: 46px;
    }

    .vrms-user-entry-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-user-entry-footer .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Person Edit - External ID Tab
   ========================================================= */

.vrms-extern-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-extern-container {
    display: grid;
    gap: 1rem;
}

.vrms-extern-entry {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-extern-entry-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1rem;
}

.vrms-extern-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.vrms-extern-avatar i {
    font-size: 1.25rem;
}

.vrms-extern-title-block {
    min-width: 0;
}

.vrms-extern-title {
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-extern-subtitle {
    margin-top: 0.25rem;
    color: var(--VRMS_foreground);
    opacity: 0.76;
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-extern-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(260px, 1.25fr);
    gap: 1rem;
}

.vrms-extern-entry-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-extern-badge {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-weight: 800;
}

.vrms-extern-entry input:disabled,
.vrms-extern-entry select:disabled,
.vrms-extern-entry .form-control:disabled {
    opacity: 0.86;
    background: color-mix(in srgb, var(--VRMS_foreground) 8%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-color: color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
}

.vrms-delete-entry-btn {
    width: auto;
    min-width: 120px;
}

.vrms-delete-entry-btn:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

@media (max-width: 991.98px) {
    .vrms-extern-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .vrms-extern-entry {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-extern-entry-header {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .vrms-extern-avatar {
        width: 46px;
        height: 46px;
    }

    .vrms-extern-entry-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-extern-badge,
    .vrms-delete-entry-btn {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   Person Edit - Function Tab
   ========================================================= */

.vrms-function-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-function-container {
    display: grid;
    gap: 1rem;
}

.vrms-function-entry {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-function-entry.is-active {
    border-color: var(--VRMS_success);
}

.vrms-function-entry.is-disabled {
    opacity: 0.72;
    filter: grayscale(0.35);
    border-color: var(--VRMS_removed);
}

.vrms-function-entry-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1rem;
}

.vrms-function-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.vrms-function-avatar i {
    font-size: 1.25rem;
}

.vrms-function-title-block {
    min-width: 0;
}

.vrms-function-title {
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-function-subtitle {
    margin-top: 0.25rem;
    color: var(--VRMS_foreground);
    opacity: 0.76;
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-function-status-badge {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-function-status-badge.is-active {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 20%, var(--VRMS_Background));
}

.vrms-function-status-badge.is-disabled {
    border-color: var(--VRMS_removed);
    background: color-mix(in srgb, var(--VRMS_removed) 20%, var(--VRMS_Background));
}

.vrms-function-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(260px, 1.25fr);
    gap: 1rem;
}

.vrms-function-entry-footer {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vrms-function-entry-footer .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

.vrms-function-entry input:disabled,
.vrms-function-entry .form-control:disabled {
    opacity: 0.86;
    background: color-mix(in srgb, var(--VRMS_foreground) 8%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-color: color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
}

.vrms-delete-entry-btn:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

@media (max-width: 991.98px) {
    .vrms-function-grid {
        grid-template-columns: 1fr;
    }

    .vrms-function-entry-footer {
        justify-content: stretch;
    }

    .vrms-function-entry-footer .vrms-action-btn {
        flex: 1 1 180px;
    }
}

@media (max-width: 767.98px) {
    .vrms-function-entry {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-function-entry-header {
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: start;
    }

    .vrms-function-avatar {
        width: 46px;
        height: 46px;
    }

    .vrms-function-status-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .vrms-function-entry-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-function-entry-footer .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Referee Main View
   ========================================================= */

.vrms-referee-main-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-referee-main-page,
.vrms-referee-main-page * {
    box-sizing: border-box;
}

.vrms-referee-header-panel,
.vrms-referee-tabs-panel {
    overflow: visible;
}

.vrms-referee-profile-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
}

.vrms-referee-profile-card {
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-referee-profile-image {
    width: 150px;
    height: 150px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: var(--VRMS_Background);
    border: 3px solid var(--VRMS_foreground);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.vrms-referee-profile-caption {
    width: 100%;
    text-align: center;
    min-width: 0;
}

.vrms-referee-profile-title {
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-referee-profile-subtitle {
    margin-top: 0.25rem;
    color: var(--VRMS_foreground);
    opacity: 0.75;
    font-size: 0.9rem;
    font-weight: 750;
}

.vrms-referee-person-summary {
    min-width: 0;
    padding: 1rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    overflow-x: auto;
}

.vrms-referee-edit-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
}

.vrms-referee-sidebar {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.vrms-referee-tabs {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-referee-tabs .nav-link {
    width: 100%;
    min-height: 42px;
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 800;
    text-align: left;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.vrms-referee-tabs .nav-link:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--VRMS_accent) 14%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
}

.vrms-referee-tabs .nav-link.active {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
}

.vrms-referee-actions {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-referee-actions .vrms-action-btn {
    width: 100%;
    margin: 0;
}

.vrms-referee-content {
    min-width: 0;
}

.vrms-referee-tab-content {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.25rem);
    border-radius: 1.35rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    overflow-x: auto;
}

/* Sanfte Anpassung für enthaltene Tab-Views */
.vrms-referee-tab-content .form-label,
.vrms-referee-tab-content label,
.vrms-referee-person-summary .form-label,
.vrms-referee-person-summary label {
    color: var(--VRMS_foreground);
    font-weight: 800;
}

.vrms-referee-tab-content .form-control,
.vrms-referee-tab-content .form-select,
.vrms-referee-tab-content input,
.vrms-referee-tab-content select,
.vrms-referee-tab-content textarea,
.vrms-referee-person-summary .form-control,
.vrms-referee-person-summary .form-select,
.vrms-referee-person-summary input,
.vrms-referee-person-summary select,
.vrms-referee-person-summary textarea {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-referee-tab-content .form-control,
.vrms-referee-tab-content .form-select,
.vrms-referee-person-summary .form-control,
.vrms-referee-person-summary .form-select {
    min-height: 42px;
    border-radius: 999px;
    padding: 0.55rem 1rem;
}

.vrms-referee-tab-content textarea.form-control,
.vrms-referee-tab-content textarea,
.vrms-referee-person-summary textarea.form-control,
.vrms-referee-person-summary textarea {
    border-radius: 1rem;
}

.vrms-referee-tab-content .form-control:focus,
.vrms-referee-tab-content .form-select:focus,
.vrms-referee-tab-content input:focus,
.vrms-referee-tab-content select:focus,
.vrms-referee-tab-content textarea:focus,
.vrms-referee-person-summary .form-control:focus,
.vrms-referee-person-summary .form-select:focus,
.vrms-referee-person-summary input:focus,
.vrms-referee-person-summary select:focus,
.vrms-referee-person-summary textarea:focus {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--VRMS_accent) 24%, transparent);
    outline: none;
}

.vrms-referee-tab-content .table-responsive,
.vrms-referee-person-summary .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 1rem;
}

.vrms-referee-tab-content table,
.vrms-referee-person-summary table {
    color: var(--VRMS_foreground);
}

.vrms-referee-tab-content .btn,
.vrms-referee-person-summary .btn {
    border-radius: 999px;
}

/* Mobile */

@media (max-width: 991.98px) {
    .vrms-referee-profile-layout,
    .vrms-referee-edit-layout {
        grid-template-columns: 1fr;
    }

    .vrms-referee-sidebar {
        position: static;
    }

    .vrms-referee-profile-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: stretch;
    }

    .vrms-referee-profile-image {
        width: 96px;
        height: 96px;
    }

    .vrms-referee-profile-caption {
        text-align: left;
    }

    .vrms-referee-tabs {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.65rem;
    }

    .vrms-referee-tabs .nav-link {
        width: auto;
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .vrms-referee-main-page {
        padding: 0.5rem;
    }

    .vrms-referee-profile-card {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .vrms-referee-profile-caption {
        text-align: center;
    }

    .vrms-referee-person-summary,
    .vrms-referee-tab-content {
        padding: 1rem;
        border-radius: 1.1rem;
    }

    .vrms-referee-tabs .nav-link {
        min-height: 40px;
        font-size: 0.92rem;
    }
}

@media (max-width: 420px) {
    .vrms-referee-profile-image {
        width: 84px;
        height: 84px;
    }
}
/* =========================================================
   Referee Main Data Tab
   ========================================================= */

.vrms-referee-main-data-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-referee-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vrms-referee-comment-field {
    grid-column: 1 / -1;
}

.vrms-form-textarea {
    min-height: 180px;
    border-radius: 1rem !important;
    resize: vertical;
    line-height: 1.5;
}

.vrms-referee-data-actions {
    margin-top: 0.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vrms-referee-data-actions .vrms-action-btn {
    width: auto;
    min-width: 140px;
}

/* Disabled / readonly sauber lesbar halten */

.vrms-referee-main-data-tab input:disabled,
.vrms-referee-main-data-tab select:disabled,
.vrms-referee-main-data-tab textarea:disabled,
.vrms-referee-main-data-tab .form-control:disabled {
    opacity: 0.86;
    background: color-mix(in srgb, var(--VRMS_foreground) 8%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-color: color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
}

.vrms-referee-main-data-tab input[readonly],
.vrms-referee-main-data-tab textarea[readonly] {
    opacity: 0.86;
    background: color-mix(in srgb, var(--VRMS_foreground) 8%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-color: color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
}

@media (max-width: 767.98px) {
    .vrms-referee-data-grid {
        grid-template-columns: 1fr;
    }

    .vrms-referee-data-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-referee-data-actions .vrms-action-btn {
        width: 100%;
    }
}
/* =========================================================
   Referee Groups Tab
   ========================================================= */

.vrms-referee-groups-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-referee-groups-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 1rem;
}

.vrms-referee-group-card {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-referee-group-card.is-active {
    border-color: var(--VRMS_success);
}

.vrms-referee-group-card.is-disabled {
    opacity: 0.72;
    filter: grayscale(0.35);
    border-color: var(--VRMS_removed);
}

.vrms-referee-group-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.vrms-referee-group-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.vrms-referee-group-avatar i {
    font-size: 1.2rem;
}

.vrms-referee-group-title-block {
    min-width: 0;
}

.vrms-referee-group-title {
    margin: 0;
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-referee-group-subtitle {
    margin: 0.25rem 0 0;
    color: var(--VRMS_foreground);
    opacity: 0.76;
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-referee-group-status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-referee-group-status.is-active {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 20%, var(--VRMS_Background));
}

.vrms-referee-group-status.is-disabled {
    border-color: var(--VRMS_removed);
    background: color-mix(in srgb, var(--VRMS_removed) 20%, var(--VRMS_Background));
}

.vrms-referee-group-meta {
    margin-top: 1rem;
}

.vrms-referee-group-actions {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    justify-content: flex-end;
}

.vrms-referee-group-actions .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

.vrms-group-modal .vrms-modal-content,
.vrms-group-modal .modal-content {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

@media (max-width: 767.98px) {
    .vrms-referee-groups-container {
        grid-template-columns: 1fr;
    }

    .vrms-referee-group-card {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-referee-group-header {
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: start;
    }

    .vrms-referee-group-avatar {
        width: 46px;
        height: 46px;
    }

    .vrms-referee-group-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .vrms-referee-group-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-referee-group-actions .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}
/* =========================================================
   Referee Licenses Tab
   ========================================================= */

.vrms-referee-licenses-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-referee-licenses-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 1rem;
}

.vrms-referee-license-card {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-referee-license-card.is-active {
    border-color: var(--VRMS_success);
}

.vrms-referee-license-card.is-disabled {
    opacity: 0.72;
    filter: grayscale(0.35);
    border-color: var(--VRMS_removed);
}

.vrms-referee-license-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.vrms-referee-license-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.vrms-referee-license-avatar i {
    font-size: 1.2rem;
}

.vrms-referee-license-title-block {
    min-width: 0;
}

.vrms-referee-license-title {
    margin: 0;
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-referee-license-subtitle {
    margin: 0.25rem 0 0;
    color: var(--VRMS_foreground);
    opacity: 0.76;
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-referee-license-status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-referee-license-status.is-active {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 20%, var(--VRMS_Background));
}

.vrms-referee-license-status.is-disabled {
    border-color: var(--VRMS_removed);
    background: color-mix(in srgb, var(--VRMS_removed) 20%, var(--VRMS_Background));
}

.vrms-referee-license-meta {
    margin-top: 1rem;
}

.vrms-referee-license-actions {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    justify-content: flex-end;
}

.vrms-referee-license-actions .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

.vrms-license-modal .vrms-modal-content,
.vrms-license-modal .modal-content {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

@media (max-width: 767.98px) {
    .vrms-referee-licenses-container {
        grid-template-columns: 1fr;
    }

    .vrms-referee-license-card {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-referee-license-header {
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: start;
    }

    .vrms-referee-license-avatar {
        width: 46px;
        height: 46px;
    }

    .vrms-referee-license-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .vrms-referee-license-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-referee-license-actions .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}
/* =========================================================
   Referee Federations Tab
   ========================================================= */

.vrms-referee-federations-tab {
    width: 100%;
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-referee-federations-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 1rem;
}

.vrms-referee-federation-card {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-referee-federation-card.is-active {
    border-color: var(--VRMS_success);
}

.vrms-referee-federation-card.is-disabled {
    opacity: 0.72;
    filter: grayscale(0.35);
    border-color: var(--VRMS_removed);
}

.vrms-referee-federation-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.vrms-referee-federation-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.vrms-referee-federation-avatar i {
    font-size: 1.2rem;
}

.vrms-referee-federation-title-block {
    min-width: 0;
}

.vrms-referee-federation-title {
    margin: 0;
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-referee-federation-subtitle {
    margin: 0.25rem 0 0;
    color: var(--VRMS_foreground);
    opacity: 0.76;
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-referee-federation-status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-referee-federation-status.is-active {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 20%, var(--VRMS_Background));
}

.vrms-referee-federation-status.is-disabled {
    border-color: var(--VRMS_removed);
    background: color-mix(in srgb, var(--VRMS_removed) 20%, var(--VRMS_Background));
}

.vrms-referee-federation-meta {
    margin-top: 1rem;
}

.vrms-referee-federation-actions {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    justify-content: flex-end;
}

.vrms-referee-federation-actions .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

.vrms-federation-modal .vrms-modal-content,
.vrms-federation-modal .modal-content {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

@media (max-width: 767.98px) {
    .vrms-referee-federations-container {
        grid-template-columns: 1fr;
    }

    .vrms-referee-federation-card {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-referee-federation-header {
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: start;
    }

    .vrms-referee-federation-avatar {
        width: 46px;
        height: 46px;
    }

    .vrms-referee-federation-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .vrms-referee-federation-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-referee-federation-actions .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Referee Rejections Tab
   ========================================================= */

.vrms-rejections-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-rejections-page,
.vrms-rejections-page * {
    box-sizing: border-box;
}

.vrms-rejections-panel,
.vrms-rejections-admin-panel {
    overflow: visible;
}

.vrms-rejection-section {
    width: 100%;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-rejection-section + .vrms-rejection-section {
    margin-top: 1rem;
}

.vrms-rejection-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-rejection-list-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

/* Sanfte Anpassung für rejections-list.php, ohne die Datei zu kennen */

.vrms-rejection-list-wrap table {
    width: 100%;
    color: var(--VRMS_foreground);
}

.vrms-rejection-list-wrap .table-responsive {
    border-radius: 1rem;
}

.vrms-rejection-list-wrap .card,
.vrms-rejection-list-wrap .list-group,
.vrms-rejection-list-wrap .rejection-entry {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    border-radius: 1rem;
}

.vrms-rejection-list-wrap .btn {
    border-radius: 999px;
}

.vrms-rejection-modal .vrms-modal-content,
.vrms-rejection-modal .modal-content {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-rejection-modal .vrms-form-control,
.vrms-rejection-modal .form-control {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground) !important;
}

@media (max-width: 767.98px) {
    .vrms-rejections-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-rejection-section {
        padding: 0.85rem;
        border-radius: 1.1rem;
    }

    .vrms-rejection-section-header {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-rejection-section-header .vrms-action-btn {
        width: 100%;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}
/* =========================================================
   Rejections List
   ========================================================= */

.vrms-rejection-card-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: 1rem;
}

.vrms-rejection-card {
    width: 100%;
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.vrms-rejection-card.is-active {
    border-color: var(--VRMS_success);
}

.vrms-rejection-card.is-disabled {
    opacity: 0.72;
    filter: grayscale(0.35);
    border-color: var(--VRMS_removed);
}

.vrms-rejection-card-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
}

.vrms-rejection-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.vrms-rejection-card-icon i {
    font-size: 1.15rem;
}

.vrms-rejection-card-title-block {
    min-width: 0;
}

.vrms-rejection-card-title {
    margin: 0;
    color: var(--VRMS_foreground);
    font-size: 1.05rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-rejection-card-subtitle {
    margin-top: 0.25rem;
    color: var(--VRMS_foreground);
    opacity: 0.76;
    font-size: 0.9rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-rejection-status {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-rejection-status.is-active {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 20%, var(--VRMS_Background));
}

.vrms-rejection-status.is-disabled {
    border-color: var(--VRMS_removed);
    background: color-mix(in srgb, var(--VRMS_removed) 20%, var(--VRMS_Background));
}

.vrms-rejection-meta-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr);
    gap: 0.75rem;
}

.vrms-rejection-actions {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vrms-rejection-actions .vrms-action-btn {
    width: auto;
    min-width: 120px;
    margin: 0;
}

.vrms-delete-entry-btn:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

@media (max-width: 767.98px) {
    .vrms-rejection-card-list {
        grid-template-columns: 1fr;
    }

    .vrms-rejection-card {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-rejection-card-header {
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: start;
    }

    .vrms-rejection-card-icon {
        width: 46px;
        height: 46px;
    }

    .vrms-rejection-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .vrms-rejection-meta-grid {
        grid-template-columns: 1fr;
    }

    .vrms-rejection-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-rejection-actions .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Internal Games Page
   ========================================================= */

.vrms-internal-games-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-internal-games-page,
.vrms-internal-games-page * {
    box-sizing: border-box;
}

.vrms-internal-games-header {
    overflow: visible;
}

.vrms-internal-games-content {
    min-width: 0;
    overflow: hidden;
}

/*
   Die eigentlichen Spiele-Views werden nicht verändert.
   Dieser Wrapper verhindert nur, dass große Cards/Tabellen aus dem Container laufen.
*/

.vrms-game-safe-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.vrms-game-safe-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 0.35rem;
}

.vrms-game-safe-scroll > * {
    max-width: 100%;
}

.vrms-game-safe-scroll::-webkit-scrollbar {
    height: 8px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--VRMS_foreground) 10%, transparent);
    border-radius: 999px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-thumb {
    background: var(--VRMS_foreground);
    border-radius: 999px;
}

.vrms-game-safe-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--VRMS_accent);
}

@media (max-width: 767.98px) {
    .vrms-internal-games-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-panel-header-between {
        align-items: stretch;
        flex-direction: column;
    }

    .vrms-internal-games-header .vrms-action-btn {
        width: 100%;
    }
}
/* =========================================================
   Status Messages / Reply Table
   ========================================================= */

.vrms-status-messages-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-status-messages-page,
.vrms-status-messages-page * {
    box-sizing: border-box;
}

.vrms-status-messages-header,
.vrms-status-messages-table-panel {
    overflow: visible;
}

.vrms-status-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 520px) minmax(180px, 260px);
    gap: 1rem;
    align-items: end;
}

.vrms-status-filter-actions {
    min-width: 0;
}

.vrms-status-filter-actions .vrms-action-btn {
    width: 100%;
    margin: 0;
}

/* Wrapper für DataTables + Export Buttons */

.vrms-datatable-wrap {
    width: 100%;
    min-width: 0;
}

.vrms-table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

/* Tabelle bleibt echte Tabelle für DataTables Export */

.vrms-export-table {
    width: 100%;
    min-width: 980px;
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground) !important;
}

.vrms-export-table thead th {
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background)) !important;
    color: var(--VRMS_foreground) !important;
    border-color: color-mix(in srgb, var(--VRMS_foreground) 35%, transparent) !important;
    font-weight: 900;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 1rem;
}

.vrms-export-table tbody td {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: color-mix(in srgb, var(--VRMS_foreground) 18%, transparent) !important;
    padding: 0.9rem 1rem;
    vertical-align: middle;
}

.vrms-export-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background)) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-export-table tbody tr.vrms-row-warning td,
.vrms-export-table tbody tr.redFontColorForRow td {
    color: var(--VRMS_warning) !important;
    font-weight: 800;
}

.vrms-table-action-btn {
    min-height: 38px;
    padding: 0.45rem 0.85rem;
    margin: 0;
    white-space: nowrap;
}

/* Status Badge in der Tabelle */

.vrms-export-table .vrms-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

/* DataTables Controls */

.dataTables_wrapper {
    color: var(--VRMS_foreground);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--VRMS_foreground) !important;
    margin-bottom: 0.75rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    min-height: 38px;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground) !important;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--VRMS_accent) 24%, transparent);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent) !important;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    margin: 0 0.15rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--VRMS_accent) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground) !important;
}

/* DataTables Export Buttons */

.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dt-buttons .dt-button,
.dt-buttons button {
    min-height: 38px;
    border-radius: 999px !important;
    padding: 0.4rem 0.9rem !important;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground) !important;
    font-weight: 800;
    box-shadow: none !important;
}

.dt-buttons .dt-button:hover,
.dt-buttons button:hover {
    background: var(--VRMS_accent) !important;
    color: var(--VRMS_foreground) !important;
}

/* Mobile: Tabelle bleibt technisch Tabelle, aber optisch Card-Liste.
   Für DataTables Export ist das unkritisch, weil DOM-Tabelle erhalten bleibt. */

@media (max-width: 767.98px) {
    .vrms-status-messages-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-status-filter-form {
        grid-template-columns: 1fr;
    }

    .vrms-table-responsive {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-export-table,
    .vrms-export-table thead,
    .vrms-export-table tbody,
    .vrms-export-table tr,
    .vrms-export-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-export-table {
        background: transparent !important;
        border: none !important;
    }

    .vrms-export-table thead {
        display: none;
    }

    .vrms-export-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-export-table tbody tr {
        display: block;
        border-radius: 1.25rem;
        padding: 0.85rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-export-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent) !important;
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent !important;
    }

    .vrms-export-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-export-table tbody td:last-child {
        border-bottom: none !important;
    }

    .vrms-export-table .vrms-table-action-btn {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100%;
        margin-left: 0 !important;
    }

    .dt-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dt-buttons .dt-button,
    .dt-buttons button {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-export-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-export-table tbody td::before {
        font-size: 0.8rem;
    }
}
/* =========================================================
   Tournament Create / Edit Form
   ========================================================= */

.vrms-tournament-form-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-tournament-form-page,
.vrms-tournament-form-page * {
    box-sizing: border-box;
}

.vrms-tournament-form-panel {
    overflow: visible;
}

.vrms-tournament-form {
    display: grid;
    gap: 1.25rem;
}

.vrms-tournament-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-tournament-descr-field {
    grid-column: 1 / -1;
}

.vrms-form-help {
    margin-top: 0.35rem;
    color: var(--VRMS_foreground);
    opacity: 0.72;
    font-size: 0.85rem;
    font-weight: 650;
}

.vrms-tournament-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vrms-tournament-form-actions .vrms-action-btn {
    width: auto;
    min-width: 140px;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .vrms-tournament-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vrms-tournament-descr-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .vrms-tournament-form-page {
        padding: 0.5rem;
    }

    .vrms-tournament-form-grid {
        grid-template-columns: 1fr;
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-tournament-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-tournament-form-actions .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Accounting Create Form
   ========================================================= */

.vrms-accounting-create-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-accounting-create-page,
.vrms-accounting-create-page * {
    box-sizing: border-box;
}

.vrms-accounting-create-panel {
    overflow: visible;
}

.vrms-accounting-create-form {
    display: grid;
    gap: 1.25rem;
}

.vrms-accounting-create-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-accounting-version-field {
    grid-column: span 1;
}

.vrms-accounting-create-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vrms-accounting-create-actions .vrms-action-btn {
    width: auto;
    min-width: 140px;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .vrms-accounting-create-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .vrms-accounting-create-page {
        padding: 0.5rem;
    }

    .vrms-accounting-create-grid {
        grid-template-columns: 1fr;
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-accounting-create-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-accounting-create-actions .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Active Person Export
   ========================================================= */

.vrms-active-person-export-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-active-person-export-page,
.vrms-active-person-export-page * {
    box-sizing: border-box;
}

.vrms-active-person-export-panel {
    overflow: visible;
}

/* =========================================================
   Referee Export
   ========================================================= */

.vrms-referee-export-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-referee-export-page,
.vrms-referee-export-page * {
    box-sizing: border-box;
}

.vrms-referee-export-panel {
    overflow: visible;
}
/* =========================================================
   Active User Export
   ========================================================= */

.vrms-user-export-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-user-export-page,
.vrms-user-export-page * {
    box-sizing: border-box;
}

.vrms-user-export-panel {
    overflow: visible;
}

/* =========================================================
   Role Management
   ========================================================= */

.vrms-role-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-role-management-page,
.vrms-role-management-page * {
    box-sizing: border-box;
}

.vrms-role-management-panel,
.vrms-role-list-panel {
    overflow: visible;
}

.vrms-role-create-box {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-role-create-form {
    display: grid;
    gap: 1rem;
}

.vrms-role-create-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) auto;
    gap: 1rem;
    align-items: end;
}

.vrms-role-create-action .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

/* =========================================================
   Generic Definition Search
   wiederverwendbar für deine Definitions-Tabellen
   ========================================================= */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

.vrms-role-search-empty {
    margin-top: 1rem;
}

/* =========================================================
   Role Table
   ========================================================= */

.vrms-role-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-role-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-role-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-role-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-role-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-role-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-role-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-inline-form {
    margin: 0;
    display: inline-flex;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 991.98px) {
    .vrms-role-create-grid {
        grid-template-columns: 1fr;
    }

    .vrms-role-create-action .vrms-action-btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .vrms-role-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-role-create-box,
    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-role-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-role-table,
    .vrms-role-table thead,
    .vrms-role-table tbody,
    .vrms-role-table tr,
    .vrms-role-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-role-table {
        background: transparent;
        border: none;
    }

    .vrms-role-table thead {
        display: none;
    }

    .vrms-role-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-role-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-role-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-role-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-role-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-role-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-inline-form,
    .vrms-icon-btn {
        width: 100%;
    }

    .vrms-icon-btn {
        border-radius: 999px;
    }
}

@media (max-width: 420px) {
    .vrms-role-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-role-table tbody td::before {
        font-size: 0.8rem;
    }
}

/* =========================================================
   Permission Management
   ========================================================= */

.vrms-permission-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-permission-management-page,
.vrms-permission-management-page * {
    box-sizing: border-box;
}

.vrms-permission-management-panel,
.vrms-permission-list-panel {
    overflow: visible;
}

.vrms-permission-create-box {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-permission-create-form {
    display: grid;
    gap: 1rem;
}

.vrms-permission-create-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr) auto;
    gap: 1rem;
    align-items: end;
}

.vrms-permission-create-action .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

/* =========================================================
   Generic Definition Search
   wiederverwendbar für Definitions-Tabellen
   ========================================================= */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

.vrms-permission-search-empty {
    margin-top: 1rem;
}

/* =========================================================
   Permission Table
   ========================================================= */

.vrms-permission-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-permission-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-permission-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-permission-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-permission-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-permission-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-permission-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-inline-form {
    margin: 0;
    display: inline-flex;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 991.98px) {
    .vrms-permission-create-grid {
        grid-template-columns: 1fr;
    }

    .vrms-permission-create-action .vrms-action-btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .vrms-permission-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-permission-create-box,
    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-permission-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-permission-table,
    .vrms-permission-table thead,
    .vrms-permission-table tbody,
    .vrms-permission-table tr,
    .vrms-permission-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-permission-table {
        background: transparent;
        border: none;
    }

    .vrms-permission-table thead {
        display: none;
    }

    .vrms-permission-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-permission-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-permission-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-permission-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-permission-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-permission-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-inline-form,
    .vrms-icon-btn {
        width: 100%;
    }

    .vrms-icon-btn {
        border-radius: 999px;
    }
}

@media (max-width: 420px) {
    .vrms-permission-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-permission-table tbody td::before {
        font-size: 0.8rem;
    }
}
/* =========================================================
   User Permissions Management
   ========================================================= */

.vrms-user-permissions-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-user-permissions-page,
.vrms-user-permissions-page * {
    box-sizing: border-box;
}

.vrms-user-permissions-panel,
.vrms-user-permissions-edit-panel,
.vrms-user-permissions-overview-panel {
    overflow: visible;
}

.vrms-user-select-box {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-user-select-form {
    max-width: 620px;
}

.vrms-user-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vrms-user-permission-card {
    min-width: 0;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 6%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-user-permission-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vrms-user-permission-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
}

.vrms-user-permission-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.15rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-user-permission-table {
    width: 100%;
    min-width: 520px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-user-permission-overview-table {
    min-width: 760px;
}

.vrms-user-permission-table thead th {
    padding: 0.9rem 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-user-permission-table tbody td {
    padding: 0.85rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-user-permission-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-user-permission-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-user-permission-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-user-permission-card-footer {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.vrms-user-permission-card-footer .btn,
.vrms-user-permission-card-footer button,
.vrms-user-permission-card-footer a {
    min-height: 42px;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-weight: 800;
    text-decoration: none;
}

.vrms-user-permission-card-footer .btn:hover,
.vrms-user-permission-card-footer button:hover,
.vrms-user-permission-card-footer a:hover {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-api-key-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

.vrms-api-key-value {
    margin-top: 0.45rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-size: 0.82rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-user-permission-main-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.vrms-user-permission-main-actions .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

.vrms-inline-form {
    margin: 0;
    display: inline-flex;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

.vrms-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

/* Mobile */

@media (max-width: 991.98px) {
    .vrms-user-permission-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .vrms-user-permissions-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-user-select-box,
    .vrms-user-permission-card {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-user-permission-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-user-permission-table,
    .vrms-user-permission-table thead,
    .vrms-user-permission-table tbody,
    .vrms-user-permission-table tr,
    .vrms-user-permission-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-user-permission-table {
        background: transparent;
        border: none;
    }

    .vrms-user-permission-table thead {
        display: none;
    }

    .vrms-user-permission-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-user-permission-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-user-permission-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-user-permission-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-user-permission-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-user-permission-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-inline-form,
    .vrms-icon-btn,
    .vrms-api-key-btn {
        width: 100%;
    }

    .vrms-icon-btn {
        border-radius: 999px;
    }

    .vrms-user-permission-card-footer,
    .vrms-user-permission-main-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-user-permission-card-footer .btn,
    .vrms-user-permission-card-footer button,
    .vrms-user-permission-card-footer a,
    .vrms-user-permission-main-actions .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .vrms-user-permission-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-user-permission-table tbody td::before {
        font-size: 0.8rem;
    }
}

/* =========================================================
   VRMS Dialog Helpers
   ========================================================= */

.vrms-descr-box {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.85rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-weight: 700;
    min-height: 42px;
}

.vrms-delete-warning {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border-radius: 1.15rem;
    background: color-mix(in srgb, var(--VRMS_danger) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-delete-warning-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 2px solid var(--VRMS_foreground);
}

.vrms-delete-warning-icon i {
    font-size: 1.25rem;
}

.vrms-delete-warning-content {
    min-width: 0;
}

.vrms-delete-warning-content p {
    margin: 0 0 0.5rem;
    color: var(--VRMS_foreground);
    font-weight: 800;
}

.vrms-delete-warning-content strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--VRMS_foreground);
    font-weight: 900;
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

@media (max-width: 767.98px) {
    .vrms-delete-warning {
        grid-template-columns: 1fr;
    }

    .vrms-delete-warning-icon {
        width: 46px;
        height: 46px;
    }
}
/* =========================================================
   Referee Group Management
   ========================================================= */

.vrms-refgroup-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-refgroup-management-page,
.vrms-refgroup-management-page * {
    box-sizing: border-box;
}

.vrms-refgroup-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-refgroup-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-refgroup-table {
    width: 100%;
    min-width: 980px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-refgroup-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-refgroup-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-refgroup-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-refgroup-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-refgroup-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-refgroup-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

.vrms-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-refgroup-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-refgroup-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-refgroup-table,
    .vrms-refgroup-table thead,
    .vrms-refgroup-table tbody,
    .vrms-refgroup-table tr,
    .vrms-refgroup-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-refgroup-table {
        background: transparent;
        border: none;
    }

    .vrms-refgroup-table thead {
        display: none;
    }

    .vrms-refgroup-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-refgroup-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-refgroup-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-refgroup-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-refgroup-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-refgroup-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-refgroup-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-refgroup-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-refgroup-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Referee License Management
   ========================================================= */

.vrms-reflicense-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-reflicense-management-page,
.vrms-reflicense-management-page * {
    box-sizing: border-box;
}

.vrms-reflicense-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-reflicense-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-reflicense-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-reflicense-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-reflicense-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-reflicense-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-reflicense-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-reflicense-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-reflicense-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-reflicense-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-reflicense-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-reflicense-table,
    .vrms-reflicense-table thead,
    .vrms-reflicense-table tbody,
    .vrms-reflicense-table tr,
    .vrms-reflicense-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-reflicense-table {
        background: transparent;
        border: none;
    }

    .vrms-reflicense-table thead {
        display: none;
    }

    .vrms-reflicense-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-reflicense-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-reflicense-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-reflicense-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-reflicense-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-reflicense-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-reflicense-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-reflicense-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-reflicense-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Function Type Management
   ========================================================= */

.vrms-functiontype-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-functiontype-management-page,
.vrms-functiontype-management-page * {
    box-sizing: border-box;
}

.vrms-functiontype-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-functiontype-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-functiontype-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-functiontype-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-functiontype-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-functiontype-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-functiontype-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-functiontype-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-functiontype-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-functiontype-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-functiontype-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-functiontype-table,
    .vrms-functiontype-table thead,
    .vrms-functiontype-table tbody,
    .vrms-functiontype-table tr,
    .vrms-functiontype-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-functiontype-table {
        background: transparent;
        border: none;
    }

    .vrms-functiontype-table thead {
        display: none;
    }

    .vrms-functiontype-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-functiontype-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-functiontype-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-functiontype-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-functiontype-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-functiontype-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-functiontype-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-functiontype-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-functiontype-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   External ID Type Management
   ========================================================= */

.vrms-externalidtype-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-externalidtype-management-page,
.vrms-externalidtype-management-page * {
    box-sizing: border-box;
}

.vrms-externalidtype-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-externalidtype-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-externalidtype-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-externalidtype-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-externalidtype-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-externalidtype-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-externalidtype-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-externalidtype-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-externalidtype-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-externalidtype-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-externalidtype-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-externalidtype-table,
    .vrms-externalidtype-table thead,
    .vrms-externalidtype-table tbody,
    .vrms-externalidtype-table tr,
    .vrms-externalidtype-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-externalidtype-table {
        background: transparent;
        border: none;
    }

    .vrms-externalidtype-table thead {
        display: none;
    }

    .vrms-externalidtype-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-externalidtype-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-externalidtype-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-externalidtype-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-externalidtype-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-externalidtype-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-externalidtype-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-externalidtype-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-externalidtype-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Local Federation Management
   ========================================================= */

.vrms-federation-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-federation-management-page,
.vrms-federation-management-page * {
    box-sizing: border-box;
}

.vrms-federation-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-federation-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-federation-table {
    width: 100%;
    min-width: 1060px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-federation-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-federation-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-federation-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-federation-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-federation-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-federation-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-federation-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-federation-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-federation-table,
    .vrms-federation-table thead,
    .vrms-federation-table tbody,
    .vrms-federation-table tr,
    .vrms-federation-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-federation-table {
        background: transparent;
        border: none;
    }

    .vrms-federation-table thead {
        display: none;
    }

    .vrms-federation-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-federation-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-federation-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-federation-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-federation-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-federation-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-federation-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-federation-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-federation-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Venue Management
   ========================================================= */

.vrms-venue-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-venue-management-page,
.vrms-venue-management-page * {
    box-sizing: border-box;
}

.vrms-venue-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-venue-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-venue-table {
    width: 100%;
    min-width: 980px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-venue-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-venue-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-venue-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-venue-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-venue-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-venue-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-venue-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-venue-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-venue-table,
    .vrms-venue-table thead,
    .vrms-venue-table tbody,
    .vrms-venue-table tr,
    .vrms-venue-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-venue-table {
        background: transparent;
        border: none;
    }

    .vrms-venue-table thead {
        display: none;
    }

    .vrms-venue-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-venue-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-venue-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-venue-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-venue-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-venue-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-venue-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-venue-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-venue-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Club Management
   ========================================================= */

.vrms-club-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-club-management-page,
.vrms-club-management-page * {
    box-sizing: border-box;
}

.vrms-club-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-club-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-club-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-club-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-club-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-club-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-club-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-club-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-club-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-club-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-club-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-club-table,
    .vrms-club-table thead,
    .vrms-club-table tbody,
    .vrms-club-table tr,
    .vrms-club-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-club-table {
        background: transparent;
        border: none;
    }

    .vrms-club-table thead {
        display: none;
    }

    .vrms-club-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-club-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-club-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-club-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-club-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-club-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-club-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-club-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-club-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Referee Status Type Management
   ========================================================= */

.vrms-status-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-status-management-page,
.vrms-status-management-page * {
    box-sizing: border-box;
}

.vrms-status-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-status-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-status-table {
    width: 100%;
    min-width: 780px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-status-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-status-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-status-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-status-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-status-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-status-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-status-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-status-table,
    .vrms-status-table thead,
    .vrms-status-table tbody,
    .vrms-status-table tr,
    .vrms-status-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-status-table {
        background: transparent;
        border: none;
    }

    .vrms-status-table thead {
        display: none;
    }

    .vrms-status-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-status-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-status-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-status-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-status-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-status-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-status-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-status-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-status-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Mail Sender Whitelist Management
   ========================================================= */

.vrms-mailwhitelist-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-mailwhitelist-management-page,
.vrms-mailwhitelist-management-page * {
    box-sizing: border-box;
}

.vrms-mailwhitelist-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-mailwhitelist-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-mailwhitelist-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-mailwhitelist-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-mailwhitelist-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-mailwhitelist-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-mailwhitelist-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-mailwhitelist-table tbody tr.is-disabled td {
    opacity: 0.62;
    filter: grayscale(0.35);
}

.vrms-mailwhitelist-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

.vrms-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-status-badge.is-active {
    background: color-mix(in srgb, var(--VRMS_success) 18%, var(--VRMS_Background));
    border-color: var(--VRMS_success);
}

.vrms-status-badge.is-disabled {
    background: color-mix(in srgb, var(--VRMS_removed) 18%, var(--VRMS_Background));
    border-color: var(--VRMS_removed);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-mailwhitelist-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-mailwhitelist-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-mailwhitelist-table,
    .vrms-mailwhitelist-table thead,
    .vrms-mailwhitelist-table tbody,
    .vrms-mailwhitelist-table tr,
    .vrms-mailwhitelist-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-mailwhitelist-table {
        background: transparent;
        border: none;
    }

    .vrms-mailwhitelist-table thead {
        display: none;
    }

    .vrms-mailwhitelist-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-mailwhitelist-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-mailwhitelist-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-mailwhitelist-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-mailwhitelist-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-mailwhitelist-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-mailwhitelist-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-mailwhitelist-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-mailwhitelist-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   System Config Management
   ========================================================= */

.vrms-sysconfig-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-sysconfig-management-page,
.vrms-sysconfig-management-page * {
    box-sizing: border-box;
}

.vrms-sysconfig-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-sysconfig-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-sysconfig-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-sysconfig-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-sysconfig-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-sysconfig-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-sysconfig-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-sysconfig-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-sysconfig-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-sysconfig-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-sysconfig-table,
    .vrms-sysconfig-table thead,
    .vrms-sysconfig-table tbody,
    .vrms-sysconfig-table tr,
    .vrms-sysconfig-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-sysconfig-table {
        background: transparent;
        border: none;
    }

    .vrms-sysconfig-table thead {
        display: none;
    }

    .vrms-sysconfig-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-sysconfig-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-sysconfig-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-sysconfig-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-sysconfig-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-sysconfig-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-sysconfig-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-sysconfig-table tbody td::before {
        font-size: 0.8rem;
    }
}
/* =========================================================
   Season Management
   ========================================================= */

.vrms-season-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-season-management-page,
.vrms-season-management-page * {
    box-sizing: border-box;
}

.vrms-season-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-season-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-season-table {
    width: 100%;
    min-width: 860px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-season-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-season-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-season-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-season-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-season-table tbody tr.is-inactive td {
    opacity: 0.78;
}

.vrms-season-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-success:hover {
    background: var(--VRMS_success);
    color: var(--VRMS_foreground);
}

.vrms-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-status-badge.is-active {
    background: color-mix(in srgb, var(--VRMS_success) 18%, var(--VRMS_Background));
    border-color: var(--VRMS_success);
}

.vrms-status-badge.is-disabled {
    background: color-mix(in srgb, var(--VRMS_removed) 18%, var(--VRMS_Background));
    border-color: var(--VRMS_removed);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-season-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-season-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-season-table,
    .vrms-season-table thead,
    .vrms-season-table tbody,
    .vrms-season-table tr,
    .vrms-season-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-season-table {
        background: transparent;
        border: none;
    }

    .vrms-season-table thead {
        display: none;
    }

    .vrms-season-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-season-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-season-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-season-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-season-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-season-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-season-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-season-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-season-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Referee Function Management
   ========================================================= */

.vrms-reffunction-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-reffunction-management-page,
.vrms-reffunction-management-page * {
    box-sizing: border-box;
}

.vrms-reffunction-management-panel {
    overflow: visible;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-reffunction-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-reffunction-table {
    width: 100%;
    min-width: 820px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-reffunction-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-reffunction-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-reffunction-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-reffunction-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-reffunction-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-reffunction-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-reffunction-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-reffunction-table,
    .vrms-reffunction-table thead,
    .vrms-reffunction-table tbody,
    .vrms-reffunction-table tr,
    .vrms-reffunction-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-reffunction-table {
        background: transparent;
        border: none;
    }

    .vrms-reffunction-table thead {
        display: none;
    }

    .vrms-reffunction-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-reffunction-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-reffunction-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-reffunction-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-reffunction-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-reffunction-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-reffunction-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-reffunction-table tbody td::before {
        font-size: 0.8rem;
    }
}
/* =========================================================
   Local Federation Manager Management
   ========================================================= */

.vrms-fedmanager-management-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-fedmanager-management-page,
.vrms-fedmanager-management-page * {
    box-sizing: border-box;
}

.vrms-fedmanager-management-panel {
    overflow: visible;
}

.vrms-fedmanager-filter-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-fedmanager-filter-box .vrms-form-select {
    max-width: 620px;
}

.vrms-panel-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vrms-panel-toolbar .vrms-action-btn {
    width: auto;
    min-width: 150px;
    margin: 0;
}

.vrms-panel-toolbar .vrms-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* Suche */

.vrms-definition-search-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 7%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-definition-search-box .vrms-form-control {
    max-width: 520px;
}

/* Tabelle */

.vrms-fedmanager-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-fedmanager-table {
    width: 100%;
    min-width: 760px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
}

.vrms-fedmanager-table thead th {
    padding: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: left;
    white-space: nowrap;
}

.vrms-fedmanager-table tbody td {
    padding: 0.9rem 1rem;
    color: var(--VRMS_foreground);
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    vertical-align: middle;
}

.vrms-fedmanager-table tbody tr:hover td {
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-fedmanager-table tbody tr:last-child td {
    border-bottom: none;
}

.vrms-fedmanager-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.vrms-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

/* Modal */

.vrms-modal-content {
    border-radius: 1.5rem;
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.vrms-modal-header,
.vrms-modal-footer {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
    border-color: var(--VRMS_foreground);
}

.vrms-modal-body {
    background: var(--VRMS_Background) !important;
    color: var(--VRMS_foreground) !important;
}

.vrms-modal-action {
    width: auto;
    min-width: 130px;
}

.vrms-btn-close {
    filter: invert(1);
}

/* Mobile */

@media (max-width: 767.98px) {
    .vrms-fedmanager-management-page {
        padding: 0.5rem;
        gap: 1rem;
    }

    .vrms-fedmanager-filter-box,
    .vrms-definition-search-box {
        border-radius: 1.1rem;
        padding: 0.85rem;
    }

    .vrms-fedmanager-filter-box .vrms-form-select,
    .vrms-definition-search-box .vrms-form-control {
        max-width: 100%;
    }

    .vrms-panel-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-panel-toolbar .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }

    .vrms-fedmanager-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
    }

    .vrms-fedmanager-table,
    .vrms-fedmanager-table thead,
    .vrms-fedmanager-table tbody,
    .vrms-fedmanager-table tr,
    .vrms-fedmanager-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .vrms-fedmanager-table {
        background: transparent;
        border: none;
    }

    .vrms-fedmanager-table thead {
        display: none;
    }

    .vrms-fedmanager-table tbody {
        display: grid;
        gap: 1rem;
    }

    .vrms-fedmanager-table tbody tr {
        display: block;
        padding: 0.85rem;
        border-radius: 1.25rem;
        background: var(--VRMS_Background);
        color: var(--VRMS_foreground);
        border: 1px solid var(--VRMS_foreground);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    }

    .vrms-fedmanager-table tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 0.75rem;
        align-items: center;
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
        text-align: right;
        overflow-wrap: anywhere;
        background: transparent;
    }

    .vrms-fedmanager-table tbody td::before {
        content: attr(data-label);
        color: var(--VRMS_foreground);
        opacity: 0.75;
        font-weight: 850;
        text-align: left;
    }

    .vrms-fedmanager-table tbody td:last-child {
        border-bottom: none;
    }

    .vrms-fedmanager-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn {
        width: 100%;
        border-radius: 999px;
    }

    .vrms-modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .vrms-modal-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .vrms-fedmanager-table tbody td {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        text-align: left;
    }

    .vrms-fedmanager-table tbody td::before {
        font-size: 0.8rem;
    }

    .vrms-fedmanager-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Games DataTable Export View
   ========================================================= */

.vrms-games-export-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-games-export-page,
.vrms-games-export-page * {
    box-sizing: border-box;
}

.vrms-games-export-panel {
    overflow: visible;
}

.vrms-game-main-text {
    font-weight: 900;
    color: var(--VRMS_foreground);
}

.vrms-game-sub-text {
    margin-top: 0.25rem;
    color: var(--VRMS_foreground);
    opacity: 0.78;
    font-size: 0.85rem;
    font-weight: 700;
}

.vrms-vs-text {
    margin: 0.25rem 0;
    color: var(--VRMS_foreground);
    opacity: 0.7;
    font-size: 0.85rem;
    font-weight: 800;
}

.vrms-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    color: var(--VRMS_accent);
    text-decoration: none;
}

.vrms-map-link:hover {
    color: var(--VRMS_foreground);
}

.vrms-official-row {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.55rem;
    color: var(--VRMS_foreground);
}

.vrms-official-name {
    font-weight: 800;
}

.vrms-official-meta {
    font-size: 0.8rem;
    opacity: 0.78;
}

.vrms-game-actions {
    display: grid;
    gap: 0.45rem;
    justify-content: end;
}

.vrms-table-action-btn {
    width: 100%;
    min-height: 38px;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-weight: 800;
    text-decoration: none;
    margin: 0;
}

.vrms-table-action-btn:hover {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-release-action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.vrms-icon-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    margin: 0;
}

.vrms-icon-btn:hover {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-action-danger:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

.vrms-send-notice-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    color: var(--VRMS_foreground);
    font-size: 0.78rem;
    font-weight: 750;
}

.vrms-send-notice-box input {
    accent-color: var(--VRMS_accent);
}

.referee-not-active {
    opacity: 0.55;
}

@media (max-width: 767.98px) {
    .vrms-games-export-page {
        padding: 0.5rem;
    }

    .vrms-game-actions {
        justify-content: stretch;
    }

    .vrms-release-action-group {
        grid-template-columns: 1fr 1fr;
    }

    .vrms-icon-btn,
    .vrms-table-action-btn {
        width: 100%;
    }

    .vrms-send-notice-box {
        justify-content: flex-start;
    }
}
/* =========================================================
   SAFE PATCH: Assignment Card Header / Modal Header Alignment
   Added after original CSS to avoid breaking existing views.
   ========================================================= */

.vrms-assignment-card-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    width: 100% !important;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-assignment-card-title-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.vrms-assignment-card-title {
    margin: 0.15rem 0 0;
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-assignment-card-header .vrms-icon-btn {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.vrms-modal-header,
.modal-header.vrms-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}

.vrms-modal-header .modal-title,
.modal-header.vrms-modal-header .modal-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.vrms-modal-header .btn-close,
.vrms-modal-header .vrms-btn-close,
.modal-header.vrms-modal-header .btn-close,
.modal-header.vrms-modal-header .vrms-btn-close {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

@media (max-width: 767.98px) {
    .vrms-assignment-card-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
    }

    .vrms-assignment-card-header .vrms-icon-btn {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin-left: auto !important;
    }
}

/* =========================================================
   Nomination Compact Game Header
   ========================================================= */

.vrms-nomination-game-compact {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 6%, transparent);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-nomination-game-main {
    min-width: 0;
}

.vrms-nomination-game-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--VRMS_foreground);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.vrms-nomination-game-number {
    opacity: 0.72;
    font-size: 0.85rem;
    font-weight: 800;
}

.vrms-nomination-teams {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    color: var(--VRMS_foreground);
    font-size: 0.95rem;
}

.vrms-nomination-teams span {
    opacity: 0.65;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.vrms-nomination-game-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.vrms-nomination-meta-pill {
    min-height: 34px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 30%, transparent);
    font-size: 0.85rem;
    font-weight: 800;
}

.vrms-nomination-meta-pill span {
    overflow-wrap: anywhere;
}

.vrms-nomination-map-link {
    display: inline-flex;
    align-items: center;
    margin-left: 0.15rem;
}

@media (max-width: 991.98px) {
    .vrms-nomination-game-compact {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-nomination-game-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .vrms-nomination-game-compact {
        padding: 0.75rem;
        border-radius: 1rem;
    }

    .vrms-nomination-game-meta {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-nomination-meta-pill {
        width: 100%;
        border-radius: 1rem;
        justify-content: flex-start;
    }
}
/* =========================================================
   Nomination Officials Compact Rows - 3 lines
   ========================================================= */

.vrms-official-compact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: stretch;
}

.vrms-official-compact-row {
    flex: 1 1 240px;
    max-width: 360px;
    min-width: 220px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.95rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-official-compact-function {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.vrms-official-role-chip {
    max-width: 100%;
    min-height: 26px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--VRMS_accent) 16%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrms-official-compact-name-row {
    min-width: 0;
}

.vrms-official-compact-name {
    display: block;
    min-width: 0;
    color: var(--VRMS_foreground);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.vrms-official-compact-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    padding-top: 0.25rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 16%, transparent);
}

.vrms-icon-btn-sm {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    font-size: 0.78rem;
}

.vrms-action-warning:hover {
    background: var(--VRMS_warning);
    color: var(--VRMS_foreground);
}

.vrms-official-compact-row.newAssignedReferee {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 10%, var(--VRMS_Background));
}

.vrms-official-compact-row.removeAssignedReferee {
    opacity: 0.55;
    filter: grayscale(0.35);
    border-color: var(--VRMS_removed);
}

.vrms-official-compact-row.penaltyRefereeNoShow {
    border-color: var(--VRMS_danger);
    background: color-mix(in srgb, var(--VRMS_danger) 12%, var(--VRMS_Background));
}

@media (max-width: 575.98px) {
    .vrms-official-compact-row {
        flex-basis: 100%;
        max-width: none;
        min-width: 0;
    }

    .vrms-official-compact-actions {
        justify-content: stretch;
    }

    .vrms-official-compact-actions .vrms-icon-btn-sm {
        flex: 1 1 0;
        width: auto;
        border-radius: 999px;
    }
}
/* =========================================================
   SAFE PATCH: Notice / Message View Desktop Refinement
   ========================================================= */

/* Gesamte Notice-Ansicht auf großen Monitoren begrenzen */
.vrms-notice-page {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

/* Auf Desktop: linke Liste bewusst schmal halten, Detailbereich sauber begrenzen */
.vrms-notice-layout {
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    align-items: stretch;
}

/* Beide Hauptboxen wirken ruhiger auf Monitoren */
.vrms-notice-list-panel,
.vrms-notice-detail-panel {
    padding: 0.9rem;
    border-radius: 1.15rem;
}

/* Liste darf scrollen, statt endlos den Screen nach unten zu ziehen */
.vrms-notice-list-panel {
    max-height: calc(100vh - 220px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header bleibt oben, Liste darunter scrollbar */
.vrms-notice-list-panel .vrms-panel-header {
    flex: 0 0 auto;
    margin-bottom: 0.75rem;
}

.vrms-notice-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* Notice-Einträge kompakter */
.vrms-notice-list-item {
    padding: 0.65rem 0.75rem;
    border-radius: 0.85rem;
    gap: 0.15rem;
}

/* Betreff maximal 2 Zeilen, sonst wird die Liste zu hoch */
.vrms-notice-list-subject {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

/* Sender kompakter */
.vrms-notice-list-sender {
    font-size: 0.78rem;
}

/* Detailbereich auf großen Monitoren angenehmer lesbar machen */
.vrms-notice-detail-panel {
    min-height: 420px;
}

.vrms-notice-body-wrap {
    max-width: 980px;
}

/* Nachrichtentext nicht übertrieben breit ziehen */
.vrms-notice-body {
    min-height: 260px;
    line-height: 1.55;
}

/* Pagination kompakter */
.vrms-notice-pagination {
    flex: 0 0 auto;
    margin-top: 0.75rem;
    grid-template-columns: 1fr auto 1fr;
}

.vrms-notice-pagination .vrms-action-btn {
    min-height: 38px;
    padding: 0.4rem 0.75rem;
}

/* Große Monitore */
@media (min-width: 1600px) {
    .vrms-notice-page {
        max-width: 1650px;
    }

    .vrms-notice-layout {
        grid-template-columns: 400px minmax(0, 1fr);
    }
}

/* Tablets: wie bisher untereinander */
@media (max-width: 991.98px) {
    .vrms-notice-page {
        max-width: 100%;
    }

    .vrms-notice-layout {
        grid-template-columns: 1fr;
    }

    .vrms-notice-list-panel {
        max-height: none;
        overflow: visible;
    }

    .vrms-notice-list {
        overflow: visible;
        padding-right: 0;
    }

    .vrms-notice-body-wrap {
        max-width: 100%;
    }
}

/* Handy: kompakt, aber gut bedienbar */
@media (max-width: 575.98px) {
    .vrms-notice-list-item {
        padding: 0.75rem;
    }

    .vrms-notice-list-subject {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .vrms-notice-body {
        min-height: 180px;
    }
}
/* =========================================================
   Notice / Message View
   ========================================================= */

.vrms-notice-page {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    padding: clamp(0.5rem, 2vw, 1.5rem);
    color: var(--VRMS_foreground);
}

.vrms-notice-page,
.vrms-notice-page * {
    box-sizing: border-box;
}

.vrms-notice-panel {
    overflow: visible;
}

.vrms-notice-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
    gap: 1rem;
    align-items: start;
}

.vrms-notice-list-panel,
.vrms-notice-detail-panel {
    min-width: 0;
    padding: 1rem;
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 6%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-notice-list {
    display: grid;
    gap: 0.65rem;
}

.vrms-notice-list-item {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 24%, transparent);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 0.25rem;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.vrms-notice-list-item:hover,
.vrms-notice-list-item.is-active {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--VRMS_accent) 12%, var(--VRMS_Background));
    border-color: var(--VRMS_foreground);
}

.vrms-notice-list-subject {
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-notice-list-sender {
    font-size: 0.85rem;
    opacity: 0.75;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.vrms-notice-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.5rem;
}

.vrms-notice-pagination .vrms-action-btn {
    width: 100%;
    margin: 0;
}

.vrms-notice-pagination .vrms-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.vrms-notice-page-indicator {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 25%, transparent);
    font-size: 0.85rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-notice-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 20%, transparent);
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
}

.vrms-notice-subject {
    margin: 0;
    color: var(--VRMS_foreground);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 950;
    overflow-wrap: anywhere;
}

.vrms-notice-body-wrap {
    border-radius: 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 20%, transparent);
    overflow: hidden;
}

.vrms-notice-body {
    min-height: 180px;
    padding: 1rem;
    color: var(--VRMS_foreground);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.vrms-notice-meta {
    margin-top: 0.85rem;
    color: var(--VRMS_foreground);
    opacity: 0.72;
    font-size: 0.85rem;
    font-weight: 750;
}

.vrms-notice-attachments {
    margin-top: 1rem;
}

.vrms-notice-attachments-title {
    font-weight: 900;
    margin-bottom: 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.vrms-notice-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vrms-notice-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--VRMS_foreground);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    text-decoration: none;
    font-weight: 800;
    max-width: 100%;
}

.vrms-notice-attachment-link:hover {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-empty-state-danger {
    border-color: var(--VRMS_danger);
}

@media (max-width: 991.98px) {
    .vrms-notice-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .vrms-notice-page {
        padding: 0.5rem;
    }

    .vrms-notice-list-panel,
    .vrms-notice-detail-panel {
        padding: 0.85rem;
        border-radius: 1.1rem;
    }

    .vrms-notice-pagination {
        grid-template-columns: 1fr;
    }

    .vrms-notice-page-indicator {
        text-align: center;
    }

    .vrms-notice-detail-header {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-notice-detail-header .vrms-icon-btn {
        width: 100%;
    }
}
/* =========================================================
   SAFE PATCH: Game Actions nebeneinander
   ========================================================= */

.vrms-game-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--VRMS_foreground);
}

.vrms-game-actions .btn {
    width: auto;
    min-width: 42px;
    min-height: 38px;
    margin: 0;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-game-actions .btn:hover,
.vrms-game-actions .btn:focus {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}

.vrms-game-send-notice {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent);
    font-size: 0.85rem;
    font-weight: 750;
    white-space: nowrap;
}

.vrms-game-send-notice input {
    accent-color: var(--VRMS_accent);
}

/* Tablet / kleinere Breite: weiterhin nebeneinander, aber linksbündig */
@media (max-width: 991.98px) {
    .vrms-game-actions {
        justify-content: flex-start;
    }
}

/* Handy: Buttons dürfen umbrechen, bleiben aber nicht unnötig riesig */
@media (max-width: 575.98px) {
    .vrms-game-actions {
        justify-content: stretch;
        gap: 0.4rem;
    }

    .vrms-game-actions .btn {
        flex: 1 1 calc(50% - 0.4rem);
        width: auto;
    }

    .vrms-game-send-notice {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Sehr kleine Geräte: eine Spalte */
@media (max-width: 380px) {
    .vrms-game-actions .btn {
        flex-basis: 100%;
    }
}
/* =========================================================
   Assignment Add Dialog - clearer layout
   ========================================================= */

.vrms-assignment-dialog {
    display: grid;
    gap: 1rem;
    color: var(--VRMS_foreground);
}

.vrms-assignment-dialog-header {
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 6%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-assignment-dialog-title {
    margin: 0.15rem 0 0;
    color: var(--VRMS_foreground);
    font-size: 1.1rem;
    font-weight: 900;
}

.vrms-assignment-dialog-select {
    padding: 0.85rem;
    border-radius: 1rem;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-assignment-function-list {
    display: grid;
    gap: 0.65rem;
}

.vrms-assignment-function-select {
    margin: 0;
}

.vrms-assignment-dialog-list {
    display: grid;
    gap: 1rem;
}

.vrms-assignment-dialog-card {
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem;
    border-radius: 1.15rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

.vrms-assignment-dialog-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-assignment-dialog-function {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.vrms-assignment-dialog-function strong {
    color: var(--VRMS_foreground);
    font-size: 1rem;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.vrms-assignment-dialog-card-body {
    display: grid;
    gap: 0.75rem;
}

.vrms-assignment-step-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--VRMS_foreground);
    font-weight: 850;
    font-size: 0.88rem;
}

.vrms-assignment-step-label span {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    font-size: 0.78rem;
    font-weight: 950;
}

.vrms-assignment-dialog-tabs-content {
    padding: 0.75rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

/* Filter + Auswahl im Dialog kompakter */
.vrms-assignment-dialog-card .vrms-assignment-filter-box {
    display: grid;
    grid-template-columns: minmax(160px, 260px);
    gap: 0.4rem;
    margin-bottom: 0.65rem;
    padding: 0.65rem;
    border-radius: 0.85rem;
}

.vrms-assignment-dialog-card .vrms-assignment-selection-box {
    margin-top: 0;
    padding: 0.65rem;
    border-radius: 0.85rem;
}

.vrms-assignment-dialog-card-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-assignment-dialog-card-footer .vrms-action-btn {
    width: auto;
    min-width: 140px;
    margin: 0;
}

.vrms-icon-btn-sm {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    margin: 0;
}

/* Tabs im Dialog ruhiger */
.vrms-assignment-dialog-card .vrms-assignment-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0;
    border-bottom: none;
}

.vrms-assignment-dialog-card .vrms-assignment-tabs .nav-link {
    min-height: 36px;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
}

/* Desktop: Auswahlbereich breiter, Filter daneben möglich */
@media (min-width: 992px) {
    .vrms-assignment-dialog-card .tab-pane.show.active {
        display: grid;
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
    }

    .vrms-assignment-dialog-card .vrms-assignment-filter-box {
        margin-bottom: 0;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .vrms-assignment-dialog-header,
    .vrms-assignment-dialog-select,
    .vrms-assignment-dialog-card {
        border-radius: 1rem;
        padding: 0.75rem;
    }

    .vrms-assignment-dialog-card-head {
        align-items: flex-start;
    }

    .vrms-assignment-dialog-card-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-assignment-dialog-card-footer .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }

    .vrms-assignment-dialog-card .vrms-assignment-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-assignment-dialog-card .vrms-assignment-tabs .nav-link {
        width: 100%;
    }
}
/* =========================================================
   SAFE PATCH: Assignment Dialog clean layout
   ========================================================= */

.vrms-assignment-clean-card {
    width: 100%;
    display: grid;
    gap: 0.85rem;
    padding: 0.9rem;
    border-radius: 1.15rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
}

/* Header: Titel links, X garantiert rechts */
.vrms-assignment-clean-head {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-assignment-clean-title-block {
    flex: 1 1 auto;
    min-width: 0;
}

.vrms-assignment-clean-title {
    display: block;
    color: var(--VRMS_foreground);
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* X-Button rechts halten, auch wenn globale Mobile-Regeln dagegen arbeiten */
.vrms-assignment-clean-close {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border-radius: 999px;
}

.vrms-assignment-clean-close:hover {
    background: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

.vrms-assignment-clean-body {
    display: grid;
    gap: 0.75rem;
}

/* Tabs kompakter und ruhiger */
.vrms-assignment-clean-card .vrms-assignment-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.vrms-assignment-clean-card .vrms-assignment-tabs .nav-link {
    min-height: 34px;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    font-size: 0.86rem;
    font-weight: 850;
}

.vrms-assignment-clean-card .vrms-assignment-tabs .nav-link.active {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
}

.vrms-assignment-clean-tab-content {
    min-width: 0;
}

/* Hauptlayout: Auswahl groß, Filter klein */
.vrms-assignment-clean-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: 0.85rem;
    align-items: start;
}

.vrms-assignment-clean-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.vrms-assignment-clean-select-main {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
}

.vrms-assignment-clean-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--VRMS_foreground);
    font-size: 0.95rem;
    font-weight: 900;
}

/* SR-Auswahl steht im Mittelpunkt */
.vrms-assignment-selection-main {
    margin: 0 !important;
    padding: 0.9rem !important;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 26%, transparent);
}

.vrms-assignment-selection-main select,
.vrms-assignment-selection-main .form-select {
    min-height: 46px;
    font-size: 0.95rem;
    font-weight: 750;
}

/* Filter bewusst kleiner und sekundär */
.vrms-assignment-clean-filter {
    min-width: 0;
    padding: 0.65rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 4%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 16%, transparent);
    opacity: 0.88;
}

.vrms-assignment-clean-filter .vrms-form-label {
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    opacity: 0.75;
}

.vrms-assignment-clean-filter .vrms-form-select,
.vrms-assignment-clean-filter .form-select {
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
}

/* Dropdown-Kopf innerhalb der SR-Auswahl kompakter */
.vrms-assignment-selection-main .vrms-assignment-dropdown-head {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.vrms-assignment-selection-main .vrms-distance-switch {
    font-size: 0.78rem;
}

/* Info-Text unter Auswahl */
.vrms-assignment-selection-main .vrms-assignment-info-text {
    margin-top: 0.5rem;
}

/* Footer */
.vrms-assignment-clean-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-assignment-clean-footer .vrms-action-btn {
    width: auto;
    min-width: 140px;
    margin: 0;
}

/* Bestehende alte Card-Regeln in diesem Dialog neutralisieren */
.vrms-assignment-clean-card .vrms-assignment-filter-box,
.vrms-assignment-clean-card .vrms-assignment-selection-box {
    box-shadow: none;
}

/* Tablet */
@media (max-width: 991.98px) {
    .vrms-assignment-clean-grid {
        grid-template-columns: 1fr;
    }

    .vrms-assignment-clean-filter {
        order: 2;
    }

    .vrms-assignment-clean-select-main {
        order: 1;
    }
}

/* Handy */
@media (max-width: 575.98px) {
    .vrms-assignment-clean-card {
        padding: 0.75rem;
        border-radius: 1rem;
    }

    .vrms-assignment-clean-head {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start;
    }

    .vrms-assignment-clean-close {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        margin-left: auto !important;
    }

    .vrms-assignment-clean-card .vrms-assignment-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-assignment-clean-card .vrms-assignment-tabs .nav-link {
        width: 100%;
    }

    .vrms-assignment-clean-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-assignment-clean-footer .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   SAFE PATCH: Assignment Dialog Footer Filter left / Save right
   ========================================================= */

.vrms-assignment-clean-tab-content {
    min-width: 0;
}

.vrms-assignment-clean-select-main {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
}

.vrms-assignment-selection-main {
    margin: 0 !important;
    padding: 0.95rem !important;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 26%, transparent);
}

.vrms-assignment-clean-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-assignment-footer-filter {
    width: min(260px, 100%);
    min-width: 180px;
    display: grid;
    gap: 0.25rem;
    opacity: 0.9;
}

.vrms-assignment-footer-filter .vrms-form-label {
    margin-bottom: 0;
    font-size: 0.78rem;
    opacity: 0.75;
}

.vrms-assignment-footer-filter .form-select,
.vrms-assignment-footer-filter .vrms-form-select {
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    border-radius: 999px;
}

.vrms-assignment-footer-save {
    width: auto;
    min-width: 140px;
    margin: 0;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .vrms-assignment-clean-footer {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-assignment-footer-filter {
        width: 100%;
        min-width: 0;
    }

    .vrms-assignment-footer-save {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   SAFE PATCH: Assignment Edit Dialog clean footer layout
   ========================================================= */

.vrms-assignment-current-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    color: var(--VRMS_foreground);
    font-size: 0.9rem;
}

.vrms-assignment-current-compact .vrms-assignment-current-label {
    opacity: 0.75;
    font-weight: 850;
}

.vrms-assignment-current-compact .vrms-assignment-current-value {
    font-weight: 950;
    overflow-wrap: anywhere;
}

.vrms-assignment-footer-left {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.65rem;
    min-width: 0;
}

.vrms-assignment-footer-left .vrms-assignment-footer-filter {
    width: min(250px, 100%);
    min-width: 170px;
}

.vrms-assignment-check-pill {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.vrms-assignment-check-pill input {
    accent-color: var(--VRMS_accent);
}

.vrms-assignment-check-pill:hover {
    background: color-mix(in srgb, var(--VRMS_accent) 12%, var(--VRMS_Background));
}

.vrms-assignment-clean-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-assignment-footer-save {
    width: auto;
    min-width: 140px;
    margin: 0;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .vrms-assignment-clean-footer {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-assignment-footer-left {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-assignment-footer-left .vrms-assignment-footer-filter,
    .vrms-assignment-check-pill,
    .vrms-assignment-footer-save {
        width: 100%;
        min-width: 0;
    }

    .vrms-assignment-check-pill {
        justify-content: center;
    }
}
/* =========================================================
   SAFE PATCH: DataTables Mobile Card Layout lesbarer
   ========================================================= */

@media (max-width: 767.98px) {
    .vrms-datatable-wrap {
        width: 100%;
        min-width: 0;
    }

    .vrms-table-responsive {
        overflow: visible !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .vrms-export-table,
    .vrms-export-table thead,
    .vrms-export-table tbody,
    .vrms-export-table tr,
    .vrms-export-table th,
    .vrms-export-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .vrms-export-table {
        border: none !important;
        background: transparent !important;
    }

    .vrms-export-table thead {
        display: none !important;
    }

    .vrms-export-table tbody {
        display: grid !important;
        gap: 0.85rem !important;
    }

    .vrms-export-table tbody tr {
        display: block !important;
        width: 100% !important;
        padding: 0.9rem !important;
        border-radius: 1.15rem !important;
        background: var(--VRMS_Background) !important;
        color: var(--VRMS_foreground) !important;
        border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 35%, transparent) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
    }

    .vrms-export-table tbody td {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
        padding: 0.65rem 0 !important;
        text-align: left !important;
        background: transparent !important;
        color: var(--VRMS_foreground) !important;
        border: none !important;
        border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent) !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .vrms-export-table tbody td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .vrms-export-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        color: var(--VRMS_foreground);
        opacity: 0.68;
        font-size: 0.76rem;
        font-weight: 900;
        letter-spacing: 0.04em;
        text-align: left;
        text-transform: uppercase;
    }

    .vrms-export-table tbody td:empty {
        display: none !important;
    }

    .vrms-export-table tbody td.no-export,
    .vrms-export-table tbody td[data-export="false"] {
        margin-top: 0.35rem;
        padding-top: 0.75rem !important;
        border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 24%, transparent) !important;
        border-bottom: none !important;
    }

    .vrms-export-table tbody td.no-export::before,
    .vrms-export-table tbody td[data-export="false"]::before {
        margin-bottom: 0.45rem;
    }

    .vrms-export-table .vrms-table-action-btn,
    .vrms-export-table .btn {
        width: 100%;
        min-height: 40px;
        margin: 0.2rem 0 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
    }

    .vrms-export-table .vrms-status-badge {
        width: fit-content;
        max-width: 100%;
        justify-content: flex-start;
        white-space: normal;
    }

    .vrms-export-table br {
        display: block;
        margin-bottom: 0.25rem;
        content: "";
    }

    .dataTables_wrapper {
        width: 100%;
        overflow: visible;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: left !important;
        margin-bottom: 0.75rem;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        width: 100%;
        display: grid;
        gap: 0.35rem;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        width: 100% !important;
        margin-left: 0 !important;
        min-height: 42px;
        border-radius: 999px;
    }

    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 38px;
        min-height: 38px;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .dt-buttons {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.45rem;
        width: 100%;
    }

    .dt-buttons .dt-button,
    .dt-buttons button {
        width: 100% !important;
        min-height: 40px;
        margin: 0 !important;
    }
}
/* =========================================================
   VRMS Alerts / Flash Messages
   ========================================================= */

.vrms-alert-container {
    position: fixed;
    top: 82px;
    left: 50%;
    z-index: 21000;
    width: min(720px, calc(100% - 1rem));
    transform: translateX(-50%);
    display: grid;
    gap: 0.75rem;
    pointer-events: none;
}

.vrms-alert {
    pointer-events: auto;
    margin: 0;
    padding: 0.85rem 3rem 0.85rem 1rem;
    border-radius: 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

.vrms-alert-content {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.vrms-alert-content i {
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

.vrms-alert-danger {
    border-color: var(--VRMS_danger);
    background: color-mix(in srgb, var(--VRMS_danger) 14%, var(--VRMS_Background));
}

.vrms-alert-danger .vrms-alert-content i {
    color: var(--VRMS_danger);
}

.vrms-alert-success {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 14%, var(--VRMS_Background));
}

.vrms-alert-success .vrms-alert-content i {
    color: var(--VRMS_success);
}

.vrms-alert-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    margin: 0;
    opacity: 0.85;
    filter: none;
}

body[data-theme="dark"] .vrms-alert-close {
    filter: invert(1);
}

@media (max-width: 575.98px) {
    .vrms-alert-container {
        top: 70px;
        width: calc(100% - 0.75rem);
    }

    .vrms-alert {
        border-radius: 0.85rem;
        padding: 0.8rem 2.7rem 0.8rem 0.85rem;
    }
}
.vrms-qr-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vrms-qr-image {
    width: 220px;
    height: 220px;
    padding: 0.75rem;
    border-radius: 1rem;
    background: var(--VRMS_white);
    border: 1px solid var(--VRMS_foreground);
}
.vrms-oauth-login {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.vrms-oauth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--VRMS_foreground);
    opacity: 0.75;
    font-weight: 800;
    font-size: 0.85rem;
}

.vrms-oauth-divider::before,
.vrms-oauth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--VRMS_foreground);
    opacity: 0.35;
}

.vrms-oauth-btn {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    font-weight: 850;
    text-decoration: none;
}

.vrms-oauth-btn:hover {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
}

.vrms-oauth-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* User Auswahl */
.vrms-oauth-account-list {
    display: grid;
    gap: 0.75rem;
}

.vrms-oauth-account-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: 1.25rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    cursor: pointer;
}

.vrms-oauth-account-card:hover,
.vrms-oauth-account-card:has(input:checked) {
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
}

.vrms-oauth-account-card input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--VRMS_accent);
}

.vrms-oauth-account-content {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.vrms-oauth-account-title {
    font-weight: 900;
    color: var(--VRMS_foreground);
    overflow-wrap: anywhere;
}

.vrms-oauth-account-subtitle {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--VRMS_foreground);
    opacity: 0.75;
    overflow-wrap: anywhere;
}
.vrms-oauth-account-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.35rem;
}

.vrms-oauth-default-label {
    margin: 0;
    font-size: 0.9rem;
}
/* =========================================================
   Assignment Dialog - Mini Game Info
   ========================================================= */

.vrms-assignment-game-mini {
    display: grid;
    gap: 0.25rem;
    padding: 0.65rem 0.8rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-assignment-game-mini-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.vrms-assignment-game-mini-competition {
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.vrms-assignment-game-mini-number {
    font-size: 0.74rem;
    font-weight: 850;
    opacity: 0.68;
    white-space: nowrap;
}

.vrms-assignment-game-mini-teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.2;
}

.vrms-assignment-game-mini-teams strong {
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-assignment-game-mini-teams span {
    font-size: 0.7rem;
    font-weight: 950;
    opacity: 0.55;
    text-transform: uppercase;
}

.vrms-assignment-game-mini-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    min-width: 0;
    font-size: 0.76rem;
    font-weight: 750;
    opacity: 0.78;
}

.vrms-assignment-game-mini-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.vrms-assignment-game-mini-map {
    opacity: 1;
}

.vrms-assignment-game-mini-map .btn,
.vrms-assignment-game-mini-map a {
    min-height: 28px;
    padding: 0.2rem 0.5rem;
    margin: 0;
    border-radius: 999px;
    font-size: 0.72rem;
}

@media (min-width: 992px) {
    .vrms-assignment-game-mini {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.35rem 0.9rem;
    }

    .vrms-assignment-game-mini-main,
    .vrms-assignment-game-mini-teams {
        grid-column: 1;
    }

    .vrms-assignment-game-mini-meta {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-content: flex-end;
        max-width: 420px;
    }
}

@media (max-width: 575.98px) {
    .vrms-assignment-game-mini {
        padding: 0.6rem 0.7rem;
        border-radius: 0.85rem;
    }

    .vrms-assignment-game-mini-meta {
        gap: 0.3rem 0.5rem;
    }
}
.referee-rating-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vrms-rating-game-box,
.vrms-rating-referee-card {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    border-radius: 1rem;
    padding: 1.25rem;
}

.vrms-rating-game-header,
.vrms-rating-referee-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.vrms-rating-game-title,
.vrms-rating-referee-name {
    margin: 0;
    font-weight: 700;
}

.vrms-rating-game-title {
    font-size: 1.35rem;
}

.vrms-rating-referee-name {
    font-size: 1.25rem;
}

.vrms-rating-versus {
    color: var(--VRMS_accent);
    margin: 0 0.5rem;
}

.vrms-rating-game-number {
    white-space: nowrap;
    font-size: 0.95rem;
}

.vrms-rating-game-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.vrms-rating-detail-item {
    border: 1px solid var(--VRMS_foreground);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

.vrms-rating-detail-item span {
    display: block;
    font-size: 0.8rem;
    opacity: 0.75;
    margin-bottom: 0.25rem;
}

.vrms-rating-detail-item strong {
    display: block;
    font-size: 0.95rem;
}

.vrms-rating-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vrms-rating-categories {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vrms-rating-category {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--VRMS_foreground);
    border-radius: 0.75rem;
    padding: 0.85rem;
}

.vrms-rating-category-text strong {
    display: block;
    font-size: 1rem;
}

.vrms-rating-category-text span {
    display: block;
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

/* Klassisches 1-5 Sterne Rating */
.vrms-star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.15rem;
}

.vrms-star-rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vrms-star-rating label {
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    color: var(--VRMS_foreground);
    opacity: 0.25;
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

/* Hover: aktueller Stern + alle davor aktiv */
.vrms-star-rating label:hover,
.vrms-star-rating label:hover ~ label {
    color: var(--VRMS_accent);
    opacity: 1;
}

/* Geklickter Wert bleibt sichtbar */
.vrms-star-rating input:checked ~ label {
    color: var(--VRMS_accent);
    opacity: 1;
}

.vrms-star-rating label:hover {
    transform: scale(1.12);
}

.vrms-rating-comment-box {
    margin-top: 1rem;
}

.vrms-rating-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .vrms-rating-game-header {
        flex-direction: column;
    }

    .vrms-rating-game-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vrms-rating-category {
        grid-template-columns: 1fr;
    }

    .vrms-star-rating {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .vrms-rating-game-details {
        grid-template-columns: 1fr;
    }

    .vrms-rating-game-title {
        font-size: 1.15rem;
    }

    .vrms-star-rating {
        width: 100%;
    }

    .vrms-star-rating label {
        font-size: 2.2rem;
    }

    .vrms-rating-actions {
        justify-content: stretch;
    }

    .vrms-rating-actions .btn {
        width: 100%;
    }
}
.vrms-feedback-done-message{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
}
/* =========================================================
   DASHBOARD HOME EXTENSION
   ========================================================= */

.vrms-dashboard-hero {
    position: relative;
    overflow: hidden;
}

.vrms-dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, var(--VRMS_accent), transparent 36%),
        linear-gradient(135deg, color-mix(in srgb, var(--VRMS_foreground) 9%, transparent), transparent 48%);
    opacity: 0.16;
    pointer-events: none;
}

.vrms-dashboard-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-dashboard-hero-text {
    margin: 0.45rem 0 0;
    max-width: 58rem;
    color: var(--VRMS_foreground);
    opacity: 0.82;
    font-weight: 650;
}

.vrms-dashboard-hero-meta {
    min-width: 12rem;
    display: grid;
    gap: 0.35rem;
    justify-items: end;
    color: var(--VRMS_foreground);
}

.vrms-dashboard-hero-meta span,
.vrms-dashboard-hero-meta strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--VRMS_foreground);
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    font-size: 0.85rem;
}

.vrms-dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.vrms-dashboard-stat-card,
.vrms-dashboard-action-card,
.vrms-dashboard-game-item {
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_foreground);
    box-shadow: 0 0.9rem 2.2rem color-mix(in srgb, var(--VRMS_foreground) 10%, transparent);
}

.vrms-dashboard-stat-card {
    min-height: 9rem;
    border-radius: 1.4rem;
    padding: 1rem;
    display: grid;
    align-content: space-between;
    gap: 0.7rem;
}

.vrms-dashboard-stat-label {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.76;
}

.vrms-dashboard-stat-value {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
    font-weight: 950;
    color: var(--VRMS_accent);
}

.vrms-dashboard-stat-hint {
    font-size: 0.9rem;
    font-weight: 750;
    opacity: 0.72;
}

.vrms-dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.85rem;
}

.vrms-dashboard-action-card {
    min-height: 5.5rem;
    border-radius: 1.2rem;
    padding: 1rem;
    display: grid;
    gap: 0.35rem;
    align-content: center;
    text-decoration: none;
    transition: transform 0.16s ease, background 0.16s ease;
}

.vrms-dashboard-action-card:hover,
.vrms-dashboard-action-card:focus {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--VRMS_accent) 12%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
}

.vrms-dashboard-action-card strong {
    font-size: 1rem;
    font-weight: 950;
}

.vrms-dashboard-action-card span {
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.74;
}

.vrms-dashboard-main-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
}

.vrms-dashboard-game-list {
    display: grid;
    gap: 0.75rem;
}

.vrms-dashboard-game-item {
    border-radius: 1.15rem;
    padding: 0.9rem;
    display: grid;
    grid-template-columns: minmax(8.5rem, 0.75fr) minmax(0, 1.4fr) minmax(8rem, 0.9fr);
    gap: 0.85rem;
    align-items: center;
}

.vrms-dashboard-game-date {
    font-weight: 950;
    color: var(--VRMS_accent);
}

.vrms-dashboard-game-main {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.vrms-dashboard-game-main strong,
.vrms-dashboard-game-main span,
.vrms-dashboard-game-venue {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vrms-dashboard-game-main span,
.vrms-dashboard-game-venue {
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.74;
}

.vrms-dashboard-empty {
    border: 1px solid var(--VRMS_foreground);
}

@media (max-width: 1399.98px) {
    .vrms-dashboard-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .vrms-dashboard-hero-content,
    .vrms-dashboard-hero-meta {
        align-items: stretch;
        justify-items: stretch;
        flex-direction: column;
    }

    .vrms-dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .vrms-dashboard-stat-card {
        min-height: 7.5rem;
        border-radius: 1rem;
    }

    .vrms-dashboard-game-item {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .vrms-dashboard-game-main strong,
    .vrms-dashboard-game-main span,
    .vrms-dashboard-game-venue {
        white-space: normal;
    }
}

@media (max-width: 479.98px) {
    .vrms-dashboard-stat-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Referee List View
   ========================================================= */

.vrms-referee-list-page {
    margin-top: 1rem;
}

.vrms-referee-filter-container {
    margin-top: 1rem;
    display: grid;
    gap: 0.85rem;
}

.vrms-referee-search-panel {
    margin-top: 1rem;
    padding: 0.85rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
}

.vrms-referee-search-box {
    min-width: 0;
}

.vrms-referee-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 24%, transparent);
    font-size: 0.9rem;
    font-weight: 850;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.vrms-referee-toggle input {
    accent-color: var(--VRMS_accent);
}

.vrms-referee-card-grid {
    margin-top: 1.25rem;
}

@media (max-width: 767.98px) {
    .vrms-referee-search-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-referee-toggle {
        justify-content: center;
        width: 100%;
        white-space: normal;
    }
}
/* =========================================================
   Referee Filter Details
   ========================================================= */

.vrms-filter-details {
    border-radius: 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    overflow: hidden;
}

.vrms-filter-summary {
    min-height: 48px;
    padding: 0.75rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    color: var(--VRMS_foreground);
    font-weight: 900;
    user-select: none;
}

.vrms-filter-summary::-webkit-details-marker {
    display: none;
}

.vrms-filter-summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.vrms-filter-summary-icon {
    transition: transform 0.2s ease;
}

.vrms-filter-details[open] .vrms-filter-summary-icon {
    transform: rotate(180deg);
}

.vrms-filter-panel {
    padding: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    background: color-mix(in srgb, var(--VRMS_foreground) 4%, var(--VRMS_Background));
}

.vrms-filter-grid {
    margin-top: 0.65rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 0.85rem;
    align-items: end;
}

.vrms-filter-grid .vrms-form-group {
    min-width: 0;
}

.vrms-filter-grid .vrms-form-select,
.vrms-filter-grid .form-select {
    width: 100%;
    min-height: 42px;
}

@media (max-width: 991.98px) {
    .vrms-filter-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .vrms-filter-summary {
        min-height: 44px;
        padding: 0.65rem 0.75rem;
    }

    .vrms-filter-panel {
        padding: 0.75rem;
    }

    .vrms-filter-grid {
        gap: 0.7rem;
    }
}
.vrms-dashboard-multi-stat-card {
    align-content: stretch;
}

.vrms-dashboard-multi-stat-list {
    display: grid;
    gap: 0.5rem;
}

.vrms-dashboard-multi-stat-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    padding-bottom: 0.35rem;
}

.vrms-dashboard-multi-stat-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.vrms-dashboard-multi-stat-item strong {
    color: var(--VRMS_accent);
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 950;
}

.vrms-dashboard-multi-stat-item span {
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: right;
    opacity: 0.78;
}
/* =========================================================
   Group Referee Assignment / Dual List
   ========================================================= */

.vrms-group-referee-page {
    margin-top: 1rem;
}

.vrms-group-referee-form {
    display: grid;
    gap: 1rem;
}

.vrms-group-select-panel {
    padding: 0.9rem;
}

.vrms-dual-list-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.vrms-dual-list-panel {
    min-width: 0;
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-dual-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-dual-list-actions {
    min-width: 92px;
    display: grid;
    gap: 0.65rem;
    align-content: center;
    justify-items: center;
}

.vrms-dual-list-btn {
    width: 100%;
    min-width: 84px;
    margin: 0;
}

.vrms-dual-list-select {
    width: 100%;
    min-height: 360px;
    padding: 0.45rem;
    border-radius: 0.85rem;
}

.vrms-dual-list-select option {
    padding: 0.45rem 0.55rem;
    border-radius: 0.45rem;
    margin-bottom: 0.15rem;
}

.vrms-dual-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-dual-list-status {
    min-width: 0;
}

.vrms-dual-list-message {
    padding: 0.55rem 0.75rem;
    border-radius: 0.85rem;
    font-weight: 850;
    border: 1px solid var(--VRMS_foreground);
}

.vrms-status-success {
    background: color-mix(in srgb, var(--VRMS_success) 14%, var(--VRMS_Background));
    border-color: var(--VRMS_success);
    color: var(--VRMS_foreground);
}

.vrms-status-danger {
    background: color-mix(in srgb, var(--VRMS_danger) 14%, var(--VRMS_Background));
    border-color: var(--VRMS_danger);
    color: var(--VRMS_foreground);
}

@media (max-width: 991.98px) {
    .vrms-dual-list-section {
        grid-template-columns: 1fr;
    }

    .vrms-dual-list-actions {
        min-width: 0;
        grid-template-columns: 1fr 1fr;
        align-content: stretch;
    }

    .vrms-dual-list-btn {
        width: 100%;
    }

    .vrms-dual-list-btn i.fa-arrow-right {
        transform: rotate(90deg);
    }

    .vrms-dual-list-btn i.fa-arrow-left {
        transform: rotate(90deg);
    }

    .vrms-dual-list-select {
        min-height: 260px;
    }
}

@media (max-width: 575.98px) {
    .vrms-dual-list-panel {
        padding: 0.75rem;
        border-radius: 0.85rem;
    }

    .vrms-dual-list-footer {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-dual-list-footer .vrms-action-btn {
        width: 100%;
    }

    .vrms-dual-list-select {
        min-height: 220px;
    }
}
/* =========================================================
   User Tab - new account entry
   ========================================================= */

.vrms-user-entry-new {
    border-color: var(--VRMS_success);
    background: color-mix(in srgb, var(--VRMS_success) 8%, var(--VRMS_Background));
}

.vrms-user-create-form {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.vrms-user-entry-new .vrms-user-entry-footer {
    justify-content: flex-end;
}

@media (max-width: 575.98px) {
    .vrms-user-entry-new .vrms-user-entry-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-user-entry-new .vrms-user-entry-footer .vrms-action-btn {
        width: 100%;
    }
}
/* =========================================================
   Password Change View
   ========================================================= */

.vrms-password-page {
    width: min(560px, 100%);
    margin: 1.5rem auto;
}

.vrms-panel-header-center {
    justify-content: center;
    text-align: center;
}

.vrms-password-form {
    display: grid;
    gap: 0.95rem;
    padding: 1rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 20%, transparent);
}

.vrms-password-admin-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--VRMS_accent) 18%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 24%, transparent);
    font-size: 0.78rem;
    font-weight: 900;
}

.vrms-password-error {
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--VRMS_danger) 14%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid var(--VRMS_danger);
    font-weight: 850;
}

.vrms-password-error i {
    color: var(--VRMS_danger);
}

.vrms-password-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

.vrms-password-actions .vrms-action-btn {
    width: auto;
    min-width: 140px;
    margin: 0;
}

@media (max-width: 575.98px) {
    .vrms-password-page {
        margin: 1rem 0;
    }

    .vrms-password-form {
        padding: 0.85rem;
        border-radius: 0.9rem;
    }

    .vrms-password-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-password-actions .vrms-action-btn {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Person List View
   ========================================================= */

.vrms-person-list-page {
    margin-top: 1rem;
}

.vrms-person-search-panel {
    margin-top: 1rem;
    padding: 0.85rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
}

.vrms-person-search-box {
    min-width: 0;
}

.vrms-person-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 24%, transparent);
    font-size: 0.9rem;
    font-weight: 850;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.vrms-person-toggle input {
    accent-color: var(--VRMS_accent);
}

.vrms-person-card-grid {
    margin-top: 1.25rem;
}

@media (max-width: 767.98px) {
    .vrms-person-search-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-person-toggle {
        justify-content: center;
        width: 100%;
        white-space: normal;
    }
}
/* =========================================================
   Selectable Games View
   ========================================================= */

.vrms-selectable-games-page {
    margin-top: 1rem;
}

.vrms-selectable-games-grid {
    margin-top: 1rem;
    width: 100%;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .vrms-selectable-games-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
/* =========================================================
   DASHBOARD SELECTABLE GAMES SIGNAL
   ========================================================= */

.vrms-dashboard-selectable-signal {
    position: relative;
    overflow: hidden;
    border-width: 2px;
    border-color: var(--VRMS_accent);
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-dashboard-selectable-signal::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, var(--VRMS_accent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--VRMS_accent) 24%, transparent), transparent 58%);
    opacity: 0.22;
    pointer-events: none;
}

.vrms-dashboard-selectable-signal > * {
    position: relative;
    z-index: 1;
}

.vrms-dashboard-selectable-signal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vrms-dashboard-selectable-signal-text {
    margin: 0.45rem 0 0;
    color: var(--VRMS_foreground);
    font-weight: 750;
    opacity: 0.86;
}

.vrms-dashboard-selectable-signal-badge {
    min-width: 7rem;
    min-height: 7rem;
    border-radius: 999px;
    border: 2px solid var(--VRMS_accent);
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 0.8rem;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--VRMS_accent) 45%, transparent);
    animation: vrmsSelectableSignalPulse 1.8s ease-in-out infinite;
}

.vrms-dashboard-selectable-signal-badge strong {
    color: var(--VRMS_accent);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 950;
}

.vrms-dashboard-selectable-signal-badge span {
    color: var(--VRMS_foreground);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vrms-dashboard-selectable-games-grid {
    margin-top: 1rem;
    width: 100%;
    min-width: 0;
}

@keyframes vrmsSelectableSignalPulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--VRMS_accent) 42%, transparent);
    }

    70% {
        box-shadow: 0 0 0 0.85rem transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vrms-dashboard-selectable-signal-badge {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .vrms-dashboard-selectable-signal-header {
        flex-direction: column;
    }

    .vrms-dashboard-selectable-signal-badge {
        width: 100%;
        min-height: auto;
        border-radius: 1rem;
        display: flex;
        justify-content: center;
        gap: 0.75rem;
    }
}
/* =========================================================
   Referee Games / Own Nominations
   ========================================================= */

.vrms-referee-games-page {
    margin-top: 1rem;
}

.vrms-referee-games-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
}

.vrms-view-switch-btn {
    min-height: 36px;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--VRMS_foreground);
    border: 1px solid transparent;
    font-size: 0.86rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-view-switch-btn:hover,
.vrms-view-switch-btn:focus,
.vrms-view-switch-btn.active {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
}

.vrms-season-tabs-wrap {
    margin-top: 1rem;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.vrms-season-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    min-width: max-content;
}

.vrms-season-tab {
    min-height: 38px;
    margin: 0;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 28%, transparent);
    font-size: 0.88rem;
    font-weight: 850;
    white-space: nowrap;
}

.vrms-season-tab:hover,
.vrms-season-tab:focus,
.vrms-season-tab.active {
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_foreground);
}

.vrms-referee-games-content {
    margin-top: 1rem;
    width: 100%;
    min-width: 0;
}

/* Falls die Kartenansicht vom Endpoint Bootstrap row/col enthält */
.vrms-referee-games-content > .row,
.vrms-referee-games-content .row {
    margin-left: 0;
    margin-right: 0;
}

/* Mobile */
@media (max-width: 767.98px) {
    .vrms-referee-games-page .vrms-panel-header-between {
        align-items: stretch;
    }

    .vrms-referee-games-view-switch {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 1rem;
    }

    .vrms-view-switch-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .vrms-season-tabs-wrap {
        margin-top: 0.85rem;
    }

    .vrms-season-tab {
        min-height: 36px;
        padding: 0.35rem 0.7rem;
        font-size: 0.82rem;
    }

    .vrms-referee-games-content {
        margin-top: 0.85rem;
    }
}
/* =========================================================
   Fee Management
   ========================================================= */

.vrms-fee-management-page {
    margin-top: 1rem;
}

.vrms-fee-management-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 1rem;
    align-items: start;
}

.vrms-fee-list-panel,
.vrms-fee-rates-panel {
    min-width: 0;
}

.vrms-fee-link {
    color: var(--VRMS_foreground);
    font-weight: 900;
    text-decoration: none;
}

.vrms-fee-link:hover,
.vrms-fee-link:focus {
    color: var(--VRMS_accent);
    text-decoration: underline;
}

.vrms-fee-selected-row {
    background: color-mix(in srgb, var(--VRMS_accent) 12%, var(--VRMS_Background));
}

.vrms-fee-disabled-row {
    opacity: 0.62;
}

.vrms-muted-small {
    color: var(--VRMS_foreground);
    opacity: 0.68;
    font-size: 0.82rem;
    font-weight: 700;
}

.vrms-fee-hint {
    margin-top: 0.75rem;
}

.vrms-table-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.vrms-inline-form {
    display: inline-flex;
    margin: 0;
}

.vrms-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.vrms-modal-body {
    display: grid;
    gap: 0.85rem;
}

@media (max-width: 1199.98px) {
    .vrms-fee-management-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .vrms-form-grid-2 {
        grid-template-columns: 1fr;
    }

    .vrms-fee-management-page .vrms-panel-header-between {
        align-items: stretch;
    }

    .vrms-fee-management-page .vrms-panel-header-between .vrms-action-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .vrms-table-action-group {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .vrms-table-action-group .vrms-table-action-btn,
    .vrms-table-action-group .vrms-inline-form {
        width: 100%;
    }

    .vrms-table-action-group .vrms-inline-form .vrms-table-action-btn {
        width: 100%;
    }
}
.vrms-login-links {
    margin-top: 0.9rem;
    text-align: center;
}

.vrms-login-text-link,
.vrms-login-links a {
    color: var(--VRMS_accent);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}

.vrms-login-text-link:hover,
.vrms-login-links a:hover {
    color: var(--VRMS_foreground);
    text-decoration: underline;
}

.vrms-password-reset-card {
    max-width: 460px;
}

.vrms-alert {
    width: 100%;
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--VRMS_foreground);
    border-radius: 0.75rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    font-size: 0.95rem;
    line-height: 1.35;
}

.vrms-alert-success {
    border-color: var(--VRMS_success);
    color: var(--VRMS_success);
}

.vrms-alert-danger {
    border-color: var(--VRMS_danger);
    color: var(--VRMS_danger);
}

.vrms-alert-warning {
    border-color: var(--VRMS_warning);
    color: var(--VRMS_warning);
}

.vrms-alert-info {
    border-color: var(--VRMS_accent);
    color: var(--VRMS_foreground);
}

.vrms-login-submit {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}
/* =========================================================
   Export Availability Report
   ========================================================= */

.vrms-export-availability-page {
    margin-top: 1rem;
}

.vrms-export-filter-form {
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-export-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 420px) auto;
    gap: 0.85rem;
    align-items: end;
}

.vrms-export-filter-actions {
    display: flex;
    align-items: end;
}

.vrms-export-filter-actions .vrms-action-btn {
    width: auto;
    min-width: 130px;
    margin: 0;
}

@media (max-width: 767.98px) {
    .vrms-export-filter-grid {
        grid-template-columns: 1fr;
    }

    .vrms-export-filter-actions,
    .vrms-export-filter-actions .vrms-action-btn {
        width: 100%;
    }
}
/* =========================================================
   Accounting Overview
   ========================================================= */

.vrms-accounting-overview-page {
    margin-top: 1rem;
}

.vrms-accounting-filter-panel {
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-accounting-filter-grid {
    display: grid;
    grid-template-columns: minmax(180px, 320px) minmax(220px, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
}

.vrms-accounting-filter-actions {
    display: flex;
    align-items: end;
}

.vrms-accounting-filter-actions .vrms-action-btn {
    width: auto;
    min-width: 150px;
    margin: 0;
}

.vrms-accounting-list-panel,
.vrms-accounting-detail-panel {
    margin-top: 1rem;
}

.vrms-accounting-table .vrms-row-active,
.vrms-row-active {
    background: color-mix(in srgb, var(--VRMS_accent) 14%, var(--VRMS_Background));
}

.vrms-table-link {
    color: var(--VRMS_foreground);
    font-weight: 900;
    text-decoration: none;
}

.vrms-table-link:hover,
.vrms-table-link:focus {
    color: var(--VRMS_accent);
    text-decoration: underline;
}

.vrms-amount-cell {
    text-align: right;
    white-space: nowrap;
}

.vrms-muted-small {
    color: var(--VRMS_foreground);
    opacity: 0.68;
    font-size: 0.82rem;
    font-weight: 700;
}

.vrms-accounting-hint {
    margin-top: 0.75rem;
}

.vrms-accounting-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-accounting-detail-actions .vrms-action-btn {
    width: auto;
    margin: 0;
}

.vrms-accounting-detail-body {
    margin-top: 0.85rem;
}

@media (max-width: 991.98px) {
    .vrms-accounting-filter-grid {
        grid-template-columns: 1fr;
    }

    .vrms-accounting-filter-actions,
    .vrms-accounting-filter-actions .vrms-action-btn {
        width: 100%;
    }

    .vrms-accounting-detail-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .vrms-accounting-detail-actions .vrms-action-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .vrms-accounting-filter-panel {
        padding: 0.75rem;
        border-radius: 0.85rem;
    }

    .vrms-accounting-detail-actions {
        grid-template-columns: 1fr;
    }

    .vrms-amount-cell {
        text-align: left;
    }
}
/* =========================================================
   Accounting Admin - Add Games/Tournaments Selection
   ========================================================= */

.vrms-add-selection-panel {
    margin-top: 1rem;
}

.vrms-add-selection-search {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-add-selection-search .vrms-form-control {
    max-width: 520px;
}

.vrms-add-selection-table {
    margin-top: 0.85rem;
}

.vrms-check-cell {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-size: 0.82rem;
    font-weight: 850;
    cursor: pointer;
    margin: 0;
}

.vrms-check-cell input {
    accent-color: var(--VRMS_accent);
}

.vrms-table-main-text {
    color: var(--VRMS_foreground);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-match-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.vrms-match-inline strong {
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-match-inline span {
    opacity: 0.65;
    font-weight: 900;
}

.vrms-mini-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.vrms-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--VRMS_accent) 12%, var(--VRMS_Background));
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 22%, transparent);
    font-size: 0.78rem;
    font-weight: 850;
}

.vrms-mini-badge small {
    opacity: 0.75;
    font-weight: 800;
}

.vrms-selection-footer {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vrms-selection-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vrms-selection-footer-actions .vrms-action-btn {
    width: auto;
    margin: 0;
}

@media (max-width: 767.98px) {
    .vrms-add-selection-search .vrms-form-control {
        max-width: none;
    }

    .vrms-selection-footer {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .vrms-selection-footer-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-selection-footer-actions .vrms-action-btn {
        width: 100%;
    }

    .vrms-match-inline {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .vrms-match-inline span {
        display: none;
    }

    .vrms-check-cell {
        width: 100%;
        justify-content: center;
    }
}
/* =========================================================
   Mobile First Dashboard / Home
   ========================================================= */

.vrms-dashboard-mobile-page {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    padding: 0.65rem;
    margin: 0;
}

.vrms-dashboard-mobile-page .vrms-panel {
    border-radius: 0.95rem;
    padding: 0.8rem;
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.vrms-dashboard-mobile-page .vrms-panel-header,
.vrms-dashboard-mobile-page .vrms-panel-header-between {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}

.vrms-dashboard-mobile-page .vrms-panel-title {
    font-size: 1.15rem;
    line-height: 1.15;
    margin: 0;
}

.vrms-dashboard-mobile-page .vrms-panel-subtitle {
    font-size: 0.98rem;
    line-height: 1.2;
    margin: 0;
}

.vrms-dashboard-mobile-page .vrms-panel-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

/* Hero */
.vrms-dashboard-mobile-page .vrms-dashboard-hero {
    padding: 0.9rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-hero-text {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    line-height: 1.35;
    opacity: 0.82;
}

.vrms-dashboard-mobile-page .vrms-dashboard-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.65rem;
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 16%, transparent);
    font-size: 0.78rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-hero-meta strong {
    font-size: 0.78rem;
}

/* Signal selectable games */
.vrms-dashboard-mobile-page .vrms-dashboard-selectable-signal {
    border-color: var(--VRMS_warning);
    background: color-mix(in srgb, var(--VRMS_warning) 10%, var(--VRMS_Background));
}

.vrms-dashboard-mobile-page .vrms-dashboard-selectable-signal-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.65rem;
    align-items: start;
}

.vrms-dashboard-mobile-page .vrms-dashboard-selectable-signal-text {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    line-height: 1.3;
}

.vrms-dashboard-mobile-page .vrms-dashboard-selectable-signal-badge {
    min-width: 62px;
    min-height: 62px;
    padding: 0.4rem;
    border-radius: 0.9rem;
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 24%, transparent);
}

.vrms-dashboard-mobile-page .vrms-dashboard-selectable-signal-badge strong {
    font-size: 1.35rem;
    line-height: 1;
}

.vrms-dashboard-mobile-page .vrms-dashboard-selectable-signal-badge span {
    font-size: 0.65rem;
    font-weight: 850;
}

/* Stats */
.vrms-dashboard-mobile-page .vrms-dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-stat-card {
    min-width: 0;
    min-height: 96px;
    padding: 0.7rem;
    border-radius: 0.9rem;
    display: grid;
    gap: 0.3rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-dashboard-mobile-page .vrms-dashboard-stat-label {
    font-size: 0.72rem;
    line-height: 1.15;
    font-weight: 850;
    opacity: 0.75;
}

.vrms-dashboard-mobile-page .vrms-dashboard-stat-value {
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 950;
}

.vrms-dashboard-mobile-page .vrms-dashboard-stat-hint {
    font-size: 0.68rem;
    line-height: 1.15;
    opacity: 0.68;
}

.vrms-dashboard-mobile-page .vrms-dashboard-multi-stat-card {
    grid-column: 1 / -1;
}

.vrms-dashboard-mobile-page .vrms-dashboard-multi-stat-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-multi-stat-item {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
    padding: 0.45rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--VRMS_foreground) 5%, var(--VRMS_Background));
    text-align: center;
}

.vrms-dashboard-mobile-page .vrms-dashboard-multi-stat-item strong {
    font-size: 1.15rem;
    line-height: 1;
}

.vrms-dashboard-mobile-page .vrms-dashboard-multi-stat-item span {
    font-size: 0.62rem;
    line-height: 1.1;
    font-weight: 800;
    opacity: 0.75;
}

/* Quick actions */
.vrms-dashboard-mobile-page .vrms-dashboard-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-action-card {
    min-height: 58px;
    padding: 0.7rem 0.8rem;
    border-radius: 0.9rem;
    display: grid;
    gap: 0.2rem;
    text-decoration: none;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-dashboard-mobile-page .vrms-dashboard-action-card strong {
    font-size: 0.92rem;
    line-height: 1.15;
}

.vrms-dashboard-mobile-page .vrms-dashboard-action-card span {
    font-size: 0.75rem;
    line-height: 1.2;
    opacity: 0.68;
}

/* Main lists */
.vrms-dashboard-mobile-page .vrms-dashboard-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-game-list {
    display: grid;
    gap: 0.55rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-game-item {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.65rem;
    border-radius: 0.85rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 16%, transparent);
}

.vrms-dashboard-mobile-page .vrms-dashboard-game-date {
    grid-row: 1 / span 2;
    min-width: 0;
    padding: 0.35rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: color-mix(in srgb, var(--VRMS_accent) 12%, var(--VRMS_Background));
    font-size: 0.72rem;
    line-height: 1.15;
    font-weight: 900;
}

.vrms-dashboard-mobile-page .vrms-dashboard-game-main {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.vrms-dashboard-mobile-page .vrms-dashboard-game-main strong {
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.vrms-dashboard-mobile-page .vrms-dashboard-game-main span {
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0.72;
    overflow-wrap: anywhere;
}

.vrms-dashboard-mobile-page .vrms-dashboard-game-venue {
    grid-column: 2;
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0.72;
    overflow-wrap: anywhere;
}

/* Notice */
.vrms-dashboard-mobile-page .vrms-dashboard-notice-panel {
    min-width: 0;
}

.vrms-dashboard-mobile-page .vrms-notice-content {
    min-width: 0;
    overflow: hidden;
}

/* Selectable game cards inside dashboard */
.vrms-dashboard-mobile-page .vrms-dashboard-selectable-games-grid,
.vrms-dashboard-mobile-page .vrms-selectable-games-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

/* Empty states */
.vrms-dashboard-mobile-page .vrms-empty-state,
.vrms-dashboard-mobile-page .vrms-dashboard-empty {
    padding: 0.8rem;
    border-radius: 0.85rem;
    font-size: 0.86rem;
}

/* Very small phones */
@media (max-width: 380px) {
    .vrms-dashboard-mobile-page {
        padding: 0.45rem;
        gap: 0.55rem;
    }

    .vrms-dashboard-mobile-page .vrms-panel {
        padding: 0.65rem;
        border-radius: 0.85rem;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-stat-grid {
        gap: 0.45rem;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-stat-card {
        min-height: 88px;
        padding: 0.6rem;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-stat-value {
        font-size: 1.35rem;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-game-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0.45rem;
        padding: 0.55rem;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-game-date {
        font-size: 0.66rem;
    }
}

/* Tablet and desktop: allow a little more space, but keep mobile-friendly look */
@media (min-width: 768px) {
    .vrms-dashboard-mobile-page {
        padding: 1rem;
        gap: 1rem;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-hero-content {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0.85rem;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-multi-stat-card {
        grid-column: auto / span 2;
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-action-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .vrms-dashboard-mobile-page .vrms-dashboard-main-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}
/* =========================================================
   Dashboard Desktop / Reduced Mobile Dashboard
   ========================================================= */

.vrms-dashboard-mobile-only {
    display: none;
}

.vrms-dashboard-desktop {
    display: block;
}

@media (max-width: 767.98px) {
    .vrms-dashboard-desktop {
        display: none !important;
    }

    .vrms-dashboard-mobile-only {
        display: grid;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
        padding: 0.65rem;
    }
}

/* =========================================================
   Reduced Mobile Dashboard
   ========================================================= */

.vrms-mobile-dashboard-section {
    margin: 0;
    padding: 0.8rem;
    border-radius: 0.95rem;
    overflow: hidden;
}

.vrms-mobile-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.vrms-mobile-dashboard-title {
    margin: 0;
    color: var(--VRMS_foreground);
    font-size: 1.05rem;
    line-height: 1.18;
    font-weight: 950;
}

.vrms-mobile-dashboard-signal {
    border-color: var(--VRMS_warning);
    background: color-mix(in srgb, var(--VRMS_warning) 10%, var(--VRMS_Background));
}

.vrms-mobile-selectable-games {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

/* Falls getGamesView() Bootstrap row/col ausgibt */
.vrms-mobile-selectable-games .row {
    margin-left: 0;
    margin-right: 0;
}

.vrms-mobile-selectable-games [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Nächste Spiele auf Mobile */
.vrms-dashboard-mobile-only .vrms-dashboard-game-list {
    display: grid;
    gap: 0.55rem;
}

.vrms-dashboard-mobile-only .vrms-dashboard-game-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.65rem;
    border-radius: 0.85rem;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 16%, transparent);
}

.vrms-dashboard-mobile-only .vrms-dashboard-game-date {
    grid-row: 1 / span 2;
    min-width: 0;
    padding: 0.35rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: color-mix(in srgb, var(--VRMS_accent) 12%, var(--VRMS_Background));
    font-size: 0.72rem;
    line-height: 1.15;
    font-weight: 900;
}

.vrms-dashboard-mobile-only .vrms-dashboard-game-main {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.vrms-dashboard-mobile-only .vrms-dashboard-game-main strong {
    font-size: 0.9rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.vrms-dashboard-mobile-only .vrms-dashboard-game-main span {
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0.72;
    overflow-wrap: anywhere;
}

.vrms-dashboard-mobile-only .vrms-dashboard-game-venue {
    grid-column: 2;
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0.72;
    overflow-wrap: anywhere;
}

/* Schnellzugriffe auf Mobile */
.vrms-mobile-dashboard-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.vrms-mobile-dashboard-action {
    min-height: 58px;
    padding: 0.7rem 0.8rem;
    border-radius: 0.9rem;
    display: grid;
    gap: 0.2rem;
    text-decoration: none;
    background: var(--VRMS_Background);
    color: var(--VRMS_foreground);
    border: 1px solid color-mix(in srgb, var(--VRMS_foreground) 18%, transparent);
}

.vrms-mobile-dashboard-action:hover,
.vrms-mobile-dashboard-action:focus {
    color: var(--VRMS_foreground);
    border-color: var(--VRMS_accent);
    background: color-mix(in srgb, var(--VRMS_accent) 10%, var(--VRMS_Background));
}

.vrms-mobile-dashboard-action strong {
    font-size: 0.92rem;
    line-height: 1.15;
    font-weight: 950;
}

.vrms-mobile-dashboard-action span {
    font-size: 0.75rem;
    line-height: 1.2;
    opacity: 0.68;
}

@media (max-width: 380px) {
    .vrms-dashboard-mobile-only {
        padding: 0.45rem;
        gap: 0.55rem;
    }

    .vrms-mobile-dashboard-section {
        padding: 0.65rem;
        border-radius: 0.85rem;
    }

    .vrms-dashboard-mobile-only .vrms-dashboard-game-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0.45rem;
        padding: 0.55rem;
    }

    .vrms-dashboard-mobile-only .vrms-dashboard-game-date {
        font-size: 0.66rem;
    }
}
.vrms-kaderliste-page .vrms-export-table {
    width: 100%;
    border-collapse: collapse;
}

.vrms-kaderliste-page .vrms-export-table th,
.vrms-kaderliste-page .vrms-export-table td {
    vertical-align: top;
    white-space: nowrap;
}

.vrms-kaderliste-page .vrms-export-table thead th {
    text-align: center;
    font-weight: 700;
}

.vrms-kader-group-row td {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.06);
}

.vrms-kaderliste-page .dt-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.vrms-kaderliste-page .dt-buttons .dt-button {
    border: none;
    border-radius: 0.65rem;
    padding: 0.45rem 0.85rem;
    background: var(--VRMS_accent);
    color: var(--VRMS_foreground);
    font-weight: 600;
}

.vrms-kaderliste-page .dataTables_filter {
    margin-bottom: 1rem;
}

.vrms-kaderliste-page .dataTables_filter input {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.65rem;
    padding: 0.45rem 0.75rem;
}
.vrms-kader-group-row td {
    font-weight: 700;
    text-align: left;
    background: rgba(0, 0, 0, 0.08);
}
.vrms-kader-group-row td {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
    text-align: center;
}

.vrms-kader-group-cell {
    border-right: none !important;
}

.vrms-kader-group-cell-hidden {
    color: transparent;
    border-left: none !important;
    border-right: none !important;
}

.vrms-kader-group-row td:last-child {
    border-right: 1px solid rgba(0, 0, 0, 0.25) !important;
}
.vrms-kader-group-row {
    position: relative;
}

.vrms-kader-group-row .vrms-kader-group-cell:first-child {
    position: relative;
    color: transparent;
}

.vrms-kader-group-row .vrms-kader-group-cell:first-child::after {
    content: attr(data-export-value);
    position: absolute;
    left: 0;
    width: calc(100vw - 4rem);
    max-width: 100%;
    color: inherit;
    color: var(--VRMS_foreground);
    text-align: center;
    font-weight: 700;
    pointer-events: none;
}
.vrms-kaderliste-page .vrms-export-table {
    width: 100% !important;
    table-layout: fixed;
}

.vrms-kaderliste-page .vrms-export-table th,
.vrms-kaderliste-page .vrms-export-table td {
    vertical-align: top;
    white-space: normal;
    word-break: break-word;
}

.vrms-kaderliste-page .vrms-export-table thead th {
    text-align: center;
    font-weight: 700;
}

.vrms-kader-group-row td {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
    text-align: center;
}

.vrms-kader-group-cell-hidden {
    color: transparent;
}

.vrms-kaderliste-page .dt-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vrms-kaderliste-page .dataTables_filter input {
    margin-left: 0.5rem;
}
.vrms-age-statistics-page .vrms-table-responsive {
    overflow-x: auto;
}

.vrms-age-statistics-page table {
    font-size: 0.78rem;
    white-space: nowrap;
}

.vrms-age-statistics-page td,
.vrms-age-statistics-page th {
    text-align: center;
    vertical-align: middle;
    padding: 0.25rem 0.4rem;
}

.vrms-age-block-title {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
}

.vrms-age-header {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.04);
}

.vrms-age-total {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.04);
}

.vrms-age-separator {
    min-width: 1rem;
    background: transparent;
    border-top: none !important;
    border-bottom: none !important;
}

.vrms-age-spacer-row td {
    height: 1rem;
    border-left: none !important;
    border-right: none !important;
    background: transparent;
}
.vrms-age-statistics-page #refereeAgeStatisticsTable thead th {
    height: 0;
    padding: 0;
    border: none;
    font-size: 0;
}
.vrms-assignment-statistics-page .vrms-table-responsive {
    overflow-x: auto;
}

.vrms-assignment-statistics-page .vrms-export-table {
    width: 100% !important;
    font-size: 0.78rem;
    white-space: nowrap;
}

.vrms-assignment-statistics-page .vrms-export-table th,
.vrms-assignment-statistics-page .vrms-export-table td {
    text-align: center;
    vertical-align: middle;
    padding: 0.25rem 0.4rem;
}

.vrms-assignment-statistics-page .vrms-export-table th:first-child,
.vrms-assignment-statistics-page .vrms-export-table td:first-child {
    text-align: left;
    min-width: 180px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--VRMS_Background);
}

.vrms-assignment-statistics-page .vrms-export-table thead th {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.06);
}

.vrms-assignment-statistics-page .vrms-export-table thead th:first-child {
    z-index: 3;
}

.vrms-assignment-total-row td {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.08);
}

.vrms-assignment-season-form {
    max-width: 100%;
}

.vrms-assignment-statistics-page .dt-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vrms-assignment-statistics-page .dataTables_filter {
    margin-bottom: 0;
}

.vrms-assignment-statistics-page .dataTables_filter input {
    margin-left: 0.5rem;
}

.vrms-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.vrms-tabs .nav-link {
    color: var(--VRMS_foreground);
    border-radius: 0.65rem 0.65rem 0 0;
}

.vrms-tabs .nav-link.active {
    font-weight: 700;
    color: var(--VRMS_accent);
    background: var(--VRMS_Background);
    border-color: rgba(0, 0, 0, 0.15);
}

.vrms-tab-content {
    width: 100%;
}
/* =========================================================
   Role Permission Management
   ========================================================= */

.vrms-role-permission-page {
    margin-top: 1rem;
}

.vrms-role-selection-panel {
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: color-mix(
        in srgb,
        var(--VRMS_foreground) 5%,
        var(--VRMS_Background)
    );
    border: 1px solid color-mix(
        in srgb,
        var(--VRMS_foreground) 18%,
        transparent
    );
}

.vrms-role-selection-panel .vrms-form-group {
    max-width: 520px;
}

.vrms-role-permission-content {
    margin-top: 1rem;
}

.vrms-role-api-panel {
    margin-top: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: color-mix(
        in srgb,
        var(--VRMS_foreground) 5%,
        var(--VRMS_Background)
    );
    border: 1px solid color-mix(
        in srgb,
        var(--VRMS_foreground) 18%,
        transparent
    );
}

.vrms-role-api-info {
    min-width: 0;
}

.vrms-role-api-title {
    color: var(--VRMS_foreground);
    font-size: 0.92rem;
    font-weight: 900;
}

.vrms-role-api-description {
    margin-top: 0.15rem;
    color: var(--VRMS_foreground);
    font-size: 0.78rem;
    opacity: 0.68;
}

.vrms-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(
        in srgb,
        var(--VRMS_foreground) 24%,
        transparent
    );
}

.vrms-segmented-option {
    min-height: 36px;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--VRMS_foreground);
    background: transparent;
    border: 1px solid transparent;
    font-size: 0.84rem;
    font-weight: 850;
}

.vrms-segmented-option:hover,
.vrms-segmented-option:focus {
    color: var(--VRMS_foreground);
    background: color-mix(
        in srgb,
        var(--VRMS_accent) 8%,
        var(--VRMS_Background)
    );
}

.vrms-segmented-option.active {
    color: var(--VRMS_foreground);
    background: var(--VRMS_accent);
    border-color: var(--VRMS_foreground);
}

.vrms-permission-name {
    color: var(--VRMS_foreground);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-muted-small {
    margin-top: 0.15rem;
    color: var(--VRMS_foreground);
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.65;
}

.vrms-inline-form {
    display: inline-flex;
    margin: 0;
}

.vrms-table-action-danger:hover,
.vrms-table-action-danger:focus {
    color: var(--VRMS_Background);
    background: var(--VRMS_danger);
    border-color: var(--VRMS_danger);
}

.vrms-role-permission-empty {
    margin-top: 1rem;
}

.vrms-inline-message {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 800;
}

.vrms-inline-message-danger {
    color: var(--VRMS_foreground);
    background: color-mix(
        in srgb,
        var(--VRMS_danger) 14%,
        var(--VRMS_Background)
    );
    border: 1px solid var(--VRMS_danger);
}

@media (max-width: 767.98px) {
    .vrms-role-permission-page .vrms-panel-header-between {
        align-items: stretch;
    }

    .vrms-role-permission-page .vrms-panel-header-between > .vrms-action-btn {
        width: 100%;
    }

    .vrms-role-selection-panel .vrms-form-group {
        max-width: none;
    }

    .vrms-role-api-panel {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-segmented-control {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 0.9rem;
    }

    .vrms-segmented-option {
        width: 100%;
    }
}
/* =========================================================
   Role Permission Management
   ========================================================= */

.vrms-role-permission-page {
    margin-top: 1rem;
}

.vrms-role-selection-panel {
    margin-top: 1rem;
    padding: 0.9rem;
    border-radius: 1rem;
    background: color-mix(
        in srgb,
        var(--VRMS_foreground) 5%,
        var(--VRMS_Background)
    );
    border: 1px solid color-mix(
        in srgb,
        var(--VRMS_foreground) 18%,
        transparent
    );
}

.vrms-role-selection-panel .vrms-form-group {
    max-width: 520px;
}

.vrms-role-permission-content {
    margin-top: 1rem;
}

.vrms-role-api-panel {
    margin-top: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: color-mix(
        in srgb,
        var(--VRMS_foreground) 5%,
        var(--VRMS_Background)
    );
    border: 1px solid color-mix(
        in srgb,
        var(--VRMS_foreground) 18%,
        transparent
    );
}

.vrms-role-api-info {
    min-width: 0;
}

.vrms-role-api-title {
    color: var(--VRMS_foreground);
    font-size: 0.92rem;
    font-weight: 900;
}

.vrms-role-api-description {
    margin-top: 0.15rem;
    color: var(--VRMS_foreground);
    font-size: 0.78rem;
    opacity: 0.68;
}

.vrms-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--VRMS_Background);
    border: 1px solid color-mix(
        in srgb,
        var(--VRMS_foreground) 24%,
        transparent
    );
}

.vrms-segmented-option {
    min-height: 36px;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--VRMS_foreground);
    background: transparent;
    border: 1px solid transparent;
    font-size: 0.84rem;
    font-weight: 850;
}

.vrms-segmented-option:hover,
.vrms-segmented-option:focus {
    color: var(--VRMS_foreground);
    background: color-mix(
        in srgb,
        var(--VRMS_accent) 8%,
        var(--VRMS_Background)
    );
}

.vrms-segmented-option.active {
    color: var(--VRMS_foreground);
    background: var(--VRMS_accent);
    border-color: var(--VRMS_foreground);
}

.vrms-role-permission-search {
    margin-top: 0.85rem;
    margin-bottom: 0.85rem;
    padding: 0.85rem;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: minmax(220px, 520px) auto;
    gap: 0.85rem;
    align-items: end;
    background: color-mix(
        in srgb,
        var(--VRMS_foreground) 5%,
        var(--VRMS_Background)
    );
    border: 1px solid color-mix(
        in srgb,
        var(--VRMS_foreground) 18%,
        transparent
    );
}

.vrms-role-permission-search .vrms-muted-small {
    margin: 0;
    padding-bottom: 0.55rem;
}

.vrms-permission-name {
    color: var(--VRMS_foreground);
    font-weight: 900;
    overflow-wrap: anywhere;
}

.vrms-muted-small {
    margin-top: 0.15rem;
    color: var(--VRMS_foreground);
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.65;
}

.vrms-inline-form {
    display: inline-flex;
    margin: 0;
}

.vrms-table-action-danger:hover,
.vrms-table-action-danger:focus {
    color: var(--VRMS_Background);
    background: var(--VRMS_danger);
    border-color: var(--VRMS_danger);
}

.vrms-role-permission-empty {
    margin-top: 1rem;
}

.vrms-inline-message {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 800;
}

.vrms-inline-message-danger {
    color: var(--VRMS_foreground);
    background: color-mix(
        in srgb,
        var(--VRMS_danger) 14%,
        var(--VRMS_Background)
    );
    border: 1px solid var(--VRMS_danger);
}

@media (max-width: 767.98px) {
    .vrms-role-permission-page .vrms-panel-header-between {
        align-items: stretch;
    }

    .vrms-role-permission-page .vrms-panel-header-between > .vrms-action-btn {
        width: 100%;
    }

    .vrms-role-selection-panel .vrms-form-group {
        max-width: none;
    }

    .vrms-role-api-panel {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vrms-segmented-control {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-radius: 0.9rem;
    }

    .vrms-segmented-option {
        width: 100%;
    }

    .vrms-role-permission-search {
        grid-template-columns: 1fr;
    }

    .vrms-role-permission-search .vrms-muted-small {
        padding-bottom: 0;
    }
}
/* =========================================================
   Footer
   ========================================================= */

.vrms-footer {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0 1rem 1rem;
    color: var(--VRMS_foreground);
}

.vrms-footer-inner {
    width: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;

    padding: 1rem;

    background: color-mix(
        in srgb,
        var(--VRMS_foreground) 4%,
        var(--VRMS_Background)
    );

    border-top: 1px solid color-mix(
        in srgb,
        var(--VRMS_foreground) 22%,
        transparent
    );

    border-radius: 1rem;
    box-shadow: var(--VRMS_Shadow);
}

.vrms-footer-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0.2rem;

    text-align: center;
    overflow-wrap: anywhere;
}

.vrms-footer-label {
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 750;

    color: var(--VRMS_foreground);
    opacity: 0.65;
}

.vrms-footer-item strong {
    font-size: 0.88rem;
    line-height: 1.25;
    font-weight: 900;

    color: var(--VRMS_foreground);
}

.vrms-footer a {
    color: var(--VRMS-foreground);
    text-decoration: none;
}

.vrms-footer a:hover,
.vrms-footer a:focus {
    color: var(--VRMS_accent);
    text-decoration: underline;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {
    .vrms-footer-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .vrms-footer-item strong {
        font-size: 0.84rem;
    }
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 767.98px) {
    .vrms-footer {
        margin-top: 1rem;
        padding: 0 0.65rem 0.65rem;
    }

    .vrms-footer-inner {
        grid-template-columns: 1fr;
        gap: 0.65rem;

        padding: 0.8rem;

        border-radius: 0.85rem;
        text-align: center;
    }

    .vrms-footer-item {
        width: 100%;
        align-items: center;
        text-align: center;

        padding-bottom: 0.65rem;

        border-bottom: 1px solid color-mix(
            in srgb,
            var(--VRMS_foreground) 14%,
            transparent
        );
    }

    .vrms-footer-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .vrms-footer-label {
        font-size: 0.72rem;
    }

    .vrms-footer-item strong {
        font-size: 0.84rem;
    }
}

/* =========================================================
   Sehr kleine Smartphones
   ========================================================= */

@media (max-width: 380px) {
    .vrms-footer {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .vrms-footer-inner {
        padding: 0.7rem;
        gap: 0.55rem;
    }

    .vrms-footer-item {
        padding-bottom: 0.55rem;
    }

    .vrms-footer-label {
        font-size: 0.68rem;
    }

    .vrms-footer-item strong {
        font-size: 0.8rem;
    }
}