/* ============================================================
   Stone Camp - ธีมหลัก (resort / camping)
   --sc-accent ถูกกำหนดจากการตั้งค่าระบบ (theme_color)
   ============================================================ */
:root{
  --sc-accent:#2f6e4f;
  --sc-accent-dark:#244f3a;
  --sc-bg:#f4f6f4;
  --sc-sidebar-w:248px;
}

*{ -webkit-tap-highlight-color: transparent; }
body{
  background:var(--sc-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Sarabun",Tahoma,sans-serif;
  color:#23302a;
}

/* ---------- Layout ---------- */
.sc-layout{ display:flex; min-height:100vh; }

.sc-sidebar{
  width:var(--sc-sidebar-w);
  background:linear-gradient(180deg,var(--sc-accent),var(--sc-accent-dark));
  color:#eaf3ee;
  position:fixed; top:0; bottom:0; left:0; z-index:1040;
  display:flex; flex-direction:column;
  transition:transform .25s ease;
}
.sc-brand{
  display:flex; align-items:center; gap:12px;
  padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.12);
}
.sc-brand .bi{ font-size:1.8rem; }
.sc-brand-name{ font-weight:700; font-size:1.05rem; line-height:1.1; }
.sc-brand-sub{ font-size:.72rem; opacity:.7; }

.sc-nav{ padding:10px; overflow-y:auto; flex:1; }
.sc-nav-section{
  font-size:.98rem; font-weight:800; letter-spacing:.01em;
  color:#fff; padding:11px 12px; margin-top:8px;
}
.sc-nav-section:first-child{ margin-top:0; }
.sc-nav-item{
  display:flex; align-items:center; gap:11px;
  padding:8px 14px 8px 28px; margin-bottom:2px; border-radius:10px;
  color:#bccfc4; text-decoration:none; font-size:.86rem; font-weight:500;
  transition:background .15s, color .15s;
}
.sc-nav-item .bi{ font-size:1rem; width:18px; text-align:center; }
.sc-nav-item:hover{ background:rgba(255,255,255,.1); color:#fff; }
.sc-nav-item.active{ background:#fff; color:var(--sc-accent-dark); font-weight:600; }

/* ----- กลุ่มเมนูแบบพับได้ (dropdown) ----- */
.sc-nav-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; background:none; border:0; cursor:pointer;
  text-align:left; border-radius:8px;
}
.sc-nav-toggle:hover{ color:rgba(255,255,255,.75); background:rgba(255,255,255,.06); }
.sc-nav-caret{ font-size:.85rem; opacity:.6; transition:transform .2s ease; }
.sc-nav-group:not(.open) .sc-nav-caret{ transform:rotate(-90deg); }
.sc-nav-items{ overflow:hidden; max-height:600px; transition:max-height .25s ease; }
.sc-nav-group:not(.open) .sc-nav-items{ max-height:0; }

.sc-sidebar-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1035; display:none;
}
.sc-sidebar-backdrop.show{ display:block; }

.sc-main{
  flex:1; margin-left:var(--sc-sidebar-w);
  display:flex; flex-direction:column; min-width:0;
}
.sc-topbar{
  background:#fff; border-bottom:1px solid #e3e9e5;
  padding:12px 20px; display:flex; align-items:center; gap:14px;
  position:sticky; top:0; z-index:1020;
}
.sc-page-title{ font-size:1.15rem; font-weight:700; margin:0; flex:1; }
.sc-topbar-right{ display:flex; align-items:center; gap:10px; }
.sc-user{ font-size:.9rem; color:#5a6b62; }
.sc-role-badge{ background:var(--sc-accent); color:#fff; font-weight:500; }

.sc-content{ padding:20px; flex:1; }

/* ---------- Cards / stats ---------- */
.sc-card{ border:none; border-radius:14px; box-shadow:0 2px 10px rgba(31,61,46,.06); }
.sc-card .card-title{ font-weight:700; font-size:.98rem; margin-bottom:14px; }

.sc-stat .card-body{ position:relative; }
.sc-stat-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin-bottom:10px;
}
.sc-stat-label{ font-size:.82rem; color:#7c8a82; }
.sc-stat-value{ font-size:1.5rem; font-weight:700; line-height:1.2; }

.sc-best .list-group-item{ border-color:#eef2ef; font-size:.9rem; }
.sc-rank{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--sc-accent); color:#fff; font-size:.75rem; margin-right:6px;
}

/* ---------- Buttons ---------- */
.btn-sc{ background:var(--sc-accent); border-color:var(--sc-accent); color:#fff; }
.btn-sc:hover{ background:var(--sc-accent-dark); border-color:var(--sc-accent-dark); color:#fff; }
.btn-outline-sc{ color:var(--sc-accent); border-color:var(--sc-accent); }
.btn-outline-sc:hover{ background:var(--sc-accent); color:#fff; }

a{ color:var(--sc-accent-dark); }

/* ---------- Login ---------- */
.sc-auth-bg{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--sc-accent),var(--sc-accent-dark));
  padding:20px;
}
.sc-login-card{
  background:#fff; border-radius:18px; padding:36px 32px;
  width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.sc-login-logo{
  width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
  background:var(--sc-accent); color:#fff; font-size:1.8rem;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .sc-sidebar{ transform:translateX(-100%); }
  .sc-sidebar.show{ transform:translateX(0); }
  .sc-main{ margin-left:0; }
}

/* ---------- POS ---------- */
.sc-pos{ display:flex; gap:16px; align-items:flex-start; }
.sc-pos-left{ flex:1; min-width:0; }
.sc-pos-right{ width:360px; flex-shrink:0; position:sticky; top:84px; height:calc(100vh - 104px); }
.sc-pos-right .card{ height:100%; }

.sc-table-btn{ min-width:72px; font-weight:600; }
.sc-table-btn[draggable="true"]{ cursor:grab; }
.sc-table-btn[draggable="true"]:active{ cursor:grabbing; }
.sc-table-btn.sc-drop-ok{ outline:2px dashed var(--sc-accent); outline-offset:2px; background:#eaf5ee; }
.sc-cat-tabs .nav-link{ padding:.35rem .8rem; font-size:.88rem; color:var(--sc-accent-dark); }
.sc-cat-tabs .nav-link.active{ background:var(--sc-accent); }

.sc-prod-btn{
  position:relative; border:1px solid #e0e7e2; background:#fff; border-radius:12px;
  padding:14px 8px; display:flex; flex-direction:column; gap:4px; align-items:center;
  text-align:center; transition:.12s; min-height:84px;
}
.sc-prod-btn:hover{ border-color:var(--sc-accent); box-shadow:0 4px 12px rgba(47,110,79,.15); }
.sc-prod-out{ background:#f1f3f4; opacity:.6; cursor:not-allowed; }
.sc-prod-out:hover{ border-color:#e0e7e2; box-shadow:none; }
.sc-prod-out .sc-prod-name{ color:#888; }
.sc-prod-name{ font-size:.86rem; font-weight:600; line-height:1.15; }
.sc-prod-price{ font-size:.82rem; color:var(--sc-accent); font-weight:700; }
.sc-prod-tag{ position:absolute; top:4px; right:4px; font-size:.6rem; color:#fff; padding:1px 6px; border-radius:6px; }

.sc-oitem{ border-bottom:1px dashed #e3e9e5; padding:8px 0; }
.sc-oitem:last-child{ border-bottom:none; }

@media (max-width: 991.98px){
  .sc-pos{ flex-direction:column; }
  .sc-pos-right{ width:100%; position:static; height:auto; }
}

/* ---------- หน้ารายงาน (สีสัน + อ่านง่าย) ---------- */
.sc-reports .card-title{ display:inline-flex; align-items:center; gap:7px; }
/* หัวตารางสีเขียวอ่อน ตัวหนา อ่านง่าย */
.sc-reports .table > thead > tr > th{
  background:#e9f2ec; color:#23503a; font-weight:700;
  border-bottom:2px solid #cfe2d6; white-space:nowrap;
}
/* แถบสลับสี (zebra) ให้ไล่สายตาตามแถวง่าย */
.sc-reports .table:not(.sc-no-zebra) > tbody > tr:nth-of-type(even) > *{ background:#f5f9f6; }
/* คงสีแดงของแถว "ของหาย" ไว้ ไม่ให้ zebra ทับ */
.sc-reports .table > tbody > tr.table-danger > *{ background:#f8d7da !important; }
/* แถบสีบนหัวการ์ดแต่ละส่วน แยกเรื่องด้วยสี */
.sc-reports .sc-sec{ border-top:3px solid var(--rc,#2f6e4f); }
.sc-reports tfoot tr.fw-bold > *, .sc-reports tfoot tr.fw-semibold > *{ border-top:2px solid #cfe2d6; }

/* ---------- การ์ดหมวดหมู่ ---------- */
.sc-cat-card{
  position:relative; border:none; border-radius:16px;
  box-shadow:0 2px 10px rgba(31,61,46,.06); background:#fff;
  text-align:center; padding:24px 14px 16px; height:100%;
  transition:transform .15s, box-shadow .15s;
}
.sc-cat-card:hover{ box-shadow:0 8px 20px rgba(31,61,46,.12); transform:translateY(-2px); }
.sc-cat-icon{
  width:62px; height:62px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px; color:#fff; font-size:1.7rem;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.sc-cat-name{ font-weight:700; font-size:1.02rem; line-height:1.2; }
.sc-cat-count{ font-size:.84rem; color:#7c8a82; margin-top:2px; }
.sc-cat-actions{ margin-top:12px; display:flex; gap:6px; justify-content:center; }
.sc-cat-grip{ position:absolute; top:10px; left:12px; color:#c4ccc7; cursor:grab; }
.sc-cat-grip:active{ cursor:grabbing; }
.sc-cat-off-badge{ position:absolute; top:10px; right:12px; }
.sc-cat-card.is-off{ opacity:.62; }
.sc-cat-card.sc-dragging{ opacity:.4; outline:2px dashed var(--sc-accent); }

/* ---------- KDS (หน้าครัว) ---------- */
.sc-kds{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.sc-ticket{ border-radius:14px; border:2px solid #e0e7e2; background:#fff; overflow:hidden; }
.sc-ticket.is-cooking{ border-color:#ffc107; }
.sc-ticket-head{ padding:10px 14px; background:#f6f8f6; display:flex; justify-content:space-between; align-items:center; }
.sc-ticket-time{ font-size:.8rem; }
.sc-ticket-time.warn{ color:#dc3545; font-weight:700; }
.sc-ticket-body{ padding:10px 14px; }
.sc-kitem{ padding:6px 0; border-bottom:1px dashed #eef2ef; }
.sc-kitem.done{ opacity:.45; text-decoration:line-through; }
.sc-kitem-note{ color:#0d6efd; font-size:.82rem; }

/* ---------- Print (ใบเสร็จ) ---------- */
@media print{
  .sc-sidebar, .sc-topbar, .no-print{ display:none !important; }
  .sc-main{ margin-left:0; }
  .sc-content{ padding:0; }
  body{ background:#fff; }
}