/* GENERATED by CLAJAMA — minimal app shell styles (capability pages). */
:root { --app-bg:#0f1015; --app-surface:#171922; --app-text:#f2f3f7; --app-muted:#9aa0b4; --app-accent:#7b4dff; }
* { box-sizing: border-box; }
body.clajama-app { margin:0; background:var(--app-bg); color:var(--app-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height:1.5; }
.app-header { display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.app-brand { color:var(--app-text); text-decoration:none; font-weight:600; }
.app-main { max-width:960px; margin:0 auto; padding:28px 20px 64px; }
.app-footer { padding:24px 20px; color:var(--app-muted); font-size:12px;
  border-top:1px solid rgba(255,255,255,.08); text-align:center; }
.btn, button { background:var(--app-accent); color:#fff; border:0; border-radius:8px;
  padding:9px 14px; font-size:14px; cursor:pointer; }
.btn-primary { background:var(--app-accent); }
.record-grid, .leaderboard-list { display:grid; gap:12px; padding:0; list-style:none; }
.record-card { display:block; padding:14px; border-radius:12px; text-decoration:none;
  color:var(--app-text); background:var(--app-surface); border:1px solid rgba(255,255,255,.07); }
.leaderboard-list li { display:flex; gap:12px; align-items:center; padding:10px 14px;
  border-radius:10px; background:var(--app-surface); }
#geo-status[data-kind="error"] { color:#ff6b6b; }
#geo-status[data-kind="ok"] { color:#3ddc84; }
.msg { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); }

.admin-money { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.admin-input { width: 96px; max-width: 40vw; padding: 6px 8px; font-size: 12px; border-radius: 4px; }
.status-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px;
               letter-spacing: 0.06em; text-transform: uppercase; }
.inline-form { display: inline; }

@media (max-width: 720px) {
  .table-scroll { overflow-x: auto; max-width: 100%; }
  .table-scroll .orders-table, .table-scroll .owner-table { min-width: 0; width: 100%; }
  .orders-table thead, .owner-table thead { display: none; }
  .orders-table tbody tr, .owner-table tbody tr { display: block; border: 1px solid #333; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
  .orders-table td, .owner-table td { display: block; width: auto; border: 0; padding: 5px 0; text-align: left; }
  .orders-table td[data-label]:not([data-label=""])::before, .owner-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label); display: block; font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; opacity: 0.65; margin-bottom: 2px;
  }
  .admin-money { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .admin-input { width: calc(50% - 4px); max-width: none; }
  .inline-form .btn-sm, .inline-form .btn { margin: 6px 6px 0 0; }
}

@media (max-width: 720px) {
  .orders-table tbody tr, .owner-table tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: start;
  }
  .orders-table td, .owner-table td { padding: 0; min-width: 0; }
  .owner-table td[data-label="Order"], .orders-table td[data-label="Order"] { grid-area: 1 / 1 / 2 / 3; }
  .owner-table td[data-label="Date"], .orders-table td[data-label="Date"] { grid-area: 1 / 3 / 2 / 4; }
  .owner-table td[data-label="Total"], .orders-table td[data-label="Total"] { grid-area: 2 / 1 / 3 / 2; }
  .owner-table td[data-label="Payment"], .orders-table td[data-label="Payment"] { grid-area: 2 / 2 / 3 / 3; }
  .owner-table td[data-label="Fulfillment"], .orders-table td[data-label="Fulfillment"] { grid-area: 2 / 3 / 3 / 4; }
  .owner-table td[data-label="Customer"], .orders-table td[data-label="Customer"],
  .owner-table td[data-label="Items"], .orders-table td[data-label="Items"],
  .owner-table td[data-label="Label"], .owner-table td[data-label="Actions"],
  .owner-table td[data-label="Reason"], .owner-table td[data-label="Requested"] { grid-column: 1 / -1; }
  .owner-table .status-pill, .orders-table .status-pill { white-space: normal; }
  /* ACTIONS USE THE ROW, NOT A COLUMN: the controls were left-aligned blocks, so each took its own
     line (up to 7). They wrap now, all the same size, with the label kept on its own line. */
  .owner-table td[data-label="Actions"] { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 2px; }
  .owner-table td[data-label="Actions"]::before { flex: 1 1 100%; margin-bottom: 0; }
  .owner-table td[data-label="Actions"] > * { margin: 0 !important; }
  .owner-table td[data-label="Actions"] .btn-sm, .owner-table td[data-label="Actions"] .btn {
    padding: 7px 11px; font-size: 12px; line-height: 1.1; min-height: 32px;
  }
  /* the Refund control is a BUTTON in the wrap while closed; it claims the row only when open */
  .owner-table td[data-label="Actions"] .admin-refund { flex: 0 1 auto; }
  .owner-table td[data-label="Actions"] .admin-refund[open] { flex: 1 1 100%; }
  .owner-table td[data-label="Actions"] .admin-refund-body,
  .owner-table td[data-label="Actions"] .form-hint { flex: 1 1 100%; }
  input, select, textarea { font-size: 16px; }
  .admin-input { width: 100%; max-width: none; }
}
/* PAYMENT SETTINGS ON A PHONE (owner 2026-10-13: "payments settings are not fully responsive they
   hang off the screen"). MEASURED live at 360px on /owner/payments: the payment-methods table's
   right edge sat at x=387 on a 360px screen because the Apple Pay value contains ONE unbreakable
   35-character token ("mikesskins.com,www.mikesskins.com") and a real table lays out columns from
   the widest min-content cell; the card clipped it with overflow:hidden, so no page-level scroll
   check could see it (the row-as-grid rule above is what removes the inflation; the
   overflow-wrap:anywhere below is the belt to that brace). `.owner-defs` is the label/value
   flavour: label above value, both full width, so the value is never squeezed into half a card. */
@media (max-width: 720px) {
  .owner-table.owner-defs tbody tr { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .owner-table.owner-defs th, .owner-table.owner-defs td { grid-column: 1 / -1; }
  .owner-table.owner-defs th { border-bottom: 0; padding-bottom: 0; }
  .owner-table.owner-defs td { padding-top: 1px; }
  .owner-table.owner-defs code { word-break: break-all; }
}
.owner-table th, .owner-table td { overflow-wrap: anywhere; }
.wallet-switches { margin: 8px 0 4px; padding-left: 4px; }
.wallet-switches .form-check { display: block; margin-bottom: 6px; }
@media (max-width: 720px) {
  .wallet-switches { padding-left: 0; }
  .wallet-switches .form-check span { font-size: 13px; }
}
.admin-refund { margin-top: 8px; }
.admin-refund > summary { list-style: none; cursor: pointer; display: inline-block; }
.admin-refund > summary::-webkit-details-marker { display: none; }
/* A CLOSED <details> MUST STAY CLOSED: an author `display` value beats the UA rule that hides a
   closed details' non-summary children, so the refund body stayed on screen (measured live
   2026-10-13: display:flex, 302x134 box while details.open was false) — the amount, the reason and
   the CONFIRM button were permanently visible and the order row was twice as tall. */
.admin-refund:not([open]) > *:not(summary) { display: none; }
.admin-refund-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1px solid #333; border-radius: 8px; padding: 10px 12px; }
.admin-refund-body .admin-input { width: auto; min-width: 96px; }

.order-items { border: 1px solid #333; border-radius: 10px; padding: 4px 14px; margin: 14px 0; }
.order-item { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid #333; font-size: 14px; }
.order-item:last-child { border-bottom: 0; }
.order-item-name { flex: 1 1 auto; }
.order-item-qty { opacity: 0.7; white-space: nowrap; }
.order-item-price { font-weight: 700; white-space: nowrap; }

@media (max-width: 720px) {
  input, select, textarea, .admin-input, .qty-form input, .qty-row input, .site-form input,
  .site-form select, .checkout-layout input, .checkout-layout select { font-size: 16px !important; }
}

.sq-wallet-host:empty { display: none; }
.sq-wallet-item { margin: 8px 0; }
.sq-wallet-item > * { width: 100% !important; min-height: 46px !important; border-radius: 10px !important; box-sizing: border-box; }
.sq-wallet-status { font-size: 12px; line-height: 1.55; opacity: 0.72; margin-top: 8px; }
.sq-card-host { margin-bottom: 6px; }

.sq-wallet-item { position: relative; overflow: hidden; border: 1px solid #333; border-radius: 10px; padding: 8px 10px 10px; flex: 1 1 240px; }
.sq-wallet-label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; margin-bottom: 6px; }
.sq-wallet-body { position: relative; z-index: 1; }
.sq-wallet-body > * { width: 100% !important; min-height: 46px !important; border-radius: 10px !important; box-sizing: border-box; }
.sq-wallet-body iframe { min-height: 46px !important; }
.rate-single { display: flex; align-items: baseline; gap: 10px; border: 1px solid #333; border-radius: 10px; padding: 12px 14px; }
.rate-single .rate-price { margin-left: auto; font-weight: 700; }

.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.pay-option { border: 1px solid #444; border-radius: 10px; padding: 10px 12px; font-size: 14px; cursor: pointer; min-height: 46px; width: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.pay-option.is-selected { font-weight: 600; }
.pay-panel { margin-top: 4px; }
.sq-card-host { background: #FFFFFF; border: 0; border-radius: 10px; padding: 14px; min-height: 64px; }
.sq-wallet-status { font-size: 12px; line-height: 1.55; opacity: 0.72; margin-top: 8px; }

.wallet-own-btn { width: 100%; min-height: 46px; border-radius: 10px; border: 0; background: #000; color: #fff; font-size: 16px; cursor: pointer; }
.apple-pay-button { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; -apple-pay-button-style: black; }

@supports not (-webkit-appearance: -apple-pay-button) {
  .apple-pay-button::after { content: 'Pay with Apple Pay'; font-size: 16px; color: #fff; }
}