/* ============================================================================
   g9s-theme.css — Gebezy WMS · Admin theme  (v2 — แก้ layout แล้ว)

   วางไฟล์ที่ :  public/assets/css/g9s-theme.css
   เรียกใช้จาก :  application/admin/view/common/meta.html  (ท้ายไฟล์)
   *** ต้องอยู่ใน meta.html ไม่ใช่ index.html ***
   เพราะหน้าที่ใช้งานจริงทั้งหมดอยู่ใน iframe และโหลด CSS ผ่าน meta.html

   กติกาสีเดียวของทั้งระบบ:
     ทอง  = แบรนด์ / ปุ่มลงมือทำ / สิ่งที่ถูกเลือก / โฟกัส   (60%)
     เขียว = สถานะ "สำเร็จ / ผ่าน / ออนไลน์" เท่านั้น        (40%)
     แดง  = ผิดพลาด / ลบ / ออกจากระบบ
   ถ้ามันไม่ได้แปลว่า "สำเร็จ" ห้ามใช้เขียว
   ============================================================================ */

:root{
  --ink:#0b1420;
  --ink-2:#101d2d;
  --ink-3:#182a40;
  --ink-4:#22364f;

  --paper:#f7f5f0;
  --canvas:#f2f0ea;
  --card:#ffffff;

  --gold:#d2a24c;
  --gold-2:#ecca8a;
  --gold-deep:#a2762e;
  --gold-soft:#faf3e6;
  --grad-gold:linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 55%, var(--gold-deep) 130%);

  --ok:#2fae74;
  --ok-soft:#e8f6ef;
  --ok-deep:#1e7a50;

  --warn:#d99422;
  --danger:#c0392b;
  --danger-soft:#fbeceb;

  --text:#1f2937;
  --muted:#66717e;
  --line:#e8e3d7;
  --line-2:#f1eee6;

  --font-d:"Prompt", sans-serif;
  --font-b:"Anuphan", -apple-system, "Segoe UI", sans-serif;
  --font-m:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --sidebar-w:236px;
  --header-h:52px;
  --footer-h:34px;

  /* JS ของ toolbar เป็นคนตั้งค่านี้ — ต้องมีค่าตั้งต้นกันหน้าพัง */
  --toolbar-h:0px;
}

/* ============================================================
   1. ฐาน
   ============================================================ */
body.g9s-outer-theme{
  font-family:var(--font-b);
  font-size:13.5px;
  color:var(--text);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* โครงหลักไม่เลื่อน — ให้ iframe เลื่อนเอง */
}
body.g9s-outer-theme h1,
body.g9s-outer-theme h2,
body.g9s-outer-theme h3,
body.g9s-outer-theme h4,
body.g9s-outer-theme h5,
body.g9s-outer-theme .box-title,
body.g9s-outer-theme .panel-title{
  font-family:var(--font-d);
  font-weight:600;
  letter-spacing:.1px;
}
body.g9s-outer-theme a{ color:var(--gold-deep); }
body.g9s-outer-theme a:hover,
body.g9s-outer-theme a:focus{ color:var(--gold); text-decoration:none; }

body.g9s-outer-theme code,
body.g9s-outer-theme .text-mono{ font-family:var(--font-m); }

.g9s-outer-theme .wrapper{
  border-radius:0;
  width:100%;
  height:100vh;
  margin:0;
  background:var(--canvas);
  overflow:hidden;
}

/* ============================================================
   2. แถบบน (header)
   ============================================================ */
.g9s-outer-theme #header{
  background:transparent;
  height:var(--header-h);
}
.g9s-outer-theme .main-header{ height:var(--header-h); }
.g9s-outer-theme .main-header .navbar{
  height:var(--header-h);
  min-height:var(--header-h);
  margin-left:var(--sidebar-w);
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(11,20,32,.05);
}
.g9s-outer-theme.sidebar-collapse .main-header .navbar{ margin-left:50px; }

.g9s-outer-theme #firstnav{
  height:var(--header-h);
  box-shadow:none;
  border-bottom:none;
}
.g9s-outer-theme #firstnav .sidebar-toggle{
  width:52px;
  height:var(--header-h);
  line-height:var(--header-h);
  color:var(--muted);
  transition:color .18s ease, background .18s ease;
}
.g9s-outer-theme #firstnav .sidebar-toggle:hover{
  color:var(--gold-deep);
  background:var(--gold-soft);
}
.g9s-outer-theme #firstnav .sidebar-toggle:before{ font-size:16px; }

/* ---- แถบบอกบริบท : ซ้อน 2 บรรทัด (FIX จากรูป — เดิมวางแนวนอนอ่านยาก) ---- */
.g9s-outer-theme .g9s-context{
  position:absolute;
  left:60px;
  top:0;
  height:var(--header-h);
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:44%;
  overflow:hidden;
  padding-left:14px;
  border-left:1px solid var(--line);
}
.g9s-outer-theme .g9s-context-label{
  font-family:var(--font-m);
  font-size:9px;
  letter-spacing:1.6px;
  line-height:1.2;
  text-transform:uppercase;
  color:#a9a496;
  white-space:nowrap;
}
.g9s-outer-theme .g9s-context-value{
  font-family:var(--font-d);
  font-weight:600;
  font-size:14px;
  line-height:1.25;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- เมนูขวา ---- */
.g9s-outer-theme #firstnav .navbar-custom-menu{
  top:0;
  height:var(--header-h);
}
.g9s-outer-theme .navbar-custom-menu .navbar-nav > li > a{
  height:var(--header-h);
  line-height:var(--header-h);
  padding:0 13px;
  color:var(--muted);
  font-size:13.5px;
  transition:color .18s ease, background .18s ease;
}
.g9s-outer-theme .navbar-custom-menu .navbar-nav > li > a:hover,
.g9s-outer-theme .navbar-custom-menu .navbar-nav > li > a:focus,
.g9s-outer-theme .navbar-custom-menu .navbar-nav > .open > a{
  color:var(--gold-deep);
  background:var(--gold-soft);
}

/* ปุ่มเลือกคลัง */
.g9s-outer-theme #btn-choose-warehouse{
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:9px 6px 0 0;
  height:34px !important;
  line-height:1 !important;
  padding:0 14px !important;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--ink) !important;
  font-weight:500;
}
.g9s-outer-theme #btn-choose-warehouse:hover{
  border-color:var(--gold);
  background:var(--gold-soft);
  color:var(--gold-deep) !important;
}
.g9s-outer-theme #btn-choose-warehouse #wh-current{
  font-family:var(--font-m);
  font-size:11.5px;
  letter-spacing:.5px;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- กล่องผู้ใช้ : FIX รูปโปรไฟล์โดนตัดหัวตามรูป ---- */
.g9s-outer-theme .navbar-nav > .user-menu > a{
  display:flex !important;
  align-items:center;
  gap:8px;
  padding:0 16px 0 12px !important;
  height:var(--header-h);
}
.g9s-outer-theme .navbar-nav > .user-menu .user-image{
  width:30px;
  height:30px;
  border-radius:50%;
  margin:0 !important;
  float:none !important;
  object-fit:cover;
  border:1px solid var(--line);
  flex:none;
}
.g9s-outer-theme .navbar-nav > .user-menu > .dropdown-menu{
  width:264px;
  padding:0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(11,20,32,.16);
}
.g9s-outer-theme .navbar-nav > .user-menu > .dropdown-menu > li.user-header{
  height:auto;
  padding:22px 16px 18px;
  background:linear-gradient(168deg, var(--ink), var(--ink-3));
  border-bottom:2px solid var(--gold);
}
.g9s-outer-theme .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img{
  width:64px;
  height:64px;
  border:2px solid rgba(210,162,76,.5);
}
.g9s-outer-theme .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p{
  font-family:var(--font-d);
  font-size:15px;
  font-weight:600;
  color:#fff;
  margin-top:12px;
}
.g9s-outer-theme .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small{
  font-family:var(--font-m);
  font-size:10.5px;
  letter-spacing:.8px;
  color:rgba(236,202,138,.75);
  margin-top:4px;
}
.g9s-outer-theme .user-body-moblie{ padding:0 12px; }
.g9s-outer-theme .user-body-moblie:first-of-type{ padding-top:12px; }
.g9s-outer-theme .user-body-moblie .btn-default{
  text-align:left;
  border:none;
  background:transparent;
  color:var(--text) !important;
  border-radius:8px;
  padding:9px 12px;
  margin-bottom:2px;
}
.g9s-outer-theme .user-body-moblie .btn-default:hover{
  background:var(--gold-soft);
  color:var(--gold-deep) !important;
}
.g9s-outer-theme .user-body-moblie .btn-default .fa{
  width:18px;
  margin-right:6px;
  color:#a9a496;
}
.g9s-outer-theme .user-body-moblie .btn-default:hover .fa{ color:var(--gold-deep); }
.g9s-outer-theme .navbar-nav > .user-menu > .dropdown-menu > .user-footer{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:12px;
  margin-top:8px;
}
.g9s-outer-theme .user-footer .btn-danger{
  background:transparent;
  border:1px solid rgba(192,57,43,.35);
  color:var(--danger);
  border-radius:8px;
  font-weight:600;
  padding:9px;
}
.g9s-outer-theme .user-footer .btn-danger:hover{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}

/* ============================================================
   3. แถบข้าง (sidebar)
   ============================================================ */
.g9s-outer-theme.skin-green .wrapper,
.g9s-outer-theme.skin-green .main-sidebar,
.g9s-outer-theme.skin-green .left-side{
  background-color:var(--ink);
}
.g9s-outer-theme .main-sidebar,
.g9s-outer-theme .left-side{
  width:var(--sidebar-w);
  height:100vh;
  padding-top:0;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  border-right:1px solid rgba(210,162,76,.12);
  overflow:hidden;
}

.g9s-outer-theme .g9s-sidebar-brand{
  height:var(--header-h);
  display:flex;
  align-items:center;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
}
.g9s-outer-theme .g9s-sidebar-brand:after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--grad-gold);
  opacity:.85;
}
.g9s-outer-theme .g9s-sidebar-brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.g9s-outer-theme .g9s-sidebar-brand-logo{
  height:30px;
  width:auto;
  max-width:132px;
  object-fit:contain;
  display:block;
}
.g9s-outer-theme .g9s-sidebar-brand-tag{
  font-family:var(--font-m);
  font-size:9px;
  letter-spacing:2px;
  color:var(--gold-2);
  border:1px solid rgba(210,162,76,.35);
  border-radius:4px;
  padding:2px 6px;
  flex:none;
}
.g9s-outer-theme.sidebar-collapse .g9s-sidebar-brand{ padding:0; justify-content:center; }
.g9s-outer-theme.sidebar-collapse .g9s-sidebar-brand-logo{ max-width:34px; }
.g9s-outer-theme.sidebar-collapse .g9s-sidebar-brand-tag{ display:none; }

/* ช่องค้นหาเมนู */
.g9s-outer-theme.skin-green .sidebar-form{
  margin:14px 14px 8px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  border-radius:10px;
  overflow:hidden;
  transition:border-color .18s ease, background .18s ease;
}
.g9s-outer-theme.skin-green .sidebar-form:focus-within{
  border-color:var(--gold);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(210,162,76,.15);
}
.g9s-outer-theme.skin-green .sidebar-form input[type="text"]{
  height:38px;
  background:transparent;
  border:none;
  color:#fff;
  font-family:var(--font-b);
  font-size:13px;
  box-shadow:none;
}
.g9s-outer-theme.skin-green .sidebar-form input[type="text"]::placeholder{
  color:rgba(236,238,242,.42);
}
.g9s-outer-theme.skin-green .sidebar-form input[type="text"]:focus,
.g9s-outer-theme.skin-green .sidebar-form input[type="text"]:focus + .input-group-btn,
.g9s-outer-theme.skin-green .sidebar-form input[type="text"]:focus + .input-group-btn .btn{
  background:transparent !important;
  color:#fff !important;
  border-radius:0;
}
.g9s-outer-theme.skin-green .sidebar-form .btn{
  height:38px;
  background:transparent;
  border:none;
  color:rgba(236,238,242,.5);
  box-shadow:none;
}
.g9s-outer-theme.skin-green .sidebar-form .btn:hover{ color:var(--gold-2); }

.g9s-outer-theme .sidebar-form .menuresult{
  border-radius:10px;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 14px 34px rgba(2,7,14,.4);
}
.g9s-outer-theme .sidebar-form .menuresult a{
  color:var(--text);
  border-color:var(--line-2);
  padding:11px 14px;
  font-size:13px;
}
.g9s-outer-theme .sidebar-form .menuresult a:hover{
  background:var(--gold-soft);
  color:var(--gold-deep);
}

/* รายการเมนู */
.g9s-outer-theme .sidebar{
  height:calc(100vh - var(--header-h) - 62px);
  overflow-y:auto;
  overflow-x:hidden;
  padding-bottom:24px;
}
.g9s-outer-theme .sidebar-menu > li > a{
  padding:11px 14px;
  margin:1px 10px;
  border-radius:9px;
  border-left:none !important;
  color:rgba(236,238,242,.66) !important;
  font-size:13.5px;
  font-weight:500;
  transition:background .16s ease, color .16s ease;
}
.g9s-outer-theme .sidebar-menu > li > a > .fa,
.g9s-outer-theme .sidebar-menu > li > a > .glyphicon,
.g9s-outer-theme .sidebar-menu > li > a > .ion{
  width:22px;
  font-size:14px;
  color:rgba(236,238,242,.42);
  transition:color .16s ease;
}
.g9s-outer-theme.skin-green .sidebar-menu > li:hover > a{
  background:rgba(255,255,255,.06);
  color:#fff !important;
  border-left-color:transparent;
}
.g9s-outer-theme.skin-green .sidebar-menu > li:hover > a > .fa{ color:var(--gold-2); }

.g9s-outer-theme.skin-green .sidebar-menu > li.active > a{
  background:rgba(210,162,76,.14);
  color:#fff !important;
  border-left-color:transparent;
  position:relative;
}
.g9s-outer-theme.skin-green .sidebar-menu > li.active > a:before{
  content:'';
  position:absolute;
  left:-10px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:20px;
  border-radius:0 3px 3px 0;
  background:var(--grad-gold);
}
.g9s-outer-theme.skin-green .sidebar-menu > li.active > a > .fa{ color:var(--gold-2); }

.g9s-outer-theme.skin-green .sidebar-menu > li > .treeview-menu{
  margin:2px 10px 6px;
  padding:4px 0;
  background:rgba(0,0,0,.22);
  border-radius:9px;
}
.g9s-outer-theme.skin-green .treeview-menu > li > a{
  padding:8px 12px 8px 34px;
  color:rgba(236,238,242,.5) !important;
  font-size:13px;
  border-radius:7px;
  margin:0 6px;
  position:relative;
}
.g9s-outer-theme.skin-green .treeview-menu > li > a:hover{
  color:#fff !important;
  background:rgba(255,255,255,.05);
}
.g9s-outer-theme.skin-green .treeview-menu > li.active > a{
  color:var(--gold-2) !important;
  background:rgba(210,162,76,.1);
  font-weight:600;
}
.g9s-outer-theme .treeview-menu > li > a > .fa-circle-o{
  font-size:5px;
  position:absolute;
  left:16px;
  top:14px;
}

.g9s-outer-theme .sidebar::-webkit-scrollbar{ width:6px; }
.g9s-outer-theme .sidebar::-webkit-scrollbar-track{ background:transparent; }
.g9s-outer-theme .sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:99px;
}
.g9s-outer-theme .sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(210,162,76,.45); }

/* ============================================================
   4. พื้นที่เนื้อหา
   *** ส่วนที่แก้บั๊กช่องว่างเทาก้อนใหญ่ ***
   ต้นเหตุ: backend.css มี .tab-addtabs .tab-pane { height: calc(100% - 187px) }
   ผมเคยใส่ padding-bottom:220px ทับเข้าไปอีก → หักความสูงสองรอบ เกิดรูโหว่
   ตอนนี้คุมความสูงที่จุดเดียว: 100vh − header − footer − toolbar
   ============================================================ */
.g9s-outer-theme .content-wrapper,
.g9s-outer-theme .right-side{
  margin-left:var(--sidebar-w);
  background:var(--canvas);
  padding-bottom:0 !important;
  height:calc(100vh - var(--header-h));
  overflow:hidden;
}
.g9s-outer-theme.sidebar-collapse .content-wrapper,
.g9s-outer-theme.sidebar-collapse .right-side{ margin-left:50px; }

.g9s-outer-theme .content-wrapper .tab-pane,
.g9s-outer-theme .tab-addtabs .tab-pane{
  height:calc(100vh - var(--header-h) - var(--footer-h) - var(--toolbar-h)) !important;
  width:100%;
  overflow:hidden;
}
.g9s-outer-theme .tab-pane > iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

@media (max-width:767px){
  .g9s-outer-theme .content-wrapper,
  .g9s-outer-theme .right-side,
  .g9s-outer-theme .main-header .navbar{ margin-left:0; }
}

.g9s-outer-theme .content{ padding:16px; }

/* กล่องเนื้อหา (มีผลกับหน้าใน iframe เมื่อ CSS ถูกโหลดจาก meta.html) */
.g9s-outer-theme .box,
.g9s-outer-theme .nav-tabs-custom,
.g9s-outer-theme .panel-intro{
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(11,20,32,.04);
  overflow:hidden;
}
.g9s-outer-theme .box.box-primary,
.g9s-outer-theme .box.box-info{ border-top:3px solid var(--gold); }
.g9s-outer-theme .box.box-danger{ border-top:3px solid var(--danger); }
.g9s-outer-theme .box.box-success{ border-top:3px solid var(--ok); }
.g9s-outer-theme .box-header{ padding:14px 16px; }
.g9s-outer-theme .box-header.with-border{ border-bottom:1px solid var(--line-2); }

.g9s-outer-theme .panel-intro > .panel-heading{
  background:var(--paper);
  border-color:var(--line);
  padding:14px 16px 0;
}
.g9s-outer-theme .panel-intro > .panel-heading .nav-tabs > li > a{
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0;
  color:var(--muted);
  font-family:var(--font-d);
  font-weight:500;
  padding:10px 16px;
  margin-right:2px;
}
.g9s-outer-theme .panel-intro > .panel-heading .nav-tabs > li > a:hover{
  background:transparent;
  border-color:transparent;
  border-bottom-color:var(--line);
  color:var(--ink);
}
.g9s-outer-theme .panel-intro > .panel-heading .nav-tabs > li.active > a,
.g9s-outer-theme .panel-intro > .panel-heading .nav-tabs > li.active > a:hover,
.g9s-outer-theme .panel-intro > .panel-heading .nav-tabs > li.active > a:focus{
  background:transparent;
  border:none;
  border-bottom:2px solid var(--gold);
  color:var(--ink);
  font-weight:600;
}

.g9s-outer-theme .nav-addtabs > li > a,
.g9s-outer-theme .nav-addtabs > li.active > a{
  height:var(--header-h);
  line-height:var(--header-h);
  border-right:1px solid var(--line-2);
  color:var(--muted);
  font-size:13px;
}
.g9s-outer-theme .nav-addtabs > li.active > a{
  background:var(--gold-soft);
  color:var(--gold-deep);
  font-weight:600;
  box-shadow:inset 0 -2px 0 var(--gold);
}
.g9s-outer-theme .nav-addtabs > li > a:hover{
  background:var(--paper);
  color:var(--ink);
}

/* ============================================================
   5. ปุ่ม — ปุ่มลงมือทำทั้งหมดเป็นทอง
   ============================================================ */
.g9s-outer-theme .btn{
  border-radius:8px;
  font-family:var(--font-d);
  font-weight:500;
  padding:7px 14px;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}
.g9s-outer-theme .btn:active{ transform:translateY(1px); }

.g9s-outer-theme .btn-success,
.g9s-outer-theme .btn-primary{
  background:var(--grad-gold);
  border-color:transparent;
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(162,118,46,.25);
}
.g9s-outer-theme .btn-success:hover,
.g9s-outer-theme .btn-primary:hover,
.g9s-outer-theme .btn-success:focus,
.g9s-outer-theme .btn-primary:focus,
.g9s-outer-theme .btn-success:active,
.g9s-outer-theme .btn-primary:active,
.g9s-outer-theme .open > .dropdown-toggle.btn-success,
.g9s-outer-theme .open > .dropdown-toggle.btn-primary{
  background:var(--grad-gold);
  border-color:transparent;
  color:var(--ink);
  filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(162,118,46,.35);
}

.g9s-outer-theme .btn-default{
  background:#fff;
  border-color:var(--line);
  color:var(--text);
}
.g9s-outer-theme .btn-default:hover,
.g9s-outer-theme .btn-default:focus{
  background:var(--paper);
  border-color:#d8d0bd;
  color:var(--ink);
}

.g9s-outer-theme .btn-danger{
  background:var(--danger);
  border-color:var(--danger);
}
.g9s-outer-theme .btn-danger:hover{ filter:brightness(1.08); }

.g9s-outer-theme .btn-info{
  background:var(--ink-3);
  border-color:var(--ink-3);
  color:#fff;
}
.g9s-outer-theme .btn-info:hover{ background:var(--ink-4); border-color:var(--ink-4); }

.g9s-outer-theme .btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ============================================================
   6. ฟอร์ม
   ============================================================ */
.g9s-outer-theme .form-control,
.g9s-outer-theme .select2-container--default .select2-selection--single{
  border-radius:8px;
  border-color:var(--line);
  background:var(--paper);
  color:var(--ink);
  height:36px;
  font-family:var(--font-b);
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.g9s-outer-theme textarea.form-control{ height:auto; }
.g9s-outer-theme .form-control:focus,
.g9s-outer-theme .select2-container--default.select2-container--focus .select2-selection--multiple,
.g9s-outer-theme .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--gold) !important;
  background:#fff;
  box-shadow:0 0 0 3px rgba(210,162,76,.15);
}
.g9s-outer-theme .input-group .input-group-addon{
  border-radius:8px;
  border-color:var(--line);
  background:var(--paper);
  color:var(--muted);
}
.g9s-outer-theme label{ font-family:var(--font-d); font-weight:500; }

.g9s-outer-theme .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color:var(--gold-soft);
  color:var(--gold-deep);
}
.g9s-outer-theme .select2-container--default .select2-selection--multiple .select2-selection__choice{
  background-color:var(--gold-soft);
  border-color:rgba(210,162,76,.35);
  color:var(--gold-deep);
  border-radius:6px;
}

/* ============================================================
   7. ตาราง
   ============================================================ */
.g9s-outer-theme .fixed-table-container{ border-radius:10px; overflow:hidden; }
.g9s-outer-theme .bootstrap-table .table > thead > tr > th{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  color:var(--gold-deep);
  font-family:var(--font-m);
  font-size:10.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  font-weight:500;
}
.g9s-outer-theme .bootstrap-table .table > tbody > tr > td{
  border-top:1px solid var(--line-2);
  vertical-align:middle;
}
.g9s-outer-theme .table-hover > tbody > tr:hover{ background:var(--gold-soft); }
.g9s-outer-theme .fixed-table-container tbody .selected td{ background:var(--gold-soft); }
.g9s-outer-theme .table-striped > tbody > tr:nth-of-type(odd){ background:#fbfaf7; }

.g9s-outer-theme .pagination > .active > a,
.g9s-outer-theme .pagination > .active > span,
.g9s-outer-theme .pagination > .active > a:hover,
.g9s-outer-theme .pagination > .active > span:hover{
  background:var(--grad-gold);
  border-color:var(--gold-deep);
  color:var(--ink);
}
.g9s-outer-theme .pagination > li > a{ color:var(--muted); }
.g9s-outer-theme .pagination > li > a:hover{ color:var(--gold-deep); }

/* ============================================================
   8. สถานะ — จุดเดียวที่เขียวมีสิทธิ์อยู่
   ============================================================ */
.g9s-outer-theme .label-success,
.g9s-outer-theme .badge-success{
  background-color:var(--ok-soft) !important;
  color:var(--ok-deep) !important;
  border:1px solid rgba(47,174,116,.3);
}
.g9s-outer-theme .text-success,
.g9s-outer-theme .text-green{ color:var(--ok) !important; }
.g9s-outer-theme .bg-green,
.g9s-outer-theme .alert-success,
.g9s-outer-theme .callout.callout-success{
  background-color:var(--ok) !important;
  border-color:var(--ok-deep) !important;
}
.g9s-outer-theme .progress-bar-success{ background-color:var(--ok) !important; }

.g9s-outer-theme .label{
  font-family:var(--font-b);
  font-weight:600;
  font-size:11.5px;
  padding:.3em .7em .35em;
  border-radius:99px;
}
.g9s-outer-theme .label-warning{
  background-color:#fdf3e2 !important;
  color:#8a5d0b !important;
  border:1px solid rgba(217,148,34,.3);
}
.g9s-outer-theme .label-danger{
  background-color:var(--danger-soft) !important;
  color:var(--danger) !important;
  border:1px solid rgba(192,57,43,.28);
}
.g9s-outer-theme .label-default,
.g9s-outer-theme .label-primary,
.g9s-outer-theme .label-info{
  background-color:var(--gold-soft) !important;
  color:var(--gold-deep) !important;
  border:1px solid rgba(210,162,76,.3);
}

/* สวิตช์เปิด/ปิด = สถานะ → เขียว */
.g9s-outer-theme .fa-toggle-on{ color:var(--ok) !important; }
.g9s-outer-theme .fa-toggle-off{ color:#c9c3b4 !important; }

/* ============================================================
   9. ท้ายหน้า
   ============================================================ */
.g9s-outer-theme .main-footer{
  position:fixed;
  left:var(--sidebar-w);
  right:0;
  bottom:0;
  width:auto;
  height:var(--footer-h);
  padding:0 18px;
  background:var(--ink);
  border-top:1px solid rgba(210,162,76,.2);
  color:rgba(236,238,242,.45);
  z-index:1000;
}
.g9s-outer-theme.sidebar-collapse .main-footer{ left:50px; }
.g9s-outer-theme .main-footer .footer-center{
  background:transparent;
  color:rgba(236,238,242,.45);
  font-family:var(--font-m);
  font-size:10px;
  letter-spacing:.9px;
  margin:0;
  height:var(--footer-h);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.g9s-outer-theme .main-footer .footer-center a{ color:var(--gold-2); }
.g9s-outer-theme .main-footer .footer-center a:hover{ color:var(--gold); }
.g9s-outer-theme .main-footer .footer-sep{ color:rgba(210,162,76,.35); }

@media (max-width:767px){
  .g9s-outer-theme .main-footer{ left:0; }
  .g9s-outer-theme .main-footer .footer-center{ font-size:8.5px; letter-spacing:.4px; }
}

/* ============================================================
   10. layer / toast
   ============================================================ */
.layui-layer-fast .layui-layer-title{
  background:linear-gradient(168deg, var(--ink), var(--ink-3)) !important;
  border-bottom:2px solid var(--gold) !important;
  color:#fff !important;
  font-family:var(--font-d) !important;
  font-weight:600;
}
.layui-layer-fast .layui-layer-btn{ background:var(--paper) !important; }
.layui-layer-fast .layui-layer-btn a{
  border-radius:8px;
  font-family:var(--font-d);
  font-weight:500;
  background-color:#fff;
  border:1px solid var(--line);
  color:var(--text) !important;
}
.layui-layer-fast .layui-layer-btn .layui-layer-btn0{
  background:var(--grad-gold) !important;
  border-color:transparent !important;
  color:var(--ink) !important;
}
.layui-layer,
.layui-layer-fast{ border-radius:12px !important; }

#toast-container > .toast-success{ background-color:var(--ok) !important; }
#toast-container > .toast-error{ background-color:var(--danger) !important; }
#toast-container > .toast-info{ background-color:var(--ink-3) !important; }
#toast-container > .toast-warning{ background-color:var(--warn) !important; }
#toast-container > div{
  border-radius:10px;
  opacity:1;
  box-shadow:0 10px 30px rgba(11,20,32,.25);
}

/* ============================================================
   11. ลดการเคลื่อนไหวเมื่อผู้ใช้ขอ
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .g9s-outer-theme *{
    animation:none !important;
    transition:none !important;
  }
}


/* ============================================================
   FIX — สู้ specificity ของ .skin-green ใน backend.css
   ============================================================ */

/* ไอคอนบน navbar : Home / ภาษา / เต็มจอ / avatar
   เดิมเป็นสีขาวบนพื้นขาว = มองไม่เห็น */
body.g9s-outer-theme.skin-green .main-header .navbar .nav > li > a,
body.g9s-outer-theme.skin-green .main-header .navbar .nav > li > a > .fa{
  color:var(--muted) !important;
  background:transparent;
}
body.g9s-outer-theme.skin-green .main-header .navbar .nav > li > a:hover,
body.g9s-outer-theme.skin-green .main-header .navbar .nav > li > a:focus,
body.g9s-outer-theme.skin-green .main-header .navbar .nav > li > a:active,
body.g9s-outer-theme.skin-green .main-header .navbar .nav .open > a,
body.g9s-outer-theme.skin-green .main-header .navbar .nav .open > a:hover,
body.g9s-outer-theme.skin-green .main-header .navbar .nav .open > a:focus,
body.g9s-outer-theme.skin-green .main-header .navbar .nav > .active > a{
  background:var(--gold-soft) !important;
  color:var(--gold-deep) !important;
}
body.g9s-outer-theme.skin-green .main-header .navbar .nav > li > a:hover > .fa{
  color:var(--gold-deep) !important;
}

/* ปุ่มเลือกคลัง — ต้องเป็นข้อความเข้ม ไม่ใช่ทองตอนปกติ */
body.g9s-outer-theme.skin-green .main-header .navbar .nav > li > a#btn-choose-warehouse{
  color:var(--ink) !important;
  background:var(--paper) !important;
}
body.g9s-outer-theme.skin-green .main-header .navbar .nav > li > a#btn-choose-warehouse:hover{
  background:var(--gold-soft) !important;
  color:var(--gold-deep) !important;
}

/* ปุ่ม hamburger */
body.g9s-outer-theme.skin-green .main-header .navbar .sidebar-toggle{
  color:var(--muted) !important;
}
body.g9s-outer-theme.skin-green .main-header .navbar .sidebar-toggle:hover{
  background:var(--gold-soft) !important;
  color:var(--gold-deep) !important;
}

/* avatar : hover ไม่ให้ขึ้นวงเขียว */
body.g9s-outer-theme.skin-green .main-header .navbar .nav > .user-menu > a:hover,
body.g9s-outer-theme.skin-green .main-header .navbar .nav > .user-menu.open > a{
  background:var(--gold-soft) !important;
  color:var(--ink) !important;
}
body.g9s-outer-theme.skin-green .main-header li.user-header{
  background:linear-gradient(168deg, var(--ink), var(--ink-3)) !important;
}

/* dropdown ภาษา */
body.g9s-outer-theme .navbar-custom-menu .dropdown-menu{
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(11,20,32,.14);
  padding:6px;
}
body.g9s-outer-theme .navbar-custom-menu .dropdown-menu > li > a{
  border-radius:7px;
  padding:8px 12px;
}
body.g9s-outer-theme .navbar-custom-menu .dropdown-menu > li > a:hover{
  background:var(--gold-soft);
  color:var(--gold-deep);
}

/* ============================================================
   แจ้งเตือน el-notification — "จุดต่ำสุด" คือคำเตือน ไม่ใช่ความสำเร็จ
   ของเดิมฮาร์ดโค้ดเขียว #18bc9c ไว้ ผิดความหมาย
   ============================================================ */
.el-notification{
  background-color:var(--ink) !important;
  border-left:4px solid var(--gold) !important;
  border-radius:10px !important;
  font-family:var(--font-d) !important;
}
.el-notification__icon,
.el-notification__title,
.el-notification__content,
.el-notification__closeBtn{ color:#fff !important; }
.el-notification__icon{ color:var(--gold-2) !important; }
.el-notification__content code{
  background:rgba(210,162,76,.18);
  color:var(--gold-2);
  border-radius:4px;
}

/* ============================================================
   หน้าจอ loading — เดิมเป็นน้ำเงิน #3b82f6
   ============================================================ */
.g9s-global-loading{
  --g9s-brand:#d2a24c !important;
  --g9s-ink:#0b1420 !important;
}
.g9s-global-spinner{
  background:conic-gradient(from 0deg,
    rgba(210,162,76,0) 0%,
    rgba(210,162,76,.95) 55%,
    rgba(210,162,76,0) 100%) !important;
}
.g9s-global-progress > i{
  background:linear-gradient(90deg,
    rgba(210,162,76,0),
    rgba(210,162,76,.95),
    rgba(210,162,76,0)) !important;
}

/* ============================================================
   FIX FOOTER — ปิด scrollbar ด้านนอก + จัด footer ให้เต็มแถบ
   ============================================================ */

/* ต้นเหตุ: backend.css สั่ง html,body { min-height:99% }
   ทำให้เอกสารสูงเกินจอ เกิด scrollbar ด้านนอก แล้ว footer แบบ fixed
   เลื่อนไปทับเนื้อหา / ดูเหมือนโดนตัด */
html{
  height:100%;
  overflow:hidden;
}
body.g9s-outer-theme{
  height:100%;
  min-height:100%;
  overflow:hidden;
}
.g9s-outer-theme .wrapper{
  min-height:0;
  height:100vh;
  overflow:hidden;
}

/* footer : เต็มแถบจริง ซ้าย-ขวาแยกกัน ไม่ใช่กองกลาง */
.g9s-outer-theme .main-footer{
  position:fixed;
  left:var(--sidebar-w);
  right:0;
  bottom:0;
  width:auto;
  height:var(--footer-h);
  padding:0 18px;
  margin:0;
  background:var(--ink);
  border-top:1px solid rgba(210,162,76,.2);
  z-index:1100;                 /* ต้องสูงกว่า toolbar (900) */
  overflow:hidden;
}
.g9s-outer-theme .main-footer .footer-center{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;   /* ซ้ายชิดซ้าย ขวาชิดขวา */
  gap:12px;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background:transparent;
  font-family:var(--font-m);
  font-size:10px;
  letter-spacing:1px;
  color:rgba(236,238,242,.42);
  white-space:nowrap;
  overflow:hidden;
}
.g9s-outer-theme .main-footer .footer-left,
.g9s-outer-theme .main-footer .footer-right{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.g9s-outer-theme .main-footer a{ color:var(--gold-2); }
.g9s-outer-theme .main-footer a:hover{ color:var(--gold); }
.g9s-outer-theme .main-footer .footer-sep{ color:rgba(210,162,76,.3); }
.g9s-outer-theme .main-footer .footer-ver{
  color:var(--gold-deep);
  border:1px solid rgba(210,162,76,.28);
  border-radius:4px;
  padding:1px 7px;
  letter-spacing:1.4px;
}

/* toolbar นั่งบน footer พอดี */
.custom-toolbar-wrapper{ bottom:var(--footer-h) !important; }

/* iframe ไม่ให้สร้าง scrollbar แนวนอนโผล่มาบัง */
.g9s-outer-theme .tab-pane > iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  overflow-x:hidden;
}

@media (max-width:767px){
  .g9s-outer-theme .main-footer{ left:0; padding:0 10px; }
  .g9s-outer-theme .main-footer .footer-center{ font-size:8.5px; letter-spacing:.3px; }
  .g9s-outer-theme .main-footer .footer-right{ display:none; }
}