@import url('./design-preview.css');

:root { color-scheme: light; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.muted { color: var(--muted); }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--blue); color: #fff; }
.brand-mark .ui-icon { width: 20px; height: 20px; }
.brand > span:last-child { display: grid; }
.nav-item > .ui-icon { display: block; width: 20px; height: 20px; color: #5f6368; }
.nav-item.active > .ui-icon { color: var(--blue); }
.sidebar-footer { grid-template-columns: 36px 1fr auto; }
.account-actions { display: flex; align-items: center; }
.account-actions button { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; }
.account-actions button:hover { background: #e8ecf2; }
.account-actions .ui-icon { width: 16px; height: 16px; }
.topbar-actions .ui-icon, .menu-button .ui-icon, .icon-button .ui-icon, .row-menu .ui-icon { width: 18px; height: 18px; }
.menu-button { display: none; width: 38px; height: 38px; place-items: center; border-radius: 50%; }
.page-head h1 { display: flex; align-items: center; gap: 9px; }
.page-head h1 .ui-icon { color: var(--blue); }
.primary, .outline, .filter-button, .text-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.primary .ui-icon, .outline .ui-icon, .filter-button .ui-icon, .text-button .ui-icon, .danger-button .ui-icon { width: 16px; height: 16px; }
.metric-icon .ui-icon { width: 21px; height: 21px; }
.head-actions { flex-wrap: wrap; }
.table-search .ui-icon { width: 15px; height: 15px; }
.status { white-space: nowrap; }
.player-cell.placeholder .avatar-fallback, .player-summary .avatar-fallback { display: grid; place-items: center; border-radius: 50%; background: #e8f0fe; color: #1967d2; font-weight: 700; }
.player-cell .avatar-fallback { width: 38px; height: 38px; }
.player-summary .avatar-fallback { width: 68px; height: 68px; font-size: 22px; }
.item-cell img { object-fit: cover; }
.box-art.image { overflow: hidden; background: #f3f6fa; }
.box-art.image img { width: 100%; height: 100%; object-fit: cover; }
.entity-card footer { flex-wrap: wrap; }
.event-list article .event-actions { display: flex; align-items: center; gap: 7px; }
.event-list article .event-actions .outline, .event-list article .event-actions .text-button { white-space: nowrap; }
.settings-card .form-actions { padding-top: 18px; }
.form-grid label.form-field { display: grid; gap: 7px; }
.form-grid label.form-field > span { font-size: 12px; font-weight: 600; }
.form-grid label.form-field > small { color: var(--muted); font-size: 10px; }
.form-grid input[type="color"] { padding: 4px; }
.form-grid input[type="file"] { height: auto; padding: 9px; }
.form-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.dialog-content { max-height: calc(100vh - 90px); overflow: auto; }
.dialog-content:not(:has(> form)) { padding: 22px; }
dialog form > .form-grid + footer, dialog form > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.dialog-list { margin-top: 18px; }
.entry { margin-bottom: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafd; }
.entry .danger-button { align-self: end; }
.upload-preview { width: 78px; height: 78px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; object-fit: cover; }
.upload-status { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; }
.notice { position: fixed; z-index: 90; right: 24px; bottom: 24px; min-width: 290px; max-width: min(430px, calc(100vw - 48px)); padding: 14px 16px; border-radius: 8px; background: #303134; box-shadow: 0 6px 20px rgba(32,33,36,.25); color: #fff; font-size: 12px; }
.notice.error { background: #8c1d18; }
.drawer-content { min-height: 180px; }
.drawer-section .table-scroll { margin-inline: -22px; }
.drawer-section table { font-size: 11px; }
.drawer-section th, .drawer-section td { height: auto; padding: 9px 10px; white-space: normal; }
.drawer-section .pagination { padding-inline: 0; gap: 8px; }
.drawer-section .pagination span:first-child { margin-right: auto; }
.drawer-empty { padding: 26px 0; color: var(--muted); font-size: 12px; text-align: center; }
.drawer-actions button { min-height: 38px; }
.drawer-action-icon { margin-right: 2px; }
.drawer-tabs { overflow-x: auto; }
.drawer-tabs button { white-space: nowrap; }
.player-id { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gold-value .ui-icon { width: 14px; height: 14px; }
.pagination .ui-icon { width: 16px; height: 16px; }
.pagination button { display: inline-grid; place-items: center; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f8fafd; }
.auth-card { width: min(420px, 100%); padding: 34px; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-brand h1 { margin: 0; font-size: 22px; }
.auth-brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card .form-field { display: grid; gap: 7px; font-size: 12px; font-weight: 600; }
.auth-card .form-field input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #bdc1c6; border-radius: 6px; }
.auth-card .primary { width: 100%; margin-top: 4px; }
.auth-card > .outline { width: 100%; margin-top: 12px; }

@media (max-width: 760px) {
  .menu-button { display: grid; }
  .sidebar-footer { position: static; margin-top: 20px; }
  .sidebar { display: flex; flex-direction: column; overflow-y: auto; }
  .sidebar nav { flex: 1; }
  .scrim.nav-open { opacity: 1; pointer-events: auto; z-index: 19; }
}