/* ══ RESET & TOKENS ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue-900: #0D2D4E; --blue-800: #1F4E79; --blue-700: #1a5fa8; --blue-600: #2E75B6;
  --blue-400: #5BA4D4; --blue-200: #BDD7EE; --blue-100: #D6E4F0; --blue-50: #EBF3FB; --blue-20: #F5F9FD;
  --orange: #C55A11; --green: #217346; --red: #CC0000; --purple: #5B3E96;
  --gray-100: #F5F5F5; --gray-200: #E8E8E8; --gray-400: #BBBBBB; --gray-600: #777777; --gray-800: #333333;
  --white: #FFFFFF;
  --sidebar-w: 250px; --sidebar-collapsed: 60px; --topbar-h: 56px;
  --radius: 10px;
  --shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --transition: .22s cubic-bezier(.4,0,.2,1);
}
body { font-family:'Noto Sans Thai','Segoe UI',Arial,sans-serif; background:var(--blue-20); color:var(--gray-800); overflow:hidden; height:100vh; }

/* ══ LOGIN ══ */
#loginPage { position:fixed; inset:0; z-index:1000; background:linear-gradient(135deg,var(--blue-900) 0%,var(--blue-700) 50%,var(--blue-400) 100%); display:flex; align-items:center; justify-content:center; }
.login-card { background:white; border-radius:20px; padding:48px 44px; width:400px; box-shadow:0 24px 60px rgba(0,0,0,.3); text-align:center; }
.login-logo { width:56px; height:56px; border-radius:14px; margin:0 auto 14px; background:var(--blue-800); color:white; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; }
.login-brand { font-size:22px; font-weight:800; color:var(--blue-800); }
.login-sub { font-size:13px; color:var(--gray-600); margin:4px 0 36px; }
.btn-google { width:100%; padding:13px 20px; background:white; border:1.5px solid var(--gray-200); border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; transition:all .15s; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.btn-google:hover { border-color:var(--blue-600); box-shadow:0 3px 12px rgba(46,117,182,.2); transform:translateY(-1px); }
.google-icon { width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%23EA4335' d='M24 38.5c-6.26 0-11.57-4.22-13.46-10l-7.98 6.19C6.51 42.62 14.62 48 24 48c6.26 0 11.57-1.92 15.77-5.23l-7.68-5.93C30.01 38.06 27.13 38.5 24 38.5z'/%3E%3Cpath fill='%23FBBC05' d='M46.5 24c0-1.55-.14-3.04-.4-4.5H24v9h12.69c-.55 2.94-2.13 5.41-4.41 7.04l7.68 5.93C43.98 37.1 46.5 30.97 46.5 24z'/%3E%3Cpath fill='%2334A853' d='M10.54 28.5C10.07 27.1 9.8 25.58 9.8 24s.27-3.1.74-4.5L2.56 13.32A23.94 23.94 0 0 0 0 24c0 3.74.85 7.28 2.56 10.38l7.98-5.88z'/%3E%3C/svg%3E") center/contain no-repeat; }
.login-note { font-size:11px; color:var(--gray-400); margin-top:20px; line-height:1.6; }
/* ช่องกรอกหน้า Login ให้ใหญ่อ่านง่าย */
.login-card .login-input { padding:13px 14px; font-size:15px; height:auto; }
.login-card label { font-size:13px; }
.login-error { font-size:12px; color:var(--red); margin-top:14px; display:none; }

/* ══ APP SHELL ══ */
#app { display:none; height:100vh; flex-direction:column; }
#app.visible { display:flex; }
.topbar { height:var(--topbar-h); background:var(--blue-800); display:flex; align-items:center; padding:0 16px; flex-shrink:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.topbar-brand { display:flex; align-items:center; gap:10px; margin-right:auto; }
.topbar-logo { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.15); color:white; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.topbar-name { color:white; font-size:16px; font-weight:800; }
.topbar-tagline { color:rgba(255,255,255,.6); font-size:11px; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-partner-badge { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:white; font-size:12px; font-weight:600; padding:4px 12px; border-radius:20px; }
.topbar-avatar { width:34px; height:34px; border-radius:50%; background:var(--blue-400); color:white; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid rgba(255,255,255,.3); }

.body-wrap { display:flex; flex:1; overflow:hidden; }
.sidebar { width:var(--sidebar-w); background:var(--blue-900); display:flex; flex-direction:column; transition:width var(--transition); flex-shrink:0; overflow:hidden; position:relative; z-index:10; }
.sidebar.collapsed { width:var(--sidebar-collapsed); }
.sidebar-toggle { position:absolute; top:14px; right:-12px; width:24px; height:24px; border-radius:50%; background:var(--blue-600); border:2px solid var(--blue-900); color:white; font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.sidebar.collapsed .sidebar-toggle { transform:rotate(180deg); }
.sidebar-section-label { font-size:10px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,.35); text-transform:uppercase; padding:16px 16px 6px; white-space:nowrap; overflow:hidden; }
.sidebar.collapsed .sidebar-section-label { opacity:0; }
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; color:rgba(255,255,255,.65); font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; border-left:3px solid transparent; transition:all .15s; position:relative; }
.nav-item:hover { color:white; background:rgba(255,255,255,.07); }
.nav-item.active { color:white; background:rgba(255,255,255,.12); border-left-color:var(--blue-400); }
.nav-dot { flex-shrink:0; width:24px; height:24px; border-radius:7px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.8); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.nav-item.active .nav-dot { background:var(--blue-400); color:white; }
.nav-text { transition:opacity var(--transition); }
.sidebar.collapsed .nav-text { opacity:0; }
.nav-badge { margin-left:auto; background:var(--orange); color:white; font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px; flex-shrink:0; }
.sidebar.collapsed .nav-badge { display:none; }
.sidebar-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin:8px 0; }
.sidebar-bottom { margin-top:auto; padding:12px 0; }
.main-content { flex:1; overflow-y:auto; padding:24px; }

/* ══ PAGE HEADER / CARDS ══ */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.page-title { font-size:20px; font-weight:800; color:var(--blue-800); }
.page-sub { font-size:13px; color:var(--gray-600); margin-top:3px; }
.header-actions { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.card { background:white; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px; }
.card-head { padding:14px 20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--gray-200); }
.card-head h3 { font-size:14px; font-weight:700; color:var(--blue-800); }
.card-head .card-sub { font-size:12px; color:var(--gray-600); margin-left:auto; }
.card-body { padding:20px; }

/* ══ BUTTONS ══ */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all .15s; white-space:nowrap; }
.btn-primary { background:var(--blue-800); color:white; }
.btn-primary:hover { background:var(--blue-900); transform:translateY(-1px); }
.btn-secondary { background:var(--blue-50); color:var(--blue-800); border:1.5px solid var(--blue-200); }
.btn-secondary:hover { background:var(--blue-100); }
.btn-success { background:var(--green); color:white; }
.btn-danger { background:var(--red); color:white; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ══ FORMS ══ */
.form-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.form-grid-2 { grid-template-columns:1fr 1fr; } .form-grid-3 { grid-template-columns:1fr 1fr 1fr; } .form-grid-4 { grid-template-columns:repeat(4,1fr); }
.field { display:flex; flex-direction:column; gap:5px; }
.field.span2 { grid-column:span 2; } .field.span3 { grid-column:span 3; }
label { font-size:12px; font-weight:600; color:var(--gray-800); }
label .req { color:var(--red); margin-left:2px; } label .opt { color:var(--gray-400); font-weight:400; }
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="tel"], input[type="password"], select, textarea {
  padding:9px 12px; border:1.5px solid var(--gray-200); border-radius:7px; font-size:13px; font-family:inherit;
  color:var(--gray-800); background:white; outline:none; width:100%; transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(46,117,182,.12); }
select { cursor:pointer; } textarea { resize:vertical; min-height:80px; }
.field-hint { font-size:11px; color:var(--gray-600); }

/* ══ TABS ══ */
.tab-bar { display:flex; gap:2px; border-bottom:2px solid var(--gray-200); margin-bottom:20px; }
.tab-btn { padding:10px 18px; font-size:13px; font-weight:600; color:var(--gray-600); background:none; border:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; border-radius:6px 6px 0 0; display:flex; align-items:center; gap:7px; }
.tab-btn:hover { color:var(--blue-600); background:var(--blue-50); }
.tab-btn.active { color:var(--blue-800); border-bottom-color:var(--blue-600); background:var(--blue-50); }
.tab-content { display:none; } .tab-content.active { display:block; }

/* ══ STATS ══ */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.stat-card { background:white; border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); border-left:4px solid var(--blue-600); display:flex; flex-direction:column; gap:4px; }
.stat-card.orange { border-left-color:var(--orange); } .stat-card.green { border-left-color:var(--green); }
.stat-card.red { border-left-color:var(--red); } .stat-card.purple { border-left-color:var(--purple); }
.stat-label { font-size:11px; color:var(--gray-600); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.stat-value { font-size:28px; font-weight:800; color:var(--blue-800); line-height:1; }
.stat-card.orange .stat-value { color:var(--orange); } .stat-card.green .stat-value { color:var(--green); }
.stat-card.red .stat-value { color:var(--red); } .stat-card.purple .stat-value { color:var(--purple); }
.stat-delta { font-size:11px; color:var(--gray-600); }

/* ══ TABLE ══ */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { text-align:left; padding:10px 14px; background:var(--blue-50); color:var(--blue-800); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--blue-200); white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--gray-200); } tbody tr:hover { background:var(--blue-20); }
tbody td { padding:10px 14px; color:var(--gray-800); }

/* ══ STATUS TEXT (สีตัวอักษรเท่านั้น ไม่มีพื้นหลัง ตามที่กำหนด) ══ */
.status-text { font-size:12px; font-weight:700; white-space:nowrap; }
.st-pending       { color:var(--gray-600); }
.st-in-repair     { color:var(--blue-600); }
.st-waiting-parts { color:#B8860B; }
.st-hold          { color:var(--orange); }
.st-done          { color:var(--green); }
.st-ber           { color:var(--red); }
.st-shipped       { color:#0277bd; }
.st-quote         { color:var(--purple); }
.st-booked        { color:#6A3FA0; }
.st-received      { color:#0E7C86; }

/* ══ TOAST (แทน alert() ของเบราว์เซอร์) ══ */
#toastContainer { position:fixed; top:20px; right:20px; z-index:999; display:flex; flex-direction:column; gap:10px; }
.toast {
  min-width:280px; max-width:380px; background:white; border-radius:9px; padding:13px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.18); border-left:4px solid var(--blue-600); font-size:13px;
  color:var(--gray-800); opacity:0; transform:translateX(20px); transition:all .25s ease; line-height:1.5;
}
.toast.show { opacity:1; transform:translateX(0); }
.toast-success { border-left-color:var(--green); }
.toast-error   { border-left-color:var(--red); }
.toast-warning { border-left-color:var(--orange); }
.toast-info    { border-left-color:var(--blue-600); }

/* ══ FILE UPLOAD ══ */
.upload-zone { border:2px dashed var(--gray-400); border-radius:10px; padding:26px 20px; text-align:center; cursor:pointer; transition:all .15s; background:var(--gray-100); }
.upload-zone:hover { border-color:var(--blue-600); background:var(--blue-50); }
.upload-text { font-size:14px; color:var(--gray-600); } .upload-text span { color:var(--blue-600); font-weight:600; }
.upload-hint { font-size:12px; color:var(--gray-400); margin-top:6px; }
.upload-filename { font-size:12px; color:var(--blue-800); font-weight:700; margin-top:8px; }

/* ══ MODE SELECTOR ══ */
.mode-selector { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.mode-card { padding:16px 20px; border-radius:10px; border:2px solid var(--gray-200); border-top:4px solid var(--gray-200); cursor:pointer; background:white; transition:all .15s; }
.mode-card:hover { border-color:var(--blue-400); background:var(--blue-50); }
.mode-card.selected { border-color:var(--blue-600); border-top-color:var(--blue-600); background:var(--blue-50); }
.mode-title { font-size:14px; font-weight:700; color:var(--blue-800); }
.mode-desc { font-size:12px; color:var(--gray-600); margin-top:4px; }

/* ══ DEVICE ROW ══ */
.device-row { display:grid; grid-template-columns:130px 1fr 140px 100px 1fr 36px; gap:10px; align-items:end; padding:12px; background:var(--blue-20); border-radius:8px; margin-bottom:8px; border:1px solid var(--blue-100); }
.btn-remove { background:none; border:none; font-size:14px; cursor:pointer; color:var(--gray-400); padding:6px; border-radius:5px; font-weight:700; }
.btn-remove:hover { color:var(--red); background:#FCE4D6; }

/* ══ NOTICE ══ */
.notice { padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:16px; line-height:1.5; }
.notice.info { background:var(--blue-50); border-left:3px solid var(--blue-600); color:#1a3a5c; }
.notice.warning { background:#FFF2CC; border-left:3px solid var(--orange); color:#5a3e00; }
.notice.success { background:#E2EFDA; border-left:3px solid var(--green); color:#1a4a2e; }
.notice strong { font-weight:700; }

/* ══ SLA (สีตัวอักษรเท่านั้น) ══ */
.sla-text { font-size:12px; font-weight:700; }
.sla-ok { color:var(--green); } .sla-warn { color:#B8860B; } .sla-late { color:var(--red); }

/* ══ TRACKING / TIMELINE ══ */
.search-bar { display:flex; gap:10px; margin-bottom:20px; align-items:center; } .search-bar input { flex:1; }
.timeline { padding:0 0 0 24px; border-left:2px solid var(--blue-200); position:relative; }
.timeline-item { position:relative; padding:0 0 20px 20px; }
.timeline-dot { position:absolute; left:-28px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--blue-600); border:2px solid white; box-shadow:0 0 0 2px var(--blue-200); }
.timeline-dot.done { background:var(--green); box-shadow:0 0 0 2px #E2EFDA; }
.timeline-dot.active { background:var(--orange); box-shadow:0 0 0 2px #FCE4D6; }
.timeline-label { font-size:13px; font-weight:700; } .timeline-date { font-size:11px; color:var(--gray-600); margin-top:2px; }
.timeline-note { font-size:12px; color:var(--gray-600); margin-top:4px; }

/* ══ DRAWER / MODAL ══ */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; display:none; align-items:stretch; justify-content:flex-end; }
.drawer-overlay.open { display:flex; }
.drawer { width:460px; background:white; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,.15); transform:translateX(100%); transition:transform var(--transition); }
.drawer-overlay.open .drawer { transform:translateX(0); }
.drawer-head { padding:18px 20px; background:var(--blue-800); color:white; display:flex; align-items:center; gap:12px; }
.drawer-head h3 { font-size:15px; font-weight:700; }
.drawer-close { margin-left:auto; background:none; border:none; color:white; font-size:20px; cursor:pointer; opacity:.7; }
.drawer-body { flex:1; overflow-y:auto; padding:20px; }
.detail-row { display:flex; gap:10px; margin-bottom:12px; }
.detail-label { font-size:12px; font-weight:600; color:var(--gray-600); width:140px; flex-shrink:0; }
.detail-value { font-size:13px; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:300; display:none; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { width:460px; max-width:92vw; max-height:88vh; overflow-y:auto; background:white; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.modal-box.modal-lg { width:840px; } /* pop up ใหญ่สำหรับรายละเอียด Carton/Tote, การส่งออก, ยืนยันรับสินค้า */
.modal-head { padding:16px 20px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; gap:10px; }
.modal-head h3 { font-size:15px; font-weight:700; color:var(--blue-800); }
.modal-close { margin-left:auto; background:none; border:none; font-size:18px; cursor:pointer; color:var(--gray-600); }
.modal-body { padding:20px; display:flex; flex-direction:column; gap:14px; }
.modal-foot { padding:14px 20px; border-top:1px solid var(--gray-200); display:flex; justify-content:flex-end; gap:10px; }

.page { display:none; } .page.active { display:block; }
.icare-only-banner { background:var(--orange); color:white; padding:8px 16px; border-radius:6px; font-size:12px; font-weight:600; margin-bottom:16px; }
.empty-state { text-align:center; padding:40px 20px; color:var(--gray-400); }
.progress-wrap { background:var(--gray-200); border-radius:20px; height:6px; overflow:hidden; }
.progress-bar { height:100%; background:var(--blue-600); border-radius:20px; transition:width .4s; }
.activity-row { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--gray-200); align-items:flex-start; }
.activity-row:last-child { border-bottom:none; }
.activity-bar { width:3px; align-self:stretch; border-radius:2px; background:var(--blue-600); flex-shrink:0; }
.activity-title { font-size:13px; font-weight:700; } .activity-sub { font-size:12px; color:var(--gray-600); margin-top:2px; }
.activity-time { font-size:11px; color:var(--gray-400); margin-left:auto; white-space:nowrap; }

/* ══ TOGGLE SWITCH (Settings) ══ */
.toggle { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-track { position:absolute; inset:0; background:var(--gray-400); border-radius:24px; cursor:pointer; transition:.15s; }
.toggle-track::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:white; border-radius:50%; transition:.15s; }
.toggle input:checked + .toggle-track { background:var(--blue-600); }
.toggle input:checked + .toggle-track::before { transform:translateX(18px); }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--gray-200); gap:20px; }
.settings-row:last-child { border-bottom:none; }
.settings-row-title { font-size:13px; font-weight:700; }
.settings-row-desc { font-size:12px; color:var(--gray-600); margin-top:2px; }

.status-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; cursor:pointer; }
.status-toggle.active { color:var(--green); } .status-toggle.inactive { color:var(--gray-400); }

/* ══ GLOBAL LOADING OVERLAY (บันทึก/อัพเดทข้อมูล) ══ */
#globalLoadingOverlay {
  position:fixed; inset:0; background:rgba(13,45,78,.35); z-index:500;
  display:none; align-items:center; justify-content:center;
}
#globalLoadingOverlay.show { display:flex; }
.loading-box {
  background:white; border-radius:12px; padding:28px 36px; box-shadow:0 20px 50px rgba(0,0,0,.3);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.spinner {
  width:36px; height:36px; border-radius:50%;
  border:4px solid var(--blue-100); border-top-color:var(--blue-600);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
#globalLoadingText { font-size:13px; font-weight:600; color:var(--blue-800); }

/* ══ INBOUND RECEIVING CARDS ══ */
.inbound-card { background:white; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
.inbound-card-head { padding:14px 20px; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.inbound-card-head .title { font-size:14px; font-weight:700; color:var(--blue-800); }
.inbound-card-head .meta { font-size:12px; color:var(--gray-600); }
.inbound-card-body { padding:16px 20px; }
.inbound-select-all { font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; margin-bottom:10px; }

/* ══ ICON BUTTON (ดินสอแก้ไข ฯลฯ) ══ */
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0;
  border-radius:7px; border:1.5px solid var(--blue-200); background:var(--blue-50); color:var(--blue-800);
  font-size:14px; cursor:pointer; transition:all .15s; vertical-align:middle; }
.btn-icon:hover { background:var(--blue-100); }
.btn-icon:disabled, .btn-icon.disabled { opacity:.4; cursor:not-allowed; background:var(--gray-100); border-color:var(--gray-200); color:var(--gray-400); }

/* ══ PHOTO THUMBNAILS ══ */
.photo-links { display:flex; gap:6px; flex-wrap:wrap; }
.photo-links a { font-size:12px; color:var(--blue-600); font-weight:600; text-decoration:none; border:1px solid var(--blue-200); border-radius:6px; padding:3px 8px; background:var(--blue-50); }
.photo-links a:hover { background:var(--blue-100); }

/* ══ NEXT-STEP HINT (หน้าจัดการสถานะซ่อม) ══ */
.next-hint { font-size:11.5px; color:var(--blue-800); line-height:1.45; max-width:220px; white-space:normal; }
.next-hint.warn { color:var(--orange); }
.next-hint.ok { color:var(--green); }

/* ══ PAGINATION + SORTABLE HEADERS ══ */
.pager { display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:12px 16px; flex-wrap:wrap; }
.pager button { min-width:32px; height:30px; padding:0 8px; border-radius:7px; border:1.5px solid var(--blue-200);
  background:white; color:var(--blue-800); font-size:12px; font-weight:600; cursor:pointer; }
.pager button.current { background:var(--blue-800); color:white; border-color:var(--blue-800); }
.pager button:disabled { opacity:.4; cursor:not-allowed; }
.pager .pager-info { font-size:12px; color:var(--gray-600); margin-right:auto; }
.th-sort { cursor:pointer; user-select:none; }
.th-sort:hover { background:var(--blue-100); }

/* ══ EMAIL EVENT CARDS ══ */
.email-event-card { background:white; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:14px; padding:16px 20px; }
.email-event-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.email-event-head .title { font-size:13.5px; font-weight:700; color:var(--blue-800); }
.email-event-grid { display:grid; gap:10px; }

/* ══ RESPONSIVE — ใช้งานได้ทั้งคอมพิวเตอร์ แท็บเล็ต มือถือ ══ */
@media (max-width: 900px) {
  .sidebar { width: var(--sidebar-collapsed); }           /* เมนูย่อเหลือไอคอน — กดลูกศรขยายได้ */
  .sidebar .nav-text, .sidebar .sidebar-section-label { opacity: 0; }
  .sidebar .nav-badge { display: none; }
  .main-content { padding: 14px; }
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .form-grid, .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr !important; }
  .field.span2, .field.span3 { grid-column: auto; }
  .page-header { flex-direction: column; gap: 10px; }
  .header-actions { flex-wrap: wrap; }
  .search-bar { flex-wrap: wrap; }
  .search-bar input, .search-bar select { width: 100% !important; flex: none; }
  .topbar-partner-badge { display: none; }
  .topbar-name { font-size: 14px; } .topbar-tagline { display: none; }
  .drawer { width: 100vw; }
  .modal-box, .modal-box.modal-lg { width: 96vw; }
  .mode-selector { grid-template-columns: 1fr; }
  .tab-bar { flex-wrap: wrap; }
  .pager { justify-content: center; } .pager .pager-info { width: 100%; text-align: center; margin: 0 0 6px; }
  thead th, tbody td { padding: 8px 8px; font-size: 12px; }
  .login-card { width: 94vw; padding: 32px 22px; }
}
@media (max-width: 520px) {
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .stat-value { font-size: 20px; }
  .btn { padding: 9px 12px; }
}

/* ══ PRINT (Packing List / ใบเสนอราคา) ══ */
#packingListPrintArea, #quotationPrintArea { display:none; }
@media print {
  body * { visibility:hidden; }
  body:not(.print-quote) #packingListPrintArea, body:not(.print-quote) #packingListPrintArea * { visibility:visible; }
  body:not(.print-quote) #packingListPrintArea { display:block; position:absolute; left:0; top:0; width:100%; padding:24px; }
  body.print-quote #quotationPrintArea, body.print-quote #quotationPrintArea * { visibility:visible; }
  body.print-quote #quotationPrintArea { display:block; position:absolute; left:0; top:0; width:100%; padding:32px; font-size:13px; color:#000; }
}

/* ══ MODAL ซ้อน MODAL: ฟอร์มกรอก/ยืนยัน ต้องลอยเหนือ modal อื่นเสมอ (เช่น บันทึก Approve จากเมลใน modal รายละเอียด Quote) ══ */
#modalForm { z-index:400; }
#modalConfirm { z-index:450; }

/* ══ แท็บรอบบิล (ร่าง/วางบิลแล้ว/รับเงินแล้ว) ══ */
.billing-tab.active { background:var(--blue-700); color:#fff; border-color:var(--blue-700); }