/* Kaiya MVP order screen — mobile-first, code-entry first UI. */

:root {
  --color-bg: #fafaf7;
  --color-text: #2c2a26;
  --color-muted: #6b665e;
  --color-border: #d6d2c8;
  --color-accent: #8a6d3b;
  --color-accent-strong: #6e5630;
  --color-error: #c45050;
  --color-error-bg: #fdecec;
  --color-valid: #2f7a39;
  --color-alert-bg: #fff4e5;
  --color-alert-border: #d9a05b;
  --radius: 6px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
}

.site_main {
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
}

/* Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 0.6rem 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar_left {
  font-weight: 700;
  color: var(--color-accent-strong);
}

.topbar_right {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.85rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 480px) {
  .topbar_left {
    font-size: 0.9rem;
  }
  .topbar_right {
    gap: 0.5rem;
    font-size: 0.8rem;
  }
}

.member_name {
  color: var(--color-muted);
}

.logout_link {
  color: var(--color-accent);
}

/* Sections */
section {
  padding: 1rem;
}

h1 {
  font-size: 1.25rem;
}

h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  border-left: 4px solid var(--color-accent);
  padding-left: 0.5rem;
}

.hint {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.alert {
  background: var(--color-alert-bg);
  border: 1px solid var(--color-alert-border);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin: 1rem;
  color: #6f4516;
}

/* Login */
.login_box {
  max-width: 360px;
  margin: 4rem auto;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}

.login_box h1 {
  margin: 0 0 1rem;
  color: var(--color-accent-strong);
}

.login_box label {
  display: block;
  text-align: left;
  margin-bottom: 0.75rem;
}

.login_box label > span {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.login_box input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
}

.login_box button {
  width: 100%;
  padding: 0.7rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
}

.login_box button:hover {
  background: var(--color-accent-strong);
}

/* Order table */
.order_table {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.row {
  display: grid;
  grid-template-columns: 5rem 4rem 1fr 2rem;
  grid-template-areas:
    "code qty remove remove"
    "name name name name"
    "subtotal subtotal subtotal subtotal";
  gap: 0.35rem 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  align-items: center;
}

.row.row_header {
  display: none;
}

.row.error {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.row.valid {
  border-left: 4px solid var(--color-valid);
}

.code_input {
  grid-area: code;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.qty_input {
  grid-area: qty;
  padding: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
}

.remove_btn {
  grid-area: remove;
  width: 1.8rem;
  height: 1.8rem;
  background: #f0eee9;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-error);
  font-size: 1.1rem;
  cursor: pointer;
  justify-self: end;
}

.remove_btn:hover {
  background: var(--color-error-bg);
}

.product_name {
  grid-area: name;
  font-weight: 600;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.row.error .product_name {
  color: var(--color-error);
  font-weight: normal;
}

.row_subtotal {
  grid-area: subtotal;
  color: var(--color-muted);
  font-size: 0.85rem;
}

@media (min-width: 600px) {
  .row {
    grid-template-columns: 6rem 5rem 1fr 11rem 2rem;
    grid-template-areas: "code qty name subtotal remove";
  }
  .row_header {
    display: grid !important;
    background: transparent;
    border: none;
    padding: 0 0.7rem;
    color: var(--color-muted);
    font-size: 0.85rem;
  }
  .col_num {
    grid-area: code;
  }
  .col_qty {
    grid-area: qty;
  }
  .col_name {
    grid-area: name;
  }
  .col_subtotal {
    grid-area: subtotal;
  }
  .col_remove {
    grid-area: remove;
  }
}

/* Memo / totals */
textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
}

.totals_section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 0 1rem;
  padding: 0.85rem 1rem;
}

.totals_line {
  font-weight: 600;
  text-align: right;
}

.totals_count,
.totals_amount {
  color: var(--color-accent-strong);
  font-size: 1.1rem;
}

.submit_row {
  padding: 1.5rem 1rem 2rem;
  display: flex;
  justify-content: center;
}

.submit_notice {
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.submit_notice p {
  margin: 0.2rem 0;
}

.submit_button {
  font: inherit;
  font-weight: 700;
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  min-width: 12rem;
  cursor: pointer;
}

.submit_button:hover {
  background: var(--color-accent-strong);
}

/* Thanks */
.thanks_box {
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 3rem 1rem;
  padding: 2rem 1rem;
}

.back_link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--color-accent);
}

/* Admin */
.admin_menu {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 1rem;
  padding: 1rem;
}

.admin_links {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.admin_links li {
  margin: 0.5rem 0;
}

.admin_links a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.admin_section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin: 1rem;
  padding: 1rem;
}

.admin_section_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.add_link {
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 600;
}

.alert.alert_success {
  background: #e8f4ea;
  border-color: var(--color-valid);
  color: #1e5026;
}

.invite_url {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  word-break: break-all;
  font-size: 0.85rem;
}

.invites {
  list-style: none;
  padding: 0;
  margin: 0;
}

.invite_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  gap: 0.5rem;
}

.invite_row:last-child {
  border-bottom: none;
}

.invite_row.used {
  opacity: 0.55;
}

.invite_name {
  font-weight: 600;
}

.invite_meta {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.badge_used {
  background: #efeae0;
  color: var(--color-muted);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.badge_pending {
  background: #e8f4ea;
  color: var(--color-valid);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.copy_btn {
  font: inherit;
  font-size: 0.85rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
}

/* Draft saved banner */
.draft_saved_banner {
  height: 0;
  overflow: hidden;
  font-size: 0.8rem;
  color: var(--color-valid);
  text-align: right;
  padding: 0 0.25rem;
  transition:
    height 0.15s ease,
    opacity 0.3s ease;
  opacity: 0;
}

.draft_saved_banner.draft_saved_visible {
  height: 1.4em;
  opacity: 1;
}

/* Order history (mypage) */
.order_history {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.history_card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  background: #fff;
}

.history_card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.history_date {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.badge_status {
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
}

.badge_mailed {
  background: #e8f4ea;
  color: var(--color-valid);
}

.badge_cancelled {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.badge_draft {
  background: #f0f0e8;
  color: var(--color-muted);
}

.history_items {
  border-top: 1px solid var(--color-border);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}

.history_item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.history_item_name {
  font-weight: 600;
  font-size: 0.9rem;
  flex: 1;
  overflow-wrap: anywhere;
}

.history_item_meta {
  color: var(--color-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.history_total {
  margin-top: 0.5rem;
  text-align: right;
  font-weight: 600;
  font-size: 0.9rem;
}

.history_mailed {
  display: block;
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--color-muted);
}

.history_note {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  font-style: italic;
}

/* Admin orders table */
.orders_table_wrap {
  overflow-x: auto;
}

.orders_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.orders_table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-muted);
  font-weight: 600;
  white-space: nowrap;
}

.orders_table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.td_num {
  text-align: right;
  white-space: nowrap;
}

.td_date {
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.td_name {
  font-weight: 600;
}

.order_row_cancelled td {
  opacity: 0.6;
}