/* =========================================================
   ระบบ POS หน้าร้าน — Shared Design Tokens & Base Styles
   ใช้ร่วมกันทุกหน้าจอ เพื่อความสม่ำเสมอของดีไซน์
   ========================================================= */
:root{
  --red-900:#7A1319;
  --red-800:#9E1B1F;
  --red-700:#C2211F;
  --red-600:#DA2A24;
  --red-500:#E8352A;
  --red-100:#FBDCD8;
  --red-50:#FCEEEC;
  --paper:#FBF7F3;
  --card:#FFFFFF;
  --ink:#2A1E1B;
  --ink-soft:#6E5D58;
  --ink-faint:#A6968F;
  --line:#EFE3DC;
  --green:#1D8A55;
  --green-bg:#E4F5EB;
  --amber:#C77E1E;
  --amber-bg:#FBF0DD;
  --gold:#D9A441;
  --blue:#2564C4;
  --blue-bg:#E7F0FB;
  --shadow: 0 1px 2px rgba(122,19,25,.04), 0 8px 24px -12px rgba(122,19,25,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans Thai',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Noto Sans Thai',sans-serif; font-weight:700; margin:0;}
a{color:inherit;}
button{font-family:'Noto Sans Thai',sans-serif;}

/* ---------- layout shell (sidebar + main) ---------- */
/* ---------- layout shell (sidebar + main) ---------- */
.shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #FFF8F8; /* very light pinkish-white */
  border-right: 1px solid var(--line);
  color: var(--ink);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  box-sizing: border-box;
}
.sidebar-close { display: none; }

.brand { display: none; } /* Brand is moved to Topbar */

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  background: var(--paper);
  box-sizing: border-box;
}

.topbar {
  height: 60px;
  background: var(--red-700); /* solid red */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(122, 19, 25, 0.08);
  box-sizing: border-box;
}

@media (min-width: 1025px) {
  .shell {
    display: block;
  }
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .sidebar {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    width: 248px;
    z-index: 90;
  }
  .main {
    margin-left: 248px;
    margin-top: 60px;
  }
}


.brand { display: none; } /* Brand is moved to Topbar */

.nav-group-label {
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 12px 6px;
  font-weight: 700;
}

.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all .15s ease;
}
.nav a .ic { width: 18px; height: 18px; flex: none; opacity: .7; stroke: currentColor; }
.nav a:hover {
  background: #FFEBEB; /* soft pink hover */
  color: var(--red-700);
}
.nav a.active {
  background: #FFE8E8; /* pink active background */
  color: var(--red-700); /* red text */
  font-weight: 700;
  box-shadow: none; /* remove dark drop shadow */
}
.nav a.active .ic { opacity: 1; stroke: var(--red-700); }

.sidebar-foot { margin-top: auto; padding-top: 20px; }
.shop-card {
  background: #FFEBEB; /* soft pink background */
  border: 1px solid var(--red-100);
  border-radius: 12px;
  padding: 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.shop-card .row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.shop-card .dot { width: 7px; height: 7px; border-radius: 50%; background: #38D67A; }
.shop-card .icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--red-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.shop-card b { color: var(--ink); font-weight: 600; font-size: 13px; }

.menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  align-items: center;
  justify-content: center;
  color: #fff;
  border: none;
  cursor: pointer;
  flex: none;
}
.overlay { display: none; }

.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.page-title { display: none; } /* Page title hidden, using logo instead */

.branch-pill{display:flex; align-items:center; gap:8px; background:var(--red-50); border:1px solid var(--red-100); padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600; color:var(--red-700);}
.bell{width:38px;height:38px;border-radius:10px; background:var(--red-50); display:flex;align-items:center;justify-content:center; position:relative; color:var(--red-700);}
.bell::after{content:'';position:absolute; top:8px; right:8px; width:7px;height:7px;border-radius:50%; background:var(--gold); border:2px solid #fff;}
.user{display:flex;align-items:center;gap:10px;}
.avatar{width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg,var(--red-500),var(--gold)); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;}
.user b{font-size:13px; display:block;}
.user span{font-size:11.5px; color:var(--ink-faint);}

.content{padding:26px; display:flex; flex-direction:column; gap:22px; flex:1; min-width:0;}

/* ---------- common components ---------- */
.panel{background:var(--card); border-radius:18px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--line);}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap;}
.panel-title{font-weight:600; font-size:15px;}
.panel-link{font-size:12px; color:var(--red-600); font-weight:600; text-decoration:none; background:none; border:none; cursor:pointer;}

.btn{border:none; border-radius:11px; padding:12px 20px; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;}
.btn-primary{background:var(--red-600); color:#fff;}
.btn-primary:hover{background:var(--red-700);}
.btn-primary:disabled{background:var(--ink-faint); cursor:not-allowed;}
.btn-light{background:#fff; color:var(--red-700); border:1px solid var(--red-100);}
.btn-outline{background:var(--red-50); color:var(--red-700); border:1px solid var(--red-100);}
.btn-ghost{background:var(--paper); color:var(--ink-soft); border:1px solid var(--line);}
.btn-sm{padding:8px 14px; font-size:12.5px; border-radius:9px;}
.btn-icon{width:34px;height:34px; padding:0; border-radius:9px; display:flex; align-items:center; justify-content:center;}

.input, select.input, textarea.input{
  width:100%; border:1px solid var(--line); background:var(--paper); border-radius:10px;
  padding:10px 12px; font-size:13.5px; font-family:'Noto Sans Thai',sans-serif; color:var(--ink);
}
.input:focus, select.input:focus, textarea.input:focus{outline:none; border-color:var(--red-500); background:#fff;}
.field-label{font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; display:block;}

.badge{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-block;}
.badge-green{color:var(--green); background:var(--green-bg);}
.badge-amber{color:var(--amber); background:var(--amber-bg);}
.badge-red{color:var(--red-600); background:var(--red-50);}
.badge-gray{color:var(--ink-faint); background:var(--line);}

table.data-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.data-table thead th{
  text-align:left; font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;
  padding:10px 12px; border-bottom:1px solid var(--line); font-weight:700;
}
table.data-table tbody td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.data-table tbody tr:hover{background:var(--red-50);}
table.data-table tbody tr:last-child td{border-bottom:none;}

.empty-state{text-align:center; padding:40px 20px; color:var(--ink-faint);}
.empty-state svg{margin-bottom:10px; opacity:.5;}

.toast{
  position:fixed; bottom:24px; right:24px; background:var(--ink); color:#fff; padding:14px 18px;
  border-radius:12px; font-size:13.5px; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:200;
  display:flex; align-items:center; gap:10px; transform:translateY(20px); opacity:0; transition:all .25s ease;
}
.toast.show{transform:translateY(0); opacity:1;}
.toast.error{background:var(--red-700);}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(42,30,27,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-backdrop.show{display:flex;}
.modal{background:#fff; border-radius:18px; max-width:420px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line);}
.modal-body{padding:20px;}
.modal-foot{padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end;}
.modal-close{width:30px;height:30px; border-radius:8px; border:none; background:var(--paper); display:flex;align-items:center;justify-content:center; cursor:pointer; color:var(--ink-soft);}

svg{display:block;}

/* ---------- responsive shell ---------- */
@media (max-width: 1024px){
  .shell{grid-template-columns:1fr;}
  .sidebar{position:fixed; top:0; left:0; bottom:0; width:250px; z-index:50; transform:translateX(-100%); transition:transform .25s ease;}
  .sidebar.open{transform:translateX(0); box-shadow:20px 0 40px rgba(0,0,0,.25);}
  .sidebar-close{display:flex; margin-left:auto; width:30px;height:30px;border-radius:8px; background:rgba(255,255,255,.12); border:none; color:#fff; align-items:center; justify-content:center; cursor:pointer;}
  .menu-btn{display:flex;}
  .overlay{display:none; position:fixed; inset:0; background:rgba(42,30,27,.45); z-index:40;}
  .overlay.show{display:block;}
}
@media (max-width: 860px){
  .content{padding:16px;}
  .topbar{padding:0 14px;}
}