:root {
  --surface: #fff;
  --surface-muted: #f4f4f5;
  --surface-soft: #fafafa;
  --text: #18181b;
  --text-muted: #71717a;
  --text-soft: #a1a1aa;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --sidebar: #202124;
  --sidebar-hover: rgba(255,255,255,.08);
  --sidebar-active: rgba(255,255,255,.14);
  --primary: #27272a;
  --primary-hover: #3f3f46;
  --success: #3c763d;
  --danger: #a94442;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--text); background: var(--surface-muted); font-size: 13px; line-height: 1.42857143; }
a { color: #337ab7; text-decoration: none; }
a:hover { color: #23527c; text-decoration: underline; }
button, input, select { font: inherit; }
.menu-toggle { display: none; }

.navbar {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 51px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(24,24,27,.08);
}
.navbar-brand { width: 220px; display: flex; align-items: center; padding: 6px 16px; background: #fff; }
.navbar-brand a { display: flex; align-items: center; }
.navbar-brand img { width: auto; max-width: 184px; height: 34px; object-fit: contain; }
.navbar-toggle { display: none; }
.top-nav { margin-left: auto; display: flex; align-items: stretch; }
.top-dropdown { position: relative; }
.top-dropdown summary { height: 50px; padding: 0 15px; display: flex; align-items: center; gap: 6px; color: var(--text-muted); cursor: pointer; list-style: none; user-select: none; }
.top-dropdown summary::-webkit-details-marker { display: none; }
.top-dropdown summary:hover, .top-dropdown[open] summary { color: var(--text); background: var(--surface-muted); }
.top-dropdown summary small { font-size: 11px; }
.top-icon { font-size: 14px; }
.caret { margin-left: 2px; font-size: 10px; }
.notification-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; color: #fff; background: #a94442; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.top-dropdown-menu { position: absolute; z-index: 1100; top: 50px; right: 0; min-width: 210px; padding: 7px 0; border: 1px solid var(--border-strong); border-radius: 0 0 4px 4px; background: #fff; box-shadow: 0 6px 12px rgba(0,0,0,.14); }
.user-menu a, .dropdown-button { width: 100%; padding: 8px 16px; display: block; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.user-menu a:hover, .dropdown-button:hover { background: var(--surface-muted); text-decoration: none; }
.user-notifications summary { position: relative; min-width: 42px; justify-content: center; }
.user-notifications summary .grid-action-icon { width: 17px; height: 17px; }
.notification-badge { position: absolute; top: 7px; right: 3px; }
.is-hidden { display: none !important; }
.notifications-menu { width: 380px; padding: 0; }
.notifications-header { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e6e6; }
.notifications-clear-all { padding: 0; border: 0; color: #555; background: transparent; font-size: 11px; cursor: pointer; }
.notifications-clear-all:hover { color: #111; text-decoration: underline; }
.notifications-list { max-height: 430px; overflow-y: auto; }
.notification-item { padding: 12px 14px; display: flex; gap: 10px; border-bottom: 1px solid #eee; background: #fff; }
.notification-item:last-child { border-bottom: 0; }
.notification-item.is-unread { background: #fff7f7; }
.notification-content { min-width: 0; flex: 1; }
.notification-content time { margin-bottom: 4px; display: block; color: #888; font-size: 11px; }
.notification-title { display: block; color: #333; font-weight: 700; line-height: 1.25; }
a.notification-title:hover { color: #111; text-decoration: underline; }
.notification-content p { margin: 4px 0 0; color: #666; font-size: 12px; line-height: 1.35; }
.notification-delete { width: 22px; height: 22px; padding: 0; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 0; color: #777; background: transparent; cursor: pointer; }
.notification-delete:hover { color: #d9534f; }
.notifications-empty { padding: 30px 16px; display: grid; justify-items: center; gap: 8px; color: #888; text-align: center; }
.notifications-empty .grid-action-icon { width: 24px; height: 24px; color: #aaa; }

.sidebar { position: fixed; z-index: 900; top: 51px; bottom: 0; left: 0; width: 220px; overflow-y: auto; border-right: 1px solid rgba(15,23,42,.24); background: var(--sidebar); }
.sidebar-nav ul { margin: 0; padding: 0; list-style: none; }
.sidebar-nav li a { position: relative; padding: 9px 15px; display: flex; align-items: center; color: #e4e4e7; border-top: 1px solid rgba(255,255,255,.06); font-weight: 500; transition: .15s; }
.sidebar-nav li a:hover { padding-left: 17px; color: #fff; background: var(--sidebar-hover); text-decoration: none; }
.sidebar-nav li.active a { color: #fff; background: var(--sidebar-active); }
.sidebar-nav li.active a::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: #d4d4d8; }
.sidebar-icon { width: 18px; margin-right: 8px; color: #d4d4d8; text-align: center; font-size: 16px; }
.sidebar-section-heading { margin-top: 8px; padding: 4px 16px; color: #a1a1aa; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-folder details > summary { position: relative; padding: 9px 15px; display: flex; align-items: center; color: #e4e4e7; border-top: 1px solid rgba(255,255,255,.06); font-weight: 500; cursor: pointer; list-style: none; transition: .15s; }
.sidebar-folder details > summary::-webkit-details-marker { display: none; }
.sidebar-folder details > summary:hover, .sidebar-folder.active-folder details > summary { color: #fff; background: var(--sidebar-hover); }
.sidebar-arrow { margin-left: auto; color: #a1a1aa; font-size: 17px; transform: rotate(-90deg); transition: transform .15s ease; }
.sidebar-folder details[open] .sidebar-arrow { transform: rotate(90deg); }
.sidebar-folder details ul a { padding: 8px 15px 8px 41px; color: #d4d4d8; background: rgba(255,255,255,.025); font-size: 12px; box-shadow: inset 1px 0 0 rgba(255,255,255,.06); }
.sidebar-folder details ul a:hover { padding-left: 43px; background: var(--sidebar-hover); }
.sidebar-folder details ul li.active a { color: #fff; background: #2f3033; }

.page-wrapper { min-height: 100vh; margin-left: 220px; padding: 70px 20px 30px; background: #fff; }
.page-header { margin: 0 -20px 14px; padding: 0 20px 10px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 24px; font-weight: 400; line-height: 1.15; }
.page-header small { margin-left: 8px; color: var(--text-muted); font-size: 14px; font-weight: 400; }
.page-section { max-width: 100%; }
.alert { margin-bottom: 18px; padding: 12px 15px; border: 1px solid transparent; border-radius: 4px; }
.alert-success { color: #3c763d; border-color: #d6e9c6; background: #dff0d8; }
.alert-danger { color: #a94442; border-color: #ebccd1; background: #f2dede; }
.alert-warning { color: #8a5b00; border-color: #faebcc; background: #fcf8e3; }

.index-toolbar { min-height: 34px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.index-toolbar__left, .index-toolbar__right { display: flex; align-items: center; gap: 8px; }
.toolbar-label { color: var(--text-muted); font-weight: 600; }
.filter-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; color: #fff; background: #71717a; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.filter-toggle { position: absolute; opacity: 0; pointer-events: none; }
.filter-toggle-button { min-width: 0; border-radius: 999px; font-weight: 600; }
.filter-toggle-button .grid-action-icon { width: 13px; height: 13px; }
.filter-chevron { font-size: 14px; transition: transform .16s ease; }
.filter-toggle:not(:checked) + .index-toolbar .filter-chevron { transform: rotate(180deg); }
.filter-toggle:not(:checked) ~ .datagrid-form { display: none; }
.btn { min-height: 36px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border-strong); border-radius: 8px; color: #333; background: #fff; font-weight: 500; line-height: 1.1; cursor: pointer; }
.btn:hover { border-color: #adadad; color: #333; background: #e6e6e6; text-decoration: none; }
.btn-primary { border-color: #1f1f22; color: #fff; background: var(--primary); }
.btn-primary:hover { border-color: #1f1f22; color: #fff; background: var(--primary-hover); }
.btn-xs { min-height: 24px; padding: 2px 7px; font-size: 11px; }
.btn-icon { font-size: 15px; line-height: 1; }

.datagrid-form { margin-bottom: 18px; padding: 10px 12px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); box-shadow: 0 1px 2px rgba(24,24,27,.06); }
.datagrid-form-inputs { display: flex; flex-wrap: wrap; align-items: stretch; }
.filter-group { position: relative; min-width: 180px; margin: 8px 10px 10px 0; padding: 20px 9px 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.filter-group label { position: absolute; top: 6px; left: 9px; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.filter-group input, .filter-group select { width: 250px; max-width: 100%; height: 30px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text); background: #fff; outline: none; }
.filter-group input:focus, .filter-group select:focus { border-color: #737373; box-shadow: 0 0 0 2px rgba(39,39,42,.1); }
.datagrid-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 0; }
.datagrid-form-actions .btn { min-width: 118px; border-radius: 999px; }
.datagrid-form-actions .btn-default { background: transparent; }

.grid-container { width: 100%; overflow-x: auto; }
.table { width: 100%; max-width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 8px; border-top: 1px solid var(--border); vertical-align: middle; text-align: left; }
.table thead th { border-top: 0; border-bottom: 1px solid var(--border); color: #3f3f46; background: #f4f4f5; font-size: 12px; font-weight: 700; white-space: nowrap; }
.table-striped tbody tr:nth-of-type(odd) td { background: #fafafa; }
.table-striped tbody tr:nth-of-type(even) td { background: #fff; }
.table tbody tr:hover td { background: #f4f4f5; }
.order-link { display: inline-flex; align-items: center; gap: 4px; color: #3f3f46; }
.order-link:hover { color: #18181b; text-decoration: none; }
.order-arrows { font-size: 11px; font-weight: 400; letter-spacing: -2px; }
.grid-actions { width: 1%; text-align: right !important; white-space: nowrap; }
.table-actions { width: 1px; padding-right: 25px !important; padding-left: 25px !important; white-space: nowrap; text-align: left !important; }
.table-actions a, .grid-action-button { width: 22px; height: 22px; margin-right: 8px; padding: 0; display: inline-flex; align-items: center; justify-content: flex-start; border: 0; color: #3f3f46; background: transparent; vertical-align: middle; cursor: pointer; }
.table-actions a:last-child, .grid-action-form:last-child .grid-action-button { margin-right: 0; }
.table-actions a:hover, .grid-action-button:hover { color: #18181b; text-decoration: none; }
.grid-action-form { display: inline-block; margin: 0; }
.grid-action-icon { width: 14px; height: 14px; fill: currentColor; }
.grid-action-danger:hover { color: #b42318; }
.empty-row { padding: 28px !important; color: var(--text-muted); text-align: center !important; }
.status-label { padding: 3px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.status-active { color: #3c763d; background: #dff0d8; }
.status-inactive { color: #a94442; background: #f2dede; }
.status-neutral { color: #52525b; background: #e4e4e7; }
.status-info { color: #245269; background: #d9edf7; }
.status-warning { color: #8a5b00; background: #fcf8e3; }
.status-success { color: #3c763d; background: #dff0d8; }
.status-danger { color: #a94442; background: #f2dede; }
.pagination-container { padding: 15px 0; display: flex; align-items: center; color: var(--text); font-size: 13px; }
.pagination-entries-info { min-width: 270px; }
.pagination-entries-info strong { font-weight: 700; }
.pagination-pages { flex-grow: 2; text-align: center; }
.pagination { margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.pagination > li { display: inline-flex; }
.pagination > li > a, .pagination > li > span { width: 32px; min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e4e4e7; border-radius: 8px; color: #18181b; background: #fff; box-shadow: 0 1px 2px rgba(24,24,27,.08); font-size: 13px; font-weight: 600; line-height: 1; }
.pagination > li > a:hover { border-color: #d4d4d8; background: #f4f4f5; text-decoration: none; }
.pagination > .pagination-page-status > span { width: auto; min-width: auto; height: auto; padding: 0 10px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-weight: 400; line-height: 32px; }
.pagination > li.disabled > span { color: #a1a1aa; background: #fff; border-color: #e4e4e7; box-shadow: 0 1px 2px rgba(24,24,27,.04); cursor: not-allowed; }
.pagination-icon { width: 15px; height: 15px; display: block; overflow: visible; }
.pagination-icon--right { transform: rotate(180deg); }
.pagination-double-icon { display: inline-flex; align-items: center; justify-content: center; }
.pagination-double-icon .pagination-icon + .pagination-icon { margin-left: -7px; }
.pagination-limit-selector { display: inline-flex; align-items: center; }
.pagination-limit-selector > span { height: 32px; margin-right: 6px; display: inline-flex; align-items: center; }
.pagination-limit-selector .btn-group { display: inline-flex; align-items: center; }
.pagination-limit-selector .btn { min-height: 32px; height: 32px; margin-left: -1px; padding: 0 13px; border-radius: 0; font-size: 13px; line-height: 32px; }
.pagination-limit-selector .btn:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.pagination-limit-selector .btn:last-child { border-radius: 0 8px 8px 0; }
.index-exports { margin: 0 0 15px; padding-top: 10px; border-top: 1px solid var(--border); text-align: right; }
.index-exports .export-text { margin-right: 10px; display: inline-block; color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.index-exports .btn { min-width: 92px; margin-right: 8px; color: var(--text); border-color: var(--border-strong); background: #fff; }
.index-exports .btn:last-child { margin-right: 0; }
.index-exports .btn:hover { color: #18181b; border-color: #a1a1aa; background: var(--surface-soft); }
.audit-summary { margin-bottom: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.audit-summary dl { margin: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 18px; }
.audit-summary dt { color: var(--text-muted); font-weight: 600; }
.audit-summary dd { margin: 0; overflow-wrap: anywhere; }
.audit-changes td { max-width: 40vw; overflow-wrap: anywhere; }
.comments-thread { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 18px; }
.comments-thread h2 { margin: 0 0 16px; font-size: 17px; font-weight: 500; }
.comments-list { max-width: 900px; }
.comment-item { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
.comment-meta { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 12px; }
.comment-meta strong { color: var(--text); }
.comment-meta form { margin-left: auto; }
.comment-delete { padding: 2px; display: inline-flex; border: 0; color: var(--text-muted); background: transparent; cursor: pointer; }
.comment-delete:hover { color: var(--danger); }
.comment-body p { margin: 8px 0 0; white-space: pre-wrap; }
.comments-empty { color: var(--text-muted); }
.comment-form { max-width: 900px; margin-top: 16px; }
.comment-form label { margin-bottom: 5px; display: block; font-size: 12px; font-weight: 600; }
.comment-form textarea { width: 100%; margin-bottom: 8px; padding: 9px; border: 1px solid var(--border-strong); border-radius: 8px; resize: vertical; }

.edit-form { width: 100%; }
.nav-tabs { margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--border); list-style: none; }
.nav-tabs li { margin-bottom: -1px; }
.nav-tabs a { padding: 10px 2px 11px; display: block; border-bottom: 2px solid transparent; color: var(--text-muted); font-weight: 500; }
.nav-tabs a:hover { color: var(--text); border-bottom-color: var(--border-strong); text-decoration: none; }
.nav-tabs li.active a { color: var(--text); border-bottom-color: #3f3f46; font-weight: 600; }
.tab-pane { margin-top: 20px; }
.tab-pane[hidden] { display: none; }
.field { margin-bottom: 15px; }
.field label { margin-bottom: 5px; display: block; color: #3f3f46; font-size: 12px; font-weight: 600; }
.field input:not([type="checkbox"]), .field select { width: 100%; min-height: 32px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); background: #fff; box-shadow: none; outline: none; }
.field input:not([type="checkbox"]):focus, .field select:focus { border-color: #3f3f46; box-shadow: 0 0 0 3px rgba(24,24,27,.12); }
.field.role-field select { width: auto; min-width: 165px; }
.field.checkbox { display: flex; align-items: center; gap: 7px; }
.field.checkbox input { margin: 0; }
.field.checkbox label { margin: 0; color: #3f3f46; font-weight: 500; }
.checkbox-list { padding: 14px; border: 1px solid var(--border); border-radius: 8px; }
.checkbox-list legend { padding: 0 5px; color: #3f3f46; font-size: 12px; font-weight: 600; }
.checkbox-option { margin: 8px 0 0; display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; }
.checkbox-option input { margin: 0; }
.field-help { margin: 0 0 9px; color: var(--text-muted); font-size: 12px; }
.form-actions { margin-top: 24px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.button { min-height: 34px; padding: 6px 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 4px; color: #333; background: #fff; cursor: pointer; }
.button.primary { border-color: #1f1f22; color: #fff; background: var(--primary); }
.button.secondary { background: #fff; }
.button.full { width: 100%; }
.form-errors { margin-bottom: 15px; padding: 10px 12px; color: var(--danger); border: 1px solid #ebccd1; border-radius: 4px; background: #f2dede; }
.nested-fields { position: relative; margin-bottom: 14px; padding: 16px 74px 1px 18px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(24,24,27,.05); }
.nested-fields__remove { position: absolute; top: 14px; right: 14px; }
.nested-form-links { margin-top: 4px; }

.hero-card { padding: 26px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.hero-card h2 { margin: 0 0 8px; font-size: 22px; font-weight: 400; }
.hero-card p { margin: 0; color: var(--text-muted); }
.hero-monogram { color: #d4d4d8; font-size: 48px; font-weight: 700; }
.eyebrow { margin: 0 0 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.status-grid { margin: 16px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.status-card { padding: 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.status-card small, .status-card strong { display: block; }
.status-card small { color: var(--text-muted); }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.status-dot.ready { background: #3c763d; }
.status-dot.pending { background: #a66a00; }
.panel { border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.panel-heading { padding: 12px 15px; border-bottom: 1px solid var(--border); }
.panel-heading h2 { margin: 0; font-size: 16px; }
.membership-summary { margin-top: 28px; }
.panel-actions { padding: 12px 15px; border-top: 1px solid var(--border); }
.crest-column { width: 64px; text-align: center; }
.crest-thumbnail { width: 38px; height: 38px; display: inline-block; object-fit: contain; }
.crest-placeholder { color: var(--text-soft); font-size: 24px; }
.crest-preview { width: 96px; height: 96px; margin: 0 0 10px; display: block; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.form-section { margin-bottom: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.form-section-title { margin: -18px -18px 18px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface-soft); font-size: 16px; font-weight: 500; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.field--wide { grid-column: 1 / -1; }
.positions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.radio-group { padding: 12px 0; border: 0; }
.radio-group legend { margin-bottom: 8px; color: #3f3f46; font-size: 12px; font-weight: 600; }
.radio-option { margin-right: 16px; display: inline-flex !important; align-items: center; gap: 6px; font-weight: 500 !important; }
.radio-option input { margin: 0; }
.player-photo-column { width: 58px; text-align: center; }
.player-photo-thumbnail { width: 38px; height: 38px; display: inline-block; border-radius: 50%; object-fit: cover; }
.player-photo-placeholder { color: var(--text-soft); font-size: 20px; }
.player-photo-preview { width: 120px; height: 150px; margin: 0 0 10px; display: block; object-fit: cover; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.participant-selector { max-height: 260px; overflow-y: auto; padding: 4px 12px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
.participant-selector--columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.attendance-table small, .participant-name small { color: var(--text-muted); }
.attendance-checkbox { width: 20px; height: 20px; }
.data-entry-table { min-width: 1500px; }
.data-entry-table th { white-space: nowrap; }
.data-entry-table td:not(.participant-name) { min-width: 82px; }
.data-entry-table .participant-name { min-width: 210px; }
.data-entry-table input:not([type="checkbox"]), .data-entry-table select { width: 100%; min-height: 32px; padding: 5px; border: 1px solid var(--border-strong); border-radius: 5px; }
.data-entry-table .boolean-cell { min-width: 64px; text-align: center; }
.data-entry-table .boolean-cell input { width: 18px; height: 18px; }
.empty-state { padding: 35px; color: var(--text-muted); text-align: center; }
.empty-state h3 { color: var(--text); }
.empty-icon { font-size: 24px; }

.player-hero { margin-bottom: 16px; }
.player-dashboard-photo { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.player-stat-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.player-stat-card { padding: 16px; display: grid; gap: 3px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.player-stat-card small, .player-stat-card span { color: var(--text-muted); }
.player-stat-card strong { font-size: 25px; font-weight: 500; }
.player-dashboard-panel { margin-bottom: 16px; }
.player-dashboard-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wellness-pending-list article { padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); }
.wellness-pending-list article:last-child { border-bottom: 0; }
.wellness-pending-list strong, .wellness-pending-list span { display: block; }
.wellness-pending-list span { margin-top: 2px; color: var(--text-muted); }
.wellness-intro { margin-bottom: 16px; padding: 16px 18px; border-left: 4px solid #3f3f46; background: var(--surface-soft); }
.wellness-intro strong, .wellness-intro span { display: block; }
.wellness-intro span { margin-top: 3px; color: var(--text-muted); }
.wellness-intro p { margin: 10px 0 0; }
.wellness-question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wellness-scale { margin: 0 0 15px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
.wellness-scale legend { padding: 0 5px; color: #3f3f46; font-size: 12px; font-weight: 600; }
.wellness-scale-options { display: flex; gap: 7px; }
.wellness-scale-options label { flex: 1; cursor: pointer; }
.wellness-scale-options input { position: absolute; opacity: 0; pointer-events: none; }
.wellness-scale-options span { min-height: 34px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 7px; background: #fff; font-weight: 600; }
.wellness-scale-options input:checked + span { border-color: var(--primary); color: #fff; background: var(--primary); }
.wellness-scale-options input:focus-visible + span { outline: 3px solid rgba(24,24,27,.18); }
.wellness-scale-ends { margin-top: 5px; display: flex; justify-content: space-between; color: var(--text-muted); font-size: 11px; }
.wellness-form textarea { width: 100%; padding: 9px; border: 1px solid var(--border-strong); border-radius: 8px; resize: vertical; }
.profile-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); background: var(--border); }
.profile-summary-grid > div { min-height: 72px; padding: 13px; background: #fff; }
.profile-summary-grid small, .profile-summary-grid strong { display: block; }
.profile-summary-grid small { margin-bottom: 5px; color: var(--text-muted); }
.profile-summary-grid strong { overflow-wrap: anywhere; font-weight: 500; }
.player-profile-summary .nav-tabs { margin-bottom: 8px; }
.player-profile-summary .tab-pane { margin-top: 0; }
.profile-section { padding: 0 10px; }
.profile-section > h2 { margin: 0 -10px 14px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 6px; color: #3f3f46; background: linear-gradient(180deg, #fff 0%, var(--surface-soft) 100%); font-size: 14px; font-weight: 700; }
.profile-detail-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 24px; margin-bottom: 20px; }
.profile-detail { min-width: 0; }
.profile-detail__label { margin-bottom: 2px; color: var(--text); font-size: 12px; font-weight: 700; }
.profile-detail__value { overflow-wrap: anywhere; color: var(--text); font-size: 13px; font-weight: 400; }
.profile-tutors-table { margin-bottom: 18px; }
.player-profile-actions { margin-top: 14px; }
.profile-pending-panel { margin-top: 18px; }
.profile-review-form { margin-top: 20px; }
.profile-review-form textarea { width: 100%; padding: 9px; border: 1px solid var(--border-strong); border-radius: 8px; resize: vertical; }
.player-mobile-nav { display: none; }
.tab-count { min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #52525b; background: #e4e4e7; font-size: 11px; font-weight: 700; }
.nav-tabs li.active .tab-count { color: #fff; background: #3f3f46; }
.wellness-grid .grid-actions { width: 1%; white-space: nowrap; }
.wellness-grid .grid-actions .btn { min-height: 30px; padding: 0 12px; }

.auth-shell { min-height: 100vh; background: var(--surface-muted); }
.auth-content { min-height: 100vh; padding: 80px 18px 32px; display: grid; align-content: start; place-items: start center; }
.login-card { width: min(100%, 420px); padding: 28px; border: 1px solid var(--border); border-radius: 5px; background: #fff; box-shadow: 0 18px 40px rgba(23,32,42,.08); }
.login-brand { margin-bottom: 28px; text-align: center; }
.login-logo { width: 230px; max-width: 100%; height: auto; }
.login-card .field { margin-bottom: 15px; text-align: left; }
.login-links { margin-top: 15px; text-align: center; }

@media (min-width: 768px) and (max-width: 1199px) {
  .profile-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .navbar { height: auto; min-height: 51px; flex-wrap: wrap; }
  .navbar-brand { width: 100%; justify-content: center; }
  .navbar-toggle { position: absolute; top: 8px; right: 14px; display: block; padding: 6px 9px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
  .top-nav { width: 100%; height: 36px; justify-content: flex-end; border-top: 1px solid var(--border); }
  .top-dropdown summary { height: 35px; }
  .sidebar { top: 87px; width: 100%; display: none; }
  .menu-toggle:checked ~ .sidebar { display: block; }
  .page-wrapper { margin-left: 0; padding: 107px 15px 25px; }
  .page-header { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; }
  .status-grid, .player-stat-grid, .player-dashboard-columns, .wellness-question-grid, .profile-summary-grid, .profile-detail-grid { grid-template-columns: 1fr; }
  .filter-group { width: 100%; margin-right: 0; }
  .filter-group input, .filter-group select { width: 100%; }
  .form-grid, .form-grid--3, .form-grid--4, .form-grid--5, .positions-grid, .participant-selector--columns { grid-template-columns: 1fr; }
  .datagrid-form { display: block; padding: 10px; }
  .datagrid-form-actions { flex-wrap: wrap; }
  .datagrid-form-actions .btn { width: 100%; }
  .pagination-container { flex-direction: column; align-items: stretch; gap: 10px; }
  .pagination-entries-info, .pagination-pages, .pagination-limit-selector { min-width: 0; text-align: center; justify-content: center; }
  .top-dropdown summary small { display: none; }
  .user-notifications { position: static; }
  .notifications-menu { position: fixed; top: 87px; right: 16px; left: 16px; width: auto; max-width: calc(100vw - 32px); }
  .notifications-list { max-height: calc(100vh - 180px); }
  .notification-item { padding: 10px 12px; }

  .player-app { padding-bottom: env(safe-area-inset-bottom); }
  .player-app .navbar-toggle, .player-app .sidebar { display: none !important; }
  .player-app .top-user-email, .player-app .user-dropdown small { display: none; }
  .player-app .page-wrapper { padding: 99px 12px calc(92px + env(safe-area-inset-bottom)); }
  .player-app .page-header { margin-right: -12px; margin-left: -12px; padding: 13px 12px 11px; font-size: 23px; }
  .player-app .page-header small { margin: 3px 0 0; display: block; font-size: 12px; }
  .player-app .alert { margin-bottom: 12px; padding: 11px 12px; line-height: 1.4; }
  .player-mobile-nav { position: fixed; z-index: 1200; right: 0; bottom: 0; left: 0; min-height: 66px; padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); background: rgba(255,255,255,.98); box-shadow: 0 -5px 18px rgba(24,24,27,.1); }
  .player-mobile-nav a { min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 8px; color: var(--text-muted); font-size: 18px; text-decoration: none; }
  .player-mobile-nav a strong { font-size: 11px; font-weight: 600; }
  .player-mobile-nav a.active { color: #18181b; background: var(--surface-soft); }

  .player-app .nav-tabs { margin-right: -12px; margin-left: -12px; padding: 0 12px; flex-wrap: nowrap; gap: 20px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .player-app .nav-tabs::-webkit-scrollbar { display: none; }
  .player-app .nav-tabs li { flex: 0 0 auto; }
  .player-app .nav-tabs a { min-height: 44px; padding: 12px 1px 10px; white-space: nowrap; }
  .player-app .tab-pane { margin-top: 12px; }
  .player-profile-summary .tab-pane { margin-top: 0; }
  .profile-section { padding: 0; }
  .profile-section > h2 { margin-right: 0; margin-left: 0; }
  .profile-detail-grid { gap: 17px; padding: 0 4px; }
  .profile-detail__label { font-size: 13px; }
  .profile-detail__value { font-size: 14px; }

  .player-app .hero-card { padding: 17px; gap: 12px; align-items: flex-start; }
  .player-app .hero-card h2 { font-size: 21px; }
  .player-app .hero-card p:not(.eyebrow) { line-height: 1.4; }
  .player-dashboard-photo { width: 58px; height: 58px; flex: 0 0 auto; }
  .player-app .hero-monogram { font-size: 36px; }
  .player-app .player-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .player-stat-card { min-height: 108px; padding: 13px; }
  .player-stat-card strong { font-size: 23px; }
  .player-dashboard-columns { gap: 12px; }
  .player-app .panel-heading { padding: 11px 12px; }
  .wellness-pending-list article { padding: 13px 12px; align-items: stretch; flex-direction: column; }
  .wellness-pending-list article .btn { width: 100%; min-height: 44px; }
  .player-app .empty-state { padding: 25px 14px; }

  .player-app .grid-container, .player-app .table-scroll { overflow: visible; }
  .player-mobile-table, .player-mobile-table tbody { width: 100%; display: block; }
  .player-mobile-table thead { display: none; }
  .player-mobile-table tbody tr { margin: 10px; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(24,24,27,.04); }
  .player-mobile-table tbody td { min-height: 42px; padding: 10px 12px !important; display: grid; grid-template-columns: minmax(105px, 38%) minmax(0, 1fr); align-items: center; gap: 10px; border: 0 !important; border-bottom: 1px solid var(--border) !important; background: #fff !important; text-align: right !important; overflow-wrap: anywhere; }
  .player-mobile-table tbody td:last-child { border-bottom: 0 !important; }
  .player-mobile-table tbody td::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; font-weight: 700; text-align: left; }
  .player-mobile-table tbody td[colspan] { display: block; padding: 22px 12px !important; text-align: center !important; }
  .player-mobile-table tbody td[colspan]::before { content: none; }
  .player-mobile-table .mobile-card-action { display: block; }
  .player-mobile-table .mobile-card-action::before { content: none; }
  .player-mobile-table .mobile-card-action .btn { width: 100%; min-height: 42px; }

  .player-app .form-section { margin-bottom: 14px; padding: 14px 12px; }
  .player-app .form-section-title { margin: -14px -12px 14px; padding: 11px 12px; font-size: 15px; }
  .player-app .field { margin-bottom: 13px; }
  .player-app .field label, .player-app .wellness-scale legend { font-size: 13px; }
  .player-app .field input:not([type="checkbox"]), .player-app .field select, .player-app .wellness-form textarea { min-height: 44px; font-size: 16px; }
  .player-app .field input[type="file"] { padding: 7px; }
  .player-app .field.checkbox { min-height: 44px; align-items: center; }
  .player-app .field.checkbox input { width: 22px; height: 22px; flex: 0 0 auto; }
  .player-app .wellness-intro { padding: 13px 14px; }
  .player-app .wellness-question-grid { gap: 0; }
  .player-app .wellness-scale { padding: 11px 9px; }
  .player-app .wellness-scale-options { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 6px; }
  .player-app .wellness-scale-options span { min-height: 46px; font-size: 15px; }
  .player-app .wellness-scale-ends { line-height: 1.25; }
  .player-app .form-actions { margin-top: 17px; flex-direction: column; align-items: stretch; }
  .player-app .form-actions .btn { width: 100%; min-height: 46px; }
  .player-app .nested-fields { padding: 58px 12px 3px; }
  .player-app .nested-fields__remove { top: 9px; right: 9px; width: 42px; height: 42px; justify-content: center; }
  .player-app .nested-form-links .btn { width: 100%; min-height: 44px; }
}