/* App header: brand, centered company search, current company, user, and the top menu row. */

/* ─── Topbar ─── */
.topbar {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 540px) 1fr;
  column-gap: 24px;
  padding: 0 24px;
  box-shadow: none;
}
.topbar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-brand { font-size: 16px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.topbar-brand .brand-logo { width: 26px; height: 26px; }
.topbar .sidebar-toggle { width: 34px; height: 34px; border-color: transparent; font-size: 19px; }
.topbar .sidebar-toggle:hover { border-color: var(--border-color); }
#topbar-mobile-hamburger { display: none; }

/* Company search: the most prominent control in the header */
.gcs-desktop-wrap { width: 100%; min-width: 0; }
.topbar .gcs-input-box > i { left: 13px; font-size: 17px; }
.topbar .gcs-input {
  height: 40px; padding: 0 40px 0 40px;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--bg-main); font-size: 14px;
}
.topbar .gcs-input::placeholder { color: var(--text-muted); opacity: 1; }
.topbar .gcs-input:hover { border-color: #c9cdd2; }
.topbar .gcs-input:focus { background: var(--bg-card); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.topbar .gcs-input-box:focus-within > i { color: var(--brand); }
.topbar .gcs-clear-btn { right: 8px; }
.gcs-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
  border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card);
  font: 500 11px/1 'Noto Sans Thai', sans-serif; color: var(--text-muted); pointer-events: none;
}
.gcs-input:focus ~ .gcs-kbd, .gcs-input:not(:placeholder-shown) ~ .gcs-kbd { display: none; }

.topbar-actions { justify-self: end; margin-left: 0; gap: 10px; }

/* Sidebar / Topbar layout switch */
.tb-layout-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-main);
}
.tb-seg-btn {
  width: 32px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--text-muted);
  font-size: 17px; cursor: pointer;
}
.tb-seg-btn:hover { color: var(--text-primary); }
.tb-seg-btn[aria-pressed="true"] { background: var(--bg-card); color: var(--brand); box-shadow: 0 1px 2px rgb(32 34 37 / 10%); }

/* Current company + user menus */
.tb-menu { position: relative; min-width: 0; }
.tb-trigger {
  display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%;
  height: 44px; padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--text-primary); text-align: left; cursor: pointer;
}
.tb-trigger:hover, .tb-trigger[aria-expanded="true"] { background: var(--bg-main); }
.tb-trigger-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.tb-trigger-text > span { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-trigger-text > small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-trigger-text > small:empty { display: none; }
.tb-chevron { font-size: 14px; color: var(--text-muted); transition: transform .15s; flex-shrink: 0; }
.tb-trigger[aria-expanded="true"] .tb-chevron { transform: rotate(180deg); }

.tb-company-btn { border-color: var(--border-color); background: var(--bg-card); max-width: 300px; }
.tb-company-btn .tb-trigger-text > span { max-width: 210px; }
.tb-company-icon {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-size: 18px;
}
.tb-user-btn .tb-trigger-text > span { max-width: 150px; }
.tb-avatar {
  width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: #e7eaed; color: #5f6872; font-size: 19px;
}
[data-theme="dark"] .tb-avatar { background: #343a42; color: #c6ccd3; }
.tb-avatar-lg { width: 42px; height: 42px; font-size: 22px; }

.tb-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 2000;
  width: 320px; max-width: calc(100vw - 24px); padding: 8px;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
  box-shadow: 0 12px 32px rgb(32 34 37 / 12%);
}
.tb-panel[hidden] { display: none; }
.tb-user-panel { width: 260px; }
.tb-panel-label { padding: 6px 8px 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }
.tb-panel-sep { height: 1px; margin: 6px 0; background: var(--border-color); }
.tb-company-list { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.tb-company-item, .tb-panel-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-primary);
  text-align: left; font-size: 13px; cursor: pointer;
}
.tb-company-item:hover, .tb-panel-item:hover { background: var(--bg-main); }
.tb-company-item.is-active { background: var(--brand-soft); cursor: default; }
.tb-company-item > .ti-check { margin-left: auto; color: var(--brand); font-size: 16px; }
.tb-company-item-icon {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 8px; background: var(--bg-main); color: var(--text-secondary); font-size: 16px;
}
.tb-company-item.is-active .tb-company-item-icon { background: var(--brand); color: var(--brand-ink); }
.tb-company-item-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.tb-company-item-text > span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-company-item-text > small, .tb-panel-item small { font-size: 11px; color: var(--text-muted); }
.tb-panel-item > i { width: 30px; text-align: center; font-size: 17px; color: var(--text-secondary); }
.tb-panel-item > span { display: flex; flex-direction: column; line-height: 1.4; font-weight: 500; }
.tb-user-head { display: flex; align-items: center; gap: 10px; padding: 8px; }
.tb-user-head > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.tb-user-head strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.tb-user-head small { font-size: 12px; color: var(--text-muted); }

/* ─── Top menu row (topnav mode) ─── */
#topnav-bar { background: var(--bg-topbar); padding: 0 24px; gap: 2px; }
#topnav-bar .topnav-group-btn {
  position: relative; height: 36px; padding: 0 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
}
#topnav-bar .topnav-group-btn:hover { background: var(--bg-main); color: var(--text-primary); }
#topnav-bar .topnav-group-btn.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
#topnav-bar .topnav-group-btn.open::after { display: none; }

/* Menu filter (all / favourites) lives at the end of the menu row */
#topnav-fav-toggle {
  margin-left: auto; padding: 3px; gap: 2px;
  border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-main);
}
.topnav-fav-toggle-btn { height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 500; }
.topnav-fav-toggle-btn i { font-size: 14px; }
.topnav-fav-toggle-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px rgb(32 34 37 / 10%); }
#topnav-fav-toggle-fav.active i { color: #c98a12; }

/* ─── Narrower desktops: keep the search centered by trimming labels ─── */
@media (max-width: 1599.98px) {
  .tb-user-btn .tb-trigger-text { display: none; }
  .tb-user-btn { padding-right: 6px; }
}
@media (max-width: 1279.98px) {
  .topbar { column-gap: 16px; padding: 0 16px; }
  .tb-company-btn .tb-trigger-text > small { display: none; }
  .tb-company-btn .tb-trigger-text > span { max-width: 140px; }
  .topnav-fav-toggle-btn span { display: none; }
  #topnav-bar { padding: 0 16px; }
}
@media (max-width: 1099.98px) {
  .topbar .gcs-kbd { display: none; }
  .tb-company-btn .tb-trigger-text > span { max-width: 110px; }
}

/* ─── Mobile / tablet: two rows (brand + company + user, then search) ─── */
@media (max-width: 991px) {
  .topbar { display: flex; flex-wrap: wrap; column-gap: 8px; padding: 0 12px; }
  .topbar-start { order: 1; min-height: 56px; }
  .topbar-actions { order: 3; margin-left: auto; display: flex; gap: 6px; }
  .tb-trigger { height: 40px; }
  .tb-user-btn .tb-chevron { display: none; }
  .tb-user-btn { padding: 2px; }
  .tb-avatar { width: 34px; height: 34px; }
}
@media (max-width: 575px) {
  .topbar-brand { font-size: 15px; }
  .tb-company-btn { padding-right: 8px; gap: 8px; }
  .tb-company-icon { width: 30px; height: 30px; font-size: 16px; }
  .tb-company-btn .tb-trigger-text > span { max-width: 32vw; font-size: 12px; }
}
@media (max-width: 379px) {
  .topbar-brand { font-size: 0; gap: 0; }
}

/* Clear button only when there is something to clear (desktop + mobile search). */
.gcs-input:placeholder-shown ~ .gcs-clear-btn { display: none !important; }
.gcs-input:not(:placeholder-shown) ~ .gcs-clear-btn { display: flex !important; }

/* Breathing room between the header and page content (all pages) */
@media (min-width: 992px) { .main-content, body.topnav-mode .main-content { padding-top: 22px; } }
@media (max-width: 991.98px) { .main-content, body.topnav-mode .main-content { padding-top: 16px; } }

/* ── AR drafts (ฉบับร่าง รอลงสมุดรายวัน) ── */
.gl-draft-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: #FEF3E2; color: #B45309; border: 1px solid #F6D3A2; font-size: 10.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.gl-post-btn { color: #1F2428 !important; }
.gl-draft-notice { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #F6D3A2; border-radius: 12px; background: #FFF8EC; color: #7A4A0E; font-size: 13px; }
.gl-draft-notice > .ti { font-size: 18px; color: #B45309; }
.gld-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.gld-tab { height: 32px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-card); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.gld-tab span { margin-left: 4px; padding: 0 6px; border-radius: 8px; background: var(--bg-main); font-size: 11px; }
.gld-tab.is-active { background: #1F2428; border-color: #1F2428; color: #fff; }
.gld-tab.is-active span { background: rgb(255 255 255 / 18%); }
.gld-kind { display: inline-block; padding: 2px 8px; border-radius: 8px; background: var(--bg-main); font-size: 12px; font-weight: 600; }
.gl-tab-cnt-draft { font-size: 11px; font-weight: 700; background: #FEF3E2; color: #B45309; padding: 1px 7px; border-radius: 20px; white-space: nowrap; }
.gl-tab-sec-head { padding: 8px 16px; background: #FFF8EC; border-bottom: 1px solid #F6D3A2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #7A4A0E; }
.gl-tab-sec-head b { color: #B45309; font-variant-numeric: tabular-nums; }

/* ── Group บัญชี (ตั้งค่าการบันทึกบัญชี) ── */
.pcc-side-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pcc-side-badge.is-ar { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.pcc-side-badge.is-ap { background: #E3F2FD; color: #0D47A1; border: 1px solid #90CAF9; }
.pcc-items-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pcc-items-btn:hover { background: var(--bg-main); }
.pcc-items-btn span { min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--bg-main); font-size: 11px; }
.pcci-add { display: flex; gap: 8px; }
.pcci-add .input-custom { flex: 1; }
.pcci-sec-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.pcci-count { padding: 0 7px; border-radius: 10px; background: var(--bg-main); font-size: 11px; font-weight: 700; }
.pcci-count.is-warn { background: #FEF3E2; color: #B45309; }
.pcci-chip { display: inline-block; padding: 1px 7px; border-radius: 8px; background: var(--bg-main); font-size: 11px; font-weight: 600; }
.pcci-chip.is-guess { background: #FEF3E2; color: #B45309; }
.pcci-pending { padding: 12px 14px; border: 1px dashed #F6D3A2; border-radius: 12px; background: #FFFBF4; }
.pcci-plist { display: flex; flex-direction: column; gap: 6px; }
.pcci-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-color); }
@media (max-width: 575px) { .pcci-add, .pcci-prow { flex-direction: column; align-items: stretch; } }

/* ── นโยบายวันที่ AR: งวดที่กำลังคีย์ / เอกสารมาช้า / ตรวจวันที่ลงบัญชี ── */
.tb-period-btn .tb-company-icon { background: var(--bg-main); }
.tb-period-btn.is-set .tb-company-icon { background: #FEF3E2; color: #B45309; }
.tb-period-btn.is-set #topbar-period-name { color: #B45309; }
.ar-late-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: #FDECEC; color: #B42318; border: 1px solid #F6C9C5; font-size: 10.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; cursor: help; }
.glda-note { font-size: 12px; color: var(--text-secondary); }
.glda-warn { display: inline-block; margin-top: 3px; padding: 0 7px; border-radius: 8px; background: #FEF3E2; color: #B45309; font-size: 11px; font-weight: 700; }
#page-gl-date-audit td { vertical-align: top; }

/* ── มาตรฐานหัวเอกสาร AR: แถบวันที่ลงบัญชี/งวด/เดือนภาษี + ตรวจยอดตามเอกสาร ── */
.ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; margin: -2px 0 12px; border-radius: 10px; background: var(--bg-main); border: 1px solid var(--border-color); font-size: 12px; color: var(--text-secondary); }
.ar-meta:empty { display: none; }
.ar-meta .arm-item b { color: var(--text-primary); font-weight: 700; }
.ar-meta .arm-item .ti { margin-right: 2px; }
.ar-meta .arm-muted { color: var(--text-muted); }
.ar-meta .arm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.ar-meta .arm-chip.is-warn { background: #FEF3E2; color: #B45309; }
.ar-meta .arm-chip.is-err { background: #FDECEC; color: #B42318; }
.ar-amtchk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; border: 1px solid var(--border-color); background: var(--bg-main); }
.ar-amtchk b { font-variant-numeric: tabular-nums; }
.ar-amtchk .ar-amtchk-st { margin-left: auto; font-weight: 600; }
.ar-amtchk.is-ok { background: #EEF8F0; border-color: #BFE3C8; } .ar-amtchk.is-ok .ar-amtchk-st { color: #1B5E20; }
.ar-amtchk.is-bad { background: #FDECEC; border-color: #F6C9C5; } .ar-amtchk.is-bad .ar-amtchk-st { color: #B42318; }
.ar-amtchk.is-empty .ar-amtchk-st { color: var(--text-muted); font-weight: 500; }
.ar-row-date { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
.ar-type-pills { display: inline-flex; gap: 4px; margin-left: auto; padding: 3px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); }
.ar-type-pills .aro-term-pill { margin: 0; }
.ar-type-pills.is-ro { opacity: .85; pointer-events: none; }
@media (max-width: 575px) { .ar-row-date { grid-template-columns: 1fr; } .ar-amtchk .ar-amtchk-st { margin-left: 0; } }
.ar-sumro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; border: 1px dashed var(--border-color); }
.ar-sumro:empty { display: none; }
.ar-sumro > div { display: flex; flex-direction: column; gap: 1px; }
.ar-sumro small { font-size: 11px; color: var(--text-muted); }
.ar-sumro b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ar-sumro .is-net b { color: #1565c0; }
.ar-sumro-note { margin-left: auto; font-size: 11px; color: var(--text-muted); }

/* ── VAT ตาม Tax Point ── */
.ar-vat-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; cursor: help; border: 1px solid; }
.ar-vat-badge.is-not_due { background: #EEF2FF; color: #3730A3; border-color: #C7D2FE; }
.ar-vat-badge.is-partially_due { background: #FEF3E2; color: #B45309; border-color: #F6D3A2; }
.ar-vat-badge.is-fully_due { background: #EEF8F0; color: #1B5E20; border-color: #BFE3C8; }
.aro-vat-doc-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.aro-vat-doc-seg .aro-term-pill { flex: 1 1 200px; justify-content: center; }
.ar-vat-issue-btn { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; margin-left: 2px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); font: inherit; font-size: 10.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; vertical-align: 1px; }
.ar-vat-issue-btn:hover { background: var(--bg-main); color: var(--text-primary); }

/* สมุดรายวัน: Posted สีเขียวตัวหนา · คำอธิบายบรรทัดเดียว (ชี้เพื่อดูเต็ม) ไม่ดันแถวให้สูง (#BUG 20261004-26/27) */
.je-posted-badge { font-size: 12px !important; font-weight: 800 !important; background: #dcfce7 !important; color: #15803d !important; border: 1px solid #86efac !important; }
td.je-remark { padding: 2px 14px 4px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; min-width: 180px; }
[data-theme="dark"] .je-posted-badge { background: rgba(34, 197, 94, .16) !important; color: #86efac !important; border-color: rgba(134, 239, 172, .4) !important; }
td.je-accname { padding: 2px 14px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

/* ตรวจสุขภาพข้อมูลบัญชี (page-gl-integrity) */
.gli-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.gli-stat { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 10px 14px; border: 1px solid var(--border-color, #E5E7EB); border-radius: 10px; background: var(--card-bg, #fff); }
.gli-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.gli-stat span { font-size: 12px; color: var(--text-muted, #6B7280); }
.gli-stat.is-ok b { color: #1b5e20; }
.gli-stat.is-err { border-color: #F5C2C0; background: #FFF5F5; }
.gli-stat.is-err b { color: #B42318; }
.gli-stat.is-warn { border-color: #F6D9A8; background: #FFFAF0; }
.gli-stat.is-warn b { color: #B26A00; }
.gli-lv { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.gli-lv.is-error { background: #FDECEC; color: #B42318; }
.gli-lv.is-warn { background: #FFF4E0; color: #B26A00; }
[data-theme="dark"] .gli-stat.is-err { background: rgba(239, 68, 68, .12); border-color: rgba(248, 113, 113, .4); }
[data-theme="dark"] .gli-stat.is-err b, [data-theme="dark"] .gli-lv.is-error { color: #fca5a5; }
[data-theme="dark"] .gli-stat.is-warn { background: rgba(245, 158, 11, .12); border-color: rgba(251, 191, 36, .4); }
[data-theme="dark"] .gli-stat.is-warn b, [data-theme="dark"] .gli-lv.is-warn { color: #fcd34d; }
[data-theme="dark"] .gli-lv.is-error { background: rgba(239, 68, 68, .16); }
[data-theme="dark"] .gli-lv.is-warn { background: rgba(245, 158, 11, .16); }
[data-theme="dark"] .gli-stat.is-ok b { color: #86efac; }

/* ดาวน์โหลดเอกสาร (R-028) */
.dex-filters { padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dex-filters .form-label-custom { margin: 0; }
.dex-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-color); font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; }
#dex-tbody tr.dex-off td { color: var(--text-muted); }