/* 手機優先。烘豆師站在機台旁邊單手操作，按鈕要大。 */
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 0 3rem;
  font: 16px/1.6 system-ui, "Microsoft JhengHei", sans-serif;
  color: #1a1a1a; background: #faf8f5;
}
nav {
  display: flex; gap: .25rem; overflow-x: auto;
  background: #3a2a1e; padding: .5rem;
}
nav a {
  flex: 0 0 auto; color: #f0e6dc; text-decoration: none;
  padding: .6rem .9rem; border-radius: 6px; white-space: nowrap;
}
nav a:hover { background: #55402f; }
main { max-width: 900px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; color: #6b4f3a; }

.flash {
  max-width: 900px; margin: .75rem auto; padding: .75rem 1rem;
  background: #e8f4e0; border-left: 4px solid #5a8f3d; border-radius: 4px;
}

table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th, td { padding: .55rem .5rem; text-align: left; border-bottom: 1px solid #e5ddd3; }
th { font-size: .8rem; color: #8a7461; text-transform: uppercase; letter-spacing: .04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.wrap { overflow-x: auto; }

.card {
  background: #fff; border: 1px solid #e5ddd3; border-radius: 8px;
  padding: 1rem; margin-bottom: 1rem;
}
.code { font-family: ui-monospace, monospace; font-weight: 600; }
.box { display: inline-block; padding: .15rem .5rem; border-radius: 4px;
       background: #3a2a1e; color: #fff; font-family: ui-monospace, monospace; }
.due { color: #b02020; font-weight: 600; }
.muted { color: #8a7461; }
.empty { padding: 2rem; text-align: center; color: #8a7461; }

label { display: block; margin: .75rem 0 .2rem; font-size: .85rem; color: #6b4f3a; }
input, select, textarea {
  width: 100%; padding: .6rem; font-size: 1rem;
  border: 1px solid #cfc3b4; border-radius: 6px; background: #fff;
}
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > div { flex: 1 1 8rem; }
button {
  margin-top: 1rem; padding: .8rem 1.4rem; font-size: 1rem; font-weight: 600;
  color: #fff; background: #6b4f3a; border: 0; border-radius: 6px; cursor: pointer;
}
button:hover { background: #55402f; }
button.danger { background: #b02020; }
a.btn {
  display: inline-block; margin-top: .5rem; padding: .5rem 1rem;
  background: #6b4f3a; color: #fff; text-decoration: none; border-radius: 6px;
}

/* --- 待辦卡：系統主動說話的地方。烘豆師只該看這個。--- */
.task {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem; margin-bottom: .6rem;
  background: #fff; border: 1px solid #e5ddd3; border-left: 5px solid #cfc3b4;
  border-radius: 8px; text-decoration: none; color: inherit;
}
.task:hover { background: #fffdfa; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.task-icon { font-size: 1.6rem; flex: 0 0 auto; }
.task-body { flex: 1 1 auto; min-width: 0; }
.task-title { font-weight: 600; margin-bottom: .15rem; }
.task-detail { font-size: .88rem; color: #6b5c4d; }
.task-action { flex: 0 0 auto; font-size: .88rem; font-weight: 600; color: #6b4f3a; white-space: nowrap; }

.task.danger { border-left-color: #b02020; background: #fff6f5; }
.task.danger .task-title { color: #8f1616; }
.task.danger .task-action { color: #b02020; }
.task.todo   { border-left-color: #c8791f; background: #fffaf2; }
.task.todo   .task-action { color: #a05f14; }
.task.warn   { border-left-color: #8a7461; }
.task.info   { border-left-color: #cfc3b4; }

.allclear {
  padding: 2.5rem 1rem; text-align: center;
  background: #fff; border: 1px solid #e5ddd3; border-radius: 8px; margin-bottom: 1rem;
}
.allclear p { margin: .3rem 0; }

/* --- 身分選擇 --- */
.roles { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; }
.role {
  flex: 1 1 12rem; padding: 2rem 1rem; text-align: center; text-decoration: none; color: inherit;
  background: #fff; border: 2px solid #e5ddd3; border-radius: 12px;
}
.role:hover { border-color: #6b4f3a; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.role-icon { font-size: 2.6rem; }
.role-name { font-size: 1.2rem; font-weight: 700; margin: .5rem 0 .25rem; }
.role-desc { font-size: .85rem; color: #8a7461; }
.role-switch { margin-left: auto; opacity: .75; font-size: .85rem; }

/* --- Zeabur demo 用的橫幅 --- */
.demo-bar {
  padding: .5rem 1rem; text-align: center; font-size: .82rem;
  background: #c8791f; color: #fff;
}

/* 標籤列印：只留標籤本身，其他全部消失 */
@media print {
  nav, .noprint, .flash, .demo-bar { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
}