/* ═══════════════════════════════════════════════════════════
   KEBIO — Google-style shared stylesheet  v2 (mobile-first)
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --blue:    #1a73e8;
  --blue-dk: #1765cc;
  --red:     #d93025;
  --green:   #1e8e3e;
  --yellow:  #f9ab00;
  --navy:    #001e63;
  --text:    #202124;
  --text-2:  #5f6368;
  --text-3:  #80868b;
  --border:  #dadce0;
  --bg:      #f8f9fa;
  --white:   #ffffff;
  --hover:   #f1f3f4;
  --focus:   rgba(26,115,232,.12);
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --shadow-1: 0 1px 2px rgba(60,64,67,.3),  0 1px 3px  rgba(60,64,67,.15);
  --shadow-2: 0 1px 3px rgba(60,64,67,.3),  0 4px 8px  rgba(60,64,67,.15);
  --shadow-3: 0 2px 6px rgba(60,64,67,.3),  0 6px 20px rgba(60,64,67,.19);
  --shadow-4: 0 4px 8px rgba(60,64,67,.3),  0 12px 24px rgba(60,64,67,.2);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body { font-family: 'Roboto', Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Typography ── */
.g-h1 { font-family:'Google Sans','Roboto',sans-serif; font-size:22px; font-weight:400; color:var(--text); }
.g-h2 { font-family:'Google Sans','Roboto',sans-serif; font-size:18px; font-weight:500; color:var(--text); }
.g-h3 { font-family:'Google Sans','Roboto',sans-serif; font-size:15px; font-weight:500; color:var(--text); }
.g-sub{ font-size:13px; color:var(--text-2); }
.g-cap{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.8px; color:var(--text-3); }

/* ── Page wrappers ── */
.g-page    { max-width:1200px; margin:0 auto; padding:16px 12px; }
.g-page-sm { max-width:900px;  margin:0 auto; padding:16px 12px; }
.g-page-xs { max-width:600px;  margin:0 auto; padding:16px 12px; }

/* ── Cards ── */
.g-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.g-card-hover:hover { box-shadow:var(--shadow-2); border-color:#bdc1c6; }
.g-card-title { font-family:'Google Sans','Roboto',sans-serif; font-size:14px; font-weight:500; color:var(--text); margin-bottom:14px; }

/* ── Buttons ── */
.g-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 20px; border-radius:var(--radius-sm);
  font-family:'Google Sans','Roboto',sans-serif;
  font-size:14px; font-weight:500; letter-spacing:.25px;
  border:none; cursor:pointer;
  transition:background .15s, box-shadow .15s;
  white-space:nowrap; text-decoration:none; line-height:1.4;
}
.g-btn:hover { text-decoration:none; }
.g-btn-primary  { background:var(--blue);  color:#fff; box-shadow:var(--shadow-1); }
.g-btn-primary:hover { background:var(--blue-dk); box-shadow:var(--shadow-2); }
.g-btn-outline  { background:var(--white); color:var(--blue); border:1px solid var(--border); }
.g-btn-outline:hover { background:#e8f0fe; border-color:#c6d4f5; }
.g-btn-text     { background:transparent; color:var(--blue); padding:8px 12px; }
.g-btn-text:hover { background:#e8f0fe; }
.g-btn-danger   { background:var(--red); color:#fff; box-shadow:var(--shadow-1); }
.g-btn-danger:hover { background:#b5271f; }
.g-btn-sm { padding:6px 14px; font-size:13px; }
.g-btn-lg { padding:12px 28px; font-size:16px; }
.g-btn-icon { padding:8px; border-radius:50%; }

/* ── Form fields ── */
.g-field { position:relative; margin-bottom:18px; }
.g-field input, .g-field select, .g-field textarea {
  width:100%; padding:13px 15px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:16px; color:var(--text);
  background:var(--white); outline:none;
  transition:border .15s; caret-color:var(--blue);
}
.g-field input:focus, .g-field select:focus, .g-field textarea:focus {
  border-color:var(--blue); border-width:2px; padding:12px 14px;
}
.g-field label {
  position:absolute; top:50%; transform:translateY(-50%);
  left:15px; font-size:16px; color:var(--text-3);
  pointer-events:none; transition:all .15s ease;
  background:var(--white); padding:0 2px;
}
.g-field textarea ~ label { top:18px; transform:none; }
.g-field input:focus+label, .g-field input:not(:placeholder-shown)+label,
.g-field textarea:focus+label, .g-field textarea:not(:placeholder-shown)+label
{ top:0; font-size:12px; color:var(--blue); }
.g-field input:not(:focus):not(:placeholder-shown)+label { color:var(--text-3); }
.g-field select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%235f6368'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:10px;
  padding-right:36px;
}
.g-field select+label { display:none; }
.g-field-sm input, .g-field-sm select { padding:9px 12px; font-size:14px; }
.g-field-sm input:focus, .g-field-sm select:focus { padding:8px 11px; }
.g-field-sm label { font-size:14px; top:50%; }
.g-field-sm input:focus+label, .g-field-sm input:not(:placeholder-shown)+label { font-size:11px; }
.g-field .hint { font-size:12px; color:var(--text-3); margin-top:4px; }
.g-field .err  { font-size:12px; color:var(--red);    margin-top:4px; }

/* ── Alerts ── */
.g-alert { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:16px; border-left:3px solid; }
.g-alert-success { background:#e6f4ea; color:#137333; border-color:var(--green); }
.g-alert-error   { background:#fce8e6; color:#c5221f; border-color:var(--red);   }
.g-alert-warn    { background:#fef7e0; color:#b06000; border-color:var(--yellow);}
.g-alert-info    { background:#e8f0fe; color:#1967d2; border-color:var(--blue);  }

/* ── Chips ── */
.g-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:var(--radius-xl); font-size:11px; font-weight:500; }
.g-chip-blue   { background:#e8f0fe; color:#1967d2; }
.g-chip-green  { background:#e6f4ea; color:#137333; }
.g-chip-red    { background:#fce8e6; color:#c5221f; }
.g-chip-yellow { background:#fef7e0; color:#b06000; }
.g-chip-gray   { background:#f1f3f4; color:#5f6368; }
.g-chip-purple { background:#f3e8fd; color:#681da8; }

/* ── Tables ── */
.g-table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
table.g-table { width:100%; border-collapse:collapse; font-size:14px; }
table.g-table thead tr { background:var(--bg); }
table.g-table th { padding:10px 14px; text-align:left; white-space:nowrap; font-family:'Google Sans','Roboto',sans-serif; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.8px; color:var(--text-2); border-bottom:1px solid var(--border); }
table.g-table td { padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
table.g-table tr:last-child td { border-bottom:none; }
table.g-table tbody tr:hover td { background:var(--hover); }

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARD  — compact card matching the reference image
   ═══════════════════════════════════════════════════════════ */
.g-prod-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}
.g-prod-card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .2s, border-color .2s;
  text-decoration:none; color:inherit;
  cursor:pointer;
}
.g-prod-card:hover { box-shadow:var(--shadow-2); border-color:#bdc1c6; text-decoration:none; }
/* Image: square, takes full card width */
.g-prod-card .pc-img { position:relative; }
.g-prod-card .pc-img img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.g-prod-card .pc-img .no-img { width:100%; aspect-ratio:1; background:#f1f3f4; display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
/* Info area — compact */
.g-prod-info {
  padding:8px 10px 10px;
  flex:1; display:flex; flex-direction:column;
}
.g-prod-brand { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); margin-bottom:1px; }
.g-prod-name  { font-size:13px; font-weight:500; color:var(--text); line-height:1.3; margin-bottom:4px; }
.g-prod-size  { font-size:11px; color:var(--text-3); margin-bottom:4px; }
/* Price row: ฿ big + ₭ small inline */
.g-prod-price-row { display:flex; align-items:baseline; gap:5px; margin-bottom:3px; }
.g-prod-price { font-family:'Google Sans','Roboto',sans-serif; font-size:15px; font-weight:500; color:var(--text); }
.g-prod-lak   { font-size:11px; color:var(--text-3); }
/* Admin action strip */
.g-prod-admin { display:flex; gap:5px; padding:6px 8px; border-top:1px solid var(--border); background:var(--bg); margin-top:auto; }
.g-prod-admin .g-btn { flex:1; font-size:11px; padding:5px 6px; }
/* Sold overlay */
.g-sold-tag { position:absolute; top:7px; left:7px; background:rgba(32,33,36,.72); color:#fff; font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px; letter-spacing:.3px; }

/* ── Section header ── */
.g-section-head { font-family:'Google Sans','Roboto',sans-serif; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.8px; color:var(--blue); border-bottom:1px solid var(--border); padding-bottom:8px; margin:22px 0 14px; }

/* ═══════════════════════════════════════════════════════════
   FILTER BAR — collapsed by default on mobile
   ═══════════════════════════════════════════════════════════ */
.g-filter-bar { margin-bottom:14px; }

/* Toggle button — always visible */
.g-filter-toggle {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:'Google Sans','Roboto',sans-serif; font-size:13px; font-weight:500;
  color:var(--text-2); cursor:pointer; width:100%;
  justify-content:space-between;
}
.g-filter-toggle .ft-left  { display:flex; align-items:center; gap:8px; }
.g-filter-toggle .ft-count { background:#e8f0fe; color:var(--blue); font-size:11px; font-weight:600; padding:1px 7px; border-radius:10px; display:none; }
.g-filter-toggle .ft-count.has-filters { display:inline-block; }
.g-filter-toggle .ft-arrow { font-size:10px; color:var(--text-3); transition:transform .2s; }
.g-filter-toggle.open .ft-arrow { transform:rotate(180deg); }

/* Filter panel — hidden on mobile by default, visible on desktop */
.g-filter-panel {
  background:var(--white); border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  padding:14px 14px 12px;
  display:none; flex-wrap:wrap; gap:10px; align-items:flex-end;
}
.g-filter-panel.open { display:flex; }
/* On desktop: always show panel, hide toggle */
@media(min-width:768px) {
  .g-filter-toggle { display:none; }
  .g-filter-panel {
    display:flex !important;
    border-top:1px solid var(--border);
    border-radius:var(--radius-sm);
  }
}
.g-filter-group { display:flex; flex-direction:column; gap:3px; }
.g-filter-group label { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); }
.g-filters select,
.g-filter-panel select {
  padding:7px 28px 7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; font-family:inherit; color:var(--text); background:var(--white);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%235f6368'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:9px;
  cursor:pointer; outline:none; min-width:120px;
}
.g-filter-panel select:focus { border-color:var(--blue); box-shadow:0 0 0 2px var(--focus); }
.g-result-count { font-size:12px; color:var(--text-3); align-self:flex-end; margin-left:auto; }

/* ── Modals ── */
.g-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.32); z-index:400; align-items:center; justify-content:center; }
.g-overlay.open { display:flex; }
.g-modal { background:var(--white); border-radius:var(--radius-lg); padding:20px; width:92%; max-width:480px; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow-4); animation:gSlideUp .2s ease; }
.g-modal-sm { max-width:340px; }
@keyframes gSlideUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.g-modal h2 { font-family:'Google Sans','Roboto',sans-serif; font-size:18px; font-weight:400; color:var(--text); margin-bottom:18px; }
.g-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }

/* ── Confirm modal ── */
.g-confirm { text-align:center; padding:6px 0; }
.g-confirm .ci { font-size:2.5rem; margin-bottom:10px; }
.g-confirm h2  { margin-bottom:6px; }
.g-confirm p   { font-size:13px; color:var(--text-2); margin-bottom:20px; }

/* ── KPI cards ── */
.g-kpi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.g-kpi { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.g-kpi .klbl { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); margin-bottom:4px; }
.g-kpi .kval { font-family:'Google Sans','Roboto',sans-serif; font-size:22px; font-weight:400; color:var(--text); line-height:1; }
.g-kpi .ksub { font-size:11px; color:var(--text-3); margin-top:3px; }
.g-kpi.kgreen .kval{color:var(--green);} .g-kpi.kred .kval{color:var(--red);}
.g-kpi.kblue  .kval{color:var(--blue);} .g-kpi.kyellow .kval{color:var(--yellow);}

/* ── Dashboard sidebar layout ── */
.g-layout { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.g-sidebar { background:var(--white); border-right:1px solid var(--border); padding:0; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
.g-sidebar .s-brand { font-family:'Google Sans','Roboto',sans-serif; font-size:20px; font-weight:700; padding:18px 16px; border-bottom:1px solid var(--border); text-decoration:none; display:block; }
.g-sidebar .s-lbl { font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.8px; color:var(--text-3); padding:14px 16px 4px; }
.g-sidebar a.s-link { display:flex; align-items:center; gap:9px; padding:9px 16px; font-size:14px; color:var(--text-2); border-radius:0 24px 24px 0; margin-right:12px; text-decoration:none; transition:all .15s; }
.g-sidebar a.s-link:hover { background:var(--hover); color:var(--text); }
.g-sidebar a.s-link.active { background:#e8f0fe; color:var(--blue); font-weight:500; }
.g-main { padding:16px; overflow:auto; background:var(--bg); }

/* ── Mobile bottom nav (dashboard) ── */
.g-mob-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--white); border-top:1px solid var(--border);
  padding:6px 0 max(6px, env(safe-area-inset-bottom));
}
.g-mob-nav .mn-items { display:flex; justify-content:space-around; }
.g-mob-nav a {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:10px; font-weight:500; color:var(--text-3);
  text-decoration:none; padding:4px 8px; border-radius:var(--radius-sm);
  transition:color .15s; min-width:52px;
}
.g-mob-nav a .mn-icon { font-size:20px; line-height:1; }
.g-mob-nav a.active, .g-mob-nav a:hover { color:var(--blue); }

/* ── Topnav ── */
.g-topnav { background:var(--white); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 16px; gap:2px; position:sticky; top:0; z-index:100; height:56px; }
.g-topnav .tn-brand { font-family:'Google Sans','Roboto',sans-serif; font-size:20px; font-weight:700; text-decoration:none; margin-right:12px; white-space:nowrap; flex-shrink:0; }
.g-topnav a.tn-link { font-size:13px; font-weight:400; color:var(--text-2); padding:5px 11px; border-radius:var(--radius-xl); text-decoration:none; transition:background .15s,color .15s; white-space:nowrap; }
.g-topnav a.tn-link:hover { background:var(--hover); color:var(--text); }
.g-topnav a.tn-link.active { background:#e8f0fe; color:var(--blue); font-weight:500; }
.g-topnav .tn-spacer { flex:1; }
.g-topnav .tn-auth { display:flex; align-items:center; gap:6px; }
.tn-user-badge { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); }
.tn-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#4285f4,#34a853); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; font-family:'Google Sans',sans-serif; }

/* ── Footer ── */
.g-footer { background:var(--white); border-top:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-3); flex-wrap:wrap; gap:8px; margin-top:32px; }
.g-footer a { color:var(--text-3); text-decoration:none; }
.g-footer a:hover { text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* Tablet+ (≥768px): 3-col products, larger KPI grid */
@media(min-width:768px) {
  .g-page, .g-page-sm, .g-page-xs { padding:20px 20px; }
  .g-prod-grid { grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; }
  .g-kpi-grid  { grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
  .g-topnav { height:60px; padding:0 20px; }
  .g-main { padding:20px; }
}

/* Desktop (≥1024px) */
@media(min-width:1024px) {
  .g-prod-grid { grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
  .g-kpi-grid  { grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }
  .g-kpi .kval { font-size:26px; }
}

/* Dashboard sidebar: hide on mobile, show bottom nav */
@media(max-width:900px) {
  .g-layout { grid-template-columns:1fr; }
  .g-sidebar { display:none !important; }
  .g-mob-nav { display:block; }
  /* add bottom padding so content isn't under nav */
  .g-main { padding-bottom:72px; }
}

/* Mobile (≤480px / iPhone mini to SE) */
@media(max-width:480px) {
  .g-topnav a.tn-link:not(.tn-always) { display:none; }
  .tn-user-badge span { display:none; } /* hide name, keep avatar */
  .g-prod-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .g-kpi-grid  { grid-template-columns:repeat(2,1fr); gap:8px; }
  .g-prod-info { padding:7px 8px 9px; }
  .g-prod-name { font-size:12px; }
  .g-prod-price { font-size:14px; }
}

/* Very small (≤360px) */
@media(max-width:360px) {
  .g-topnav { padding:0 10px; }
  .g-page,.g-page-sm { padding:10px 10px; }
}