/* Sevenday POS — "งานของฉัน" + จอบอร์ดงาน (tasks.js) · ใช้สีจาก style.css */
/* hidden ต้องชนะ display ของ class ด้านล่าง (จอบอร์ด / เมนูย่อย / ตัวเลขบนเมนู) */
.tk-comm[hidden], .tk-board[hidden], .tk-menu[hidden], .tk-badge[hidden], #tk-scope[hidden], .tk-done-wrap[hidden] { display: none !important; }
.menu li .tk-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: 'Geist', sans-serif; }
.menu li .tk-badge.late { background: #c62828; }
.tk-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.tk-head h2 { margin: 0; font-size: 22px; }
.tk-head p { margin: 4px 0 0; color: var(--on-surface-variant, #555); font-size: 14px; max-width: 60ch; }
.tk-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tk-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.tk-seg button { border: 0; background: none; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--on-surface-variant, #555); }
.tk-seg button[aria-pressed="true"] { background: var(--primary-container); color: var(--on-primary-container, #fff); font-weight: 600; }
.tk-tool { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.tk-tool .material-symbols-outlined { font-size: 18px; }
.tk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.tk-stat { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.tk-stat b { display: block; font-size: 24px; font-family: 'Geist', sans-serif; }
.tk-stat span { font-size: 12.5px; color: var(--on-surface-variant, #555); }
.tk-stat.late b { color: #c62828; } .tk-stat.today b { color: #b26a00; } .tk-stat.done b { color: #2e7d32; }
.tk-list { display: flex; flex-direction: column; gap: 10px; }
.tk-card { background: #fff; border: 1px solid var(--border); border-left: 5px solid #9e9e9e; border-radius: 10px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.tk-card.tk-late { border-left-color: #c62828; background: #fff7f6; }
.tk-card.tk-today { border-left-color: #e0a100; }
.tk-card.tk-doing { box-shadow: inset 0 0 0 1px var(--primary-fixed-dim, #c3c0ff); }
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.tk-mod { padding: 1px 8px; border-radius: 10px; font-weight: 600; background: #eceff1; color: #37474f; }
.tk-mod-sale { background: #e3f2fd; color: #1565c0; } .tk-mod-repairs { background: #fff3e0; color: #e65100; }
.tk-mod-purchase { background: #f3e5f5; color: #6a1b9a; } .tk-mod-inventory { background: #e8f5e9; color: #2e7d32; } .tk-mod-owner { background: #fce4ec; color: #ad1457; }
.tk-state { color: var(--primary); font-weight: 600; }
.tk-due { color: var(--on-surface-variant, #555); }
.tk-late .tk-due { color: #c62828; font-weight: 600; }
.tk-title { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.tk-detail { font-size: 13.5px; color: var(--on-surface-variant, #555); overflow-wrap: anywhere; }
.tk-note { font-size: 13px; background: #f5f5f5; border-radius: 6px; padding: 4px 8px; }
.tk-actions { display: flex; gap: 6px; align-items: center; position: relative; flex-shrink: 0; }
.tk-btn { border-radius: 8px; padding: 9px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--border); background: #fff; }
.tk-btn .material-symbols-outlined { font-size: 19px; }
.tk-done { background: #2e7d32; border-color: #2e7d32; color: #fff; min-height: 44px; padding: 9px 18px; }
.tk-done:hover { background: #256b29; }
.tk-more { padding: 9px 8px; }
.tk-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 20; display: flex; flex-direction: column; min-width: 150px; }
.tk-menu button { border: 0; background: none; padding: 10px 14px; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.tk-menu button:hover { background: #f5f5f5; }
.tk-empty { text-align: center; padding: 40px 16px; background: #fff; border: 1px dashed var(--border); border-radius: 12px; }
.tk-empty .material-symbols-outlined { font-size: 40px; color: #2e7d32; }
.tk-empty div { font-weight: 600; font-size: 16px; margin-top: 6px; }
.tk-empty p { color: var(--on-surface-variant, #555); font-size: 13.5px; margin: 6px auto 0; max-width: 48ch; }
.tk-done-wrap { margin-top: 20px; }
.tk-done-wrap summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--on-surface-variant, #555); }
.tk-done-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.tk-done-row { display: flex; gap: 8px; align-items: center; font-size: 13.5px; padding: 6px 8px; background: #fff; border-radius: 6px; flex-wrap: wrap; }
.tk-done-row .material-symbols-outlined { font-size: 18px; color: #2e7d32; }
.tk-done-row.is-cancel .material-symbols-outlined { color: #9e9e9e; }
.tk-done-title { flex: 1; min-width: 0; text-decoration: line-through; color: var(--on-surface-variant, #555); overflow-wrap: anywhere; }
.tk-done-meta { font-size: 12.5px; color: var(--on-surface-variant, #777); display: inline-flex; gap: 8px; align-items: center; }
.tk-link { border: 0; background: none; color: var(--primary); cursor: pointer; font: inherit; font-size: 12.5px; text-decoration: underline; padding: 0; }
.tk-updated { font-size: 12px; color: var(--on-surface-variant, #777); margin-top: 12px; }
#tk-cancel-modal .tk-cancel-err { color: #c62828; font-size: 13px; min-height: 18px; }
@media (max-width: 640px) {
  .tk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tk-card { flex-direction: column; align-items: stretch; }
  .tk-actions { justify-content: flex-end; }
}

/* จอบอร์ดงาน: ตัวใหญ่ อ่านจากระยะไกล ไม่มีปุ่มกด */
.tk-board { position: fixed; inset: 0; z-index: 900; background: #10151a; color: #f1f4f6; padding: 20px 24px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
body.tk-board-on .app { display: none !important; }
.tkb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tkb-head h2 { margin: 0; font-size: 30px; }
.tkb-meta { display: flex; gap: 18px; align-items: center; font-size: 18px; color: #b0bec5; }
.tkb-exit { background: none; border: 1px solid #455a64; color: #b0bec5; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; }
.tkb-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; flex: 1; }
.tkb-col { background: #1a2229; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tkb-col h3 { margin: 0 0 4px; font-size: 22px; display: flex; justify-content: space-between; }
.tkb-late h3 { color: #ff8a80; } .tkb-today h3 { color: #ffd54f; } .tkb-later h3 { color: #b0bec5; }
.tk-board .tk-card { background: #222c34; border-color: #2f3c46; color: #f1f4f6; }
.tk-board .tk-card.tk-late { background: #3a1f1f; }
.tk-board .tk-title { font-size: 20px; }
.tk-board .tk-detail, .tk-board .tk-due { color: #b0bec5; font-size: 15px; }
.tk-board .tk-late .tk-due { color: #ff8a80; }
.tk-board .tk-tags { font-size: 14px; }
.tkb-none { color: #607d8b; font-size: 22px; text-align: center; padding: 20px; }
@media (max-width: 900px) { .tkb-cols { grid-template-columns: 1fr; } }

.tk-comm { display: flex; gap: 10px; align-items: center; background: #e8f5e9; color: #1b5e20; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.tk-comm small { display: block; color: #2e7d32; font-size: 12.5px; }
/* แท่งเวลานับถอยหลัง: เต็ม = เพิ่งได้งาน · หดลงจนถึงกำหนด · เกินกำหนด = แดงเต็มและนับเวลาที่เกิน */
.tk-cd { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 6px 0 2px; }
.tk-cd-track { flex: 1; height: 8px; background: #eceff1; border-radius: 4px; overflow: hidden; min-width: 80px; }
.tk-cd-track i { display: block; height: 100%; width: 100%; background: #43a047; border-radius: 4px; transition: width .9s linear, background .3s; }
.tk-cd-txt { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: #2e7d32; }
.tk-cd-warn .tk-cd-track i { background: #f9a825; } .tk-cd-warn .tk-cd-txt { color: #8a6100; }
.tk-cd-red .tk-cd-track i { background: #ef6c00; } .tk-cd-red .tk-cd-txt { color: #c62828; }
.tk-cd-late .tk-cd-track i { background: #c62828; animation: tk-cd-blink 1.2s ease-in-out infinite; } .tk-cd-late .tk-cd-txt { color: #c62828; }
@keyframes tk-cd-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tk-cd-track i { transition: none; animation: none !important; } }
.tk-board .tk-cd-track { background: #37474f; height: 10px; }
.tk-board .tk-cd-txt { font-size: 16px; }
.tk-board .tk-cd-ok .tk-cd-txt { color: #81c784; } .tk-board .tk-cd-warn .tk-cd-txt { color: #ffd54f; } .tk-board .tk-cd-red .tk-cd-txt, .tk-board .tk-cd-late .tk-cd-txt { color: #ff8a80; }
/* ร้านปิด: หยุดนับ — แท่งเป็นสีเทา ไม่กะพริบ */
.tk-cd.tk-cd-pause .tk-cd-track i { animation: none; opacity: .55; }
.tk-cd.tk-cd-pause .tk-cd-txt { color: #607d8b; }
.tk-cd-pz { flex-basis: 100%; font-size: 12px; color: #607d8b; }
.tk-cd-pz:empty { display: none; }
.tk-board .tk-cd-pz { color: #90a4ae; font-size: 14px; }