* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif;
  margin: 0;
  color: #222;
  background: #f5f5f5;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #2c3e50;
  color: #fff;
}

.app-title {
  margin: 0;
  font-size: 1.25rem;
}

.app-title a {
  color: #fff;
  text-decoration: none;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-nav .user {
  font-size: 0.9rem;
}

.logout-form button {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}

.app-main {
  max-width: 1200px;
  margin: 1rem auto;
  padding: 0 1rem;
}

.login {
  max-width: 420px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.login-form label {
  display: block;
  margin: 0.5rem 0;
}

.login-form input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.login-form button {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.flash {
  padding: 0.5rem 0.75rem;
  background: #e3f4e3;
  border: 1px solid #a3d3a3;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.home-links {
  list-style: none;
  padding: 0;
}

.home-links li {
  margin: 0.5rem 0;
}

.home-links a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-decoration: none;
  color: #2c3e50;
}

.home-links a:hover {
  background: #f0f0f0;
}

/* ===== Order Grid ===== */

.period-state {
  font-size: 0.9rem;
  color: #555;
}

.readonly-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-left: 0.5rem;
  background: #e67e22;
  color: #fff;
  border-radius: 3px;
  font-size: 0.8rem;
}

.grid-wrapper {
  overflow-x: auto;
  max-height: 75vh;
  border: 1px solid #ccc;
  background: #fff;
}

table.order-grid {
  border-collapse: collapse;
  font-size: 0.85rem;
}

table.order-grid th,
table.order-grid td {
  border: 1px solid #ccc;
  padding: 2px 4px;
  text-align: center;
  white-space: nowrap;
}

table.order-grid thead th {
  position: sticky;
  top: 0;
  background: #34495e;
  color: #fff;
  z-index: 2;
}

table.order-grid .sticky-col {
  position: sticky;
  left: 0;
  background: #ecf0f1;
  z-index: 1;
}

table.order-grid thead th.sticky-col {
  left: 0;
  z-index: 3;
}

table.order-grid .name {
  min-width: 8em;
  text-align: left;
}

table.order-grid .sat {
  background: #e6f2ff;
}

table.order-grid .sun {
  background: #ffe6e6;
}

table.order-grid .day-holiday {
  background: #f5d6d6;
}

table.order-grid .day-curry {
  background: #fff4cc;
}

table.order-grid .curry::after {
  content: " ｶ";
  color: #d35400;
}

table.order-grid td.flash-ok {
  background: #d4edda !important;
}

table.order-grid td.flash-err {
  background: #f8d7da !important;
}

.cell-select {
  min-width: 5em;
  font-size: 0.85rem;
}

/* ===== Eater (mobile-friendly) View ===== */

.me-day-list {
  list-style: none;
  padding: 0;
  max-width: 600px;
}

.me-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid #ddd;
  margin-bottom: 0.25rem;
  background: #fff;
}

.me-day.sat { background: #f2f7fc; }
.me-day.sun { background: #fcf2f2; }
.me-day.curry { background: #fffbe6; }

.me-day-date {
  flex: 1;
}

.me-day .cell-select {
  min-width: 10em;
}

/* ===== Summary / Billing ===== */

.summary-table {
  border-collapse: collapse;
  background: #fff;
  min-width: 100%;
}

.summary-table th,
.summary-table td {
  border: 1px solid #ccc;
  padding: 0.25rem 0.5rem;
  text-align: right;
}

.summary-table th {
  background: #34495e;
  color: #fff;
  position: sticky;
  top: 0;
}

.summary-table tr.sat { background: #eaf3fa; }
.summary-table tr.sun { background: #fae8e8; }

.btn-csv {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: #27ae60;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  margin: 0.5rem 0;
}

.billing-actions form {
  display: inline-block;
  margin-right: 0.5rem;
}

.billing-actions button {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  background: #fff;
}

.master-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin: 1rem 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid #ddd;
}

.master-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}

.master-form input,
.master-form select {
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.inline-form {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.ym-nav {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}

.audit-table pre.json {
  max-width: 30em;
  max-height: 12em;
  overflow: auto;
  margin: 0;
  font-size: 0.75rem;
  background: #f7f7f7;
  padding: 0.25rem;
  white-space: pre-wrap;
  word-break: break-all;
  text-align: left;
}

.pager {
  margin-top: 1rem;
  text-align: center;
}

.pager a {
  margin: 0 1rem;
}