/* =========================================================
   หน้าสาธารณะ: สถิติการรายงานตัว (controller Graduationstat)
   ไฟล์นี้ใช้กับหน้า views/public/graduationstat_view.php เท่านั้น
   ไม่เกี่ยวกับธีมหลังบ้าน (assets/admin) — คลาสทุกตัวขึ้นต้นด้วย gs-

   ธีมสีตามเว็บไซต์มหาวิทยาลัย https://rmutl.ac.th/
     น้ำตาลเข้ม  #513300  แถบเมนู ลิงก์ หัวข้อ
     น้ำตาล      #63481A  ปุ่ม ช่องค้นหา
     ทอง         #A7820B  รายการที่เลือก ไอคอนเมนู
     น้ำตาลอ่อน  #A89980  เส้นขอบ
     พื้นเทาอ่อน #F1F1F1 / #EDEFEE
   เปลี่ยนธีมให้แก้เฉพาะตัวแปรใน :root (ตัวแปรตั้งชื่อตามหน้าที่ ไม่ใช่ตามสี)
   ========================================================= */

:root {
  /* พื้นและตัวอักษร */
  --gs-bg: #f3f1ec;
  --gs-card: #ffffff;
  --gs-ink: #3b2e1c;
  --gs-muted: #6e6352;
  --gs-line: #e3ddd1;
  --gs-track: #ece7dd;

  /* แบรนด์ */
  --gs-primary: #513300;
  --gs-primary-2: #63481a;
  --gs-gold: #a7820b;
  --gs-gold-text: #866806;   /* ทองเข้มสำหรับตัวอักษรบนพื้นขาว (คอนทราสต์ผ่าน AA) */
  --gs-tan: #a89980;
  --gs-btn-fg: #ffffff;      /* ตัวอักษรบนปุ่มหลัก */

  /* สีของข้อมูลแต่ละชนิด (กราฟ/การ์ด) */
  --gs-done: #a7820b;        /* รายงานตัวครบแล้ว */
  --gs-progress: #d6b85c;    /* กำลังดำเนินการ */
  --gs-attend: #63481a;      /* ประสงค์เข้ารับ */
  --gs-absent: #a65a41;      /* ไม่ประสงค์เข้ารับ */
  --gs-idle: #d9d1c2;        /* ยังไม่รายงานตัว */
  --gs-bar-from: #63481a;
  --gs-bar-to: #a7820b;

  /* หัวหน้า */
  --gs-hero-1: #3f2800;
  --gs-hero-2: #513300;
  --gs-hero-3: #6b4a10;

  --gs-radius: 14px;
  --gs-shadow: 0 1px 2px rgba(59, 46, 28, .06), 0 8px 24px rgba(59, 46, 28, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --gs-bg: #16120c;
    --gs-card: #201a12;
    --gs-ink: #efe7d8;
    --gs-muted: #b1a58f;
    --gs-line: #3a3022;
    --gs-track: #2f271b;

    --gs-primary: #e0c88f;
    --gs-primary-2: #c9a967;
    --gs-gold: #d4ae3f;
    --gs-gold-text: #e3c260;
    --gs-tan: #8a7c63;
    --gs-btn-fg: #201a12;

    --gs-done: #d4ae3f;
    --gs-progress: #b8975a;
    --gs-attend: #c9a967;
    --gs-absent: #d0826a;
    --gs-idle: #4a4030;
    --gs-bar-from: #a07d2c;
    --gs-bar-to: #e0c060;

    --gs-hero-1: #241700;
    --gs-hero-2: #3a2600;
    --gs-hero-3: #4d3509;
    --gs-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--gs-bg);
  color: var(--gs-ink);
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: "Prompt", "Sarabun", sans-serif; font-weight: 500; line-height: 1.3; margin: 0; }
p { margin: 0; }
small { font-size: .82em; }

.gs-wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.gs-muted { color: var(--gs-muted); font-size: 14px; }
.gs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- หัวหน้า: น้ำตาลเข้มแบบแถบเมนูเว็บมหาวิทยาลัย + เส้นทอง ---------- */
.gs-hero {
  background:
    radial-gradient(1200px 300px at 85% -20%, rgba(167, 130, 11, .28), transparent 60%),
    linear-gradient(135deg, var(--gs-hero-1), var(--gs-hero-2) 55%, var(--gs-hero-3));
  border-bottom: 4px solid var(--gs-gold);
  color: #fff;
  padding: 40px 0 76px;
}
.gs-hero-inner { display: flex; gap: 20px; align-items: center; }
/* โลโก้วางบนป้ายพื้นขาว เพราะตัวอักษรในโลโก้เป็นสีน้ำตาล ถ้าวางบนพื้นน้ำตาลจะมองไม่เห็น
   ใช้สี่เหลี่ยมมุมมน ไม่ใช่วงกลม เพราะโลโก้เกือบจัตุรัสและมีข้อความด้านล่าง วงกลมจะตัดข้อความ */
.gs-logo {
  flex: none; display: grid; place-items: center;
  width: 116px; height: 116px; padding: 7px;
  background: #fff; border-radius: 16px; border: 2px solid #c9a53a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.gs-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gs-eyebrow { font-size: 14px; color: #e6cf8f; letter-spacing: .01em; }
.gs-hero h1 { font-size: clamp(22px, 3.2vw, 32px); margin-top: 2px; }
.gs-sub { font-family: "Prompt", sans-serif; font-size: clamp(16px, 2vw, 20px); color: #f3e3b5; }
.gs-meta { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gs-meta li {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(214, 184, 92, .45);
  border-radius: 999px; padding: 4px 14px; font-size: 14px;
}
.gs-meta span { color: #e6cf8f; margin-right: 4px; }

/* ---------- เนื้อหา ---------- */
.gs-main { margin-top: -48px; display: grid; gap: 20px; padding-bottom: 40px; }

.gs-card {
  background: var(--gs-card);
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow);
  padding: 22px 24px;
  min-width: 0;
}
/* หัวข้อการ์ดมีเส้นทองนำหน้า แบบหัวข้อส่วนต่าง ๆ ของเว็บมหาวิทยาลัย */
.gs-card h2 {
  font-size: 18px; margin-bottom: 16px; color: var(--gs-primary);
  padding-left: 12px; border-left: 4px solid var(--gs-gold);
}
.gs-card h2 small { color: var(--gs-muted); font-family: "Sarabun", sans-serif; font-weight: 400; margin-left: 6px; }

.gs-notice { text-align: center; padding: 40px 24px; }
.gs-notice h2 { margin-bottom: 8px; border-left: 0; padding-left: 0; }

.gs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* ---------- ตัวกรอง ---------- */
.gs-filter { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.gs-filter label { display: grid; gap: 4px; font-size: 14px; color: var(--gs-muted); flex: 1 1 220px; max-width: 320px; }
.gs-filter select {
  font: inherit; color: var(--gs-ink); background: var(--gs-card);
  border: 1px solid var(--gs-tan); border-radius: 8px; padding: 9px 12px; min-height: 42px;
}
.gs-filter select:focus-visible { outline: 3px solid color-mix(in srgb, var(--gs-gold) 40%, transparent); border-color: var(--gs-gold); }
.gs-updated { margin-left: auto; color: var(--gs-muted); font-size: 14px; }

.gs-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  padding: 8px 20px; border-radius: 8px; border: 1px solid var(--gs-primary-2);
  background: var(--gs-primary-2); color: var(--gs-btn-fg); font: 500 15px "Prompt", sans-serif;
  text-decoration: none; cursor: pointer;
}
.gs-btn:hover { background: var(--gs-primary); border-color: var(--gs-primary); }
.gs-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--gs-gold) 50%, transparent); outline-offset: 2px; }
.gs-btn-ghost { background: transparent; color: var(--gs-primary); border-color: var(--gs-tan); }
.gs-btn-ghost:hover { background: color-mix(in srgb, var(--gs-gold) 12%, transparent); color: var(--gs-primary); border-color: var(--gs-gold); }

/* ---------- แถบความคืบหน้า ---------- */
.gs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.gs-row h2 { margin: 0; }
.gs-big b { font-family: "Prompt", sans-serif; font-size: 30px; font-weight: 600; color: var(--gs-gold-text); }
.gs-progress-card .gs-muted { margin-top: 8px; }

.gs-bar { display: block; height: 10px; border-radius: 999px; background: var(--gs-track); overflow: hidden; }
.gs-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gs-bar-from), var(--gs-bar-to)); }
.gs-bar-lg { height: 16px; }

/* ---------- KPI ---------- */
.gs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gs-kpi {
  background: var(--gs-card); border: 1px solid var(--gs-line); border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow); padding: 18px 20px; border-top: 4px solid var(--tone);
}
.gs-kpi-label { color: var(--gs-muted); font-size: 15px; }
.gs-kpi-value { font-family: "Prompt", sans-serif; font-size: 34px; font-weight: 600; color: var(--tone-text, var(--gs-ink)); font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 4px; }
.gs-kpi-hint { color: var(--gs-muted); font-size: 13px; margin-top: 2px; }
.tone-ink      { --tone: var(--gs-primary); --tone-text: var(--gs-primary); }
.tone-done     { --tone: var(--gs-done); --tone-text: var(--gs-gold-text); }
.tone-attend   { --tone: var(--gs-attend); --tone-text: var(--gs-attend); }
.tone-absent   { --tone: var(--gs-absent); --tone-text: var(--gs-absent); }
.tone-progress { --tone: var(--gs-progress); }
.tone-idle     { --tone: var(--gs-idle); }

/* ---------- โดนัท ---------- */
.gs-donut-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.gs-donut {
  flex: none; width: 168px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; position: relative;
}
.gs-donut::before { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--gs-card); }
.gs-donut span { position: relative; text-align: center; color: var(--gs-muted); font-size: 13px; line-height: 1.2; }
.gs-donut span b { display: block; font-family: "Prompt", sans-serif; font-size: 24px; color: var(--gs-primary); font-weight: 600; }
.gs-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1 1 200px; }
.gs-legend li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; font-size: 15px; }
.gs-legend i { width: 12px; height: 12px; border-radius: 3px; }
.gs-legend b { font-variant-numeric: tabular-nums; font-weight: 600; }
.gs-legend small { color: var(--gs-muted); min-width: 46px; text-align: right; }

/* ---------- แท่งแนวนอน (ขั้นตอน) ---------- */
.gs-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gs-hbars li { display: grid; grid-template-columns: 120px 1fr 48px; gap: 12px; align-items: center; font-size: 15px; }
.gs-hbars b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.gs-hbar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- แท่งแนวตั้ง (รายวัน) ---------- */
.gs-cols { display: flex; align-items: flex-end; gap: 3px; height: 200px; padding-top: 8px; }
.gs-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.gs-col span { display: block; background: linear-gradient(180deg, var(--gs-bar-to), var(--gs-bar-from)); border-radius: 4px 4px 0 0; opacity: .9; transition: opacity .15s; }
.gs-col:hover span { opacity: 1; background: var(--gs-primary); }
.gs-col small { display: block; text-align: center; color: var(--gs-muted); font-size: 11px; margin-top: 6px; white-space: nowrap; overflow: visible; }

/* ---------- ตัวเลขย่อย (เตรียมงาน) ---------- */
.gs-mini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.gs-mini div {
  background: color-mix(in srgb, var(--gs-gold) 8%, var(--gs-card));
  border: 1px solid color-mix(in srgb, var(--gs-gold) 20%, transparent);
  border-radius: 10px; padding: 14px; display: grid; gap: 2px;
}
.gs-mini span { color: var(--gs-muted); font-size: 14px; }
.gs-mini b { font-family: "Prompt", sans-serif; font-size: 26px; font-weight: 600; color: var(--gs-primary); font-variant-numeric: tabular-nums; }
.gs-mini small { color: var(--gs-muted); }

/* ---------- ตารางและการ์ดตาราง ---------- */
.gs-table-card { padding-top: 0; }
.gs-table-card .gs-card-header {
  margin: 0 -24px;
  padding: 16px 24px;
  background: var(--gs-card);
  border-top-left-radius: calc(var(--gs-radius) - 1px);
  border-top-right-radius: calc(var(--gs-radius) - 1px);
  border-bottom: 1px solid var(--gs-line);
}
.gs-table-card .gs-card-header h2 { margin: 0; }

.gs-table-wrap { overflow-x: auto; margin: 0 -24px -22px; }
.gs-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.gs-table th {
  text-align: left; font-weight: 500; color: var(--gs-primary); font-size: 14px; padding: 10px 24px;
  border-bottom: 2px solid var(--gs-gold);
  background: color-mix(in srgb, var(--gs-gold) 7%, var(--gs-card));
}
.gs-table td { padding: 12px 24px; border-bottom: 1px solid var(--gs-line); vertical-align: middle; }
.gs-table tbody tr:last-child td { border-bottom: 0; }
.gs-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--gs-track) 35%, var(--gs-card)); }
.gs-table tbody tr:hover td { background: color-mix(in srgb, var(--gs-gold) 9%, var(--gs-card)); }
.gs-table td small { display: block; color: var(--gs-muted); }
.gs-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-progress-col { width: 220px; }
.gs-inline-bar { display: flex; align-items: center; gap: 10px; }
.gs-inline-bar .gs-bar { flex: 1; height: 8px; }
.gs-inline-bar small { width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

/* Sticky Header สำหรับหน้าจอคอมพิวเตอร์ / แท็บเล็ต */
@media (min-width: 860px) {
  .gs-table-card {
    overflow: visible;
  }
  .gs-table-card .gs-table-wrap {
    overflow: visible;
  }
  .gs-table-card .gs-card-header {
    position: sticky;
    top: 0;
    z-index: 12;
  }
  .gs-table-card .gs-table {
    border-collapse: separate;
    border-spacing: 0;
  }
  .gs-table-card .gs-table thead th {
    position: sticky;
    top: var(--gs-card-header-h, 55px);
    z-index: 11;
    background: color-mix(in srgb, var(--gs-gold) 10%, var(--gs-card));
    border-bottom: 2px solid var(--gs-gold);
    box-shadow: 0 4px 10px -2px rgba(59, 46, 28, 0.12);
  }
  .gs-table-card .gs-table tbody tr:first-child td {
    border-top: 0;
  }
  .gs-table-card .gs-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--gs-radius) - 1px);
  }
  .gs-table-card .gs-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--gs-radius) - 1px);
  }
}

@media (prefers-color-scheme: dark) {
  @media (min-width: 860px) {
    .gs-table-card .gs-table thead th {
      box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.45);
    }
  }
}

/* ---------- ท้ายหน้า: โทนพื้นเทาแบบ footer เว็บมหาวิทยาลัย ---------- */
.gs-footer {
  background: color-mix(in srgb, var(--gs-track) 60%, var(--gs-bg));
  border-top: 3px solid var(--gs-primary);
  padding: 28px 0 40px; text-align: center;
}
.gs-footer .gs-wrap { display: grid; gap: 12px; justify-items: center; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 900px) {
  .gs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .gs-hero { padding: 28px 0 68px; }
  .gs-hero-inner { flex-direction: column; text-align: center; }
  .gs-meta { justify-content: center; }
  .gs-card { padding: 18px; }
  .gs-table-card { padding: 0 18px 18px; }
  .gs-table-card .gs-card-header { margin: 0 -18px; padding: 14px 18px; }
  .gs-table-wrap { margin: 0 -18px -18px; }
  .gs-kpi-value { font-size: 28px; }
  .gs-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-hbars li { grid-template-columns: 96px 1fr 40px; }
  .gs-updated { margin-left: 0; }
  .gs-donut { width: 140px; }
  .gs-logo { width: 96px; height: 96px; padding: 6px; border-radius: 14px; }
}

@media print {
  .gs-filter, .gs-footer .gs-btn { display: none; }
  .gs-hero { background: none; color: var(--gs-ink); padding: 0 0 16px; border-bottom-color: var(--gs-gold); }
  .gs-eyebrow, .gs-sub, .gs-meta span { color: var(--gs-muted); }
  .gs-main { margin-top: 0; }
  .gs-card, .gs-kpi { box-shadow: none; break-inside: avoid; }
  .gs-table-card { overflow: visible !important; }
  .gs-table-card .gs-card-header,
  .gs-table-card .gs-table thead th {
    position: static !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}