/* ============================================================
   wr-tokens.css — design tokens กลางของพิบูลวอร์รูม (โทน Fluent / OneDrive)
   ต้นฉบับ/สเปก: replica/design/tokens.json + components.md (ถอดด้วย /replica-design)
   เปลี่ยนสีแล้วต้องรัน contrast.py กับ tokens.json ให้ผ่าน AA ทุกคู่ (ค่าในสองไฟล์ต้องตรงกัน)
   ใช้เฉพาะ "ระบบ" (โทน ระยะ พฤติกรรม) — สีหลักเป็นน้ำเงินของโปรเจ็คเอง ไม่ใช้สี/ฟอนต์/ไอคอนของแบรนด์ต้นแบบ
   ------------------------------------------------------------
   index.php โหลดไฟล์นี้ใน <head> ก่อน text-contrast.css
   หน้าไหนอยู่ใน index.php ใช้ var(--wr-…) ได้เลย ไม่ต้องโหลดซ้ำ
   หน้าที่มี <head> ของตัวเอง ให้ <link> ไฟล์นี้เอง

   หลักการ
   - เลือกใช้ token ก่อนเสมอ อย่าฝังค่าสีตรง ๆ ในโมดูลใหม่
   - ข้อความรองห้ามอ่อนกว่า --wr-fg-3 (#555) ตามกฎสีตัวอักษรของโปรเจ็ค
   - **สถานะ "เลือกอยู่" ต้องมีพื้นหลังเสมอ** ห้ามบอกด้วยเส้นขอบหรือเครื่องหมายถูกอย่างเดียว
     (พื้น #fafafa ต่างจากขาวแค่ ~2% = มองไม่เห็น) ดูหัวข้อ "สถานะเลือกอยู่" ท้ายไฟล์
   - สีประจำหมวด (แดง/น้ำเงิน/เขียว…) ใช้เฉพาะไอคอนกับจุดเล็ก ๆ
     พื้นผิว เส้นขอบ ตัวอักษร ให้เป็นเทากลางทั้งหมด
   - ส่วนล่างของไฟล์มีคอมโพเนนต์พื้นฐาน (.wr-…) ที่ประกอบจาก token พวกนี้
   ============================================================ */

:root{
  /* ---- ตัวอักษร (neutral foreground) ---- */
  --wr-fg-1:#242424;          /* หัวข้อ / เนื้อหาหลัก */
  --wr-fg-2:#424242;          /* เนื้อหารอง ไอคอนเมนู */
  --wr-fg-3:#555;             /* ข้อความรอง บรรทัดรอง — เพดานความอ่อน ห้ามอ่อนกว่านี้ */
  --wr-fg-on-brand:#fff;

  /* ---- พื้นผิว (neutral background) ---- */
  --wr-bg-canvas:#fafafa;     /* พื้นแถบเมนู / พื้นหลังหน้า */
  --wr-bg-1:#fff;             /* การ์ด กล่อง */
  --wr-bg-hover:#f0f0f0;      /* แถวที่เมาส์ชี้ */
  --wr-bg-pressed:#e6e6e6;    /* ตอนกด */
  --wr-bg-selected:#ebebeb;   /* พื้นของสิ่งที่ "เลือกอยู่" แบบกลาง ๆ (ดูหัวข้อสถานะเลือกอยู่ด้านล่าง) */
  --wr-bg-selected-hover:#e0e0e0;  /* เลือกอยู่ + เมาส์ชี้ */

  /* ---- เส้นขอบ ---- */
  --wr-stroke-1:#e0e0e0;      /* ขอบการ์ด เส้นแบ่ง */
  --wr-stroke-2:#d1d1d1;      /* ขอบช่องกรอก */
  --wr-stroke-subtle:#efefef; /* เส้นแบ่งแถวในรายการ */
  --wr-stroke-input:#737373;  /* ขอบล่างของช่องกรอก — ต้อง ≥ 3:1 กับพื้นขาว (#d1d1d1 ได้แค่ 1.5:1) */

  /* ---- สีหลัก (brand) ---- */
  --wr-brand:#1d4ed8;         /* น้ำเงินของโปรเจ็ค — ตัวขาวบนพื้นนี้ 6.7:1 */
  --wr-brand-hover:#1e40af;
  --wr-brand-pressed:#1e3a8a;
  --wr-brand-soft:#eff4ff;    /* พื้นอ่อนของสีหลัก */
  --wr-brand-fg:#1e40af;      /* ตัวอักษรสีหลักบนพื้นอ่อน/ขาว (≥ 7.6:1) */
  --wr-focus:#1d4ed8;
  --wr-nav-header:#0f172a;    /* แถบหัวสีเข้ม (ต่อกับ navbar) */
  --wr-highlight:#fff1a8;     /* ไฮไลต์คำค้น */

  /* ---- สีสถานะ ---- */
  --wr-success:#107c10;  --wr-success-soft:#f1faf1;
  --wr-warning:#b34507;  --wr-warning-soft:#fdf6f3;

  /* ---- สีประจำหมวด: ใช้กับไอคอนบนชิปพื้นอ่อน (สีเดียวกัน alpha .15) เท่านั้น ----
     ส้ม/อำพันของ Tailwind เดิม (#ea580c/#d97706) ได้ < 3:1 บนชิป — เข้มขึ้นแล้วผ่านทุกสี */
  --wr-cat-red:#dc2626; --wr-cat-blue:#2563eb; --wr-cat-green:#047857; --wr-cat-violet:#7c3aed;
  --wr-cat-cyan:#0e7490; --wr-cat-orange:#c2410c; --wr-cat-amber:#b45309; --wr-cat-slate:#475569;
  --wr-danger:#c50f1f;   --wr-danger-soft:#fdf3f4;

  /* ---- ระยะ (ตาราง 4px) ---- */
  --wr-s-1:4px;  --wr-s-2:8px;  --wr-s-3:12px; --wr-s-4:16px;
  --wr-s-5:20px; --wr-s-6:24px; --wr-s-8:32px;

  /* ---- มุมโค้ง ---- */
  --wr-r-sm:4px; --wr-r-md:6px; --wr-r-lg:8px; --wr-r-xl:12px; --wr-r-2xl:16px; --wr-r-pill:999px;   /* 2xl = การ์ดบทความ/ภาพ */

  /* ---- ตัวอักษร ---- */
  --wr-font:'Prompt','Sarabun',system-ui,-apple-system,sans-serif;
  --wr-fs-caption:.75rem;     /* 12px ป้ายหมวด ตัวเลขรอง */
  --wr-fs-body:.875rem;       /* 14px เมนู รายการ */
  --wr-fs-body-lg:1rem;       /* 16px */
  --wr-fs-body-strong:.875rem;/* 14px/600 หัวหมวด เมนูที่เปิดอยู่ ชื่อการ์ด */
  --wr-fs-subtitle:1.125rem;  /* 18px หัวแผง */
  --wr-fs-title:1.375rem;     /* 22px หัวหน้า */
  --wr-fw-regular:400; --wr-fw-medium:500; --wr-fw-semibold:600;
  --wr-lh:1.45;

  /* ---- เงา (ระดับความลอยแบบ Fluent) ---- */
  --wr-shadow-2:0 0 2px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.14);
  --wr-shadow-4:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.14);
  --wr-shadow-8:0 0 2px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.14);
  --wr-shadow-16:0 0 2px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.14);

  /* ---- การเคลื่อนไหว ---- */
  --wr-dur-fast:.1s; --wr-dur:.18s;
  --wr-ease:cubic-bezier(.33,0,.67,1);

  /* ---- ขนาดคงที่ ---- */
  --wr-nav-w:300px;           /* ความกว้างแถบเมนูซ้าย */
  --wr-row-h:36px;            /* ความสูงแถวเมนูบนเดสก์ท็อป */
  --wr-row-h-touch:44px;      /* ความสูงขั้นต่ำบนจอสัมผัส */
  --wr-card-gap:24px;         /* ระยะห่างระหว่างการ์ด (วัดจากภาพอ้างอิง ~22px → ปัดเข้าตาราง 4px) */
  --wr-group-gap:32px;        /* ระยะระหว่างกลุ่มการ์ด — ต้องกว้างกว่า card-gap ให้อ่านออกว่าเป็นคนละกลุ่ม */
}

/* ============================================================
   น้ำหนักตัวอักษรในพื้นที่ทำงาน (?mod=member → #sub_content)
   Prompt ที่ 700/800 หนาจนดูแน่นทึบ — แบบ Fluent ใช้หนาสุดแค่ 600 (semibold)
   ครอบเฉพาะ #sub_content ไม่แตะหน้าสาธารณะ · inline style font-weight ในโมดูลต้องแก้ที่ไฟล์นั้นเอง
   ============================================================ */
#sub_content .fw-bold, #sub_content .fw-bolder,
#sub_content b, #sub_content strong,
#sub_content h1, #sub_content h2, #sub_content h3,
#sub_content h4, #sub_content h5, #sub_content h6{ font-weight:var(--wr-fw-semibold) !important; }

/* ============================================================
   คอมโพเนนต์พื้นฐาน — ใช้ซ้ำได้ทุกหน้า
   ============================================================ */

/* ปุ่มหลักทรงแคปซูล (แบบปุ่ม "Create or upload") */
.wr-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--wr-s-2);
  min-height:40px; padding:0 var(--wr-s-5); border:0; border-radius:var(--wr-r-pill);
  background:var(--wr-brand); color:var(--wr-fg-on-brand) !important;
  font:var(--wr-fw-semibold) var(--wr-fs-body)/1 var(--wr-font); text-decoration:none; cursor:pointer;
  box-shadow:var(--wr-shadow-4); transition:background-color var(--wr-dur) var(--wr-ease), box-shadow var(--wr-dur) var(--wr-ease);
}
.wr-btn-primary:hover{ background:var(--wr-brand-hover); box-shadow:var(--wr-shadow-8); }
.wr-btn-primary:active{ background:var(--wr-brand-pressed); box-shadow:var(--wr-shadow-2); }
.wr-btn-primary:focus-visible{ outline:2px solid var(--wr-fg-1); outline-offset:2px; }

/* ปุ่มรองแบบโปร่ง (ไอคอน/ข้อความ) */
.wr-btn-subtle{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:32px; min-height:32px; padding:0 var(--wr-s-2); border:1px solid transparent; border-radius:var(--wr-r-md);
  background:transparent; color:var(--wr-fg-2); cursor:pointer;
  transition:background-color var(--wr-dur-fast) var(--wr-ease);
}
.wr-btn-subtle:hover{ background:var(--wr-bg-hover); color:var(--wr-fg-1); }
.wr-btn-subtle:active{ background:var(--wr-bg-pressed); }
.wr-btn-subtle:focus-visible{ outline:2px solid var(--wr-focus); outline-offset:1px; }

/* การ์ดขอบบาง */
.wr-card{ background:var(--wr-bg-1); border:1px solid var(--wr-stroke-1); border-radius:var(--wr-r-lg); }

/* ป้ายหัวหมวดตัวเล็ก (แบบ "Browse files by") */
.wr-section-label{ font:var(--wr-fw-semibold) var(--wr-fs-caption)/1.3 var(--wr-font); color:var(--wr-fg-3); letter-spacing:.01em; }

/* การ์ดทางลัด: ไอคอน + ชื่อ + บรรทัดรอง (แบบการ์ด Word/Excel) */
/* ตารางการ์ด — ระยะห่างมาจาก --wr-card-gap (มือถือหดเหลือ 12px อัตโนมัติ) */
.wr-tile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--wr-card-gap); }
@media (max-width:575.98px){
  .wr-tile-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.wr-tile{
  display:flex; align-items:center; gap:var(--wr-s-3); min-height:60px; padding:var(--wr-s-3) var(--wr-s-4);
  background:var(--wr-bg-1); border:1px solid var(--wr-stroke-1); border-radius:var(--wr-r-lg);
  color:var(--wr-fg-1); text-decoration:none;
  transition:box-shadow var(--wr-dur) var(--wr-ease), border-color var(--wr-dur) var(--wr-ease), background-color var(--wr-dur) var(--wr-ease);
}
.wr-tile:hover{ color:var(--wr-fg-1); border-color:var(--wr-stroke-2); box-shadow:var(--wr-shadow-4); }
.wr-tile:active{ background:var(--wr-bg-hover); box-shadow:none; }
.wr-tile:focus-visible{ outline:2px solid var(--wr-focus); outline-offset:2px; }

/* แถวในรายการ: ไอคอน · ชื่อ · บรรทัดรองสีเทา (แบบรายการไฟล์) */
.wr-list{ background:var(--wr-bg-1); border:1px solid var(--wr-stroke-1); border-radius:var(--wr-r-lg); overflow:hidden; }
.wr-list-row{
  display:flex; align-items:center; gap:var(--wr-s-3); padding:10px var(--wr-s-4);
  border-top:1px solid var(--wr-stroke-subtle); color:var(--wr-fg-1); text-decoration:none;
}
.wr-list-row:first-child{ border-top:0; }
.wr-list-row:hover{ background:var(--wr-bg-hover); color:var(--wr-fg-1); }
.wr-list-row .wr-sub{ display:block; font-size:var(--wr-fs-caption); color:var(--wr-fg-3); }

/* ============================================================
   สถานะ "เลือกอยู่" (selected) — กฎกลาง
   ------------------------------------------------------------
   สิ่งที่ผู้ใช้เลือกไว้ต้องอ่านออกจาก "พื้น" ก่อนเป็นอันดับแรก
   เส้นขอบกับเครื่องหมายถูกเป็นตัวช่วย ไม่ใช่ตัวหลัก — ที่ผ่านมาใช้
   พื้น #fafafa ซึ่งต่างจากขาวราว 2% ผู้ใช้จึงมองไม่ออกว่าเลือกอะไรอยู่

   มีสองระดับ เลือกตามบริบท:
     กลาง    พื้น --wr-bg-selected + ขอบ --wr-stroke-2   ใช้กับรายการ/แถว และหน้าจอโทนเทา
     เน้น    พื้น --wr-brand-soft  + ขอบ --wr-brand 2px  ใช้กับการ์ดที่ให้เลือก 1 ใน n

   ⚠️ พื้นเทาอ่อนเทียบพื้นขาวได้ ~1.2:1 ซึ่งต่ำกว่าเกณฑ์ 3:1 ของ "ขอบเขตที่ไม่ใช่ตัวอักษร"
      จึงต้องมีเส้นขอบคู่ไปด้วยเสมอ ห้ามใช้พื้นอย่างเดียวบอกสถานะ
   คอนทราสต์ตัวอักษรบนพื้นที่เลือก: #242424 บน #ebebeb = 11.9:1 · #555 บน #ebebeb = 5.6:1
   ============================================================ */

/* การ์ดทางลัด/แถวรายการ ที่เป็นของปัจจุบัน */
.wr-tile.is-active, .wr-tile[aria-current]{
  border:2px solid var(--wr-brand); padding:calc(var(--wr-s-3) - 1px) calc(var(--wr-s-4) - 1px);
  background:var(--wr-brand-soft); color:var(--wr-brand-fg);
}
.wr-tile.is-active:hover{ background:var(--wr-brand-soft); border-color:var(--wr-brand-hover); color:var(--wr-brand-fg); }
.wr-list-row.is-active, .wr-list-row[aria-current]{ background:var(--wr-bg-selected); font-weight:var(--wr-fw-semibold); }
.wr-list-row.is-active:hover{ background:var(--wr-bg-selected-hover); }

/* ตัวเลือกแบบการ์ด: radio/checkbox ที่ซ่อนตัวจริงแล้วให้ทั้งใบเป็นปุ่ม
   โครง <label class="wr-choice"><input type="radio" hidden><i></i><b></b><small></small></label> */
.wr-choice{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0;
  padding:var(--wr-s-3) var(--wr-s-4); border:1px solid var(--wr-stroke-2); border-radius:var(--wr-r-xl);
  background:var(--wr-bg-1); color:var(--wr-fg-1); cursor:pointer;
  transition:background-color var(--wr-dur) var(--wr-ease), border-color var(--wr-dur) var(--wr-ease);
}
.wr-choice:hover{ background:var(--wr-bg-hover); border-color:var(--wr-fg-3); }
.wr-choice:focus-within{ outline:2px solid var(--wr-focus); outline-offset:2px; }
.wr-choice > i{ font-size:1.25rem; color:var(--wr-fg-3); margin-bottom:var(--wr-s-2); }
.wr-choice b{ font:var(--wr-fw-semibold) var(--wr-fs-body)/1.3 var(--wr-font); }
.wr-choice small{ font-size:var(--wr-fs-caption); color:var(--wr-fg-3); line-height:1.35; }
.wr-choice.is-on{ background:var(--wr-brand-soft); border-color:var(--wr-brand); box-shadow:inset 0 0 0 1px var(--wr-brand); }
.wr-choice.is-on > i, .wr-choice.is-on b{ color:var(--wr-brand-fg); }
.wr-choice.is-on::after{
  content:''; position:absolute; top:10px; right:12px; width:16px; height:16px; border-radius:50%;
  background:var(--wr-brand);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 5.9l-4.2 5a.7.7 0 01-1 .07L4.2 8.9a.7.7 0 11.92-1.05l1.78 1.56 3.73-4.42a.7.7 0 011.07.9z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 5.9l-4.2 5a.7.7 0 01-1 .07L4.2 8.9a.7.7 0 11.92-1.05l1.78 1.56 3.73-4.42a.7.7 0 011.07.9z'/></svg>") center/contain no-repeat;
}
/* หน้าจอที่ตั้งใจเป็นขาว–เทา–ดำ (เช่นเครื่องมือแก้ไข PDF) ใช้ระดับกลางแทนสีหลัก */
.wr-choice.wr-choice-neutral.is-on{ background:var(--wr-bg-selected); border-color:var(--wr-fg-1); box-shadow:inset 0 0 0 1px var(--wr-fg-1); }
.wr-choice.wr-choice-neutral.is-on > i, .wr-choice.wr-choice-neutral.is-on b{ color:var(--wr-fg-1); }
.wr-choice.wr-choice-neutral.is-on::after{ background:var(--wr-fg-1); }

/* แถบวัดปริมาณ (แบบกล่อง Storage) */
.wr-meter{ height:4px; border-radius:var(--wr-r-pill); background:var(--wr-stroke-1); overflow:hidden; }
.wr-meter > span{ display:block; height:100%; border-radius:inherit; background:var(--wr-brand); }
.wr-meter.is-warn > span{ background:var(--wr-warning); }
.wr-meter.is-full > span{ background:var(--wr-danger); }

/* ---- จอมือถือ: การ์ด 2 คอลัมน์ ระยะ 24px จะกินพื้นที่เกินไป ---- */
@media (max-width:575.98px){
  :root{ --wr-card-gap:12px; --wr-group-gap:24px; }
}