:root { --brand:#ffc107; --bg:#f0f2f5; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Kanit',sans-serif; background:var(--bg); margin:0; padding-bottom:140px; }

/* Topbar */
#topbar { position:fixed; top:0; left:0; width:100%; background:#fff; border-bottom:3px solid var(--brand); box-shadow:0 2px 8px rgba(0,0,0,.1); z-index:100; }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; }
.topbar-title { font-size:1rem; font-weight:700; margin:0; }
.topbar-sub { font-size:.7rem; color:#888; }

/* Body padding */
#main { padding: 70px 12px 0; }

/* Category header */
.cat-header { background:#212529; color:#fff; padding:8px 14px; border-radius:10px; margin:14px 0 6px; font-weight:600; font-size:.88rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; user-select:none; }
.cat-header .cat-count { font-size:.72rem; background:var(--brand); color:#000; border-radius:20px; padding:2px 8px; font-weight:700; }

/* Item card */
.item-card { background:#fff; border-radius:10px; padding:10px 14px; margin-bottom:6px; display:flex; align-items:center; gap:12px; box-shadow:0 1px 5px rgba(0,0,0,.06); transition:background .15s; cursor:pointer; }
.item-card.checked { background:#e8f5e9; }
.item-card.checked .item-th { color:#2e7d32; }
.item-card.checked .item-my { color:#388e3c; }

/* Checkbox */
.item-check { width:22px; height:22px; border-radius:6px; border:2px solid #ccc; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; font-size:13px; }
.item-card.checked .item-check { background:#43a047; border-color:#43a047; color:#fff; }

/* Text */
.item-text { flex:1; }
.item-th { font-size:.88rem; font-weight:600; color:#333; line-height:1.3; }
.item-my { font-size:.8rem; color:#888; line-height:1.4; margin-top:1px; }
.item-card.checked .item-my { color:#66bb6a; }

/* Note input */
.item-note { border:none; outline:none; background:#f8f9fa; border-radius:6px; padding:4px 8px; font-size:.75rem; font-family:'Kanit',sans-serif; color:#555; width:72px; flex-shrink:0; text-align:center; }
.item-note::placeholder { color:#bbb; font-size:.65rem; line-height:1.3; white-space:pre-wrap; }

/* Summary bar */
#summaryBar { position:fixed; bottom:0; left:0; width:100%; background:#fff; border-top:2px solid var(--brand); padding:10px 14px; box-shadow:0 -3px 12px rgba(0,0,0,.1); z-index:100; }
.sum-row { display:flex; gap:8px; align-items:center; }
.sum-count { background:#212529; color:#fff; border-radius:20px; padding:4px 12px; font-size:.78rem; font-weight:600; flex-shrink:0; }
#copyBtn { background:var(--brand); border:none; border-radius:20px; padding:8px 16px; font-size:.8rem; font-weight:700; font-family:'Kanit',sans-serif; cursor:pointer; flex:1; line-height:1.3; }
#resetBtn { background:#f5f5f5; border:1.5px solid #ddd; border-radius:20px; padding:8px 12px; font-size:.78rem; font-family:'Kanit',sans-serif; cursor:pointer; color:#555; flex-shrink:0; line-height:1.3; }

/* Summary modal */
.sum-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; align-items:flex-end; }
.sum-modal-overlay.show { display:flex; }
.sum-modal { background:#fff; border-radius:18px 18px 0 0; padding:16px; width:100%; max-height:80vh; overflow-y:auto; }
.sum-modal h5 { font-weight:700; margin:0 0 12px; font-size:.95rem; }
.sum-item { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #f0f0f0; font-size:.85rem; }
.sum-item .si-th { font-weight:600; }
.sum-item .si-my { font-size:.75rem; color:#888; }
.sum-item .si-note { font-size:.78rem; color:#0d6efd; font-weight:600; }
.copy-done { background:#d4edda; border:1px solid #c3e6cb; color:#155724; border-radius:8px; padding:8px 12px; font-size:.8rem; margin-top:10px; display:none; text-align:center; }
.close-sum-btn { width:100%; background:#212529; color:#fff; border:none; border-radius:10px; padding:10px; font-size:.88rem; font-family:'Kanit',sans-serif; font-weight:600; margin-top:12px; cursor:pointer; }

/* Category collapse */
.cat-items { }
.cat-items.collapsed { display:none; }

/* Saving overlay */
#savingOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:500; align-items:center; justify-content:center; flex-direction:column; gap:14px; }
#savingOverlay.show { display:flex; }
#savingOverlay .saving-box { background:#fff; border-radius:16px; padding:24px 32px; text-align:center; }
#savingOverlay .saving-spinner { font-size:2rem; animation:spin 1s linear infinite; display:block; }
#savingOverlay .saving-text { font-size:.95rem; font-weight:700; margin-top:8px; }
#savingOverlay .saving-sub { font-size:.75rem; color:#888; margin-top:4px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Language toggle */
.lang-btn { background:#f0f0f0; border:1.5px solid #ddd; border-radius:8px; padding:4px 9px; font-size:.7rem; font-weight:700; font-family:'Kanit',sans-serif; cursor:pointer; color:#555; transition:all .15s; }
.lang-btn.active { background:#212529; color:#fff; border-color:#212529; }

/* Admin mode */
body.is-admin #topbar { background:#1a237e; border-bottom-color:#3949ab; }
body.is-admin .topbar-title { color:#fff; }
body.is-admin .topbar-sub { color:#9fa8da; }
body.is-admin .lang-btn { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff; }
body.is-admin .lang-btn.active { background:#fff; color:#1a237e; }

.admin-badge { background:#e8eaf6; color:#1a237e; border-radius:8px; padding:3px 8px; font-size:.68rem; font-weight:700; margin-left:6px; }

/* Admin item card */
.admin-item { background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:8px; box-shadow:0 1px 5px rgba(0,0,0,.07); }
.admin-item-name { font-size:.9rem; font-weight:700; color:#1a237e; margin-bottom:4px; }
.admin-item-qty  { font-size:.75rem; color:#888; margin-bottom:8px; }
.admin-src-row   { display:flex; gap:8px; }
.src-btn { flex:1; border:2px solid #ddd; background:#f8f9fa; border-radius:10px; padding:9px 6px; font-family:'Kanit',sans-serif; font-size:.8rem; font-weight:700; cursor:pointer; text-align:center; transition:all .15s; color:#555; line-height:1.3; }
.src-btn.active-makro { background:#e8f5e9; border-color:#43a047; color:#2e7d32; }
.src-btn.active-stock { background:#e3f2fd; border-color:#1976d2; color:#0d47a1; }

/* Admin summary bar */
#adminBar { position:fixed; bottom:0; left:0; width:100%; background:#1a237e; border-top:2px solid #3949ab; padding:10px 14px; box-shadow:0 -3px 12px rgba(0,0,0,.15); z-index:100; display:none; }
body.is-admin #adminBar { display:block; }
body.is-admin #summaryBar { display:none; }
.admin-bar-row { display:flex; gap:8px; align-items:center; }
.admin-stat { color:#9fa8da; font-size:.73rem; flex:1; line-height:1.4; }
.admin-stat strong { color:#fff; font-size:.95rem; display:block; }
#adminSaveBtn { background:#ffc107; border:none; border-radius:20px; padding:9px 18px; font-size:.82rem; font-weight:700; font-family:'Kanit',sans-serif; cursor:pointer; flex-shrink:0; }

/* Week navigator (admin) */
.week-nav { display:none; align-items:center; gap:6px; background:#fff; border-radius:12px; padding:8px 10px; margin-bottom:10px; box-shadow:0 1px 5px rgba(0,0,0,.06); }
body.is-admin .week-nav { display:flex; }
.week-nav-btn { background:#e8eaf6; color:#1a237e; border:none; border-radius:8px; padding:6px 10px; font-size:1rem; font-family:'Kanit',sans-serif; cursor:pointer; font-weight:700; line-height:1; flex-shrink:0; }
.week-nav-btn:hover { background:#c5cae9; }
.week-nav-btn:disabled { opacity:.3; cursor:not-allowed; }
.week-nav-center { flex:1; text-align:center; cursor:pointer; }
.week-nav-id { font-weight:700; font-size:.9rem; color:#1a237e; }
.week-nav-range { font-size:.7rem; color:#666; }
.week-nav-badge { display:inline-block; font-size:.65rem; padding:1px 6px; border-radius:8px; margin-left:4px; font-weight:700; vertical-align:middle; }
.week-nav-badge.closed { background:#ffcdd2; color:#c62828; }
.week-nav-badge.current { background:#c8e6c9; color:#2e7d32; }
.week-nav-badge.future { background:#fff9c4; color:#f57c00; }

/* Closed banner */
.closed-banner { display:none; background:#fff3e0; border:2px solid #ffb74d; border-radius:12px; padding:10px 14px; margin-bottom:10px; align-items:center; gap:10px; }
.closed-banner.show { display:flex; }
.closed-banner .icon { font-size:1.5rem; }
.closed-banner .text { flex:1; font-size:.82rem; color:#e65100; line-height:1.4; }
.closed-banner .text strong { display:block; font-weight:700; }
.closed-banner button { background:#ff9800; color:#fff; border:none; border-radius:8px; padding:7px 12px; font-family:'Kanit',sans-serif; font-size:.78rem; font-weight:700; cursor:pointer; flex-shrink:0; }

/* Close-week button (in admin bar) */
#closeWeekBtn { background:#43a047; color:#fff; border:none; border-radius:20px; padding:9px 14px; font-size:.8rem; font-weight:700; font-family:'Kanit',sans-serif; cursor:pointer; flex-shrink:0; display:none; line-height:1.3; }
#closeWeekBtn:hover { background:#2e7d32; }

/* Toast */
#toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
  background:#1b5e20; color:#fff; border-radius:16px; padding:18px 28px;
  font-size:1.1rem; font-weight:700; text-align:center; z-index:999;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; min-width:220px; }
#toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
#toast .toast-sub { font-size:.75rem; font-weight:400; margin-top:4px; opacity:.85; }