.admin-page {
  min-height: 70vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 60px 0 40px 0;
}

.admin-page > div {
  width: min(1240px, calc(100% - 96px));
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.admin-page .left-tabbar {
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  order: 1;
  align-items: flex-start;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  box-shadow: var(--shadow-art);
}

.admin-page-content-pane {
  flex-grow: 1;
  order: 2;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 32px;
  box-shadow: var(--shadow-art);
  text-align: left;
}

.admin-page-content-pane h1 { font-size: 36px; line-height: 1.15; font-weight: 700; font-family: var(--font-display); }
.admin-page-content-pane h2 { margin-top: 16px; font-size: 20px; font-weight: 600; font-family: var(--font-display); }
.admin-page-content-pane p { margin-top: 8px; font-size: 14px; color: var(--muted-foreground); font-family: var(--font-sans); }


.admin-page .tab-link {
  width: 100%;
  height: 32px;
  text-decoration: none;
  border-radius: 6px;
  color: var(--muted-foreground);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  position: relative;
  transition: transform .2s, border-color .2s, color .2s, background-color .2s;
  -webkit-tap-highlight-color: transparent;
}

.admin-page .tab-link span {
  text-align: left;
  white-space: normal;
  line-height: 1.3;
}

.admin-page .tab-link:hover {
  color: var(--foreground);
  background: var(--accent);
  border-color: var(--primary);
  transform: translateX(3px);
}

.admin-page .tab-link.active {
  color: var(--foreground);
  background: var(--secondary);
  border-color: var(--primary);
}

.admin-page .tab-link.active::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--stripe-gradient);
  border-radius: 4px 0 0 4px;
}

.admin-page .tab-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.user-management { min-width:0; }.user-management-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding-bottom:25px; border-bottom:1px solid var(--border); }.admin-kicker { color:var(--primary); font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; }.user-management-heading h1 { margin-top:7px; }.user-count { flex-shrink:0; border:1px solid var(--border); background:var(--secondary); color:var(--muted-foreground); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:700; }.user-search { display:flex; align-items:center; gap:10px; margin:24px 0 18px; padding:0 13px; height:44px; color:var(--muted-foreground); background:var(--secondary); border:1px solid var(--border); border-radius:6px; }.user-search:focus-within { border-color:var(--primary); }.user-search input { min-width:0; flex:1; outline:0; background:transparent; font-size:13px; }.clear-search { color:var(--primary); font-size:12px; font-weight:700; }.user-directory { display:grid; grid-template-columns:minmax(245px,.8fr) minmax(330px,1.2fr); min-height:485px; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--secondary); }.user-list { overflow:auto; max-height:600px; border-right:1px solid var(--border); background:var(--card); }.user-row { display:flex; align-items:center; gap:11px; min-height:70px; padding:12px 14px; border-bottom:1px solid var(--border); transition:background-color .15s; }.user-row:last-child { border-bottom:0; }.user-row:hover { background:var(--secondary); }.user-row.selected { background:color-mix(in oklch,var(--primary) 11%,var(--secondary)); box-shadow:inset 3px 0 var(--primary); }.user-avatar { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--primary); font-size:13px; font-weight:700; }.user-row-copy { min-width:0; flex:1; display:grid; gap:2px; }.user-row-copy strong,.user-row-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.user-row-copy strong { font-size:13px; }.user-row-copy small { color:var(--muted-foreground); font-size:11px; }.user-row-status { width:7px; height:7px; border-radius:50%; background:var(--highlight); box-shadow:0 0 0 3px color-mix(in oklch,var(--highlight) 14%,transparent); }.user-detail { padding:28px; background:linear-gradient(135deg,var(--card),var(--secondary)); }.user-detail-topline { display:flex; justify-content:space-between; align-items:center; color:var(--muted-foreground); font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }.status-pill { border:1px solid color-mix(in oklch,var(--highlight) 35%,var(--border)); color:var(--highlight); border-radius:999px; padding:5px 8px; font-size:9px; }.user-profile-heading { display:flex; align-items:center; gap:14px; margin:30px 0 26px; }.user-avatar-large { width:54px; height:54px; flex-basis:54px; font-size:20px; }.user-profile-heading h2 { margin:0; }.user-profile-heading p { margin-top:3px; }.user-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:0; }.user-facts div { min-width:0; padding:14px 0; border-top:1px solid var(--border); }.user-facts dt { color:var(--muted-foreground); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }.user-facts dd { overflow-wrap:anywhere; margin:5px 0 0; color:var(--foreground); font-size:13px; }.user-empty-state { padding:65px 24px; text-align:center; border:1px dashed var(--border); border-radius:6px; background:var(--secondary); }.user-empty-state h2 { margin:0; }.user-empty-state p { max-width:420px; margin-inline:auto; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:900px) { .admin-page > div { width:calc(100% - 48px); } }
@media(max-width:700px) { .admin-page { padding-top:32px; }.admin-page > div { width:calc(100% - 40px); flex-direction:column; gap:16px; }.admin-page .left-tabbar { width:100%; }.admin-page-content-pane { width:100%; padding:22px; }.user-directory { grid-template-columns:1fr; }.user-list { max-height:330px; border-right:0; border-bottom:1px solid var(--border); }.user-detail { padding:22px; }.user-facts { grid-template-columns:1fr; }.user-management-heading { gap:14px; }.user-management-heading h1 { font-size:31px; } }

/* State colours are supplied by user_state.display_colour. */
.user-row-status { background:var(--state-colour, var(--highlight)); box-shadow:0 0 0 3px color-mix(in oklch, var(--state-colour, var(--highlight)) 14%, transparent); }
.status-pill { border-color:color-mix(in oklch, var(--state-colour, var(--highlight)) 45%, var(--border)); color:var(--state-colour, var(--highlight)); }

.user-list { max-height:560px; overflow-y:auto; overscroll-behavior:contain; }
.user-list-status { margin:0; padding:14px 12px; color:var(--muted-foreground); font-size:12px; text-align:center; }
.user-list-sentinel { display:block; height:1px; }
.user-list-sentinel[hidden] { display:none; }
.user-load-retry { width:calc(100% - 24px); margin:0 12px 12px; padding:9px 12px; border:1px solid var(--border); border-radius:5px; background:var(--secondary); color:var(--foreground); cursor:pointer; }
.user-load-retry:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
@media(max-width:700px) { .user-list { max-height:330px; } }

.order-management { min-width:0; }
.order-directory { display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); margin-top:20px; overflow:hidden; border:1px solid var(--border); border-radius:6px; background:var(--background); }
.order-list { max-height:560px; overflow-y:auto; overscroll-behavior:contain; border-right:1px solid var(--border); }
.admin-order-row { display:grid; gap:7px; padding:13px 15px; border-bottom:1px solid var(--border); color:var(--foreground); text-decoration:none; transition:background-color .15s, border-color .15s; }
.admin-order-row:hover,.admin-order-row.selected { background:var(--secondary); }
.admin-order-row.selected { box-shadow:inset 3px 0 var(--primary); }
.admin-order-row:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.admin-order-row-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.admin-order-row-topline strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.admin-order-row-product { overflow:hidden; color:var(--muted-foreground); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.admin-order-row-meta { display:flex; flex-wrap:wrap; gap:5px; color:var(--muted-foreground); font-size:11px; }
.admin-order-status { flex:0 0 auto; padding:3px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted-foreground); font-size:10px; font-weight:700; white-space:nowrap; }
.admin-order-status[data-order-status="paid"],.admin-order-status[data-order-status="completed"] { border-color:color-mix(in oklch,#47a878 45%,var(--border)); color:#59bd8d; }
.admin-order-status[data-order-status="pending"],.admin-order-status[data-order-status="processing"],.admin-order-status[data-order-status="paying"] { border-color:color-mix(in oklch,#d5a53a 45%,var(--border)); color:#d5a53a; }
.admin-order-status[data-order-status="failed"],.admin-order-status[data-order-status="cancelled"],.admin-order-status[data-order-status="refunded"],.admin-order-status[data-order-status="denied"] { border-color:color-mix(in oklch,#d75a62 45%,var(--border)); color:#e8787f; }
.order-detail { min-width:0; padding:22px; }
.order-detail h2 { margin-top:20px; overflow-wrap:anywhere; }
.order-detail-date { margin-top:5px; }
.order-detail .user-facts { margin-top:20px; }
.order-reference { overflow-wrap:anywhere; }
.order-customer-id { color:var(--muted-foreground); font-size:11px; }
.order-notice { margin:16px 0 0; padding:11px 14px; border:1px solid var(--border); border-radius:6px; font-size:13px; }
.order-notice.success { border-color:color-mix(in oklch,#47a878 45%,var(--border)); color:#59bd8d; }
.order-notice.error { border-color:color-mix(in oklch,#d75a62 45%,var(--border)); color:#e8787f; }
.order-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.order-actions form { margin:0; }
.order-action-button { min-height:38px; padding:8px 13px; border:1px solid var(--border); border-radius:5px; background:var(--secondary); color:var(--foreground); font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.order-action-button:hover { border-color:var(--primary); }
.order-action-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.order-action-button.danger { border-color:color-mix(in oklch,#d75a62 50%,var(--border)); color:#e8787f; }
.order-action-note { margin:10px 0 0; color:var(--muted-foreground); font-size:11px; }
@media(max-width:700px) { .order-directory { grid-template-columns:1fr; }.order-list { max-height:330px; border-right:0; border-bottom:1px solid var(--border); }.order-detail { padding:20px; } }

.admin-page-content-pane { padding-top:24px; }
.user-management-heading h1 { margin-top:0; }