/* ══════════════════════════════════════════════════════════════
   ILPI System — Professional Light Theme
   ใช้ร่วมกันทุกหน้า (โหลดหลังสไตล์ของหน้า) ทำงานเมื่อ <html class="light">
   ══════════════════════════════════════════════════════════════ */

html.light {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #1e293b;
  --heading: #0f2a4a;
  --muted: #64748b;
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-soft: #eef3ff;
  --accent2: #0e7490;
  --green: #047857;
  --yellow: #b45309;
  --red: #b91c1c;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .06);
  --ring: 0 0 0 3px rgba(29, 78, 216, .14);
  color-scheme: light;
}

html.light body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

/* ── Sidebar ─────────────────────────────────────────────────── */
html.light .sidebar { background: var(--surface); border-right: 1px solid var(--border); box-shadow: var(--shadow-sm); }
html.light .sidebar-logo { border-bottom: 1px solid var(--border); }
html.light .logo-icon { background: linear-gradient(135deg, #0f2a4a, var(--accent)); box-shadow: 0 2px 6px rgba(29, 78, 216, .25); }
html.light .logo-name { color: var(--heading); font-weight: 700; }
html.light .nav-label { color: #94a3b8; font-weight: 600; }
html.light .nav-item { color: #475569; font-weight: 500; }
html.light .nav-item:hover { background: var(--surface2); color: var(--heading); }
html.light .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
html.light .sidebar-user { border-top: 1px solid var(--border); background: var(--surface2); }
html.light .sidebar-user .name { color: var(--heading); }
html.light .btn-logout { background: var(--surface); border-color: var(--border-strong); color: #475569; }
html.light .btn-logout:hover { border-color: var(--red); color: var(--red); background: #fef2f2; }

/* ── Topbar ──────────────────────────────────────────────────── */
html.light .topbar { background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
html.light .page-title { color: var(--heading); font-size: 18px; font-weight: 700; }
html.light .page-sub { color: var(--muted); }

/* ── Cards ───────────────────────────────────────────────────── */
html.light .period-card,
html.light .cat-card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
html.light .cat-card:focus-within { border-color: #93b4f5; box-shadow: var(--shadow-md); }
html.light .cat-header { background: linear-gradient(180deg, #fbfcfe, #f5f7fb); border-bottom: 1px solid var(--border); }
html.light .cat-badge { background: var(--accent-soft); border: 1px solid #c7d7fe; color: var(--accent); font-weight: 600; }
html.light .cat-title { color: var(--heading); }
html.light .kpi-name { color: var(--heading); }

/* แท็บมิติ ต้นทุน / ความน่าเชื่อถือ / เวลา */
html.light .dim-tabs { background: var(--surface); border-bottom: 1px solid var(--border); }
html.light .dim-tab { color: var(--muted); }
html.light .dim-tab:hover { color: var(--heading); background: var(--surface2); }
html.light .dim-tab.active-cost        { color: var(--yellow); border-bottom-color: var(--yellow); background: #fffbeb; }
html.light .dim-tab.active-reliability { color: var(--green);  border-bottom-color: var(--green);  background: #ecfdf5; }
html.light .dim-tab.active-time        { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft); }
html.light .dim-tab .score-badge { background: #f1f5f9; color: var(--text); border: 1px solid var(--border); }

html.light .result-row { border-top: 1px dashed var(--border-strong); }
html.light .formula-hint { background: #f1f5f9; color: #475569; border: 1px solid var(--border); }

/* ── Section title (หน้าข้อมูลบริษัท) ─────────────────────────── */
html.light .section-title { color: var(--heading); font-weight: 700; letter-spacing: .6px; padding-left: 10px; border-left: 3px solid var(--accent); }

/* ── Form controls ───────────────────────────────────────────── */
html.light label { color: #475569; }
html.light input,
html.light select,
html.light textarea { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
html.light input::placeholder,
html.light textarea::placeholder { color: #a0aec0; }
html.light input:focus,
html.light select:focus,
html.light textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
html.light input[readonly] { background: #f1f5f9 !important; color: #475569; }
html.light select option { background: var(--surface); color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────── */
html.light .btn,
html.light .btn-save { background: var(--accent); box-shadow: 0 1px 2px rgba(29, 78, 216, .3); }
html.light .btn:hover,
html.light .btn-save:hover { background: var(--accent-hover); }
/* ปุ่มรอง (สำรอง / นำเข้า / โหลดข้อมูลเดิม) → ปุ่มขอบ */
html.light .save-bar .btn-save[style],
html.light .period-card .btn-save {
  background: var(--surface) !important;
  color: var(--heading) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-sm);
}
html.light .save-bar .btn-save[style]:hover,
html.light .period-card .btn-save:hover { background: var(--surface2) !important; border-color: var(--accent) !important; color: var(--accent) !important; }

/* ── Save bar ────────────────────────────────────────────────── */
html.light .save-bar {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, .05);
}
html.light .save-msg.ok { color: var(--green); }
html.light .save-msg.err { color: var(--red); }

/* ── Mobile bottom nav ───────────────────────────────────────── */
html.light .bottom-nav { background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(15, 23, 42, .05); }
html.light .bottom-nav a { color: var(--muted); }
html.light .bottom-nav a.active { color: var(--accent); font-weight: 600; }

/* ── หน้า Login ──────────────────────────────────────────────── */
html.light body:has(> .card) { background: radial-gradient(ellipse at 70% 0%, #e3ebfa 0%, transparent 55%), linear-gradient(180deg, #f5f7fb, #eef2f8); }
html.light body:has(> .card)::before { opacity: .55; }
html.light .card { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(15, 42, 74, .10); }
html.light .logo-text { color: var(--heading); font-weight: 700; }
html.light .badge { background: var(--accent-soft); border-color: #c7d7fe; color: var(--accent); }
html.light .tabs { background: #f1f5f9; }
html.light .tab { color: var(--muted); }
html.light .tab.active { background: var(--surface); color: var(--heading); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
html.light .divider::before,
html.light .divider::after { background: var(--border); }
html.light .btn-guest { background: var(--surface); border-color: var(--border-strong); color: #475569; }
html.light .btn-guest:hover { border-color: var(--accent2); color: var(--accent2); background: #ecfeff; }
html.light .msg.error { background: #fef2f2; border: 1px solid #fecaca; color: var(--red); }
html.light .msg.success { background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--green); }

/* ── ตัวเลือกข้อความ ─────────────────────────────────────────── */
html.light ::selection { background: #c7d7fe; }

/* ช่องปี / รายได้ในหน้า ILPI */
html.light .period-card input[type=text],
html.light .period-card input[type=number],
html.light .period-card select { background: var(--surface); border-color: var(--border-strong); }
html.light .period-card label { color: #475569; font-weight: 600; }

/* ── ลิงก์คู่มือ ─────────────────────────────────────────────── */
.btn-manual {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; padding: 10px; border-radius: 8px;
  font-size: 13px; text-decoration: none; color: var(--accent);
  background: var(--accent-soft, rgba(59,130,246,.08)); border: 1px solid transparent;
  transition: all .15s;
}
.btn-manual:hover { border-color: var(--accent); }
.nav-item .ext { margin-left: auto; font-size: 11px; opacity: .55; }

/* ══════════════════════════════════════════════════════════════
   Responsive — ปรับตามขนาดอุปกรณ์
   ══════════════════════════════════════════════════════════════ */

/* จอใหญ่: จัดเนื้อหากึ่งกลาง ไม่ชิดซ้ายจนเหลือที่ว่างด้านขวา */
@media (min-width: 1200px) {
  .main > .content { margin-left: auto; margin-right: auto; width: 100%; }
  .save-bar { justify-content: center; }
}

/* แท็บเล็ต / แล็ปท็อปจอเล็ก: เมนูข้างแคบลง */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar: 200px; }
  .content { padding: 22px; }
  .topbar { padding: 14px 22px; }
  .save-bar { padding: 16px 22px; }
  .input-row input { width: 140px; }
}

/* มือถือ */
@media (max-width: 768px) {
  .topbar { padding: 12px 16px; }
  .page-title { font-size: 16px !important; }
  .page-sub { font-size: 12px; }

  /* กัน iPhone ซูมเข้าเองตอนแตะช่องกรอก (ต้อง ≥ 16px) */
  input, select, textarea { font-size: 16px !important; }

  /* การ์ดปี/รายได้ ในหน้า ILPI เรียงแนวตั้ง */
  .period-card { flex-direction: column; align-items: stretch; padding: 16px; gap: 12px; }
  .period-card > div { min-width: 0 !important; }
  .period-card input { width: 100% !important; max-width: none !important; }
  .period-card .btn-save { width: 100%; }

  /* หัวการ์ดหมวด + แท็บมิติ */
  .cat-header { padding: 12px 14px; }
  .cat-title { font-size: 14px; }
  .cat-eng { font-size: 11px; }
  .dim-tab { font-size: 12px; padding: 10px 4px; }
  .dim-tab .score-badge { display: block; width: fit-content; margin: 3px auto 0; }
  .dim-panel { padding: 14px; }

  /* ช่องกรอก: ป้ายอยู่บน ช่องกรอกเต็มความกว้าง */
  .input-row { flex-direction: column; gap: 4px; margin-bottom: 12px; }
  .input-row label { padding-top: 0; }
  .input-row input { width: 100%; }
  .result-row { flex-wrap: wrap; gap: 8px; }
  .formula-hint { white-space: normal; }

  /* แถบบันทึก: ปุ่มหลักเต็มแถว ปุ่มรองครึ่งแถว */
  .save-bar { gap: 8px; }
  .save-bar .btn-save { flex: 1 1 calc(50% - 4px); padding: 11px 8px !important; font-size: 13px !important; }
  .save-bar .btn-save:first-child { flex-basis: 100%; font-size: 15px !important; }
  .save-bar .save-msg { flex-basis: 100%; text-align: center; font-size: 13px; }

  /* เมนูล่าง 5 ปุ่ม */
  .bottom-nav a { padding: 10px 2px !important; font-size: 11px !important; gap: 3px !important; }
  .bottom-nav .nav-icon, .bottom-nav a > span:first-child { font-size: 20px !important; }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }

  /* หน้าต่างแจ้งเตือน */
  #navGuardOverlay > div, #linkEmailPopup > div, #guestPopup > div { padding: 24px 20px !important; }
}

/* มือถือจอแคบมาก */
@media (max-width: 380px) {
  .dim-tab { font-size: 11px; }
  .card { padding: 24px 16px !important; }
}

/* พิมพ์: ซ่อนเมนูและแถบปุ่ม */
@media print {
  .sidebar, .bottom-nav, .save-bar, .topbar { display: none !important; }
  .main { margin-left: 0 !important; }
  html.light body { background: #fff; }
}

/* กันเนื้อหาล้นจอแนวนอน */
.main { min-width: 0; }
.form-group input, .form-group select, .form-group textarea { width: 100%; max-width: 100%; min-width: 0; }

/* ══════════════════════════════════════════════════════════════
   Typography — ปรับให้อ่านภาษาไทยสบายตา
   ══════════════════════════════════════════════════════════════ */
/* ไทยมีสระบน-ล่างและวรรณยุกต์ ต้องการระยะบรรทัดมากกว่าภาษาอังกฤษ */
html.light body { line-height: 1.6; }
html.light .page-title, html.light .cat-title, html.light .logo-name, html.light .logo-text { line-height: 1.35; }

/* letter-spacing / ตัวพิมพ์ใหญ่ ทำให้สระและวรรณยุกต์ไทยแยกห่างผิดรูป → ปิดกับข้อความไทย */
html.light label,
html.light .nav-label,
html.light .section-title,
html.light .period-card label,
html.light .btn-save { letter-spacing: 0 !important; text-transform: none !important; }

/* ฟอนต์ Mono (IBM Plex Mono) ไม่มีตัวอักษรไทย → ข้อความที่มีภาษาไทยใช้ Sarabun */
html.light .formula-hint,
html.light .sidebar-user .role,
html.light .logo-sub { font-family: var(--font) !important; }

/* ขนาดตัวอักษรขั้นต่ำสำหรับอ่านภาษาไทย */
html.light .input-row label { font-size: 14px; color: #334155; }
html.light .form-group label { font-size: 13.5px; }
html.light .page-sub, html.light .cat-eng { font-size: 13px; }
html.light .formula-hint { font-size: 12.5px; }
html.light .nav-item { font-size: 14.5px; }

/* ตัวเลขในช่องกรอก ใช้ตัวเลขความกว้างเท่ากัน อ่านหลักง่าย */
html.light .input-row input,
html.light .result-value { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   สีหลักที่ผู้ใช้เลือกได้ (ผ่านปุ่ม 🎨)
   ══════════════════════════════════════════════════════════════ */
html.light[data-accent="green"]  { --accent:#047857; --accent-hover:#065f46; --accent-soft:#ecfdf5; }
html.light[data-accent="purple"] { --accent:#6d28d9; --accent-hover:#5b21b6; --accent-soft:#f3efff; }
html.light[data-accent="orange"] { --accent:#c2410c; --accent-hover:#9a3412; --accent-soft:#fff4ed; }
html.light[data-accent="slate"]  { --accent:#334155; --accent-hover:#1e293b; --accent-soft:#f1f5f9; }
html:not(.light)[data-accent="green"]  { --accent:#059669; }
html:not(.light)[data-accent="purple"] { --accent:#7c3aed; }
html:not(.light)[data-accent="orange"] { --accent:#ea580c; }
html:not(.light)[data-accent="slate"]  { --accent:#64748b; }

/* เส้นขอบ/เงา/ไฮไลต์ที่เคยเป็นสีน้ำเงินตายตัว → ตามสีหลัก */
html.light { --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
html.light .cat-badge,
html.light .badge { border-color: color-mix(in srgb, var(--accent) 28%, #fff); }
html.light .cat-card:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, #fff); }
html.light .btn, html.light .btn-save { box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent); }
html.light .logo-icon { box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 25%, transparent); }
html.light ::selection { background: color-mix(in srgb, var(--accent) 22%, #fff); }
html:not(.light) .nav-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* สีของมิติ "เวลา" มีความหมายเฉพาะ → คงเป็นน้ำเงินเสมอ ไม่เปลี่ยนตามสีหลัก */
html.light .dim-tab.active-time { color:#1d4ed8; border-bottom-color:#1d4ed8; background:#eef3ff; }
html.light .result-value.time { color:#1d4ed8; }
html:not(.light) .result-value.time,
html:not(.light) .score-cell.time-c { color:#3b82f6; }
html:not(.light) .score-bar.time-c { background:#3b82f6; }

/* ── ปุ่ม 🎨 และแผงเลือก ───────────────────────────────────────── */
.theme-toggle { display: none !important; }          /* ปุ่มเดิมในหน้ารายงาน → ใช้ 🎨 แทน */
.tp-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.topbar-right .tp-wrap { margin-left: 0; }
.tp-in-card { position: absolute; top: 16px; right: 16px; }
.tp-btn {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 17px; line-height: 1;
  background: var(--surface); border: 1px solid var(--border); transition: all .15s;
}
.tp-btn:hover { border-color: var(--accent); }
.tp-panel {
  position: fixed; z-index: 3000; width: 250px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}
.tp-panel[hidden], .tp-veil[hidden] { display: none; }
.tp-veil { position: fixed; inset: 0; z-index: 2999; background: rgba(15, 23, 42, .35); }
.tp-grip { display: none; }
.tp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tp-title { font-size: 14px; font-weight: 700; }
.tp-close { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }
.tp-close:hover { background: var(--surface2); }
.tp-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 8px; letter-spacing: 0; text-transform: none; }
.tp-modes { display: flex; gap: 8px; }
.tp-modes button {
  flex: 1; min-height: 40px; padding: 8px 6px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13.5px;
  background: transparent; color: var(--text); border: 1px solid var(--border);
}
.tp-modes button.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
.tp-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tp-swatches button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0;
  background: none; border: 0; cursor: pointer; color: var(--muted); font: inherit;
}
.tp-swatches span {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sw);
  border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); transition: transform .12s;
}
.tp-swatches em { font-style: normal; font-size: 11px; line-height: 1.2; }
.tp-swatches button:hover span { transform: scale(1.08); }
.tp-swatches button.on span { box-shadow: 0 0 0 2.5px var(--sw); }
.tp-swatches button.on em { color: var(--text); font-weight: 600; }
.tp-note { margin-top: 10px; font-size: 11.5px; color: var(--muted); }

/* มือถือ: เปิดเป็นแผ่นเลื่อนขึ้นจากด้านล่าง ปุ่มใหญ่ กดง่าย */
@media (max-width: 768px) {
  .tp-btn { width: 40px; height: 40px; font-size: 19px; }
  .tp-panel {
    left: 0; right: 0; bottom: 0; top: auto !important; width: auto;
    border-radius: 18px 18px 0 0; border-width: 1px 0 0;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    animation: tpUp .22s cubic-bezier(.16,1,.3,1);
  }
  .tp-grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 10px; }
  .tp-title { font-size: 16px; }
  .tp-close { width: 40px; height: 40px; font-size: 18px; }
  .tp-label { font-size: 13px; margin-top: 14px; }
  .tp-modes button { min-height: 48px; font-size: 15px; }
  .tp-swatches span { width: 44px; height: 44px; }
  .tp-swatches em { font-size: 12.5px; }
  .tp-note { font-size: 12.5px; text-align: center; margin-top: 16px; }
}
@keyframes tpUp { from { transform: translateY(100%); } to { transform: none; } }
@media print { .tp-wrap, .tp-panel, .tp-veil { display: none !important; } }
.auth-main > .tp-in-card { top: 20px; right: 20px; }