/* Dedicated admin shell: persistent desktop sidebar, modal drawer on phones. */
.admin-app-shell { min-height: 100svh; background: #f3f4ef; }
/* Keep viewport width stable between long and short admin pages. */
html:has(.admin-app-shell) { scrollbar-gutter: stable; }
.admin-workspace { --sidebar-width: 252px; min-height: 100svh; }
.admin-stage { margin-left: var(--sidebar-width); min-width: 0; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sidebar-width); height: 100dvh; padding: 26px 18px 18px; background: #193d2c; color: #ecf0e6; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.admin-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 28px; }
.admin-brand { display: grid; line-height: 1; width: fit-content; }
.admin-brand > span { font-size: 48px; letter-spacing: -.065em; font-weight: 800; }
.admin-brand-dot { color: #d8b77f; }
.admin-brand small { font-size: 16px; letter-spacing: .11em; margin-top: 8px; line-height: 1.4; }
.admin-nav, .admin-cafe-nav { display: grid; gap: 5px; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 48px; font-size: 16px; font-weight: 500; border-radius: 8px; color: #dce8dc; transition: none; }
.admin-sidebar nav a .icon { flex-shrink: 0; width: 21px; height: 21px; }
.admin-sidebar nav a:hover { background: #ffffff10; color: white; }
.admin-sidebar nav a[aria-current] { background: #e5ecd7; color: #193d2c; font-weight: 700; }
.admin-sidebar nav a[aria-current]:hover { background: #e5ecd7; color: #193d2c; }
.admin-cafe-nav { border-top: 1px solid #ffffff24; margin-top: 22px; padding-top: 18px; margin-bottom: 24px; }
.admin-cafe-nav a > .icon:last-child:not(:first-child) { width: 17px; margin-left: auto; }
.admin-account { margin-top: auto; border-top: 1px solid #ffffff24; padding-top: 18px; }
.admin-account-link { display: flex; align-items: center; gap: 12px; padding: 4px 10px 12px; border-radius: 8px; }
.admin-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: #42634c; border-radius: 50%; font-size: 17px; font-weight: 600; }
.admin-account-link > span:last-child { min-width: 0; }
.admin-account strong { display: block; overflow-wrap: anywhere; font-size: 16px; font-weight: 600; }
.admin-account small { color: #bfcebf; font-size: 16px; display: block; margin-top: 3px; }
.admin-account #logout { border: 0; background: transparent; color: #dce8dc; padding: 10px 14px; min-height: 44px; width: 100%; justify-content: flex-start; font-size: 16px; font-weight: 400; }
.admin-account #logout:hover { background: #ffffff10; }
.admin-sidebar :focus-visible { outline: 2px solid #e4c08b; outline-offset: 3px; }
.admin-header { height: 80px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fafbf7; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.admin-header .motion-control { width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; }
.admin-header-actions { flex-shrink: 0; }
.admin-header-title, .admin-header-actions { display: flex; align-items: center; gap: 18px; min-width: 0; }
.admin-header h1 { font-size: 23px; line-height: 1.25; font-weight: 650; letter-spacing: -.035em; margin: 0; }
.admin-header .language { font-size: 16px; min-height: 44px; width: 70px; }
.admin-header .connection { font-size: 16px; }
#admin-menu-toggle, .admin-menu-close { display: none; }
.admin-content { max-width: 1280px; margin: 0 auto; padding: 30px 32px 40px; }
.admin-content, .admin-section, .admin-section > *, .admin-panel .host-table > div { min-width: 0; }
.admin-section[hidden] { display: none !important; }
.admin-section { outline: none; }
.admin-section:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.admin-panel .settings-panel { padding: 26px; margin: 0; border-radius: 12px; background: #fffffc; }
.admin-panel h2 { font-size: 21px; line-height: 1.35; }
.admin-panel h3 { font-size: 19px; }
.admin-panel .section-title { gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-panel label, .admin-panel input, .admin-panel select, .admin-panel button, .admin-panel .helper, .admin-panel small { font-size: 16px; }
.admin-panel input, .admin-panel select { min-width: 0; width: 100%; }
.admin-panel .check-row input { width: 22px; }
.admin-panel .check-row { gap: 12px; padding: 14px 0; }
.admin-panel .check-row span { min-width: 0; }
.admin-panel .two-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.admin-panel .two-fields label { display: flex; flex-direction: column; height: 100%; }
.admin-panel .two-fields input { margin-top: auto; }
.admin-panel .host-overview { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; margin: 0; align-items: stretch; }
.admin-panel .access-card, .admin-panel .qr-card { padding: 28px; border-radius: 12px; }
.admin-panel .access-card { background: #24553c; }
.admin-panel .daily-code { font-size: clamp(28px, 3vw, 42px); letter-spacing: .12em; margin: 22px 0; white-space: nowrap; }
.admin-panel .qr-card { display: flex; flex-direction: column-reverse; justify-content: center; align-items: flex-start; gap: 20px; background: #fffffc; }
.admin-panel .qr-card img { width: 132px; height: 132px; }
.admin-panel .qr-card h2 { margin-bottom: 10px; }
.admin-summary { display: flex; gap: 40px; align-items: center; padding: 6px 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.admin-summary > div { display: grid; gap: 5px; }
.admin-summary strong { font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.admin-summary strong span { color: var(--muted); font-size: 20px; font-weight: 400; }
.admin-summary > div > span { color: var(--muted); font-size: 16px; }
.admin-summary a { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 44px; font-size: 16px; }
.admin-panel .host-table { gap: 16px; flex-wrap: wrap; padding: 17px 0; }
.admin-panel .host-table > div:first-child { flex: 1 1 150px; }
.admin-panel .host-table strong, .admin-panel .host-table p { overflow-wrap: anywhere; }
.admin-panel .host-table > div:last-child { flex-wrap: wrap; gap: 8px; }
.admin-panel .host-table button { min-height: 44px; padding-inline: 12px; }
.admin-panel .staff-account .account-meta { display: block; }
.admin-panel .staff-account small { margin-top: 6px; }
.admin-panel #settings-form { max-width: 800px; }
.admin-panel [data-admin-panel="security"] { max-width: 640px; }
.admin-panel #password-form { max-width: 500px; }
.admin-panel .rule-settings { margin: 16px 0; }
.admin-panel .rule-settings > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; font-size: 17px; }
.admin-panel .rule-settings-body { padding: 4px 20px 24px; }
.admin-panel .rule-settings[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.admin-panel #settings-form > button { width: auto; margin-top: 10px; min-height: 48px; }
.admin-panel .audit-panel > summary { min-height: 44px; font-size: 21px; }
.admin-panel .audit-panel p { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 0; overflow-wrap: anywhere; }
.admin-backdrop { display: none; }
@media (min-width: 901px) and (max-width: 1180px) {
  .admin-workspace { --sidebar-width: 228px; }
  .admin-content { padding: 24px; }
  .admin-header { padding-inline: 24px; }
  .admin-panel .host-overview { grid-template-columns: minmax(0, 1fr); }
  .admin-panel .qr-card { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 900px) {
  .admin-stage { margin-left: 0; }
  .admin-sidebar { width: min(300px, calc(100vw - 48px)); transform: translateX(-100%); visibility: hidden; transition: transform 220ms ease, visibility 220ms; z-index: 100; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .menu-open .admin-sidebar { transform: translateX(0); visibility: visible; }
  .admin-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: #10251acc; z-index: 90; }
  .admin-header { height: 70px; padding: 0 20px; }
  .admin-header-title, .admin-header-actions { gap: 12px; }
  .admin-header h1 { font-size: 21px; }
  .admin-header .connection { display: none; }
  #admin-menu-toggle, .admin-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; border-radius: 8px; }
  #admin-menu-toggle { background: transparent; color: var(--green); border-color: var(--line); }
  .admin-menu-close { background: #ffffff0c; color: white; border-color: #ffffff24; }
  .admin-brand-row { padding-inline: 10px; }
  .admin-content { padding: 24px; }
  .admin-panel .host-overview { gap: 20px; }
}
@media (max-width: 620px) {
  .admin-header { padding-inline: 16px; }
  .admin-header h1 { font-size: 20px; }
  .admin-header-title { gap: 10px; }
  .admin-header .language { width: 60px; }
  .admin-content { padding: 20px 16px 28px; }
  .admin-panel .host-overview { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .admin-panel .settings-panel, .admin-panel .access-card, .admin-panel .qr-card { padding: 22px; }
  .admin-summary { gap: 20px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; }
  .admin-summary a { margin-left: 0; }
  .admin-panel .daily-code { font-size: 30px; }
  .admin-panel .qr-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .admin-panel .qr-card img { width: 110px; height: 110px; }
}
@media (max-width: 430px) {
  .admin-panel .settings-panel { padding: 20px 16px; }
  .admin-panel .two-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .admin-panel .rule-settings-body { padding-inline: 12px; }
  .admin-panel .qr-card { flex-direction: column-reverse; align-items: flex-start; }
  .admin-panel .daily-code { font-size: 28px; letter-spacing: .08em; }
  .admin-panel #settings-form > button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .admin-sidebar, .admin-sidebar nav a { transition: none; } }

.admin-panel .qr-card .text-btn { min-height: 44px; display: inline-flex; align-items: center; }

/* Table actions remain distinct and reachable on touch screens. */
.admin-panel .table-actions { display: flex; align-items: center; }
.admin-panel .table-delete { color: var(--red, #a33e32); }
.admin-panel .table-delete:hover { background: #a33e320d; }
#table-delete-form .form-error { color: var(--red, #a33e32); margin-block: 16px; }
#table-delete-form .actions { flex-wrap: wrap; }
/* Individual table cards sit directly on the page, without a nested panel. */
.admin-panel [data-admin-panel="tables"] > .settings-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Table management stays horizontal even on narrow phones. */
.admin-panel .host-table.managed-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.admin-panel .managed-table .managed-table-info {
  display: block;
  min-width: 0;
}
.admin-panel .managed-table strong { display: block; line-height: 1.5; }
.admin-panel .managed-table p { margin: 3px 0 0; font-size: 16px; line-height: 1.5; }
.admin-panel .managed-table .table-actions {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  align-items: center;
  gap: 8px;
  margin: 0;
}
.admin-panel .managed-table .table-action-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--green);
  background: var(--cream);
}
.admin-panel .managed-table .table-action-icon:hover { background: var(--sage); border-color: var(--green); }
.admin-panel .managed-table .table-action-icon.table-delete { color: var(--red); background: #a6423208; border-color: #a6423226; }
.admin-panel .managed-table .table-action-icon.table-delete:hover { background: #a6423214; border-color: var(--red); }
.admin-panel .managed-table .table-action-icon:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.admin-panel .managed-table .fa-icon { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }
.admin-panel .managed-table [data-reset-table] { grid-column: 1 / -1; justify-content: center; padding: 4px 8px; }


#table-delete-form button[type="submit"] { background: var(--red); border-color: var(--red); color: #fff !important; }

/* Account creation is a focused modal; the roster fills its panel. */
#staff-dialog { width: 520px; }
#staff-dialog label, #staff-dialog input, #staff-dialog select, #staff-dialog button { font-size: 16px; }
#staff-dialog button { min-height: 44px; }
#staff-dialog input, #staff-dialog select { width: 100%; min-width: 0; }
#staff-dialog .actions { flex-wrap: wrap; }
#staff-dialog .staff-form-error { color: var(--red); margin-top: 16px; }

/* Cafe routes share the admin shell without a second navigation/header. */
.admin-cafe-content > .page { padding: 0; margin: 0; max-width: none; }
.admin-cafe-content > .page.narrow { max-width: 960px; margin-inline: auto; }
.admin-cafe-content .page-heading { margin-bottom: 22px; }
.admin-cafe-content h2 { font-size: 22px; line-height: 1.35; }
.admin-cafe-content .back-link { margin-top: 0; }
.admin-cafe-content > .rules-tabs { margin-top: 0; }
.admin-cafe-content .room-header { margin-bottom: 24px; }
@media (min-width: 901px) and (max-width: 1180px) {
  .admin-cafe-content .game-layout, .admin-cafe-content .record-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .admin-header h1 { overflow-wrap: anywhere; font-size: 18px; }
}

/* Generated code history: shared by admin and cashier overview. */
.code-history{grid-column:1/-1;min-width:0;padding:24px 0 0;border-top:1px solid #d9dfd1;margin-top:4px}
.code-history-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.code-history-heading h2{margin:0;font-size:22px}
.code-history-heading .text-btn{min-height:44px;font-size:16px}
.code-history-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.code-history-tabs{display:flex;gap:4px;flex-wrap:wrap}
.code-history-tabs button{background:transparent;color:#536452;border:0;border-radius:8px;padding:10px 14px;min-height:44px;font-size:16px;gap:8px}
.code-history-tabs button[aria-pressed="true"]{background:#e2ead8;color:#193e2b}
.code-history-tabs button span{font-variant-numeric:tabular-nums;opacity:.8}
.code-history-period{margin:0;min-width:140px}
.code-history-period select{min-height:44px;font-size:16px;background:#fffef9}
.code-history-table{width:100%;border-collapse:collapse;text-align:left;font-size:16px}
.code-history-table th{font-weight:500;color:#6b7564;padding:12px 14px;border-bottom:1px solid #d6dece}
.code-history-table td{padding:18px 14px;border-bottom:1px solid #dce2d5;vertical-align:top}
.code-history-table th:first-child,.code-history-table td:first-child{padding-left:0}
.code-history-code strong{display:block;letter-spacing:.12em;font-size:20px;color:#244d36}
.code-history-table time{display:block;font-size:16px;font-weight:400;color:#66715e;line-height:1.5;margin-top:5px}
.code-usage{display:inline-flex;padding:4px 9px;border-radius:6px;font-size:16px;background:#ecece1;color:#5d604a}
.code-usage.is-new{background:#e4eadb;color:#33592f}
.code-usage.is-used{background:#e0eeea;color:#1c6554}
.code-validity{display:block;color:#6a7560;margin-top:5px;font-size:16px}
.code-validity.is-active{color:#27663a}
.code-history-usage strong{font-size:16px;font-weight:500}
.code-mobile-label{display:none}
.code-history-paging{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;color:#65705d;font-size:16px}
.code-history-paging>div{display:flex;gap:12px;align-items:center}
.code-history-paging button{min-width:44px;min-height:44px;padding:8px}
.code-history-empty{padding:28px 0;color:#68745f;font-size:16px}
.code-history-error{color:#9c3c29;font-size:16px}
.code-history-legacy{font-size:16px;color:#68745f;line-height:1.5;margin:16px 0}
.code-history [hidden]{display:none!important}
@media(max-width:700px){
 .code-history-controls{align-items:stretch;flex-direction:column;gap:10px}
 .code-history-period{align-self:flex-end;min-width:140px}
 .code-history-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .code-history-tabs button{padding:10px 7px;gap:6px}
 .code-history-table,.code-history-table tbody{display:block}
 .code-history-table thead{display:none}
 .code-history-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;padding:18px 0;border-bottom:1px solid #dce2d5}
 .code-history-table td{display:block;border:0;padding:0}
 .code-history-state{text-align:right}
 .code-history-issuer,.code-history-usage{grid-column:1/-1}
 .code-history-issuer{font-size:16px;color:#66715e}
 .code-mobile-label{display:inline}
 .code-history-usage time{display:inline;margin-left:8px}
 .code-history-heading{gap:8px}.code-history-heading h2{font-size:20px}
}

.code-detail-button{min-height:44px;margin-top:6px;font-size:16px}
.code-detail-value{display:block;font-size:30px;letter-spacing:.14em;color:var(--green);margin-bottom:20px}
.code-detail-meta{margin:0;display:grid;gap:14px}
.code-detail-meta>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px}
.code-detail-meta dt{color:var(--muted)}
.code-detail-meta dd{margin:0;overflow-wrap:anywhere}
.code-detail-session{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}
.code-detail-session h3{display:flex;align-items:center;gap:8px;margin:0;font-size:20px}
.code-detail-session .section-title{gap:12px;flex-wrap:wrap}
.code-detail-players{list-style:none;padding:0;display:grid;gap:10px}
.code-detail-players li{display:flex;gap:10px;align-items:center;overflow-wrap:anywhere}
.code-detail-pending{margin:24px 0 0;color:var(--muted)}
@media(max-width:380px){.code-detail-meta>div{grid-template-columns:1fr;gap:4px}}