/* =========================================================
GloryNail Studio — theme.css (Unified CLEAN)
✅ เป้าหมาย:
- หน้าตาเดิม “ใกล้ที่สุด”
- ลดการทับกันมั่ว / ลบโค้ดซ้ำ
- Desktop / Tablet / Mobile แยกสัดส่วนชัด
- Scope ให้แคบ: ไม่ยิงทั่วเว็บมั่วๆ
========================================================= */
/* =========================
0) TOKENS / BASE
========================= */
:root{
/* Palette */
--gn-bg: #ffffff;
--gn-surface: #ffffff;
--gn-default: #3f3f46;
--gn-heading: #18181b;
--gn-accent: #D5A6BD;
--gn-contrast: #ffffff;
/* 🎨 Brand tokens (per-tenant) — Override ใน ผ่าน inc/tenant_theme.php
เปลี่ยนค่าตรงนี้ = เปลี่ยนสีทั้งระบบ */
--brand: #D5A6BD;
--brand-2: #C98CA8;
--brand-soft: #E8C5D4;
--brand-pale: #FBEFF4;
--brand-rgb: 213,166,189;
--brand-2-rgb: 201,140,168;
--brand-soft-rgb: 232,197,212;
/* Layout */
--gn-radius: 18px;
--gn-radius-sm: 14px;
--gn-border: rgba(24,24,27,.10);
--gn-shadow: 0 12px 35px rgba(24,24,27,.10);
--gn-shadow-soft: 0 10px 25px rgba(24,24,27,.08);
--gn-max: 100%;
--gn-pad: 26px;
/* Motion */
--gn-ease: cubic-bezier(.2,.9,.2,1);
/* Typography scale (ปรับได้ทีหลังง่าย) */
--gn-fs: 16px;
--gn-fs-sm: 14px;
/* Component heights */
--gn-ctl-h: 42px;
--gn-ctl-h-sm: 40px;
}
*{ box-sizing:border-box; }
html,body{
height:100%;
width:100%;
max-width:100%;
overflow-x:hidden; /* กันหลุดจอทั่วเว็บ */
}
/* 🎨 Text selection — ใช้สีแบรนด์ตาม theme ของแต่ละร้าน (ไม่ใช่สีดำ/ฟ้า default) */
::selection{
background: rgba(var(--brand-rgb), .32);
color: var(--gn-heading);
text-shadow: none;
}
::-moz-selection{
background: rgba(var(--brand-rgb), .32);
color: var(--gn-heading);
text-shadow: none;
}
body{
margin:0;
font-family:"Prompt",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
font-size: var(--gn-fs);
color: var(--gn-default);
background:
radial-gradient(1200px 600px at 10% -5%, rgba(var(--brand-rgb),.35) 0%, transparent 55%),
radial-gradient(900px 500px at 95% 0%, rgba(63,63,70,.08) 0%, transparent 52%),
var(--gn-bg);
}
a{ color:inherit; text-decoration:none; }
a:hover{ color:inherit; }
/* Prompt for all controls (bootstrap override แบบไม่ทำให้เพี้ยน) */
:where(button,.btn,input,select,textarea){
font-family:"Prompt",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}
/* reduce motion (มืออาชีพ: กันผู้ใช้เวียนหัว) */
@media (prefers-reduced-motion: reduce){
*{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}
/* Helpers */
.gn-container{ max-width:var(--gn-max); margin:0 auto; padding:0 var(--gn-pad); }
.gn-muted{ color:rgba(63,63,70,.70); }
.gn-heading{ color:var(--gn-heading); }
/* App shell */
.gn-app{ min-height:100%; display:flex; }
/* =========================
1) SIDEBAR
========================= */
.gn-sidebar{
width:270px;
background: linear-gradient(180deg, rgba(63,63,70,1) 0%, rgba(24,24,27,1) 100%);
color: rgba(255,255,255,.92);
padding:18px 14px;
position:sticky;
top:0;
height:100vh;
overflow:auto;
border-right:1px solid rgba(255,255,255,.08);
}
.gn-brand{
display:flex;
align-items:center;
gap:12px;
padding:10px 10px 14px;
border-bottom:1px solid rgba(255,255,255,.10);
margin-bottom:14px;
}
.gn-brand-logo{
width:42px; height:42px;
border-radius:14px;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,.15)),
linear-gradient(135deg, rgba(var(--brand-rgb),.95), rgba(255,255,255,.10));
display:grid;
place-items:center;
box-shadow:0 12px 30px rgba(0,0,0,.20);
}
.gn-brand-logo i{ font-size:22px; color:rgba(24,24,27,.92); }
.gn-brand-title{ line-height:1.1; }
.gn-brand-title b{ display:block; font-size:16px; letter-spacing:.2px; }
.gn-brand-title span{ display:block; font-size:12px; opacity:.75; }
.gn-nav{
display:flex;
flex-direction:column;
gap:6px;
padding:8px;
}
.gn-nav a{
display:flex;
align-items:center;
gap:12px;
padding:12px 12px;
border-radius:14px;
color: rgba(255,255,255,.88);
transition: transform .18s var(--gn-ease), background .18s var(--gn-ease), color .18s var(--gn-ease);
}
.gn-nav a i{ font-size:18px; width:22px; text-align:center; opacity:.95; }
.gn-nav a:hover{
background: rgba(var(--brand-rgb),.16);
color:#fff;
transform: translateX(2px);
}
.gn-nav a.active{
background: rgba(var(--brand-rgb),.25);
color:#fff;
box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.35);
}
/* 💎 Sidebar dropdown group (แพ็คเกจ & เครดิต ฯลฯ) */
.gn-nav-group{ display:flex; flex-direction:column; }
.gn-nav-group__toggle{
display:flex; align-items:center; gap:12px;
width:100%; padding:12px 12px; border-radius:14px;
background:transparent; border:0; color: rgba(255,255,255,.88);
font: inherit; text-align:left; cursor:pointer;
transition: transform .18s var(--gn-ease), background .18s var(--gn-ease), color .18s var(--gn-ease);
}
.gn-nav-group__toggle i.bi{ font-size:18px; width:22px; text-align:center; opacity:.95; }
.gn-nav-group__toggle:hover{
background: rgba(var(--brand-rgb),.16); color:#fff; transform: translateX(2px);
}
.gn-nav-group__toggle.active{
background: rgba(var(--brand-rgb),.25); color:#fff;
box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.35);
}
.gn-nav-group__label{ flex:1; min-width:0; }
.gn-nav-group__chev{
font-size:13px !important; width:auto !important;
transition: transform .18s var(--gn-ease); opacity:.7 !important;
}
.gn-nav-group.is-open .gn-nav-group__chev{ transform: rotate(180deg); opacity:1 !important; }
/* เมนูย่อย: ย่อ/ขยายด้วย max-height (reliable + animatable) */
.gn-nav-group__menu{
max-height: 0;
overflow: hidden;
opacity: 0;
padding-left: 14px;
transition: max-height .28s var(--gn-ease), opacity .22s var(--gn-ease);
}
.gn-nav-group.is-open .gn-nav-group__menu{
max-height: 600px; /* รองรับ sub-items ได้สบายๆ */
opacity: 1;
}
.gn-nav-group__menu a{
display:flex; align-items:center; gap:10px;
padding:9px 12px; margin-top:4px;
border-radius:11px; font-size:13px;
color: rgba(255,255,255,.78);
background: rgba(255,255,255,.03); /* ✅ พื้นจางๆ ให้ดูเป็น "เมนู" ตลอด */
border-left: 3px solid rgba(var(--brand-rgb), .55); /* ✅ แถบซ้ายสีธีม โชว์เสมอ */
transition: background .18s var(--gn-ease), color .18s var(--gn-ease), border-color .18s var(--gn-ease), transform .18s var(--gn-ease);
}
.gn-nav-group__menu a i{ font-size:15px; width:18px; text-align:center; opacity:.9; }
.gn-nav-group__menu a:hover{
background: rgba(var(--brand-rgb),.16);
border-left-color: var(--brand);
color:#fff;
transform: translateX(2px);
}
.gn-nav-group__menu a.active{
background: rgba(var(--brand-rgb),.28);
border-left-color: var(--brand);
color:#fff;
box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb),.40);
}
.gn-sidebar .gn-sidecard{
margin-top:12px;
padding:14px 14px;
border-radius:16px;
background: rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}
.gn-sidecard .chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:999px;
background: rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.12);
font-size:12px;
}
.gn-sidecard .chip i{ font-size:14px; }
/* =========================
2) MAIN / TOPBAR
========================= */
.gn-main{ flex:1; min-width:0; padding:0 0 90px; } /* ✅ topbar ติดขอบบน */
.gn-topbar{
position:sticky;
top:0;
z-index:50;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
background: rgba(255,255,255,.70);
border-bottom:1px solid var(--gn-border);
}
.gn-topbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px var(--gn-pad);
max-width:var(--gn-max);
margin:0 auto;
}
.gn-topbar-inner > *{ min-width:0; } /* กัน flex ดันล้น */
.gn-page-title{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.gn-page-title .icon{
width:40px; height:40px;
border-radius:14px;
background: rgba(var(--brand-rgb),.35);
border:1px solid rgba(var(--brand-rgb),.45);
display:grid;
place-items:center;
}
.gn-page-title .icon i{ color:var(--gn-heading); font-size:18px; }
.gn-page-title .text{ min-width:0; }
.gn-page-title .text b{
display:block;
color:var(--gn-heading);
font-size:16px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.gn-page-title .text span{
display:block;
font-size:12px;
color: rgba(63,63,70,.72);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.gn-actions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
min-width:0;
}
/* Search */
.gn-search{ position:relative; min-width:280px; }
.gn-search input{
width:100%;
border-radius:999px;
padding:10px 38px 10px 42px;
border:1px solid var(--gn-border);
background: rgba(255,255,255,.85);
outline:none;
transition: box-shadow .2s var(--gn-ease), border-color .2s var(--gn-ease);
}
.gn-search input:focus{
border-color: rgba(var(--brand-rgb),.75);
box-shadow: 0 0 0 6px rgba(var(--brand-rgb),.18);
}
.gn-search i{
position:absolute;
left:14px;
top:50%;
transform: translateY(-50%);
color: rgba(63,63,70,.72);
}
.gn-search .kbd{
position:absolute;
right:10px;
top:50%;
transform: translateY(-50%);
font-size:11px;
padding:4px 8px;
border-radius:999px;
background: rgba(24,24,27,.06);
border:1px solid rgba(24,24,27,.08);
color: rgba(24,24,27,.65);
}
/* =========================
3) BUTTONS
========================= */
.btn-gn{
border-radius:14px; /* ✅ rounded square (เดิม 999px = pill) */
padding:10px 14px;
border:1px solid rgba(24,24,27,.10);
background: rgba(255,255,255,.92);
color: var(--gn-heading);
box-shadow: 0 12px 30px rgba(24,24,27,.06);
transition: transform .18s var(--gn-ease), box-shadow .18s var(--gn-ease), border-color .18s var(--gn-ease);
white-space:nowrap;
display: inline-flex; /* ✅ ใช้ flex แทน → icon ตรงกลางอัตโนมัติ */
align-items: center;
justify-content: center;
gap: 8px; /* ✅ ระยะระหว่าง icon กับ text */
}
.btn-gn:hover{
transform: translateY(-1px);
box-shadow: 0 18px 40px rgba(24,24,27,.10);
border-color: rgba(var(--brand-rgb),.65);
}
/* ✅ ไม่ใช้ margin-right แล้ว ใช้ gap แทน → icon-only button ไม่มี gap ค้าง */
.btn-gn i{ margin: 0; }
/* GN: button variants */
.btn-gn-sm{ padding:8px 14px; font-size:13px; border-radius:12px; }
/* ✅ Icon-only button — square มน · icon ตรงกลางเป๊ะ
ใช้ class นี้ explicitly สำหรับปุ่มที่มีแค่ ตัวเดียว (ไม่มี text)
เพราะ CSS ไม่สามารถ detect text node ใน auto-rule ได้ */
.btn-gn-icon{
width: 38px; height: 38px;
min-width: 38px; min-height: 38px;
padding: 0 !important;
border-radius: 12px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-gn-icon i{ margin: 0 !important; font-size: 15px; line-height: 1; }
.btn-gn-icon.btn-sm,
.btn-gn-icon.btn-gn-sm{
width: 34px; height: 34px; min-width: 34px; min-height: 34px;
border-radius: 10px;
}
.btn-gn-icon.btn-sm i,
.btn-gn-icon.btn-gn-sm i{ font-size: 13px; }
.btn-gn-icon.btn-lg{
width: 46px; height: 46px; min-width: 46px; min-height: 46px;
border-radius: 14px;
}
.btn-gn-icon.btn-lg i{ font-size: 18px; }
/* ✅ Table row actions — รวมปุ่ม edit/delete/etc. ใน column "จัดการ"
แก้บัค form display:inline ทำให้ button alignment เพี้ยน */
.gn-row-actions{
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
.gn-row-actions__form{
margin: 0;
padding: 0;
display: inline-flex;
}
.gn-row-actions .btn-gn,
.gn-row-actions__form .btn-gn{
margin: 0;
}
.btn-gn-primary{
background: linear-gradient(135deg, rgba(var(--brand-rgb),1), rgba(255,255,255,.75));
border-color: rgba(var(--brand-rgb),.75);
}
.btn-gn-danger{
background: rgba(24,24,27,.92);
color:#fff;
border-color: rgba(255,255,255,.10);
}
.btn-gn-danger:hover{ border-color: rgba(var(--brand-rgb),.55); }
/* disabled กันคลิก */
.btn.disabled,
.btn[aria-disabled="true"],
.btn-gn.disabled,
.btn-gn[aria-disabled="true"]{
pointer-events:none !important;
opacity:.65;
filter:saturate(.75);
}
/* =========================
4) CARDS / STATS
========================= */
.gn-card{
background: #ffffff;
border: 1px solid rgba(24,24,27,.06);
border-radius: 20px;
box-shadow: 0 4px 14px rgba(24,24,27,.04);
overflow:hidden;
transition: box-shadow .18s var(--gn-ease);
}
.gn-card:hover{
box-shadow: 0 8px 22px rgba(24,24,27,.07);
}
.gn-card-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:18px 22px;
border-bottom: 1px solid rgba(24,24,27,.06);
font-size: 15px;
}
.gn-card-header b{
color: var(--gn-heading);
display:flex;
align-items:center;
gap:10px;
font-weight: 700;
}
.gn-card-header b i{ color: var(--brand-2); }
/* ✅ Auto-injected icons (จาก app.js decorateHeaders) — สีตามธีมเว็บ */
.gn-auto-ic{
color: var(--brand-2);
margin-right: 6px;
font-size: 0.95em;
vertical-align: -1px;
}
/* ใน table thead — เน้นไอคอนเด่นกว่า */
.gn-table thead th .gn-auto-ic,
table thead th .gn-auto-ic{
color: var(--brand-2);
opacity: .85;
margin-right: 7px;
}
/* card header ที่มีไอคอนจากระบบอยู่แล้ว (manual ) — ก็เปลี่ยนเป็นสีธีมเลย */
.gn-card-header b > i.bi:not(.gn-auto-ic){ color: var(--brand-2); }
/* gn-pill / badge ภายใน header → icon เป็นสีของ pill ไม่แย่งสีธีม */
.gn-card-header .gn-pill i,
.gn-card-header .badge i{ color: inherit; }
.gn-card-body{ padding:22px; }
.gn-stat{
display:flex;
align-items:flex-start;
gap:12px;
}
.gn-stat .badgeIcon{
width:44px; height:44px;
border-radius:16px;
display:grid;
place-items:center;
background: rgba(var(--brand-rgb),.25);
border: 1px solid rgba(var(--brand-rgb),.35);
}
.gn-stat .badgeIcon i{ color: var(--gn-heading); font-size:18px; }
.gn-stat .meta b{
display:block;
color: var(--gn-heading);
font-size:18px;
line-height:1.15;
}
.gn-stat .meta span{
display:block;
color: rgba(63,63,70,.72);
font-size:12px;
margin-top:2px;
}
/* =========================
5) TABLES / PILLS
========================= */
.gn-table{
width:100%;
border-collapse: separate;
border-spacing: 0 10px;
}
.gn-table thead th{
font-size:12px;
font-weight:600;
color: rgba(63,63,70,.70);
padding: 0 10px 6px;
}
.gn-table tbody tr{
background: rgba(255,255,255,.92);
box-shadow: 0 10px 24px rgba(24,24,27,.06);
}
.gn-table tbody td{
padding:12px 10px;
border-top: 1px solid rgba(24,24,27,.06);
border-bottom: 1px solid rgba(24,24,27,.06);
vertical-align: middle;
}
.gn-table tbody td:first-child{
border-left: 1px solid rgba(24,24,27,.06);
border-top-left-radius:16px;
border-bottom-left-radius:16px;
}
.gn-table tbody td:last-child{
border-right: 1px solid rgba(24,24,27,.06);
border-top-right-radius:16px;
border-bottom-right-radius:16px;
}
.gn-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 10px;
border-radius:999px;
font-size:12px;
border:1px solid rgba(24,24,27,.10);
background: rgba(24,24,27,.04);
color: rgba(24,24,27,.78);
}
.gn-pill.pink{
background: rgba(var(--brand-rgb),.25);
border-color: rgba(var(--brand-rgb),.45);
}
/* =========================
BADGES — soft pastel pills + auto-icon (Bootstrap override)
ทุก badge มี icon อัตโนมัติผ่าน ::before (ถ้าไม่มี inline)
========================= */
.badge{
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 4px 10px !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: .2px;
border: 1px solid transparent;
vertical-align: middle;
white-space: nowrap;
}
.badge i{ font-size: 11px; line-height: 1; }
/* Auto-icon ผ่าน ::before — โชว์เฉพาะ badge ที่ไม่มี อยู่ข้างใน
ใช้ unicode standard char (ไม่ต้องพึ่ง bootstrap-icons font) — render ได้ทุก browser */
.badge:not(:has(i))::before{
font-size: 11px;
line-height: 1;
flex-shrink: 0;
font-weight: 900;
}
/* SUCCESS — soft mint green */
.badge.bg-success,
.badge.text-bg-success{
background: rgba(34,197,94,.10) !important;
color: #15803d !important;
border-color: rgba(34,197,94,.25);
}
.badge.bg-success:not(:has(i))::before,
.badge.text-bg-success:not(:has(i))::before{
content: "✓";
color: #16a34a;
}
/* INFO — soft indigo */
.badge.bg-info,
.badge.text-bg-info{
background: rgba(99,102,241,.10) !important;
color: #4338ca !important;
border-color: rgba(99,102,241,.25);
}
.badge.bg-info:not(:has(i))::before,
.badge.text-bg-info:not(:has(i))::before{
content: "ℹ";
color: #4f46e5;
font-size: 13px;
}
/* WARNING — soft amber */
.badge.bg-warning,
.badge.text-bg-warning{
background: rgba(234,179,8,.12) !important;
color: #a16207 !important;
border-color: rgba(234,179,8,.28);
}
.badge.bg-warning:not(:has(i))::before,
.badge.text-bg-warning:not(:has(i))::before{
content: "⚠";
color: #ca8a04;
font-size: 12px;
}
/* DANGER — soft rose */
.badge.bg-danger,
.badge.text-bg-danger{
background: rgba(244,63,94,.10) !important;
color: #be123c !important;
border-color: rgba(244,63,94,.25);
}
.badge.bg-danger:not(:has(i))::before,
.badge.text-bg-danger:not(:has(i))::before{
content: "✕";
color: #e11d48;
}
/* SECONDARY / muted — soft gray */
.badge.bg-secondary,
.badge.text-bg-secondary{
background: rgba(100,116,139,.10) !important;
color: #475569 !important;
border-color: rgba(100,116,139,.20);
}
.badge.bg-secondary:not(:has(i))::before,
.badge.text-bg-secondary:not(:has(i))::before{
content: "●";
color: #94a3b8;
font-size: 7px;
}
/* PRIMARY — dusty rose theme */
.badge.bg-primary,
.badge.text-bg-primary{
background: rgba(var(--brand-rgb),.15) !important;
color: var(--brand-2) !important;
border-color: rgba(var(--brand-rgb),.35);
}
.badge.bg-primary:not(:has(i))::before,
.badge.text-bg-primary:not(:has(i))::before{
content: "✓";
color: var(--brand-2);
}
/* DARK — soft slate */
.badge.bg-dark,
.badge.text-bg-dark{
background: rgba(24,24,27,.85) !important;
color: #fff !important;
border-color: rgba(24,24,27,.85);
}
/* LIGHT — minimal white */
.badge.bg-light,
.badge.text-bg-light{
background: #fff !important;
color: #3f3f46 !important;
border-color: rgba(24,24,27,.10);
}
/* PINK theme badge (custom) — สำหรับ badge ที่อยากใช้ธีมโดยตรง */
.badge.bg-pink,
.badge.text-bg-pink{
background: linear-gradient(135deg, rgba(var(--brand-rgb),.18), rgba(var(--brand-soft-rgb),.15)) !important;
color: var(--brand-2) !important;
border-color: rgba(var(--brand-rgb),.45);
}
.badge.bg-pink:not(:has(i))::before,
.badge.text-bg-pink:not(:has(i))::before{
content: "♥";
color: var(--brand-2);
}
/* =========================
6) FORMS (เฉพาะใน .gn-form)
========================= */
.gn-form .form-control,
.gn-form .form-select{
border-radius:14px;
border:1px solid rgba(24,24,27,.12);
padding:12px 12px;
}
/* ✅ Form label icons → ใช้สีตามธีมเว็บ (var --brand-2) เปลี่ยนตามธีมที่เลือกที่ /settings?tab=theme */
.form-label > i.bi,
.gn-form .form-label > i.bi,
.modal .form-label > i.bi,
.gn-field-label > i.bi,
.modal-body .form-label i.bi{
color: var(--brand-2);
margin-right: 4px;
}
.gn-form .form-control:focus,
.gn-form .form-select:focus{
border-color: rgba(var(--brand-rgb),.85);
box-shadow: 0 0 0 6px rgba(var(--brand-rgb),.18);
}
/* ✅ focus — ปุ่มไม่ต้องมีขอบดำ (keyboard nav ใช้ :focus-visible เท่านั้น) */
.form-control:focus,
.form-select:focus{
border-color: rgba(var(--brand-rgb),.55) !important;
box-shadow: 0 0 0 .18rem rgba(var(--brand-rgb),.18) !important;
outline: none !important;
}
/* ปุ่มทั้งหมด: ไม่มีขอบดำตอนคลิก (mouse focus) */
.btn:focus,
.btn-gn:focus,
.gn-modal-btn:focus,
button:focus{
outline: none !important;
box-shadow: none !important;
}
/* แต่ถ้าใช้คีย์บอร์ด (Tab) → โชว์ ring สีธีมเพื่อ accessibility */
.btn:focus-visible,
.btn-gn:focus-visible,
.gn-modal-btn:focus-visible,
button:focus-visible{
outline: none !important;
box-shadow: 0 0 0 .18rem rgba(var(--brand-rgb),.32) !important;
}
/* select caret black */
.form-select{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='rgba(17,24,39,0.92)' d='M7.247 11.14 2.451 5.658c-.566-.648-.106-1.658.753-1.658h9.592c.86 0 1.319 1.01.753 1.658L8.753 11.14a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e") !important;
}
/* =========================
7) FOOTER
========================= */
.gn-footer{
margin-top:18px;
padding:18px 0 0;
color: rgba(63,63,70,.70);
font-size:12px;
}
.gn-footer .foot{
padding:16px;
border-top:1px solid rgba(24,24,27,.10);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}
/* =========================
8) MOBILE NAV + FAB
========================= */
.gn-bottomnav{
position: fixed;
left:0; right:0; bottom:0;
z-index:200;
background: rgba(255,255,255,.80);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top:1px solid rgba(24,24,27,.10);
padding:10px 10px calc(10px + env(safe-area-inset-bottom));
display:none;
}
.gn-bottomnav .wrap{
display:grid;
grid-template-columns:repeat(7, minmax(0, 1fr));
gap:6px;
}
.gn-bottomnav a{
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
padding:8px 4px;
border-radius:14px;
color: rgba(24,24,27,.70);
border:1px solid transparent;
}
.gn-bottomnav a i{ font-size:17px; }
.gn-bottomnav a small{
display:block;
font-size:10px;
line-height:1.1;
text-align:center;
white-space:normal;
word-break:break-word;
}
.gn-bottomnav a.active{
background: rgba(var(--brand-rgb),.25);
border-color: rgba(var(--brand-rgb),.45);
color: var(--gn-heading);
}
.gn-fab{
position: fixed;
right:16px;
bottom:86px;
z-index:220;
width:54px; height:54px;
border-radius:999px;
display:none;
place-items:center;
color: var(--gn-heading);
background: linear-gradient(135deg, rgba(var(--brand-rgb),1), rgba(255,255,255,.7));
border: 1px solid rgba(var(--brand-rgb),.7);
box-shadow: 0 20px 55px rgba(24,24,27,.16);
transition: transform .18s var(--gn-ease);
}
.gn-fab:hover{ transform: translateY(-2px) rotate(-1deg); }
.gn-fab i{ font-size:22px; }
/* =========================
9) CONFIRM MODAL (custom)
========================= */
.gn-modal-backdrop{
position:fixed;
inset:0;
background: rgba(24,24,27,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display:none;
align-items:center;
justify-content:center;
z-index:1000;
}
.gn-modal{
width: min(520px, calc(100vw - 26px));
background: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.55);
border-radius:22px;
box-shadow: 0 30px 80px rgba(0,0,0,.25);
overflow:hidden;
transform: translateY(10px) scale(.98);
opacity:0;
transition: transform .2s var(--gn-ease), opacity .2s var(--gn-ease);
}
.gn-modal-backdrop.show{ display:flex; }
.gn-modal-backdrop.show .gn-modal{ transform: translateY(0) scale(1); opacity:1; }
.gn-modal .head{
padding:16px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
border-bottom:1px solid rgba(24,24,27,.08);
}
.gn-modal .head b{
display:flex;
align-items:center;
gap:10px;
color: var(--gn-heading);
}
.gn-modal .head .x{
width:40px; height:40px;
border-radius:999px;
border:1px solid rgba(24,24,27,.10);
background: rgba(24,24,27,.04);
display:grid;
place-items:center;
cursor:pointer;
}
.gn-modal .body{ padding:16px 18px; }
.gn-modal .foot{
padding:14px 18px;
display:flex;
justify-content:flex-end;
gap:10px;
border-top:1px solid rgba(24,24,27,.08);
}
/* =========================
10) TOAST — ย้ายไป inc/flash_toast.php (V2)
- .gn-toast / .gn-toast-host ของใหม่ inject CSS เอง
- ของเดิมในไฟล์นี้ถูกลบเพื่อกัน selector ชน
========================= */
/* =========================
11) TABS (ใช้ทั่วเว็บ)
========================= */
.gn-tabnav{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
margin-bottom:10px;
}
.gn-tabnav .nav{
border:1px solid rgba(148,163,184,.28);
background: rgba(255,255,255,.55);
border-radius:999px;
padding:6px;
}
.gn-tabnav .nav .nav-link{
border-radius:999px;
font-weight:1000;
color: rgba(17,24,39,.92);
}
.gn-tabnav .nav .nav-link:hover{ background: rgba(17,24,39,.06); }
.gn-tabnav .nav .nav-link.active{
background: rgba(var(--brand-rgb),.25);
border: 1px solid rgba(17,24,39,.28);
color: rgba(17,24,39,.92);
box-shadow: 0 10px 18px rgba(0,0,0,.06);
}
/* =========================================================
12) CALENDAR (SCOPED VARS กันชน :root)
========================================================= */
.gn-cal-wrap{
--gn-cal-pink: rgba(var(--brand-rgb),1);
--gn-cal-border: rgba(148,163,184,.28);
--gn-cal-day-bg: rgba(148,163,184,.14);
--gn-cal-day-bg-2: rgba(148,163,184,.18);
--gn-cal-text: rgba(17,24,39,.92);
--gn-cal-text-soft: rgba(17,24,39,.65);
display:flex;
flex-direction:column;
gap:10px;
}
.gn-cal-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.gn-cal-nav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.gn-cal-title{ font-weight:1000; letter-spacing:.2px; color: var(--gn-cal-text) !important; }
.gn-cal{ display:grid; grid-template-columns: repeat(7, 1fr); gap:10px; }
.gn-cal .dow{
font-size:12px;
color: var(--gn-cal-text-soft) !important;
text-align:center;
padding:6px 0;
font-weight:1000;
}
.gn-day{
position:relative;
border:1px solid var(--gn-cal-border);
background: var(--gn-cal-day-bg);
border-radius:16px;
min-height:66px;
padding:10px;
text-decoration:none !important;
color: var(--gn-cal-text) !important;
overflow:hidden;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.gn-day:hover{
transform: translateY(-1px);
border-color: rgba(var(--brand-rgb),.55);
box-shadow: 0 12px 26px rgba(0,0,0,.10);
background: var(--gn-cal-day-bg-2);
}
.gn-day .num{ font-weight:1100; font-size:15px; }
.gn-day .mini{ margin-top:6px; font-size:12px; color: var(--gn-cal-text-soft) !important; }
.gn-day.has{
border-color: rgba(var(--brand-rgb),.85);
box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18) inset, 0 10px 18px rgba(0,0,0,.10);
background: radial-gradient(circle at top, rgba(var(--brand-rgb),.10) 0%, transparent 60%), var(--gn-cal-day-bg);
}
.gn-day .badge{
position:absolute; right:10px; top:10px;
display:inline-flex; align-items:center; gap:6px;
padding:4px 10px; border-radius:999px;
font-size:12px; font-weight:1100;
background: rgba(var(--brand-rgb),.12);
border:1px solid rgba(var(--brand-rgb),.28);
color: var(--gn-cal-text) !important;
}
.gn-day .hint{ position:absolute; left:10px; bottom:10px; font-size:11px; color: var(--gn-cal-text-soft) !important; }
.gn-day.today{
border-color: rgba(var(--brand-rgb),.55);
box-shadow: 0 0 0 2px rgba(var(--brand-rgb),.12) inset;
}
.gn-day.selected{
border-color: rgba(var(--brand-rgb),1);
background: radial-gradient(circle at 30% 25%, rgba(var(--brand-rgb),.16) 0%, transparent 55%), var(--gn-cal-day-bg);
box-shadow:
0 0 0 3px rgba(var(--brand-rgb),.25) inset,
0 0 0 1px rgba(var(--brand-rgb),.40),
0 10px 22px rgba(var(--brand-rgb),.18),
0 0 28px rgba(var(--brand-rgb),.28);
transform: translateY(-1px);
}
.gn-day.selected::after{
content:"";
position:absolute; right:10px; bottom:10px;
width:10px; height:10px;
border-radius:999px;
background: rgba(var(--brand-rgb),1);
box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.18), 0 0 18px rgba(var(--brand-rgb),.45);
opacity:.95;
}
.gn-day.empty{
border:1px dashed rgba(148,163,184,.22);
background: rgba(148,163,184,.08);
pointer-events:none;
min-height:66px;
}
/* WEEK */
.gn-week-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gn-week-grid{ display:grid; gap:10px; grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1200px){ .gn-week-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px){ .gn-week-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .gn-week-grid{ grid-template-columns: 1fr; } }
.gn-week-day{
border:1px solid rgba(148,163,184,.28);
background: rgba(148,163,184,.14);
border-radius:18px;
padding:12px;
overflow:hidden;
}
.gn-week-day .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.gn-week-day .date{ font-weight:1000; color: rgba(17,24,39,.92); }
.gn-week-day .sub{ font-size:12px; color: rgba(17,24,39,.65); margin-top:2px; }
.gn-week-day .cnt{
display:inline-flex; align-items:center; gap:6px;
padding:4px 10px; border-radius:999px;
font-size:12px; font-weight:1000;
border:1px solid rgba(var(--brand-rgb),.28);
background: rgba(var(--brand-rgb),.12);
color: rgba(17,24,39,.92);
}
.gn-slots{ display:flex; flex-wrap:wrap; gap:8px; }
.gn-slot{
display:inline-flex; align-items:center; gap:6px;
padding:7px 10px; border-radius:999px;
border:1px solid rgba(148,163,184,.35);
background: rgba(255,255,255,.55);
color: rgba(17,24,39,.92);
font-weight:900;
font-size:12px;
cursor:pointer;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.gn-slot:hover{ transform: translateY(-1px); border-color: rgba(var(--brand-rgb),.55); box-shadow: 0 10px 18px rgba(0,0,0,.10); }
.gn-slot.full{ opacity:.7; cursor:default; pointer-events:none; }
/* =========================================================
13) QUICK BOOK MODAL (center + blur)
========================================================= */
body.gn-book-open{ overflow:hidden; }
body.gn-book-open .gn-app,
body.gn-book-open .gn-bottomnav,
body.gn-book-open .gn-fab{
filter: blur(8px);
transition: filter .18s ease;
}
#gnBookModal{
position: fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
z-index: 99999999 !important;
opacity:0;
visibility:hidden;
pointer-events:none;
transition: opacity .18s ease, visibility .18s ease;
}
#gnBookModal.open{
opacity:1;
visibility:visible;
pointer-events:auto;
}
#gnBookModal .gn-book-backdrop{
position:absolute;
inset:0;
background: rgba(2,6,23,.55);
backdrop-filter: blur(12px);
}
#gnBookModal .gn-book-dialog{
position: fixed !important;
left:50% !important;
top:50% !important;
transform: translate(-50%,-48%) scale(.985) !important;
width: min(860px, calc(100vw - 36px)) !important;
max-height: calc(100vh - 48px) !important;
overflow:auto !important;
background: rgba(255,255,255,.98) !important;
border: 1px solid rgba(148,163,184,.35) !important;
border-radius:22px !important;
box-shadow: 0 30px 90px rgba(0,0,0,.40) !important;
transition: transform .18s ease;
}
#gnBookModal.open .gn-book-dialog{ transform: translate(-50%,-50%) scale(1) !important; }
#gnBookModal .gn-book-head{
position: sticky;
top:0;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
background: rgba(255,255,255,.98);
border-bottom: 1px solid rgba(148,163,184,.25);
}
#gnBookModal .gn-book-body{ padding:14px 16px 16px; }
#gnBookModal .whenpill{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight:900;
border:1px solid rgba(var(--brand-rgb),.25);
background: rgba(var(--brand-rgb),.10);
color: rgba(17,24,39,.92);
}
#gnBookModal .closebtn{
border: 1px solid rgba(148,163,184,.35);
background: rgba(255,255,255,.75);
padding:10px 12px;
border-radius:14px;
cursor:pointer;
}
#gnBookModal .closebtn:hover{ background: rgba(0,0,0,.06); }
/* Book items proportions */
#gnBookModal #gnBookItems thead tr,
#gnBookModal #gnBookItems tbody tr{
display:grid;
grid-template-columns: minmax(320px, 1fr) 90px 130px 62px;
gap:10px;
align-items:center;
}
#gnBookModal #gnBookItems th,
#gnBookModal #gnBookItems td{ padding:10px; border:0; }
#gnBookModal #gnBookItems td:last-child{ display:flex; justify-content:flex-end; }
@media (max-width: 520px){
#gnBookModal #gnBookItems thead{ display:none; }
#gnBookModal #gnBookItems tbody tr{ grid-template-columns: 1fr 86px 118px 58px; }
}
#gnBookModal .gn-cust-create{ display:none; margin-top:10px; }
#gnBookModal .gn-cust-create.open{ display:block; }
/* dup confirm modal theme */
#gnDupConfirmModal .modal-content{
border-radius:18px;
border:1px solid rgba(148,163,184,.28);
overflow:hidden;
}
#gnDupConfirmModal .modal-header{
background: rgba(255,255,255,.92);
border-bottom: 1px solid rgba(148,163,184,.18);
}
#gnDupConfirmModal .modal-footer{
background: rgba(255,255,255,.92);
border-top: 1px solid rgba(148,163,184,.18);
}
/* z-index safety */
body.gn-book-open .modal-backdrop{ z-index:100000208 !important; }
body.gn-book-open #gnDupConfirmModal{ z-index:100000209 !important; }
body.gn-book-open #gnDupConfirmModal .modal-dialog{ position:relative; z-index:100000210 !important; }
/* prevent click-through when dup opens */
body.gn-dup-open #gnBookModal,
body.gn-dup-open #gnBookModal *{ pointer-events:none !important; }
/* =========================================================
14) ITEMS TABLE (gn-items)
========================================================= */
.gn-items{
--it-svc: 56%;
--it-qty: 14%;
--it-price: 18%;
--it-del: 12%;
table-layout: fixed;
width:100%;
}
.gn-items th:nth-child(1), .gn-items td:nth-child(1){ width: var(--it-svc); }
.gn-items th:nth-child(2), .gn-items td:nth-child(2){ width: var(--it-qty); }
.gn-items th:nth-child(3), .gn-items td:nth-child(3){ width: var(--it-price); }
.gn-items th:nth-child(4), .gn-items td:nth-child(4){ width: var(--it-del); }
.gn-items td{ vertical-align:middle; }
.gn-items select, .gn-items input{ width:100%; min-width:0 !important; }
.gn-items .btn-gn-danger{
width:40px; height:40px;
padding:0 !important;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
flex: 0 0 40px;
}
.gn-items .btn-gn-danger i{ margin:0 !important; }
.gn-items .rm{ white-space:nowrap; }
@media (max-width: 768px){
.gn-items{
--it-svc: 52%;
--it-qty: 16%;
--it-price: 20%;
--it-del: 12%;
}
}
@media (max-width: 520px){
.gn-items th:nth-child(2), .gn-items td:nth-child(2){ width:56px !important; }
.gn-items th:nth-child(3), .gn-items td:nth-child(3){ width:74px !important; }
.gn-items th:nth-child(4), .gn-items td:nth-child(4){ width:44px !important; }
.gn-items th:nth-child(1), .gn-items td:nth-child(1){ width:auto !important; }
.gn-items .form-control,
.gn-items .form-select{
height: var(--gn-ctl-h-sm);
font-size:13px;
padding-top:8px;
padding-bottom:8px;
border-radius:14px;
}
.gn-items td:nth-child(1){ overflow:hidden; }
.gn-items td:nth-child(1) .form-select{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.gn-items .btn-gn-danger{
width:38px; height:38px;
flex-basis:38px;
}
}
/* =========================================================
15) FINANCE MODAL (#editIncomeModal) — svc-table FIX
========================================================= */
#editIncomeModal .svc-table-wrap{
border: 1px solid rgba(17,24,39,.12);
border-radius:18px;
background: rgba(255,255,255,.70);
padding:10px;
max-height:42dvh;
overflow:auto;
}
#editIncomeModal .svc-table{
width:100% !important;
table-layout:fixed !important;
border-collapse:separate !important;
border-spacing:0 10px !important;
}
#editIncomeModal .svc-table thead{ display: table-header-group !important; }
#editIncomeModal .svc-table tbody{ display: table-row-group !important; width:100% !important; }
#editIncomeModal .svc-table tr{ display: table-row !important; }
#editIncomeModal .svc-table th,
#editIncomeModal .svc-table td{
display: table-cell !important;
vertical-align: middle !important;
min-width:0 !important;
max-width:100% !important;
}
#editIncomeModal .svc-table tr.svc-row{
display: table-row !important;
grid-template-columns:none !important;
grid-template-areas:none !important;
gap:0 !important;
padding:0 !important;
margin:0 !important;
background: transparent !important;
border:0 !important;
}
#editIncomeModal .svc-table thead th{
font-size:12px;
font-weight:900;
color: rgba(17,24,39,.55);
padding:6px 10px;
white-space:nowrap;
}
#editIncomeModal .svc-table tbody td{
padding:10px 10px;
background: rgba(255,255,255,.92);
border-top: 1px solid rgba(17,24,39,.08);
border-bottom: 1px solid rgba(17,24,39,.08);
}
#editIncomeModal .svc-table tbody td:first-child{
border-left: 1px solid rgba(17,24,39,.08);
border-top-left-radius:16px;
border-bottom-left-radius:16px;
}
#editIncomeModal .svc-table tbody td:last-child{
border-right: 1px solid rgba(17,24,39,.08);
border-top-right-radius:16px;
border-bottom-right-radius:16px;
}
#editIncomeModal .svc-table .form-select,
#editIncomeModal .svc-table .form-control{
width:100% !important;
min-width:0 !important;
height: var(--gn-ctl-h);
border-radius:14px;
border:1px solid rgba(17,24,39,.12);
background: rgba(255,255,255,.95);
font-size:14px;
}
#editIncomeModal .svc-table .form-control.text-end{ text-align:center !important; }
#editIncomeModal .svc-table td:nth-child(1){ overflow:hidden; }
#editIncomeModal .svc-table td:nth-child(1) .form-select{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#editIncomeModal .svc-table td:nth-child(4) .gn-pill{
width:100%;
height: var(--gn-ctl-h);
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
white-space:nowrap;
background: rgba(255,255,255,.90);
border:1px solid rgba(17,24,39,.12);
color: rgba(17,24,39,.90);
font-weight:900;
font-size:13px;
}
#editIncomeModal .svc-table .btn-gn-danger,
#editIncomeModal .svc-table [data-svc-del]{
position: static !important;
transform: none !important;
width:44px;
height:44px;
padding:0 !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background: rgba(17,24,39,.92) !important;
border:1px solid rgba(255,255,255,.10) !important;
}
#editIncomeModal .svc-table .btn-gn-danger i,
#editIncomeModal .svc-table [data-svc-del] i{
margin:0 !important;
font-size:16px;
}
/* Desktop/Tablet column widths */
#editIncomeModal .svc-table th:nth-child(2),
#editIncomeModal .svc-table td:nth-child(2){ width:12% !important; }
#editIncomeModal .svc-table th:nth-child(3),
#editIncomeModal .svc-table td:nth-child(3){ width:16% !important; }
#editIncomeModal .svc-table th:nth-child(4),
#editIncomeModal .svc-table td:nth-child(4){ width:16% !important; }
#editIncomeModal .svc-table th:nth-child(5),
#editIncomeModal .svc-table td:nth-child(5){ width:56px !important; }
#editIncomeModal .svc-table th:nth-child(1),
#editIncomeModal .svc-table td:nth-child(1){ width:auto !important; }
@media (max-width:520px){
#editIncomeModal .svc-table-wrap{ padding:8px !important; }
#editIncomeModal .svc-table thead th{ padding:6px 6px !important; font-size:12px !important; }
#editIncomeModal .svc-table tbody td{ padding:8px 6px !important; }
#editIncomeModal .svc-table th:nth-child(2),
#editIncomeModal .svc-table td:nth-child(2){ width:44px !important; }
#editIncomeModal .svc-table th:nth-child(3),
#editIncomeModal .svc-table td:nth-child(3){ width:62px !important; }
#editIncomeModal .svc-table th:nth-child(4),
#editIncomeModal .svc-table td:nth-child(4){ width:72px !important; }
#editIncomeModal .svc-table th:nth-child(5),
#editIncomeModal .svc-table td:nth-child(5){ width:44px !important; }
#editIncomeModal .svc-table .form-control,
#editIncomeModal .svc-table .form-select{
height: var(--gn-ctl-h-sm) !important;
font-size:13px !important;
}
#editIncomeModal .svc-table td:nth-child(4) .gn-pill{
height: var(--gn-ctl-h-sm) !important;
font-size:13px !important;
}
#editIncomeModal .svc-table .btn-gn-danger,
#editIncomeModal .svc-table [data-svc-del]{
width:38px !important;
height:38px !important;
}
}
/* =========================================================
16) FINANCE PAGE (main .svc-table)
========================================================= */
main .svc-table-wrap{
border: 1px solid rgba(17,24,39,.12);
border-radius:18px;
background: rgba(255,255,255,.70);
padding:10px;
overflow:hidden;
}
main .svc-table{
width:100% !important;
table-layout:fixed !important;
border-collapse:collapse !important;
}
main .svc-table th,
main .svc-table td{ min-width:0 !important; vertical-align:middle; }
main .svc-table .form-select,
main .svc-table .form-control{
width:100% !important;
min-width:0 !important;
}
main .svc-table th:nth-child(2),
main .svc-table td:nth-child(2){ width:12% !important; }
main .svc-table th:nth-child(3),
main .svc-table td:nth-child(3){ width:16% !important; }
main .svc-table th:nth-child(4),
main .svc-table td:nth-child(4){ width:16% !important; }
main .svc-table th:nth-child(5),
main .svc-table td:nth-child(5){ width:56px !important; }
main .svc-table th:nth-child(1),
main .svc-table td:nth-child(1){ width:auto !important; }
main .svc-table td:nth-child(1){ overflow:hidden; }
main .svc-table td:nth-child(1) .form-select{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
main .svc-table .btn-gn-danger,
main .svc-table [data-svc-del]{
width:40px;
height:40px;
padding:0 !important;
border-radius:999px !important;
display:inline-flex;
align-items:center;
justify-content:center;
}
main .svc-table .btn-gn-danger i,
main .svc-table [data-svc-del] i{ margin:0 !important; }
@media (max-width:520px){
main .svc-table th,
main .svc-table td{
padding:8px 4px !important;
}
main .svc-table th:nth-child(2),
main .svc-table td:nth-child(2){ width:42px !important; }
main .svc-table th:nth-child(3),
main .svc-table td:nth-child(3){ width:60px !important; }
main .svc-table th:nth-child(4),
main .svc-table td:nth-child(4){ width:64px !important; }
main .svc-table th:nth-child(5),
main .svc-table td:nth-child(5){ width:40px !important; }
main .svc-table th:nth-child(1),
main .svc-table td:nth-child(1){
width: calc(100% - 42px - 60px - 64px - 40px) !important;
}
}
/* =========================================================
17) FINANCE CHART / TOOLTIP / HIGHLIGHT / PAGER
========================================================= */
.fin-chart{ width:100%; height:220px; display:block; }
@media (max-width:768px){ .fin-chart{ height:200px; } }
.fin-chart-wrap{ position:relative; width:100%; }
.fin-tooltip{
position:absolute;
z-index:10;
pointer-events:none;
display:none;
padding:10px 12px;
border-radius:14px;
background: rgba(255,255,255,.92);
border:1px solid rgba(17,24,39,.18);
box-shadow: 0 12px 24px rgba(0,0,0,.10);
backdrop-filter: blur(8px);
font-family:'Prompt',sans-serif;
font-size:13px;
color: rgba(17,24,39,.92);
white-space:nowrap;
transform: translate(-50%, -110%);
}
.fin-tooltip .t{ font-weight:1000; margin-bottom:6px; }
.fin-tooltip .r{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.fin-tooltip .exp{ color: rgba(var(--brand-rgb),.92); }
.gn-hl{
background: rgba(var(--brand-rgb),.08) !important;
outline: 2px solid rgba(var(--brand-rgb),.22);
outline-offset: -2px;
animation: finHL 1.2s ease-in-out 0s 2;
}
@keyframes finHL{
0%{ box-shadow: 0 0 0 0 rgba(var(--brand-rgb),.0); }
50%{ box-shadow: 0 0 0 8px rgba(var(--brand-rgb),.18); }
100%{ box-shadow: 0 0 0 0 rgba(var(--brand-rgb),.0); }
}
.fin-pager{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:10px;
}
.fin-pager .meta{ font-size:12px; color: rgba(15,23,42,.72); }
/* modal scroll guard */
#editIncomeModal .modal-footer{ flex-wrap:wrap; gap:8px; }
#editIncomeModal .fin-modal-dialog{
height: calc(100dvh - 24px) !important;
max-height: calc(100dvh - 24px) !important;
}
#editIncomeModal .fin-modal-content{
max-height: calc(100dvh - 24px) !important;
overflow:hidden !important;
}
#editIncomeModal .fin-modal-body{
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
max-height: calc(100dvh - 170px) !important;
padding-bottom:14px;
touch-action: pan-y;
}
#editIncomeModal .fin-modal-footer{
position: sticky;
bottom:0;
background: rgba(255,255,255,.96);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(17,24,39,.10);
z-index:2;
}
/* =========================================================
18) RESPONSIVE (Desktop / Tablet / Mobile)
========================================================= */
/* Desktop (>= 992px) */
@media (min-width: 992px){
:root{ --gn-pad: 18px; --gn-fs: 16px; }
.gn-bottomnav{ display:none; }
.gn-fab{ display:none; }
}
/* Tablet (<= 991.98px) */
@media (max-width: 991.98px){
:root{ --gn-pad: 16px; --gn-fs: 15px; }
body{ font-size: var(--gn-fs); }
.gn-sidebar{ display:none; }
.gn-bottomnav{ display:block; }
.gn-fab{ display:grid; }
/* กัน bottomnav/fab ทับ content */
.gn-main{ padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
.gn-search{ min-width: 220px; }
}
/* Mobile (<= 575.98px) */
@media (max-width: 575.98px){
:root{ --gn-pad: 14px; --gn-fs: 14px; }
body{ font-size: var(--gn-fs); }
.gn-bottomnav{ padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
.gn-bottomnav .wrap{ gap:4px; }
.gn-bottomnav a{ padding:7px 2px; border-radius:12px; }
.gn-bottomnav a i{ font-size:16px; }
.gn-bottomnav a small{ font-size:9px; }
/* Topbar two rows (กันล้น) */
.gn-topbar-inner{
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:10px;
}
.gn-page-title{ width:100%; }
.gn-actions{
width:100%;
flex-direction:column;
align-items:stretch;
gap:8px;
}
.gn-actions .btn-gn{
width:100%;
justify-content:center;
}
.gn-search{ display:none; }
.gn-page-title .text span{ display:none; }
}
/* Mobile extra narrow (<= 520px) */
@media (max-width: 520px){
/* ลดโอกาส table/action ล้น */
.gn-table{
width:100%;
table-layout: fixed;
}
.gn-table thead th{
padding:0 6px 6px;
font-size:11px;
}
.gn-table tbody td{
padding:10px 6px;
font-size:13px;
overflow-wrap:anywhere;
word-break: break-word;
}
.gn-pill{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* action column (ถ้ามีปุ่มหลายอัน) */
.gn-table tbody td:last-child{
padding-right:12px;
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
gap:8px;
}
.gn-table tbody td:last-child :where(a,button,.btn,.btn-gn){
max-width:100%;
transform:none !important;
}
/* calendar mobile clean: has=ขอบชมพู / จุดเฉพาะ selected */
.gn-cal{ gap:6px; }
.gn-cal .dow{ font-size:11px; padding:4px 0; }
.gn-day{ min-height:52px; padding:8px; border-radius:14px; }
.gn-day .num{ font-size:13px; }
.gn-day .mini{
position:absolute; left:8px; bottom:6px;
margin:0; font-size:10px; line-height:1;
}
.gn-day .badge,
.gn-day .hint{ display:none !important; }
.gn-day.has{
border-color: rgba(var(--brand-rgb),.95) !important;
box-shadow:none !important;
background: var(--gn-cal-day-bg) !important;
}
.gn-day::after{ content:none !important; }
.gn-day.selected::after{
content:"" !important;
position:absolute; right:7px; bottom:7px;
width:8px; height:8px; border-radius:999px;
background: rgba(var(--brand-rgb),1);
box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18), 0 0 14px rgba(var(--brand-rgb),.35);
opacity:.95;
z-index:2;
}
}
/* =========================================================
FIX: Bootstrap select caret ซ้ำเป็นหลายอัน (desktop/tablet/mobile)
สาเหตุ: มีการใช้ background: ... ไปรีเซ็ต repeat/position/size
========================================================= */
.form-select{
/* กัน caret tile ซ้ำ */
background-repeat: no-repeat !important;
background-position: right .75rem center !important;
background-size: 16px 12px !important;
/* เผื่อที่ให้ caret */
padding-right: 2.25rem !important;
/* กันบางธีมรีเซ็ตผิด */
background-clip: padding-box !important;
}
/* เฉพาะ popup แก้ไขรายรับ + จุดที่ใช้ select เยอะ: บังคับใช้ background-color (ไม่ใช้ background shorthand) */
#editIncomeModal .form-select,
#gnBookModal .form-select,
main .svc-table .form-select,
.gn-items .form-select{
background-color: rgba(255,255,255,.95) !important;
}
/* =========================================================
✅ FINANCE LIST (รายรับล่าสุด) — FIX “ยอด” + “จัดการ” ให้สวยบน Tablet/Mobile
- ยอด: ให้ ฿ กับตัวเลขอยู่บรรทัดเดียว
- จัดการ: จัดปุ่มเป็น grid 2 ปุ่มบน + ปุ่มลบเต็มแถวล่าง (สวย/ไม่เบียด)
* ทำงานเฉพาะจอเล็ก (<= 991.98px)
========================================================= */
@media (max-width: 991.98px){
/* เผื่อหน้า finance มี class ที่ body (ถ้ามีจะยิ่งเฉพาะเจาะจง) */
body.finance main .gn-table,
body.finances main .gn-table,
body.income main .gn-table,
main .gn-table{
/* กันตารางดันล้นในจอเล็ก */
width:100%;
}
/* ---------- 1) ยอด (คอลัมน์ที่ 4) ---------- */
body.finance main .gn-table tbody td:nth-child(4),
body.finances main .gn-table tbody td:nth-child(4),
body.income main .gn-table tbody td:nth-child(4),
main .gn-table tbody td:nth-child(4){
white-space: nowrap; /* ไม่ให้ตัดบรรทัด */
text-align: center;
font-variant-numeric: tabular-nums;
letter-spacing: .2px;
}
/* ถ้ามี
คั่นระหว่าง ฿ กับจำนวน -> ซ่อน br ให้กลายเป็นบรรทัดเดียว */
body.finance main .gn-table tbody td:nth-child(4) br,
body.finances main .gn-table tbody td:nth-child(4) br,
body.income main .gn-table tbody td:nth-child(4) br,
main .gn-table tbody td:nth-child(4) br{
display:none !important;
}
/* ถ้าในช่องยอดใช้ div/span แยกบล็อก -> บังคับให้ inline */
body.finance main .gn-table tbody td:nth-child(4) :where(div,span,b,strong,small),
body.finances main .gn-table tbody td:nth-child(4) :where(div,span,b,strong,small),
body.income main .gn-table tbody td:nth-child(4) :where(div,span,b,strong,small),
main .gn-table tbody td:nth-child(4) :where(div,span,b,strong,small){
display:inline !important;
margin:0 !important;
}
/* เพิ่มช่องว่างเล็ก ๆ ระหว่าง ฿ กับตัวเลข (ถ้าไม่มี space ใน HTML) */
body.finance main .gn-table tbody td:nth-child(4) :where(span,div):first-child::after,
body.finances main .gn-table tbody td:nth-child(4) :where(span,div):first-child::after,
body.income main .gn-table tbody td:nth-child(4) :where(span,div):first-child::after,
main .gn-table tbody td:nth-child(4) :where(span,div):first-child::after{
content:" ";
}
/* ---------- 2) จัดการ (คอลัมน์ที่ 5) ---------- */
body.finance main .gn-table tbody td:nth-child(5),
body.finances main .gn-table tbody td:nth-child(5),
body.income main .gn-table tbody td:nth-child(5),
main .gn-table tbody td:nth-child(5){
/* ทำเป็น grid ให้ปุ่มไม่เบียด */
display:grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items:center;
justify-items:stretch;
white-space: nowrap;
}
/* ปุ่มในช่องจัดการให้เต็มช่อง + center สวย ๆ */
body.finance main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn),
body.finances main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn),
body.income main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn),
main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn){
width:100%;
justify-content:center;
}
/* ปุ่มลบ (ปุ่มดำ) ให้กินเต็มแถวล่าง */
body.finance main .gn-table tbody td:nth-child(5) > :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-del],[data-delete],.del),
body.finances main .gn-table tbody td:nth-child(5) > :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-del],[data-delete],.del),
body.income main .gn-table tbody td:nth-child(5) > :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-del],[data-delete],.del),
main .gn-table tbody td:nth-child(5) > :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-del],[data-delete],.del){
grid-column: 1 / -1;
}
}
/* =========================================================
✅ FIX: Bootstrap select caret ไม่ให้ tile ซ้ำ (แก้ปัญหาใน popup)
(เผื่อคุณยังไม่ได้ใส่แพทช์นี้)
========================================================= */
.form-select{
background-repeat: no-repeat !important;
background-position: right .75rem center !important;
background-size: 16px 12px !important;
padding-right: 2.25rem !important;
background-clip: padding-box !important;
}
/* =========================================================
✅ FINANCE LIST — จัดการเป็น "แถวละปุ่ม" (Tablet + Mobile)
- ปุ่มเรียงลงมา 1 คอลัมน์
- ระยะห่างสวย
========================================================= */
@media (max-width: 991.98px){
/* ช่อง "จัดการ" (คอลัมน์สุดท้าย) */
main .gn-table tbody td:nth-child(5){
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 10px !important;
/* กันกฎเก่าที่ทำให้ชิดขวา/ล้น */
text-align: right !important;
padding-right: 12px !important;
}
/* ปุ่มให้เต็มความกว้างในคอลัมน์ */
main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn){
width: 100% !important;
justify-content: center !important;
transform: none !important;
}
}
/* =========================================================
✅ MOBILE: รายการบริการเป็น 2 แถว + ปุ่มลบเล็กลง (ไม่เบียด)
ใช้กับ:
1) หน้า "รายรับ" (main .svc-table)
2) Popup หน้า Dashboard (#gnBookModal #gnBookItems)
* ไม่กระทบ #editIncomeModal
========================================================= */
@media (max-width: 520px){
/* ช่องบริการ: เต็มแถวบน เห็นชื่อ ตัด ... ได้ */
main .svc-table tbody td:nth-child(1) .form-select{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height: 40px !important;
font-size: 13px !important;
border-radius: 14px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding-right: 2.25rem !important; /* เผื่อลูกศร */
}
/* จำนวน/ราคา */
main .svc-table tbody td:nth-child(2) .form-control,
main .svc-table tbody td:nth-child(3) .form-control{
height: 40px !important;
font-size: 13px !important;
border-radius: 14px !important;
text-align:center !important;
padding-left: 8px !important;
padding-right: 8px !important;
width: 100% !important;
min-width:0 !important;
}
/* รวม: ให้พอดีแถวล่าง */
main .svc-table tbody td:nth-child(4) .gn-pill{
width: 100% !important;
height: 40px !important;
border-radius: 999px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size: 13px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
/* ปุ่มลบ: เล็กลง ไม่เบียด */
main .svc-table tbody td:nth-child(5) :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-svc-del]){
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 999px !important;
flex: 0 0 36px !important;
position: static !important;
transform: none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
main .svc-table tbody td:nth-child(5) i{ margin:0 !important; }
/* =========================
B) Popup Dashboard — #gnBookModal #gnBookItems
========================= */
/* ซ่อนหัวตารางใน popup */
#gnBookModal #gnBookItems thead{ display:none !important; }
/* เปลี่ยนแถวใน popup ให้เป็น 2 แถวเหมือนกัน */
#gnBookModal #gnBookItems tbody tr{
display: grid !important;
grid-template-columns: 56px 74px 1fr 40px;
grid-template-areas:
"svc svc svc svc"
"qty price sum del";
gap: 8px !important;
padding: 10px !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(17,24,39,.08) !important;
border-radius: 18px !important;
}
#gnBookModal #gnBookItems tbody td{
display:block !important;
padding: 0 !important;
border: 0 !important;
min-width: 0 !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(1){ grid-area: svc; overflow:hidden; }
#gnBookModal #gnBookItems tbody td:nth-child(2){ grid-area: qty; }
#gnBookModal #gnBookItems tbody td:nth-child(3){ grid-area: price; }
#gnBookModal #gnBookItems tbody td:nth-child(4){ grid-area: sum; }
#gnBookModal #gnBookItems tbody td:nth-child(5){ grid-area: del; display:flex !important; justify-content:flex-end !important; }
#gnBookModal #gnBookItems tbody td:nth-child(1) .form-select{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height: 40px !important;
font-size: 13px !important;
border-radius: 14px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding-right: 2.25rem !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(2) .form-control,
#gnBookModal #gnBookItems tbody td:nth-child(3) .form-control{
height: 40px !important;
font-size: 13px !important;
border-radius: 14px !important;
text-align:center !important;
padding-left: 8px !important;
padding-right: 8px !important;
width: 100% !important;
min-width:0 !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(4) .gn-pill{
width: 100% !important;
height: 40px !important;
border-radius: 999px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size: 13px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(5) :where(a,button,.btn,.btn-gn){
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 999px !important;
flex: 0 0 36px !important;
position: static !important;
transform: none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(5) i{ margin:0 !important; }
}
/* =========================================================
✅ MOBILE: ปุ่ม "พิมพ์/แก้/ลบ" ในตารางด้านล่าง แสดงเป็นไอคอนอย่างเดียว
- เฉพาะ: #incomeTable และ #expenseTable (คอลัมน์ "จัดการ")
- ไม่กระทบปุ่มด้านบน
========================================================= */
@media (max-width: 520px){
/* จัดคอลัมน์จัดการให้เป็นแถบปุ่มกดง่าย */
#incomeTable tbody td:last-child,
#expenseTable tbody td:last-child{
display:flex !important;
justify-content:flex-end !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
white-space:nowrap !important;
}
/* ทำปุ่มเป็นวงกลม + ซ่อนข้อความ (เหลือแค่ไอคอน) */
#incomeTable tbody td:last-child :where(a.btn, button.btn, .btn-gn),
#expenseTable tbody td:last-child :where(a.btn, button.btn, .btn-gn){
width:42px !important;
height:42px !important;
padding:0 !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:0 !important; /* ✅ ซ่อนข้อความ */
line-height:0 !important;
gap:0 !important;
}
/* คืนขนาดให้ไอคอน */
#incomeTable tbody td:last-child :where(a.btn, button.btn, .btn-gn) i,
#expenseTable tbody td:last-child :where(a.btn, button.btn, .btn-gn) i{
font-size:16px !important;
margin:0 !important;
line-height:1 !important;
}
}
/* =========================================================
✅ MOBILE: ปุ่มแอคชันในรายการ (แก้ไข/ปิดงาน/ลบ/พิมพ์ ฯลฯ)
- ซ่อน "ข้อความ" เหลือไอคอนอย่างเดียว (กดง่าย)
- ครอบคลุมทุกหน้าใน MAIN ครอบคลุมมือถือทุกขนาด (≤767.98px)
- ไม่กระทบปุ่มด้านบน (เพราะไม่แตะ toolbar/nav/header)
========================================================= */
@media (max-width: 767.98px){
/* ✅ คอลัมน์ "จัดการ" — เป็น table-cell ปกติ (ไม่ใช่ flex ที่ td)
ใช้ flex layout ที่ ".gn-row-actions" ภายในแทน → ปุ่มไม่ overflow ทับ cell ข้าง ๆ */
main :where(.gn-table, .table){ table-layout: auto !important; }
main :where(.gn-table, .table) thead th:last-child,
main :where(.gn-table, .table) tbody td:last-child{
display: table-cell !important; /* ✅ override กฎเก่าที่ทำเป็น flex-column */
white-space: nowrap !important;
text-align: right !important;
vertical-align: middle !important;
padding-left:8px !important;
padding-right:10px !important;
min-width: 100px !important; /* ✅ พื้นที่ขั้นต่ำพอใส่ 2 ปุ่ม */
}
/* ---------- B) กล่องแอคชันแบบเป็นแถว/เป็นกรุ๊ป (รวม .gn-row-actions ของ branches/staff) ---------- */
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions){
display:flex !important;
flex-direction:row !important;
justify-content:flex-end !important;
align-items:center !important;
gap:8px !important;
flex-wrap:nowrap !important; /* ✅ ห้าม wrap → ปุ่มอยู่บรรทัดเดียวกัน */
}
/* form ใน action container ต้องไม่กลายเป็น block → ปุ่มลบจะตกบรรทัด */
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions) form{
display:inline-flex !important;
margin:0 !important;
padding:0 !important;
align-items:center !important;
}
/* ---------- C) ทำให้ปุ่มใน “พื้นที่รายการ” เป็นไอคอนล้วน ---------- */
/* 1) ในคอลัมน์จัดการของตาราง */
main :where(.gn-table, .table) tbody td:last-child
:where(a.btn, button.btn, .btn-gn, .btn):has(i,svg),
/* 2) ในกล่อง actions ของรายการ */
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions)
:where(a.btn, button.btn, .btn-gn, .btn):has(i,svg){
width:42px !important; /* ✅ touch target ~42×42 ประหยัดพื้นที่ */
height:42px !important;
min-width:42px !important;
padding:0 !important;
border-radius:12px !important;
border:1px solid rgba(24,24,27,.10) !important;
box-shadow: 0 4px 10px rgba(24,24,27,.10) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex-shrink:0 !important; /* ✅ ห้ามหด → คงขนาดแน่นอน */
font-size:0 !important;
line-height:0 !important;
gap:0 !important;
}
/* ปุ่มลบ (ดำ) — เงาเข้มขึ้น contrast กับพื้นหลัง */
main :where(.gn-table, .table) tbody td:last-child .btn-gn-danger,
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions) .btn-gn-danger{
box-shadow: 0 4px 12px rgba(24,24,27,.22) !important;
}
/* feedback ตอนกด */
main :where(.gn-table, .table) tbody td:last-child
:where(a.btn, button.btn, .btn-gn, .btn):active,
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions)
:where(a.btn, button.btn, .btn-gn, .btn):active{
transform: scale(.94) !important;
box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.18) !important;
}
/* ถ้าข้อความถูกห่อด้วย span/b/small ให้ซ่อนด้วย */
main :where(.gn-table, .table) tbody td:last-child
:where(a.btn, button.btn, .btn-gn, .btn) > :where(span, small, b, strong, em),
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions)
:where(a.btn, button.btn, .btn-gn, .btn) > :where(span, small, b, strong, em){
display:none !important;
}
/* คืนขนาดไอคอน + บังคับ center แนวตั้งให้เป๊ะ */
main :where(.gn-table, .table) tbody td:last-child
:where(a.btn, button.btn, .btn-gn, .btn) :where(i,svg),
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions)
:where(a.btn, button.btn, .btn-gn, .btn) :where(i,svg){
font-size:16px !important;
margin:0 !important;
line-height:1 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
vertical-align:middle !important;
transform: translateY(0) !important;
}
}
/* 3) ✅ บังคับ "คำอธิบายใต้หัวข้อ" ให้กลับมาแสดงบนมือถือ (กันโดนซ่อนโดย CSS เก่า) */
.pageDesc,
.page-desc,
.gn-page-desc,
.gn-subtitle,
header .gn-muted{
display: block !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 12px !important;
line-height: 1.25 !important;
opacity: .85 !important;
}
/* เส้นกั้นในกล่องสรุป (บาง/เบา/โทนชมพู) */
.gn-divider{
height:1px;
width:100%;
background: linear-gradient(90deg,
transparent,
rgba(var(--brand-rgb),.18),
transparent
);
margin: 0px 0; /* ✅ เดิมห่างไป -> ลดเหลือแค่นิดเดียว */
}
/* =========================
PUBLIC BOOKING
========================= */
.gn-public-body{
min-height:100%;
background:
radial-gradient(1200px 600px at 0% -10%, rgba(var(--brand-rgb),.32) 0%, transparent 55%),
radial-gradient(900px 500px at 100% 0%, rgba(24,24,27,.08) 0%, transparent 50%),
#fff;
}
.gn-public-shell{
max-width: 1240px;
margin: 0 auto;
padding: 22px 18px 40px;
}
.gn-public-hero{
background: rgba(255,255,255,.88);
border:1px solid rgba(24,24,27,.08);
box-shadow: var(--gn-shadow-soft);
border-radius: 28px;
padding: 22px;
}
.gn-public-hero__brand{ margin-bottom: 14px; }
.gn-public-hero__grid{
display:grid;
grid-template-columns: minmax(0,1.3fr) minmax(280px,.8fr);
gap:18px;
align-items:stretch;
}
.gn-public-hero h1{
margin:0;
font-size: clamp(28px, 4vw, 42px);
line-height:1.05;
color:var(--gn-heading);
}
.gn-public-hero p{
margin:12px 0 0;
max-width: 760px;
color:rgba(63,63,70,.82);
line-height:1.75;
}
.gn-public-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:16px;
}
.gn-public-hero__card{
border-radius: 24px;
border:1px solid rgba(24,24,27,.08);
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,249,.96));
padding:18px;
}
.gn-mini-stat{
display:flex;
flex-direction:column;
gap:6px;
padding:12px 0;
border-bottom:1px dashed rgba(24,24,27,.10);
}
.gn-mini-stat:last-child{ border-bottom:0; padding-bottom:0; }
.gn-mini-stat span{ color:rgba(63,63,70,.72); font-size:13px; }
.gn-mini-stat b{ color:var(--gn-heading); font-size:16px; }
.gn-public-main{ margin-top:18px; }
.gn-public-card{ border-radius:24px; }
.gn-public-card .gn-card-body{ padding:20px; }
.gn-checkgrid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:10px;
}
.gn-checkitem{
display:flex;
align-items:flex-start;
gap:10px;
border:1px solid rgba(24,24,27,.10);
background:#fff;
border-radius:18px;
padding:12px 14px;
cursor:pointer;
transition: transform .18s var(--gn-ease), box-shadow .18s var(--gn-ease), border-color .18s var(--gn-ease);
}
.gn-checkitem:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(24,24,27,.06);
border-color: rgba(var(--brand-rgb),.42);
}
.gn-checkitem.is-off{
opacity:.55;
cursor:not-allowed;
}
.gn-checkitem input{
margin-top:4px;
width:18px;
height:18px;
}
.gn-checkitem span{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.gn-checkitem b{
font-size:14px;
color:var(--gn-heading);
}
.gn-checkitem small{
font-size:12px;
color:rgba(63,63,70,.72);
}
.gn-slot-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap:10px;
}
.gn-slot-btn{
height:44px;
border-radius:14px;
border:1px solid rgba(24,24,27,.10);
background:#fff;
color:var(--gn-heading);
font-weight:600;
transition: transform .18s var(--gn-ease), border-color .18s var(--gn-ease), background .18s var(--gn-ease);
}
.gn-slot-btn:hover{
transform: translateY(-1px);
border-color: rgba(var(--brand-rgb),.5);
}
.gn-slot-btn.is-active{
background: rgba(var(--brand-rgb),.18);
border-color: rgba(var(--brand-rgb),.55);
}
.gn-slot-btn.is-disabled{
opacity:.42;
cursor:not-allowed;
}
.gn-public-summary{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:10px;
}
.gn-public-summary > div{
border:1px solid rgba(24,24,27,.08);
border-radius:18px;
padding:12px 14px;
background:#fff;
display:flex;
flex-direction:column;
gap:5px;
}
.gn-public-summary span{
font-size:12px;
color:rgba(63,63,70,.72);
}
.gn-public-summary b{
font-size:17px;
color:var(--gn-heading);
}
.gn-public-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.gn-public-queue-list{
display:flex;
flex-direction:column;
gap:10px;
}
.gn-public-queue-item{
border:1px solid rgba(24,24,27,.08);
border-radius:18px;
padding:12px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
background:#fff;
}
.gn-public-queue-item .time{
font-weight:700;
color:var(--gn-heading);
}
.gn-public-queue-item .status{
color:rgba(63,63,70,.78);
font-size:13px;
}
.gn-empty{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
border:1px dashed rgba(24,24,27,.12);
border-radius:18px;
padding:28px 18px;
text-align:center;
color:rgba(63,63,70,.66);
background:rgba(255,255,255,.55);
font-size:13.5px;
font-weight:600;
line-height:1.5;
}
.gn-empty > i,
.gn-empty .gn-empty-ic{
font-size:36px;
opacity:.42;
display:block;
line-height:1;
color: var(--brand, #D5A6BD);
margin-bottom:2px;
}
.gn-empty .gn-empty-title{
font-weight:800;
color:rgba(24,24,27,.78);
font-size:14.5px;
}
.gn-empty .gn-empty-hint{
font-size:12px;
font-weight:500;
color:rgba(63,63,70,.55);
}
.gn-empty.is-sm{ padding:18px 14px; font-size:12.5px; gap:6px; }
.gn-empty.is-sm > i,
.gn-empty.is-sm .gn-empty-ic{ font-size:28px; }
.gn-empty.is-lg{ padding:44px 20px; font-size:14.5px; gap:10px; }
.gn-empty.is-lg > i,
.gn-empty.is-lg .gn-empty-ic{ font-size:48px; }
/* For table empty rows */
.gn-empty-cell{
text-align:center !important;
padding:32px 16px !important;
color:rgba(63,63,70,.62) !important;
font-weight:600;
font-size:13px;
}
.gn-empty-cell i{
font-size:32px;
opacity:.42;
display:block;
margin-bottom:8px;
color: var(--brand, #D5A6BD);
}
.gn-empty-cell .gn-empty-hint{
font-size:11.5px;
font-weight:500;
color:rgba(63,63,70,.55);
margin-top:4px;
}
.spin{
display:inline-block;
animation: gnspin 1s linear infinite;
}
@keyframes gnspin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@media (max-width: 991.98px){
.gn-public-hero__grid{ grid-template-columns: 1fr; }
.gn-slot-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.gn-checkgrid{ grid-template-columns: 1fr; }
}
@media (max-width: 575.98px){
.gn-public-shell{ padding:14px 12px 34px; }
.gn-public-hero{ padding:16px; border-radius:22px; }
.gn-public-card{ border-radius:20px; }
.gn-slot-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.gn-public-summary{ grid-template-columns: 1fr; }
}
/* Public booking v1.3.6 */
.gn-section-box{border:1px solid rgba(24,24,27,.08);border-radius:18px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,245,248,.92))}
.gn-section-box__title{font-weight:700;color:#1f2937;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.gn-public-payment-card .gn-card-body{display:flex;flex-direction:column;gap:10px}
.gn-public-payrow{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid rgba(24,24,27,.06);border-radius:16px;padding:12px 14px;background:#fff}
.gn-public-payrow span{display:flex;align-items:center;gap:8px;color:#6b7280;font-size:13px}
.gn-public-copyline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.gn-slot-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px}
.gn-slot-btn small{font-size:11px;color:#7b7280;font-weight:600}
.gn-public-queue-legend{display:flex;gap:8px;flex-wrap:wrap}
.gn-public-queue-list{display:flex;flex-direction:column;gap:10px}
.gn-public-queue-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid rgba(24,24,27,.08);background:#fff;border-radius:18px;padding:14px 16px;transition:.2s ease}
.gn-public-queue-item .time{font-weight:700;color:#111827}
.gn-public-queue-item .sub{font-size:12px;color:#8a8090;margin-top:3px}
.gn-public-queue-item .status{border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700}
.gn-public-queue-item.is-free{border-color:rgba(16,185,129,.25);background:rgba(236,253,245,.72)}
.gn-public-queue-item.is-free .status{background:#dcfce7;color:#166534}
.gn-public-queue-item.is-busy{border-color:rgba(var(--brand-rgb),.25);background:rgba(253,242,248,.8)}
.gn-public-queue-item.is-busy .status{background:#f5e3eb;color:#9d174d}
.gn-public-queue-item.is-picked{box-shadow:0 0 0 2px rgba(219,39,119,.18)}
.gn-public-hero{background:linear-gradient(135deg,#fff 0%,#fff5f8 58%,#f9f6fb 100%)}
.gn-public-card{border-radius:28px;overflow:hidden}
.gn-public-summary div{border-radius:16px}
@media (max-width: 767.98px){
.gn-public-payrow{flex-direction:column;align-items:flex-start}
.gn-public-copyline{justify-content:flex-start}
}
.gn-booking-modal{border:1px solid rgba(24,24,27,.08);border-radius:24px;overflow:hidden}.gn-booking-modal .modal-header{border-bottom:1px solid rgba(24,24,27,.06);background:#fcfafb}.gn-booking-modal .modal-footer{border-top:1px solid rgba(24,24,27,.06);background:#fcfafb}.gn-booking-result-icon{width:72px;height:72px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 14px;background:#f4f4f5;color:#18181b}.gn-booking-result-icon.is-success{background:rgba(34,197,94,.12);color:#15803d}.gn-booking-result-icon.is-fail{background:rgba(239,68,68,.12);color:#dc2626}.gn-booking-result-main{text-align:center;font-size:22px;font-weight:700;color:#18181b}.gn-booking-result-reason{text-align:center;color:#52525b;font-size:14px;line-height:1.8;margin-top:8px}.gn-booking-result-extra{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}.gn-booking-result-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(217,70,239,.16);background:#fff7fb;color:#6b214f;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600}
.gn-booking-preview-grid{display:grid;grid-template-columns:1fr;gap:10px}
.gn-booking-preview-item{border:1px solid rgba(24,24,27,.08);border-radius:16px;padding:12px 14px;background:#fff}
.gn-booking-preview-item span{display:flex;align-items:center;gap:8px;font-size:12px;color:#71717a;margin-bottom:6px}
.gn-booking-preview-item b{display:block;font-size:14px;color:#18181b;line-height:1.6;word-break:break-word}
.gn-booking-preview-slip{border:1px solid rgba(24,24,27,.08);border-radius:20px;padding:14px;background:#fcfafb;height:100%}
.gn-booking-preview-slip__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#18181b;margin-bottom:10px}
.gn-booking-confirm-dialog{max-width:940px}
.gn-booking-confirm-modal .modal-body{padding:18px}
.gn-booking-confirm-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.gn-booking-confirm-topbar__eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#a14f73;margin-bottom:4px}
.gn-booking-confirm-topbar__title{font-size:22px;font-weight:800;color:#18181b;line-height:1.2}
.gn-booking-confirm-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#f8e8f0;color:#8f3d62;font-size:13px;font-weight:700;white-space:nowrap}
.gn-booking-confirm-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:stretch}
.gn-booking-preview-panel{border:1px solid rgba(24,24,27,.08);border-radius:24px;padding:16px;background:linear-gradient(135deg,#fff 0%,#fff9fb 100%);box-shadow:0 10px 28px rgba(24,24,27,.05)}
.gn-booking-preview-panel__head{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(24,24,27,.06)}
.gn-booking-preview-panel__title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#18181b}
.gn-booking-preview-panel__hint{font-size:12px;color:#8a8090;margin-top:4px}
.gn-booking-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gn-booking-preview-item{border:1px solid rgba(24,24,27,.08);border-radius:18px;padding:14px 16px;background:#fff;box-shadow:0 8px 22px rgba(24,24,27,.04)}
.gn-booking-preview-item span{display:flex;align-items:center;gap:8px;font-size:12px;color:#8a8a96;margin-bottom:8px;font-weight:700}
.gn-booking-preview-item b{display:block;font-size:21px;color:#18181b;line-height:1.25;word-break:break-word;font-weight:800}
.gn-booking-preview-item.is-lg b,.gn-booking-preview-item.is-accent b{font-size:22px}
.gn-booking-preview-slip{border:1px solid rgba(24,24,27,.08);border-radius:24px;padding:16px;background:#fcfafb;height:100%;box-shadow:0 10px 28px rgba(24,24,27,.05);display:flex;flex-direction:column}
.gn-booking-preview-slip__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#18181b;margin-bottom:12px}
.gn-booking-preview-slip img{width:100%;height:100%;min-height:320px;max-height:420px;object-fit:contain;background:#fff;border-radius:18px}
@media (max-width: 767.98px){.gn-booking-confirm-layout{grid-template-columns:1fr}.gn-booking-confirm-badge{display:none}.gn-booking-preview-slip img{min-height:240px;max-height:300px}}
@media (max-width: 575.98px){
:root{ --gn-pad: 14px; --gn-fs: 14px; }
body{ font-size: var(--gn-fs); }
/* Topbar two rows (กันล้น) */
.gn-topbar-inner{
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:10px;
}
.gn-page-title{ width:100%; }
.gn-actions{
width:100%;
flex-direction:column;
align-items:stretch;
gap:8px;
}
.gn-actions .btn-gn{
width:100%;
justify-content:center;
}
.gn-search{ display:none; }
.gn-page-title .text span{ display:none; }
}
/* Mobile extra narrow (<= 520px) */
@media (max-width: 520px){
/* ลดโอกาส table/action ล้น */
.gn-table{
width:100%;
table-layout: fixed;
}
.gn-table thead th{
padding:0 6px 6px;
font-size:11px;
}
.gn-table tbody td{
padding:10px 6px;
font-size:13px;
overflow-wrap:anywhere;
word-break: break-word;
}
.gn-pill{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* action column (ถ้ามีปุ่มหลายอัน) */
.gn-table tbody td:last-child{
padding-right:12px;
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
gap:8px;
}
.gn-table tbody td:last-child :where(a,button,.btn,.btn-gn){
max-width:100%;
transform:none !important;
}
/* calendar mobile clean: has=ขอบชมพู / จุดเฉพาะ selected */
.gn-cal{ gap:6px; }
.gn-cal .dow{ font-size:11px; padding:4px 0; }
.gn-day{ min-height:52px; padding:8px; border-radius:14px; }
.gn-day .num{ font-size:13px; }
.gn-day .mini{
position:absolute; left:8px; bottom:6px;
margin:0; font-size:10px; line-height:1;
}
.gn-day .badge,
.gn-day .hint{ display:none !important; }
.gn-day.has{
border-color: rgba(var(--brand-rgb),.95) !important;
box-shadow:none !important;
background: var(--gn-cal-day-bg) !important;
}
.gn-day::after{ content:none !important; }
.gn-day.selected::after{
content:"" !important;
position:absolute; right:7px; bottom:7px;
width:8px; height:8px; border-radius:999px;
background: rgba(var(--brand-rgb),1);
box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.18), 0 0 14px rgba(var(--brand-rgb),.35);
opacity:.95;
z-index:2;
}
}
/* =========================================================
FIX: Bootstrap select caret ซ้ำเป็นหลายอัน (desktop/tablet/mobile)
สาเหตุ: มีการใช้ background: ... ไปรีเซ็ต repeat/position/size
========================================================= */
.form-select{
/* กัน caret tile ซ้ำ */
background-repeat: no-repeat !important;
background-position: right .75rem center !important;
background-size: 16px 12px !important;
/* เผื่อที่ให้ caret */
padding-right: 2.25rem !important;
/* กันบางธีมรีเซ็ตผิด */
background-clip: padding-box !important;
}
/* เฉพาะ popup แก้ไขรายรับ + จุดที่ใช้ select เยอะ: บังคับใช้ background-color (ไม่ใช้ background shorthand) */
#editIncomeModal .form-select,
#gnBookModal .form-select,
main .svc-table .form-select,
.gn-items .form-select{
background-color: rgba(255,255,255,.95) !important;
}
/* =========================================================
✅ FINANCE LIST (รายรับล่าสุด) — FIX “ยอด” + “จัดการ” ให้สวยบน Tablet/Mobile
- ยอด: ให้ ฿ กับตัวเลขอยู่บรรทัดเดียว
- จัดการ: จัดปุ่มเป็น grid 2 ปุ่มบน + ปุ่มลบเต็มแถวล่าง (สวย/ไม่เบียด)
* ทำงานเฉพาะจอเล็ก (<= 991.98px)
========================================================= */
@media (max-width: 991.98px){
/* เผื่อหน้า finance มี class ที่ body (ถ้ามีจะยิ่งเฉพาะเจาะจง) */
body.finance main .gn-table,
body.finances main .gn-table,
body.income main .gn-table,
main .gn-table{
/* กันตารางดันล้นในจอเล็ก */
width:100%;
}
/* ---------- 1) ยอด (คอลัมน์ที่ 4) ---------- */
body.finance main .gn-table tbody td:nth-child(4),
body.finances main .gn-table tbody td:nth-child(4),
body.income main .gn-table tbody td:nth-child(4),
main .gn-table tbody td:nth-child(4){
white-space: nowrap; /* ไม่ให้ตัดบรรทัด */
text-align: center;
font-variant-numeric: tabular-nums;
letter-spacing: .2px;
}
/* ถ้ามี
คั่นระหว่าง ฿ กับจำนวน -> ซ่อน br ให้กลายเป็นบรรทัดเดียว */
body.finance main .gn-table tbody td:nth-child(4) br,
body.finances main .gn-table tbody td:nth-child(4) br,
body.income main .gn-table tbody td:nth-child(4) br,
main .gn-table tbody td:nth-child(4) br{
display:none !important;
}
/* ถ้าในช่องยอดใช้ div/span แยกบล็อก -> บังคับให้ inline */
body.finance main .gn-table tbody td:nth-child(4) :where(div,span,b,strong,small),
body.finances main .gn-table tbody td:nth-child(4) :where(div,span,b,strong,small),
body.income main .gn-table tbody td:nth-child(4) :where(div,span,b,strong,small),
main .gn-table tbody td:nth-child(4) :where(div,span,b,strong,small){
display:inline !important;
margin:0 !important;
}
/* เพิ่มช่องว่างเล็ก ๆ ระหว่าง ฿ กับตัวเลข (ถ้าไม่มี space ใน HTML) */
body.finance main .gn-table tbody td:nth-child(4) :where(span,div):first-child::after,
body.finances main .gn-table tbody td:nth-child(4) :where(span,div):first-child::after,
body.income main .gn-table tbody td:nth-child(4) :where(span,div):first-child::after,
main .gn-table tbody td:nth-child(4) :where(span,div):first-child::after{
content:" ";
}
/* ---------- 2) จัดการ (คอลัมน์ที่ 5) ---------- */
body.finance main .gn-table tbody td:nth-child(5),
body.finances main .gn-table tbody td:nth-child(5),
body.income main .gn-table tbody td:nth-child(5),
main .gn-table tbody td:nth-child(5){
/* ทำเป็น grid ให้ปุ่มไม่เบียด */
display:grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items:center;
justify-items:stretch;
white-space: nowrap;
}
/* ปุ่มในช่องจัดการให้เต็มช่อง + center สวย ๆ */
body.finance main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn),
body.finances main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn),
body.income main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn),
main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn){
width:100%;
justify-content:center;
}
/* ปุ่มลบ (ปุ่มดำ) ให้กินเต็มแถวล่าง */
body.finance main .gn-table tbody td:nth-child(5) > :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-del],[data-delete],.del),
body.finances main .gn-table tbody td:nth-child(5) > :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-del],[data-delete],.del),
body.income main .gn-table tbody td:nth-child(5) > :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-del],[data-delete],.del),
main .gn-table tbody td:nth-child(5) > :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-del],[data-delete],.del){
grid-column: 1 / -1;
}
}
/* =========================================================
✅ FIX: Bootstrap select caret ไม่ให้ tile ซ้ำ (แก้ปัญหาใน popup)
(เผื่อคุณยังไม่ได้ใส่แพทช์นี้)
========================================================= */
.form-select{
background-repeat: no-repeat !important;
background-position: right .75rem center !important;
background-size: 16px 12px !important;
padding-right: 2.25rem !important;
background-clip: padding-box !important;
}
/* =========================================================
✅ FINANCE LIST — จัดการเป็น "แถวละปุ่ม" (Tablet + Mobile)
- ปุ่มเรียงลงมา 1 คอลัมน์
- ระยะห่างสวย
========================================================= */
@media (max-width: 991.98px){
/* ช่อง "จัดการ" (คอลัมน์สุดท้าย) */
main .gn-table tbody td:nth-child(5){
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
gap: 10px !important;
/* กันกฎเก่าที่ทำให้ชิดขวา/ล้น */
text-align: right !important;
padding-right: 12px !important;
}
/* ปุ่มให้เต็มความกว้างในคอลัมน์ */
main .gn-table tbody td:nth-child(5) > :where(a,button,.btn,.btn-gn){
width: 100% !important;
justify-content: center !important;
transform: none !important;
}
}
/* =========================================================
✅ MOBILE: รายการบริการเป็น 2 แถว + ปุ่มลบเล็กลง (ไม่เบียด)
ใช้กับ:
1) หน้า "รายรับ" (main .svc-table)
2) Popup หน้า Dashboard (#gnBookModal #gnBookItems)
* ไม่กระทบ #editIncomeModal
========================================================= */
@media (max-width: 520px){
/* ช่องบริการ: เต็มแถวบน เห็นชื่อ ตัด ... ได้ */
main .svc-table tbody td:nth-child(1) .form-select{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height: 40px !important;
font-size: 13px !important;
border-radius: 14px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding-right: 2.25rem !important; /* เผื่อลูกศร */
}
/* จำนวน/ราคา */
main .svc-table tbody td:nth-child(2) .form-control,
main .svc-table tbody td:nth-child(3) .form-control{
height: 40px !important;
font-size: 13px !important;
border-radius: 14px !important;
text-align:center !important;
padding-left: 8px !important;
padding-right: 8px !important;
width: 100% !important;
min-width:0 !important;
}
/* รวม: ให้พอดีแถวล่าง */
main .svc-table tbody td:nth-child(4) .gn-pill{
width: 100% !important;
height: 40px !important;
border-radius: 999px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size: 13px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
/* ปุ่มลบ: เล็กลง ไม่เบียด */
main .svc-table tbody td:nth-child(5) :where(.btn-gn-danger,.btn-danger,.btn-outline-danger,[data-svc-del]){
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 999px !important;
flex: 0 0 36px !important;
position: static !important;
transform: none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
main .svc-table tbody td:nth-child(5) i{ margin:0 !important; }
/* =========================
B) Popup Dashboard — #gnBookModal #gnBookItems
========================= */
/* ซ่อนหัวตารางใน popup */
#gnBookModal #gnBookItems thead{ display:none !important; }
/* เปลี่ยนแถวใน popup ให้เป็น 2 แถวเหมือนกัน */
#gnBookModal #gnBookItems tbody tr{
display: grid !important;
grid-template-columns: 56px 74px 1fr 40px;
grid-template-areas:
"svc svc svc svc"
"qty price sum del";
gap: 8px !important;
padding: 10px !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(17,24,39,.08) !important;
border-radius: 18px !important;
}
#gnBookModal #gnBookItems tbody td{
display:block !important;
padding: 0 !important;
border: 0 !important;
min-width: 0 !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(1){ grid-area: svc; overflow:hidden; }
#gnBookModal #gnBookItems tbody td:nth-child(2){ grid-area: qty; }
#gnBookModal #gnBookItems tbody td:nth-child(3){ grid-area: price; }
#gnBookModal #gnBookItems tbody td:nth-child(4){ grid-area: sum; }
#gnBookModal #gnBookItems tbody td:nth-child(5){ grid-area: del; display:flex !important; justify-content:flex-end !important; }
#gnBookModal #gnBookItems tbody td:nth-child(1) .form-select{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
height: 40px !important;
font-size: 13px !important;
border-radius: 14px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
padding-right: 2.25rem !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(2) .form-control,
#gnBookModal #gnBookItems tbody td:nth-child(3) .form-control{
height: 40px !important;
font-size: 13px !important;
border-radius: 14px !important;
text-align:center !important;
padding-left: 8px !important;
padding-right: 8px !important;
width: 100% !important;
min-width:0 !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(4) .gn-pill{
width: 100% !important;
height: 40px !important;
border-radius: 999px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size: 13px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(5) :where(a,button,.btn,.btn-gn){
width: 36px !important;
height: 36px !important;
padding: 0 !important;
border-radius: 999px !important;
flex: 0 0 36px !important;
position: static !important;
transform: none !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
#gnBookModal #gnBookItems tbody td:nth-child(5) i{ margin:0 !important; }
}
/* =========================================================
✅ MOBILE: ปุ่ม "พิมพ์/แก้/ลบ" ในตารางด้านล่าง แสดงเป็นไอคอนอย่างเดียว
- เฉพาะ: #incomeTable และ #expenseTable (คอลัมน์ "จัดการ")
- ไม่กระทบปุ่มด้านบน
========================================================= */
@media (max-width: 520px){
/* จัดคอลัมน์จัดการให้เป็นแถบปุ่มกดง่าย */
#incomeTable tbody td:last-child,
#expenseTable tbody td:last-child{
display:flex !important;
justify-content:flex-end !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
white-space:nowrap !important;
}
/* ทำปุ่มเป็นวงกลม + ซ่อนข้อความ (เหลือแค่ไอคอน) */
#incomeTable tbody td:last-child :where(a.btn, button.btn, .btn-gn),
#expenseTable tbody td:last-child :where(a.btn, button.btn, .btn-gn){
width:42px !important;
height:42px !important;
padding:0 !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:0 !important; /* ✅ ซ่อนข้อความ */
line-height:0 !important;
gap:0 !important;
}
/* คืนขนาดให้ไอคอน */
#incomeTable tbody td:last-child :where(a.btn, button.btn, .btn-gn) i,
#expenseTable tbody td:last-child :where(a.btn, button.btn, .btn-gn) i{
font-size:16px !important;
margin:0 !important;
line-height:1 !important;
}
}
/* =========================================================
✅ MOBILE: ปุ่มแอคชันในรายการ (แก้ไข/ปิดงาน/ลบ/พิมพ์ ฯลฯ)
- ซ่อน "ข้อความ" เหลือไอคอนอย่างเดียว (กดง่าย)
- ครอบคลุมทุกหน้าใน MAIN ครอบคลุมมือถือทุกขนาด (≤767.98px)
- ไม่กระทบปุ่มด้านบน (เพราะไม่แตะ toolbar/nav/header)
========================================================= */
@media (max-width: 767.98px){
/* ✅ คอลัมน์ "จัดการ" — เป็น table-cell ปกติ (ไม่ใช่ flex ที่ td)
ใช้ flex layout ที่ ".gn-row-actions" ภายในแทน → ปุ่มไม่ overflow ทับ cell ข้าง ๆ */
main :where(.gn-table, .table){ table-layout: auto !important; }
main :where(.gn-table, .table) thead th:last-child,
main :where(.gn-table, .table) tbody td:last-child{
display: table-cell !important; /* ✅ override กฎเก่าที่ทำเป็น flex-column */
white-space: nowrap !important;
text-align: right !important;
vertical-align: middle !important;
padding-left:8px !important;
padding-right:10px !important;
min-width: 100px !important; /* ✅ พื้นที่ขั้นต่ำพอใส่ 2 ปุ่ม */
}
/* ---------- B) กล่องแอคชันแบบเป็นแถว/เป็นกรุ๊ป (รวม .gn-row-actions ของ branches/staff) ---------- */
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions){
display:flex !important;
flex-direction:row !important;
justify-content:flex-end !important;
align-items:center !important;
gap:8px !important;
flex-wrap:nowrap !important; /* ✅ ห้าม wrap → ปุ่มอยู่บรรทัดเดียวกัน */
}
/* form ใน action container ต้องไม่กลายเป็น block → ปุ่มลบจะตกบรรทัด */
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions) form{
display:inline-flex !important;
margin:0 !important;
padding:0 !important;
align-items:center !important;
}
/* ---------- C) ทำให้ปุ่มใน “พื้นที่รายการ” เป็นไอคอนล้วน ---------- */
/* 1) ในคอลัมน์จัดการของตาราง */
main :where(.gn-table, .table) tbody td:last-child
:where(a.btn, button.btn, .btn-gn, .btn):has(i,svg),
/* 2) ในกล่อง actions ของรายการ */
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions)
:where(a.btn, button.btn, .btn-gn, .btn):has(i,svg){
width:42px !important; /* ✅ touch target ~42×42 ประหยัดพื้นที่ */
height:42px !important;
min-width:42px !important;
padding:0 !important;
border-radius:12px !important;
border:1px solid rgba(24,24,27,.10) !important;
box-shadow: 0 4px 10px rgba(24,24,27,.10) !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex-shrink:0 !important; /* ✅ ห้ามหด → คงขนาดแน่นอน */
font-size:0 !important;
line-height:0 !important;
gap:0 !important;
}
/* ปุ่มลบ (ดำ) — เงาเข้มขึ้น contrast กับพื้นหลัง */
main :where(.gn-table, .table) tbody td:last-child .btn-gn-danger,
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions) .btn-gn-danger{
box-shadow: 0 4px 12px rgba(24,24,27,.22) !important;
}
/* feedback ตอนกด */
main :where(.gn-table, .table) tbody td:last-child
:where(a.btn, button.btn, .btn-gn, .btn):active,
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions)
:where(a.btn, button.btn, .btn-gn, .btn):active{
transform: scale(.94) !important;
box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.18) !important;
}
/* ถ้าข้อความถูกห่อด้วย span/b/small ให้ซ่อนด้วย */
main :where(.gn-table, .table) tbody td:last-child
:where(a.btn, button.btn, .btn-gn, .btn) > :where(span, small, b, strong, em),
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions)
:where(a.btn, button.btn, .btn-gn, .btn) > :where(span, small, b, strong, em){
display:none !important;
}
/* คืนขนาดไอคอน + บังคับ center แนวตั้งให้เป๊ะ */
main :where(.gn-table, .table) tbody td:last-child
:where(a.btn, button.btn, .btn-gn, .btn) :where(i,svg),
main :where(.gn-row-actions, .row-actions, .table-actions, .appt-actions, .gn-actions, .actions, .btn-actions)
:where(a.btn, button.btn, .btn-gn, .btn) :where(i,svg){
font-size:16px !important;
margin:0 !important;
line-height:1 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
vertical-align:middle !important;
transform: translateY(0) !important;
}
}
/* 3) ✅ บังคับ "คำอธิบายใต้หัวข้อ" ให้กลับมาแสดงบนมือถือ (กันโดนซ่อนโดย CSS เก่า) */
.pageDesc,
.page-desc,
.gn-page-desc,
.gn-subtitle,
header .gn-muted{
display: block !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 12px !important;
line-height: 1.25 !important;
opacity: .85 !important;
}
/* เส้นกั้นในกล่องสรุป (บาง/เบา/โทนชมพู) */
.gn-divider{
height:1px;
width:100%;
background: linear-gradient(90deg,
transparent,
rgba(var(--brand-rgb),.18),
transparent
);
margin: 0px 0; /* ✅ เดิมห่างไป -> ลดเหลือแค่นิดเดียว */
}
/* =========================
PUBLIC BOOKING
========================= */
.gn-public-body{
min-height:100%;
background:
radial-gradient(1200px 600px at 0% -10%, rgba(var(--brand-rgb),.32) 0%, transparent 55%),
radial-gradient(900px 500px at 100% 0%, rgba(24,24,27,.08) 0%, transparent 50%),
#fff;
}
.gn-public-shell{
max-width: 1240px;
margin: 0 auto;
padding: 22px 18px 40px;
}
.gn-public-hero{
background: rgba(255,255,255,.88);
border:1px solid rgba(24,24,27,.08);
box-shadow: var(--gn-shadow-soft);
border-radius: 28px;
padding: 22px;
}
.gn-public-hero__brand{ margin-bottom: 14px; }
.gn-public-hero__grid{
display:grid;
grid-template-columns: minmax(0,1.3fr) minmax(280px,.8fr);
gap:18px;
align-items:stretch;
}
.gn-public-hero h1{
margin:0;
font-size: clamp(28px, 4vw, 42px);
line-height:1.05;
color:var(--gn-heading);
}
.gn-public-hero p{
margin:12px 0 0;
max-width: 760px;
color:rgba(63,63,70,.82);
line-height:1.75;
}
.gn-public-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:16px;
}
.gn-public-hero__card{
border-radius: 24px;
border:1px solid rgba(24,24,27,.08);
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,249,.96));
padding:18px;
}
.gn-mini-stat{
display:flex;
flex-direction:column;
gap:6px;
padding:12px 0;
border-bottom:1px dashed rgba(24,24,27,.10);
}
.gn-mini-stat:last-child{ border-bottom:0; padding-bottom:0; }
.gn-mini-stat span{ color:rgba(63,63,70,.72); font-size:13px; }
.gn-mini-stat b{ color:var(--gn-heading); font-size:16px; }
.gn-public-main{ margin-top:18px; }
.gn-public-card{ border-radius:24px; }
.gn-public-card .gn-card-body{ padding:20px; }
.gn-checkgrid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:10px;
}
.gn-checkitem{
display:flex;
align-items:flex-start;
gap:10px;
border:1px solid rgba(24,24,27,.10);
background:#fff;
border-radius:18px;
padding:12px 14px;
cursor:pointer;
transition: transform .18s var(--gn-ease), box-shadow .18s var(--gn-ease), border-color .18s var(--gn-ease);
}
.gn-checkitem:hover{
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(24,24,27,.06);
border-color: rgba(var(--brand-rgb),.42);
}
.gn-checkitem.is-off{
opacity:.55;
cursor:not-allowed;
}
.gn-checkitem input{
margin-top:4px;
width:18px;
height:18px;
}
.gn-checkitem span{
display:flex;
flex-direction:column;
gap:3px;
min-width:0;
}
.gn-checkitem b{
font-size:14px;
color:var(--gn-heading);
}
.gn-checkitem small{
font-size:12px;
color:rgba(63,63,70,.72);
}
.gn-slot-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap:10px;
}
.gn-slot-btn{
height:44px;
border-radius:14px;
border:1px solid rgba(24,24,27,.10);
background:#fff;
color:var(--gn-heading);
font-weight:600;
transition: transform .18s var(--gn-ease), border-color .18s var(--gn-ease), background .18s var(--gn-ease);
}
.gn-slot-btn:hover{
transform: translateY(-1px);
border-color: rgba(var(--brand-rgb),.5);
}
.gn-slot-btn.is-active{
background: rgba(var(--brand-rgb),.18);
border-color: rgba(var(--brand-rgb),.55);
}
.gn-slot-btn.is-disabled{
opacity:.42;
cursor:not-allowed;
}
.gn-public-summary{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:10px;
}
.gn-public-summary > div{
border:1px solid rgba(24,24,27,.08);
border-radius:18px;
padding:12px 14px;
background:#fff;
display:flex;
flex-direction:column;
gap:5px;
}
.gn-public-summary span{
font-size:12px;
color:rgba(63,63,70,.72);
}
.gn-public-summary b{
font-size:17px;
color:var(--gn-heading);
}
.gn-public-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.gn-public-queue-list{
display:flex;
flex-direction:column;
gap:10px;
}
.gn-public-queue-item{
border:1px solid rgba(24,24,27,.08);
border-radius:18px;
padding:12px 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
background:#fff;
}
.gn-public-queue-item .time{
font-weight:700;
color:var(--gn-heading);
}
.gn-public-queue-item .status{
color:rgba(63,63,70,.78);
font-size:13px;
}
.gn-empty{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
border:1px dashed rgba(24,24,27,.12);
border-radius:18px;
padding:28px 18px;
text-align:center;
color:rgba(63,63,70,.66);
background:rgba(255,255,255,.55);
font-size:13.5px;
font-weight:600;
line-height:1.5;
}
.gn-empty > i,
.gn-empty .gn-empty-ic{
font-size:36px;
opacity:.42;
display:block;
line-height:1;
color: var(--brand, #D5A6BD);
margin-bottom:2px;
}
.gn-empty .gn-empty-title{
font-weight:800;
color:rgba(24,24,27,.78);
font-size:14.5px;
}
.gn-empty .gn-empty-hint{
font-size:12px;
font-weight:500;
color:rgba(63,63,70,.55);
}
.gn-empty.is-sm{ padding:18px 14px; font-size:12.5px; gap:6px; }
.gn-empty.is-sm > i,
.gn-empty.is-sm .gn-empty-ic{ font-size:28px; }
.gn-empty.is-lg{ padding:44px 20px; font-size:14.5px; gap:10px; }
.gn-empty.is-lg > i,
.gn-empty.is-lg .gn-empty-ic{ font-size:48px; }
/* For table | empty rows */
.gn-empty-cell{
text-align:center !important;
padding:32px 16px !important;
color:rgba(63,63,70,.62) !important;
font-weight:600;
font-size:13px;
}
.gn-empty-cell i{
font-size:32px;
opacity:.42;
display:block;
margin-bottom:8px;
color: var(--brand, #D5A6BD);
}
.gn-empty-cell .gn-empty-hint{
font-size:11.5px;
font-weight:500;
color:rgba(63,63,70,.55);
margin-top:4px;
}
.spin{
display:inline-block;
animation: gnspin 1s linear infinite;
}
@keyframes gnspin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@media (max-width: 991.98px){
.gn-public-hero__grid{ grid-template-columns: 1fr; }
.gn-slot-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.gn-checkgrid{ grid-template-columns: 1fr; }
}
@media (max-width: 575.98px){
.gn-public-shell{ padding:14px 12px 34px; }
.gn-public-hero{ padding:16px; border-radius:22px; }
.gn-public-card{ border-radius:20px; }
.gn-slot-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.gn-public-summary{ grid-template-columns: 1fr; }
}
/* Public booking v1.3.6 */
.gn-section-box{border:1px solid rgba(24,24,27,.08);border-radius:18px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,245,248,.92))}
.gn-section-box__title{font-weight:700;color:#1f2937;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.gn-public-payment-card .gn-card-body{display:flex;flex-direction:column;gap:10px}
.gn-public-payrow{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid rgba(24,24,27,.06);border-radius:16px;padding:12px 14px;background:#fff}
.gn-public-payrow span{display:flex;align-items:center;gap:8px;color:#6b7280;font-size:13px}
.gn-public-copyline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.gn-slot-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px}
.gn-slot-btn small{font-size:11px;color:#7b7280;font-weight:600}
.gn-public-queue-legend{display:flex;gap:8px;flex-wrap:wrap}
.gn-public-queue-list{display:flex;flex-direction:column;gap:10px}
.gn-public-queue-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid rgba(24,24,27,.08);background:#fff;border-radius:18px;padding:14px 16px;transition:.2s ease}
.gn-public-queue-item .time{font-weight:700;color:#111827}
.gn-public-queue-item .sub{font-size:12px;color:#8a8090;margin-top:3px}
.gn-public-queue-item .status{border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700}
.gn-public-queue-item.is-free{border-color:rgba(16,185,129,.25);background:rgba(236,253,245,.72)}
.gn-public-queue-item.is-free .status{background:#dcfce7;color:#166534}
.gn-public-queue-item.is-busy{border-color:rgba(var(--brand-rgb),.25);background:rgba(253,242,248,.8)}
.gn-public-queue-item.is-busy .status{background:#f5e3eb;color:#9d174d}
.gn-public-queue-item.is-picked{box-shadow:0 0 0 2px rgba(219,39,119,.18)}
.gn-public-hero{background:linear-gradient(135deg,#fff 0%,#fff5f8 58%,#f9f6fb 100%)}
.gn-public-card{border-radius:28px;overflow:hidden}
.gn-public-summary div{border-radius:16px}
@media (max-width: 767.98px){
.gn-public-payrow{flex-direction:column;align-items:flex-start}
.gn-public-copyline{justify-content:flex-start}
}
.gn-booking-modal{border:1px solid rgba(24,24,27,.08);border-radius:24px;overflow:hidden}.gn-booking-modal .modal-header{border-bottom:1px solid rgba(24,24,27,.06);background:#fcfafb}.gn-booking-modal .modal-footer{border-top:1px solid rgba(24,24,27,.06);background:#fcfafb}.gn-booking-result-icon{width:72px;height:72px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 14px;background:#f4f4f5;color:#18181b}.gn-booking-result-icon.is-success{background:rgba(34,197,94,.12);color:#15803d}.gn-booking-result-icon.is-fail{background:rgba(239,68,68,.12);color:#dc2626}.gn-booking-result-main{text-align:center;font-size:22px;font-weight:700;color:#18181b}.gn-booking-result-reason{text-align:center;color:#52525b;font-size:14px;line-height:1.8;margin-top:8px}.gn-booking-result-extra{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}.gn-booking-result-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(217,70,239,.16);background:#fff7fb;color:#6b214f;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600}
.gn-booking-preview-grid{display:grid;grid-template-columns:1fr;gap:10px}
.gn-booking-preview-item{border:1px solid rgba(24,24,27,.08);border-radius:16px;padding:12px 14px;background:#fff}
.gn-booking-preview-item span{display:flex;align-items:center;gap:8px;font-size:12px;color:#71717a;margin-bottom:6px}
.gn-booking-preview-item b{display:block;font-size:14px;color:#18181b;line-height:1.6;word-break:break-word}
.gn-booking-preview-slip{border:1px solid rgba(24,24,27,.08);border-radius:20px;padding:14px;background:#fcfafb;height:100%}
.gn-booking-preview-slip__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#18181b;margin-bottom:10px}
.gn-booking-confirm-dialog{max-width:860px}
.gn-booking-confirm-modal .modal-body{padding:18px 18px 8px}
.gn-booking-confirm-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid rgba(24,24,27,.08);border-radius:22px;background:linear-gradient(135deg,#fff 0%,#fcf7fa 100%);margin-bottom:16px}
.gn-booking-confirm-hero__eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#a14f73;margin-bottom:4px}
.gn-booking-confirm-hero__title{font-size:20px;font-weight:800;color:#18181b;line-height:1.2}
.gn-booking-confirm-hero__hint{font-size:13px;color:#71717a;margin-top:4px}
.gn-booking-confirm-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#f8e8f0;color:#8f3d62;font-size:13px;font-weight:700;white-space:nowrap}
.gn-booking-confirm-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
.gn-booking-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gn-booking-preview-item{border:1px solid rgba(24,24,27,.08);border-radius:20px;padding:14px 16px;background:#fff;box-shadow:0 8px 24px rgba(24,24,27,.04)}
.gn-booking-preview-item.is-lg{grid-column:1/-1;background:linear-gradient(135deg,#fff 0%,#fff5fa 100%)}
.gn-booking-preview-item.is-accent{background:linear-gradient(135deg,var(--brand-pale) 0%,#fdf0f6 100%);border-color:rgba(179,86,127,.18)}
.gn-booking-preview-item span{display:flex;align-items:center;gap:8px;font-size:12px;color:#8a8a96;margin-bottom:8px;font-weight:700}
.gn-booking-preview-item b{display:block;font-size:24px;color:#18181b;line-height:1.25;word-break:break-word;font-weight:800}
.gn-booking-preview-item:not(.is-lg) b{font-size:20px}
.gn-booking-preview-slip{border:1px solid rgba(24,24,27,.08);border-radius:24px;padding:14px;background:#fcfafb;height:100%;box-shadow:0 8px 24px rgba(24,24,27,.04)}
.gn-booking-preview-slip__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#18181b;margin-bottom:12px}
@media (max-width: 991.98px){.gn-booking-confirm-layout{grid-template-columns:1fr}.gn-booking-confirm-badge{display:none}}
@media (max-width: 575.98px){.gn-booking-preview-grid{grid-template-columns:1fr}.gn-booking-confirm-topbar__title{font-size:18px}.gn-booking-preview-item b,.gn-booking-preview-item.is-lg b,.gn-booking-preview-item.is-accent b{font-size:18px}}
/* Booking confirm popup: wider slip preview */
.gn-booking-confirm-dialog{max-width:1040px}
.gn-booking-confirm-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.gn-booking-preview-slip{padding:16px 16px 18px}
.gn-booking-preview-slip img{width:100%;height:100%;min-height:360px;max-height:500px;object-fit:contain;background:#fff;border-radius:18px}
@media (max-width: 991.98px){.gn-booking-confirm-layout{grid-template-columns:1fr}.gn-booking-confirm-dialog{max-width:860px}.gn-booking-preview-slip img{min-height:260px;max-height:340px}}
/* Online booking popup + admin */
.gn-booking-confirm-dialog--wide{max-width:1180px}
.gn-booking-confirm-layout{grid-template-columns:minmax(0,1fr) 460px !important;gap:22px !important}
.gn-booking-preview-slip{padding:16px !important;display:flex;flex-direction:column;justify-content:flex-start}
.gn-booking-preview-slip img{width:100% !important;height:460px !important;max-height:460px !important;min-height:460px !important;object-fit:contain !important;background:#fff;border-radius:18px}
.gn-booking-preview-panel{min-height:460px}
@media (max-width: 991.98px){.gn-booking-confirm-layout{grid-template-columns:1fr !important}.gn-booking-preview-slip img{height:320px !important;min-height:320px !important;max-height:320px !important}}
.gn-public-queue-item .sub{font-size:12px;color:#6b7280}
.gn-public-queue-item.is-busy .status{background:#fff1f2;color:#be123c;border-color:rgba(244,63,94,.2)}
.gn-public-queue-item.is-free .status{background:#ecfdf5;color:#15803d;border-color:rgba(34,197,94,.18)}
/* booking public page refinements */
.gn-public-hero__grid.is-single{grid-template-columns:minmax(0,1fr)}
.gn-public-queue-item.is-closed{border-color:rgba(245,158,11,.26);background:rgba(255,251,235,.9)}
.gn-public-queue-item.is-closed .status{background:#fef3c7;color:#b45309;border-color:rgba(245,158,11,.24)}
.gn-booking-lookup-result{display:grid;gap:12px}
.gn-booking-lookup-item{border:1px solid rgba(24,24,27,.08);background:#fff;border-radius:18px;padding:14px 16px}
.gn-booking-lookup-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
.gn-booking-lookup-head .code{font-weight:800;color:#111827}
.gn-booking-lookup-head .date{font-size:12px;color:#6b7280;margin-top:3px}
.gn-booking-lookup-head .status{display:inline-flex;align-items:center;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;background:#fff1f2;color:#be123c}
.gn-booking-lookup-line{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px}
.gn-booking-lookup-line span{color:#6b7280}
/* V1.5.6 booking summary/service display */
.gn-checkitem{position:relative;overflow:hidden}
.gn-checkitem span{gap:0}
.gn-checkitem b{font-size:14px;font-weight:700;color:var(--gn-heading)}
.gn-checkitem input:checked + span b{color:var(--brand-2)}
.gn-checkitem:has(input:checked){background:linear-gradient(135deg,var(--brand-pale) 0%,#fff1f7 100%);border-color:rgba(var(--brand-rgb),.38);box-shadow:0 12px 26px rgba(var(--brand-rgb),.12)}
.gn-checkitem:has(input:checked)::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--brand-rgb),.05),rgba(var(--brand-rgb),.02));pointer-events:none}
.gn-public-summary{grid-template-columns:1fr}
.gn-public-summary .gn-public-summary-main{padding:18px 20px;border-radius:20px;background:linear-gradient(135deg,#ffffff 0%,rgba(var(--brand-rgb),.10) 55%,rgba(var(--brand-rgb),.18) 100%);border:1px solid rgba(var(--brand-rgb),.32);box-shadow:0 10px 24px rgba(24,24,27,.06)}
.gn-public-summary .gn-public-summary-main span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--gn-heading);text-transform:none;letter-spacing:0}
.gn-public-summary .gn-public-summary-main span i{color:var(--gn-accent)}
.gn-public-summary .gn-public-summary-main b{display:block;margin-top:8px;font-size:34px;line-height:1.05;font-weight:800;color:var(--gn-heading)}
.gn-public-summary .gn-public-summary-main small{display:block;margin-top:8px;font-size:12px;font-weight:500;color:var(--gn-default)}
@media (max-width: 576px){.gn-public-summary .gn-public-summary-main b{font-size:28px}}
/* =========================
THEMED SCROLLBAR (Global)
- ใช้ทั้งฝั่งผู้ใช้และ admin
- สี: ชมพูธีมเว็บ var(--brand) → var(--brand)
========================= */
/* Firefox */
html{
scrollbar-width: thin;
scrollbar-color: var(--brand) rgba(var(--brand-rgb),.10);
}
/* Chrome / Edge / Safari */
::-webkit-scrollbar{
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track{
background: rgba(var(--brand-rgb),.08);
border-radius: 999px;
}
::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 60%, var(--brand-2) 100%);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
::-webkit-scrollbar-thumb:hover{
background: linear-gradient(180deg, var(--brand-soft) 0%, var(--brand) 60%, var(--brand-2) 100%);
background-clip: padding-box;
filter: brightness(1.05);
}
::-webkit-scrollbar-thumb:active{
background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
background-clip: padding-box;
}
::-webkit-scrollbar-corner{
background: transparent;
}
/* Sidebar / Card scrolls ภายใน — ใช้ scrollbar บางกว่า */
.gn-sidebar::-webkit-scrollbar,
.gn-book-dialog::-webkit-scrollbar,
.gn-modal::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar{
width: 8px;
height: 8px;
}
/* Mobile — scrollbar เล็กลง */
@media (max-width: 576px){
::-webkit-scrollbar{
width: 6px;
height: 6px;
}
}
/* =========================
FORM SWITCH / CHECKBOX (Bootstrap override → ธีมชมพู)
========================= */
.form-check-input{
cursor: pointer;
border-color: rgba(var(--brand-rgb),.45);
}
.form-check-input:focus{
border-color: var(--brand);
box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb),.30);
}
.form-check-input:checked{
background-color: var(--brand);
border-color: var(--brand);
}
.form-check-input:checked:focus{
border-color: var(--brand-2);
box-shadow: 0 0 0 .2rem rgba(var(--brand-2-rgb),.25);
}
.form-check-input:active{
filter: brightness(.95);
}
/* Switch (toggle) — gradient ชมพูตอน on */
.form-switch .form-check-input{
background-color: rgba(24,24,27,.10);
border-color: rgba(24,24,27,.12);
}
.form-switch .form-check-input:checked{
background-color: var(--brand);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"), linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 60%, var(--brand-2) 100%);
background-repeat: no-repeat, no-repeat;
background-position: right center, center;
background-size: contain, cover;
border-color: transparent;
box-shadow: 0 4px 12px rgba(var(--brand-rgb),.25);
}
.form-switch .form-check-input:focus{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28213,166,189,.8%29'/%3e%3c/svg%3e");
}
/* Fix: ตอน :checked + :focus พร้อมกัน ต้องคง gradient + ลูกกลมขาวด้านขวาไว้ */
.form-switch .form-check-input:checked:focus{
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"), linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 60%, var(--brand-2) 100%);
background-repeat: no-repeat, no-repeat;
background-position: right center, center;
background-size: contain, cover;
}
/* Disabled state */
.form-check-input:disabled,
.form-check-input[disabled]{
opacity: .45;
cursor: not-allowed;
}
/* =========================
FILE INPUT — dusty rose theme (Choose File button)
✨ applies to ALL input[type=file] (form-control optional)
========================= */
input[type="file"]{
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid rgba(var(--brand-rgb),.22);
border-radius: 14px;
color: #6b7280;
font-size: 13.5px;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
width: 100%;
min-height: 48px;
}
input[type="file"]:hover{
border-color: rgba(var(--brand-rgb),.45);
}
input[type="file"]:focus{
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.18);
outline: none;
}
input[type="file"]:disabled{
opacity: .55;cursor: not-allowed;background: #fafafa;
}
/* The "Choose File" button portion — pill shape (Chrome/Edge/Safari/Firefox) */
input[type="file"]::file-selector-button{
background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 60%, var(--brand-2) 100%);
color: #fff;
border: none;
border-radius: 999px; /* ✨ pill / capsule shape */
padding: 9px 22px;
margin: 6px 12px 6px 6px; /* ✨ floating inside container */
font-weight: 700;
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: background .15s, box-shadow .15s, transform .15s;
box-shadow: inset 0 1px 0 rgba(255,255,255,.20),
0 3px 8px rgba(var(--brand-rgb),.22);
}
input[type="file"]::-webkit-file-upload-button{
background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 60%, var(--brand-2) 100%);
color: #fff;
border: none;
border-radius: 999px;
padding: 9px 22px;
margin: 6px 12px 6px 6px;
font-weight: 700;
font-size: 13px;
font-family: inherit;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,.20),
0 3px 8px rgba(var(--brand-rgb),.22);
}
input[type="file"]::file-selector-button:hover{
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 60%, var(--brand-2) 100%);
filter: brightness(1.02);
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.20),
0 6px 14px rgba(var(--brand-rgb),.30);
}
input[type="file"]::file-selector-button:active{
background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-2) 100%);
filter: brightness(.94);
transform: translateY(0);
}
input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button{
background: #d4d4d8;color: #fff;cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* Dark scrollbar สำหรับ section สีเข้ม (admin logs, ฯลฯ)
- เลือกเฉพาะที่ใส่ class .gn-scroll-dark เท่านั้น */
.gn-scroll-dark::-webkit-scrollbar-track{
background: rgba(255,255,255,.04);
}
.gn-scroll-dark::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, rgba(var(--brand-rgb),.55), rgba(var(--brand-2-rgb),.7));
background-clip: padding-box;
}
.gn-scroll-dark{
scrollbar-color: rgba(var(--brand-rgb),.6) rgba(255,255,255,.04);
}
/* =========================
TOGGLE SWITCH (.gn-switch)
ใช้แทน checkbox สำหรับสวิตช์เปิด/ปิด ทั้งระบบ
วิธีใช้:
ขนาด: .gn-switch--sm | default | .gn-switch--lg
========================= */
.gn-switch{
display:inline-flex;align-items:center;cursor:pointer;
margin:0;user-select:none;vertical-align:middle;
}
.gn-switch input{
position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.gn-switch__track{
position:relative;display:inline-block;
width:38px;height:22px;
background:#e5e7eb;
border-radius:999px;
transition:background .18s ease, box-shadow .18s ease;
box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.gn-switch__thumb{
position:absolute;top:2px;left:2px;
width:18px;height:18px;border-radius:50%;
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.20);
transition:transform .18s ease;
}
.gn-switch input:checked + .gn-switch__track{
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
box-shadow:inset 0 1px 2px rgba(var(--brand-2-rgb),.30),
0 0 0 3px rgba(var(--brand-rgb),.18);
}
.gn-switch input:checked + .gn-switch__track .gn-switch__thumb{
transform:translateX(16px);
}
.gn-switch input:focus-visible + .gn-switch__track{
outline:2px solid rgba(var(--brand-rgb),.55);outline-offset:2px;
}
.gn-switch input:disabled + .gn-switch__track{
opacity:.45;cursor:not-allowed;
}
/* size variants */
.gn-switch--sm .gn-switch__track{ width:32px;height:18px; }
.gn-switch--sm .gn-switch__thumb{ width:14px;height:14px; }
.gn-switch--sm input:checked + .gn-switch__track .gn-switch__thumb{ transform:translateX(14px); }
.gn-switch--lg .gn-switch__track{ width:46px;height:26px; }
.gn-switch--lg .gn-switch__thumb{ width:22px;height:22px; }
.gn-switch--lg input:checked + .gn-switch__track .gn-switch__thumb{ transform:translateX(20px); }
/* label ข้างๆ */
.gn-switch__label{
margin-left:8px;font-size:14px;color:#3f3f46;font-weight:500;
}
/* multi-line label: ให้ track ชิดบนของบรรทัดแรก */
.gn-switch--top{ align-items:flex-start; }
.gn-switch--top .gn-switch__track{ margin-top:2px;flex-shrink:0; }
.gn-switch--top .gn-switch__label{ line-height:1.45; }
/* ===========================================================
✨ KPI GRID — Shared dashboard pattern (pink theme · soft pastel)
ใช้กับ dashboard เล็ก ๆ ทุกหน้า (appointments, finance, overview ฯลฯ)
Markup:
=========================================================== */
.fin-kpi-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;
}
@media (max-width:991.98px){ .fin-kpi-grid{grid-template-columns:repeat(2,1fr)} }
/* 📱 มือถือ — คงเป็น 2 คอลัมน์ (กระชับลง) ไม่ลดเป็น 1 คอลัมน์ */
@media (max-width:480px){
.fin-kpi-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
.fin-stat{ padding:14px 12px 12px; border-radius:18px; }
.fin-stat__head{ gap:8px; margin-bottom:8px; }
.fin-stat__ic{ width:32px; height:32px; border-radius:10px; font-size:14px; }
.fin-stat__lbl{ font-size:11.5px; line-height:1.25; }
.fin-stat__lbl small{ font-size:8.5px; letter-spacing:.8px; }
.fin-stat__val{ font-size:1.35rem !important; }
.fin-stat__val .cur{ font-size:13px !important; }
.fin-stat__meta{ font-size:10.5px !important; }
/* ลด decorative circle ให้บางลง — กันบดบังตัวเลข */
.fin-stat::before{ width:70px; height:70px; top:-20px; right:-20px; opacity:.7; }
}
/* 📱 จอเล็กมาก ๆ (≤340px) — กรณีโคตรแคบ เช่น Galaxy Fold ปิดอยู่ → 1 คอลัมน์ */
@media (max-width:340px){
.fin-kpi-grid{ grid-template-columns:1fr; }
}
.fin-stat{
position:relative;overflow:hidden;isolation:isolate;
background:
linear-gradient(135deg,
#fff 0%,
rgba(var(--brand-rgb),.04) 40%,
rgba(var(--brand-rgb),.10) 100%);
border:1px solid rgba(var(--brand-rgb),.14);
border-radius:22px;
padding:18px 18px 16px;
transition:.25s cubic-bezier(.2,.7,.2,1);
}
.fin-stat:hover{
transform:translateY(-3px);
border-color:rgba(var(--brand-rgb),.30);
box-shadow:0 18px 38px rgba(var(--brand-rgb),.12);
}
.fin-stat::before{
content:""; position:absolute; z-index:-1;
top:-30px; right:-30px;
width:110px; height:110px; border-radius:50%;
background:radial-gradient(circle, rgba(var(--brand-rgb),.18), transparent 65%);
transition:.4s;
}
.fin-stat:hover::before{ transform:scale(1.3); }
.fin-stat__head{
display:flex;align-items:center;gap:10px;
margin-bottom:12px;
}
.fin-stat__ic{
width:38px;height:38px;border-radius:12px;flex-shrink:0;
display:grid;place-items:center;
font-size:17px;
background:rgba(var(--brand-rgb),.10);
color:var(--brand-2);
border:1px solid rgba(var(--brand-rgb),.18);
}
.fin-stat.is-net .fin-stat__ic{
background:rgba(var(--brand-rgb),.16);
color:var(--brand-2);
border-color:rgba(var(--brand-rgb),.30);
}
.fin-stat.is-loss .fin-stat__ic{
background:rgba(220,38,38,.08);
color:#b91c1c;
border-color:rgba(220,38,38,.20);
}
.fin-stat__lbl{
font-size:13px;font-weight:700;color:#18181b;
line-height:1.3;
flex:1;min-width:0;
}
.fin-stat__lbl small{
display:block;font-size:9.5px;font-weight:700;
color:var(--brand-2);letter-spacing:1.2px;
text-transform:uppercase;margin-top:2px;opacity:.75;
}
.fin-stat__val{
font-size:30px;font-weight:900;line-height:1.05;
color:#18181b;letter-spacing:-.6px;
font-variant-numeric:tabular-nums;
display:flex;align-items:baseline;gap:4px;
}
.fin-stat__val .cur{
font-size:16px;font-weight:800;
color:var(--brand-2);opacity:.65;
}
.fin-stat.is-net .fin-stat__val{ color:var(--brand-2); }
.fin-stat.is-net .fin-stat__val .cur{ color:var(--brand-2);opacity:.85; }
.fin-stat.is-loss .fin-stat__val{ color:#b91c1c; }
.fin-stat.is-loss .fin-stat__val .cur{ color:#b91c1c;opacity:.75; }
.fin-stat__meta{
margin-top:10px;font-size:11.5px;color:#6b7280;font-weight:600;
display:flex;align-items:center;gap:6px;
padding-top:9px;
border-top:1px dashed rgba(var(--brand-rgb),.18);
}
.fin-stat__meta i{ color:var(--brand-2);opacity:.75; }
|