/* ============================================================
   simple.css — ชั้นปรับหน้าตา "ง่าย สวย สบายตา อ่านทีเดียวเข้าใจ" ทั้งเว็บ (โหลดหลังสุด ทับของเดิม)
   หลักการ: 1) ตัวใหญ่ อ่านสบาย  2) ทุกโมดูลมีสีของตัวเอง (ส้ม/ม่วง/เขียว/ฟ้า) ใช้ซ้ำทั้งเมนู ปุ่ม การ์ด
            3) ปุ่มหลักมีปุ่มเดียวเด่น ๆ ต่อหน้า ที่เหลือเป็นปุ่มรอง  4) เมนูโชว์เฉพาะที่ใช้บ่อย ที่เหลือซ่อนใน "เมนูอื่น ๆ"
   ============================================================ */

:root {
  --mod-marketing: #3051B2;   /* การตลาด/ขาย = น้ำเงินคอบอลต์ */
  --mod-hr: #1F2E7A;          /* บุคคล = กรมท่า */
  --mod-stock: #2E8CC4;       /* สต็อก/ผลิต = ฟ้าน้ำทะเล */
  --mod-accounting: #4F6D8C;  /* บัญชี-การเงิน = เทาน้ำเงินเหล็ก */
  --mod-me: #2545A0;
  --mod-admin: #2545A0;
  --fs-sm: .92rem;
  --fs-h1: 1.75rem;
  --fs-h2: 1.3rem;
  --fs-h3: 1.1rem;
  --radius: 18px;
  --shadow: 0 2px 10px rgba(23, 44, 116, .07);
  --tap: 52px;
}
body { --mc: var(--navy); --mc-soft: color-mix(in srgb, var(--mc) 11%, #fff); --mc-line: color-mix(in srgb, var(--mc) 28%, #fff); --mc-dark: color-mix(in srgb, var(--mc) 74%, #000); }
.mod-marketing { --mc: var(--mod-marketing); }
.mod-hr { --mc: var(--mod-hr); }
.mod-stock { --mc: var(--mod-stock); }
.mod-accounting { --mc: var(--mod-accounting); }
.mod-me, .mod-admin { --mc: var(--navy); }
.mod-marketing, .mod-hr, .mod-stock, .mod-accounting, .mod-me, .mod-admin { --mc-soft: color-mix(in srgb, var(--mc) 11%, #fff); --mc-line: color-mix(in srgb, var(--mc) 28%, #fff); --mc-dark: color-mix(in srgb, var(--mc) 74%, #000); }

html { font-size: 16px; }
@media (max-width: 720px) { html { font-size: 17px; } }
body { background: linear-gradient(180deg, var(--mc-soft) 0, var(--bg) 320px) no-repeat, var(--bg); line-height: 1.6; }

/* ---------- แถบบน: สลับโมดูลเป็นเม็ดสี ---------- */
.topbar-in { height: 64px; }
.topbar .brand { font-size: 1.1rem; }
.topbar .brand img { width: 38px; height: 38px; }
.topbar .who { font-size: .92rem; }
.btn-top { height: 40px; padding: 0 1rem; font-size: .95rem; border-radius: 12px; }
.modswitch { gap: 4px; padding: 4px; background: #EEF1F8; border-radius: 16px; }
.modswitch a { padding: .5rem 1.05rem; border-radius: 12px; font-size: 1rem; font-weight: 700; }
.modswitch a .ico { width: 1.2rem; height: 1.2rem; }
.modswitch a.sw-marketing .ico { color: var(--mod-marketing); }
.modswitch a.sw-hr .ico { color: var(--mod-hr); }
.modswitch a.sw-stock .ico { color: var(--mod-stock); }
.modswitch a.sw-accounting .ico { color: var(--mod-accounting); }
.modswitch a.active { color: #fff; box-shadow: 0 4px 12px rgba(23, 44, 116, .22); background: var(--navy); }
.modswitch a.active .ico { color: #fff; }
.modswitch a.sw-marketing.active { background: var(--mod-marketing); }
.modswitch a.sw-hr.active { background: var(--mod-hr); }
.modswitch a.sw-stock.active { background: var(--mod-stock); }
.modswitch a.sw-accounting.active { background: var(--mod-accounting); }

/* ---------- แถบหัวโมดูล: พื้นสีเต็ม + เมนูย่อยเป็นปุ่มเม็ดยา ---------- */
.modband { background: linear-gradient(100deg, var(--mc), color-mix(in srgb, var(--mc) 68%, #000)); border: 0; box-shadow: 0 6px 18px color-mix(in srgb, var(--mc) 28%, transparent); position: relative; z-index: 30; }
.modband-in { padding: .7rem 1rem; gap: .6rem 1.2rem; }
.modband .modtitle { color: #fff; font-size: 1.15rem; font-weight: 800; }
.modband .modtitle .ico-wrap { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .22); color: #fff; }
.modband .modtitle .ico-wrap .ico { width: 21px; height: 21px; }
.subnav { gap: .4rem; }
.subnav a { padding: .5rem 1.05rem; border-radius: var(--radius-pill); font-size: 1rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); }
.subnav a:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.subnav a.active { background: #fff; color: var(--mc-dark); box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }
.subnav a.feature:not(.active)::after { background: #fff; }
.btn-back { color: #fff; font-size: .95rem; background: rgba(255, 255, 255, .16); padding: .45rem .9rem; border-radius: var(--radius-pill); }
.btn-back:hover { background: rgba(255, 255, 255, .3); color: #fff; }

/* "เมนูอื่น ๆ" — ซ่อนเมนูที่ใช้ไม่บ่อยไว้ในกล่องเดียว */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; padding: .5rem 1.05rem; border-radius: var(--radius-pill); font-size: 1rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; gap: .3rem; user-select: none; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary:hover, .more-menu[open] > summary { background: rgba(255, 255, 255, .3); }
.more-menu[open] > summary .ico { transform: rotate(180deg); }
.more-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; background: #fff; border-radius: 16px; padding: .5rem; box-shadow: 0 16px 40px rgba(23, 44, 116, .28); display: grid; gap: 2px; z-index: 60; }
.subnav .more-panel a { background: transparent; color: var(--text); border-radius: 12px; padding: .7rem 1rem; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.subnav .more-panel a:hover { background: var(--mc-soft); color: var(--mc-dark); }

/* ---------- หัวหน้า ---------- */
.wrap { padding-top: 1.4rem; }
.page-head { margin-bottom: 1.2rem; }
.page-head h1 { font-size: 1.75rem; font-weight: 800; }
.page-head .ico-title { color: #fff; background: var(--mc, var(--navy)); box-sizing: content-box; width: 1.15em; height: 1.15em; padding: .3em; border-radius: 14px; }
.page-head p, .page-help { font-size: 1.02rem; color: var(--text-2); }
h2 { font-weight: 700; }

/* ---------- ปุ่ม: ปุ่มหลัก = สีโมดูล ใหญ่ ชัด ---------- */
.btn { background: var(--mc, var(--navy)); border-color: var(--mc, var(--navy)); border-radius: 14px; font-size: 1.05rem; font-weight: 700; padding: .65rem 1.4rem; box-shadow: 0 4px 12px color-mix(in srgb, var(--mc, var(--navy)) 30%, transparent); }
.btn:hover { background: var(--mc-dark, var(--navy-600)); border-color: var(--mc-dark, var(--navy-600)); }
.btn-ghost { background: #fff; color: var(--mc-dark, var(--navy)); border-color: var(--mc-line, var(--line-strong)); box-shadow: none; }
.btn-ghost:hover { background: var(--mc-soft, var(--sky-soft)); color: var(--mc-dark, var(--navy-dark)); border-color: var(--mc, var(--sky)); }
.btn-accent { background: var(--mc-soft, var(--sky-soft)); color: var(--mc-dark, var(--navy-dark)); border-color: var(--mc-line, var(--sky)); box-shadow: none; }
.btn-accent:hover { background: var(--mc, var(--sky-600)); color: #fff; border-color: var(--mc, var(--sky-600)); }
.btn-good { background: var(--green); border-color: var(--green); box-shadow: 0 4px 12px rgba(26, 116, 64, .28); }
.btn-danger { background: #fff; color: var(--red); border-color: var(--red-line); }
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-small { min-height: 44px; font-size: .98rem; padding: .4rem 1rem; border-radius: 12px; }
.btn-big { min-height: 62px; font-size: 1.2rem; border-radius: 16px; }
.btn-row { gap: .75rem; }

/* ---------- การ์ด ตัวเลข ---------- */
.card { border: 1px solid color-mix(in srgb, var(--mc, var(--navy)) 10%, var(--line)); padding: 1.35rem 1.5rem; margin-bottom: 1.2rem; }
.card > h2:first-child, .section-title h2 { font-size: 1.25rem; }
.card > h2:first-child::before, .section-title h2::before { content: ""; display: inline-block; width: 6px; height: 1.05em; border-radius: 3px; background: var(--mc, var(--navy)); margin-right: .6rem; vertical-align: -.15em; }
.stat, .kpi { border-left-color: var(--mc, var(--sky)); background: linear-gradient(150deg, #fff 35%, var(--mc-soft, #fff)); }
.stat .label { font-size: 1rem; color: var(--text-2); }
.stat .value { font-size: 2.1rem; font-weight: 800; color: var(--mc-dark, var(--navy)); }
.stat .sub { font-size: .95rem; }
.stat.good { border-left-color: var(--green); } .stat.warn { border-left-color: #F2B200; } .stat.bad { border-left-color: var(--red); }
a.stat:hover { border-color: var(--mc, var(--sky)); }
.badge, .chip { font-size: .92rem; padding: .15rem .8rem; }
.flash { font-size: 1.05rem; padding: 1rem 1.2rem; border-radius: 14px; }
.todo { padding: 1.15rem 1.3rem; }
.todo .name { font-size: 1.2rem; }

/* ---------- ตาราง: ตัวใหญ่ แถวโปร่ง สลับสี ---------- */
table.t { font-size: 1.02rem; }
table.t th { font-size: .95rem; padding: .8rem .9rem; background: var(--mc-soft, #E1EFF9); color: var(--mc-dark, var(--text)); }
table.t td { padding: .95rem .9rem; }
table.t tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--mc, var(--navy)) 3%, #fff); }
table.t tbody tr:hover td { background: var(--mc-soft, var(--surface-2)); }
table.t a { font-weight: 600; }

/* ---------- ฟอร์ม: ป้ายชื่อชัด ช่องใหญ่ ---------- */
label.field { font-size: 1.08rem; font-weight: 700; margin-top: 1.2rem; }
label.field .hint, .hint { font-size: .95rem; }
input[type=text], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], input[type=month], input[type=time], input[type=password],
input[type=search], input[type=email], select, textarea { font-size: 1.05rem; min-height: var(--tap); border-radius: 14px; border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--mc, var(--sky)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mc, var(--sky)) 22%, transparent); }
.filters label { font-size: 1rem; }
.check { font-size: 1.05rem; }
.check input { accent-color: var(--mc, var(--navy)); width: 24px; height: 24px; }
.choice span { border-radius: 14px; font-size: 1.05rem; min-height: 54px; }
.choice input:checked + span { background: var(--mc, var(--navy)); border-color: var(--mc, var(--navy)); }
.choice.good input:checked + span { background: var(--green); border-color: var(--green); }
.choice.bad input:checked + span { background: var(--red); border-color: var(--red); }
.seg button.on { background: var(--mc, var(--navy)); border-color: var(--mc, var(--navy)); }
.tabs { padding: .35rem; border-radius: 16px; }
.tabs a { font-size: 1.05rem; min-height: 50px; border-radius: 12px; }
.tabs a.on { color: var(--mc-dark, var(--navy-dark)); box-shadow: 0 2px 8px rgba(23, 44, 116, .12); }
.empty { padding: 2.6rem 1rem; font-size: 1.05rem; }
.empty strong { font-size: 1.2rem; }
.empty .ico-wrap { background: var(--mc-soft, var(--sky-soft)); color: var(--mc, var(--logo-blue)); width: 68px; height: 68px; }
.empty .ico-wrap .ico { width: 32px; height: 32px; }
a { color: color-mix(in srgb, var(--mc, var(--logo-blue)) 85%, #000); }

/* ---------- มือถือ ---------- */
@media (max-width: 900px) { .modswitch { display: none; } }
@media (max-width: 760px) {
  .topbar-in { height: 58px; }
  .modband-in { padding: .5rem .8rem .7rem; gap: .5rem; }
  .modband .modtitle { height: auto; padding: 0; }
  .modband .btn-back { width: auto; height: auto; padding: .4rem .8rem; margin: 0; }
  .modband .btn-back span { display: inline; }
  .subnav { flex-wrap: wrap; overflow: visible; padding: 0; gap: .4rem; }
  .subnav a { background: rgba(255, 255, 255, .18); padding: .5rem 1rem; }
  .subnav a.active { background: #fff; color: var(--mc-dark); }
  .more-panel { position: static; box-shadow: none; margin-top: .4rem; background: rgba(255, 255, 255, .96); }
  .more-menu { flex: 1 0 100%; }
  .tabbar a.active { background: var(--mc, var(--navy)); }
  .card { padding: 1.1rem 1.1rem; }
}

/* ---------- ปุ่มใหญ่หน้าแรก (action-card): ทุกใบสีเดียวกับโมดูล อ่านง่าย ไม่สลับสีมั่ว ---------- */
.actions-grid { gap: 1rem; }
.action-card, .action-card:nth-child(2), .action-card:nth-child(3), .action-card:nth-child(4) {
  background: #fff; color: var(--text); border: 2px solid var(--mc-line, var(--line-strong)); border-radius: 20px; min-height: 172px; gap: .5rem;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--mc, var(--navy)) 14%, transparent); font-size: 1.25rem; font-weight: 800; transition: transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease);
}
.action-card .a-ico { width: 72px; height: 72px; border-radius: 22px; background: var(--mc, var(--navy)); color: #fff; }
.action-card .a-ico .ico { width: 38px; height: 38px; }
.action-card .a-sub { display: block; font-size: .95rem; font-weight: 500; color: var(--muted); }
.action-card:hover, .action-card:nth-child(3):hover, .action-card:nth-child(4):hover { background: var(--mc, var(--navy)); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px color-mix(in srgb, var(--mc, var(--navy)) 34%, transparent); }
.action-card:hover .a-ico { background: rgba(255, 255, 255, .25); }
.action-card:hover .a-sub { color: rgba(255, 255, 255, .92); }

/* ไอคอนหน้าหัวเรื่องทุกหน้า = เม็ดสีของโมดูล */
.section-title h1 > .ico:first-child, .page-head h1 > .ico:first-child { box-sizing: content-box; width: 1.05em; height: 1.05em; padding: .3em; border-radius: 14px; background: var(--mc, var(--navy)); color: #fff; margin-right: .25rem; }
.section-title h1, .page-head h1 { font-size: 1.75rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; }
.stat-row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.stat-row .stat { padding: 1rem 1.1rem; }
.stat-row .stat .value { font-size: 2rem; }