/* =========================================
   G-RDU Design System — ported from grdu_v2 (Bootstrap 5.3 base)
   ========================================= */

:root {
  /* Default theme: health/FDA green (kbs-2026-07-03 palette) */
  --grdu-primary:        #16A34A;
  --grdu-primary-lt:     #22C55E;
  --grdu-primary-dark:   #15803D;
  --grdu-accent:         #0284C7;
  --grdu-action:         #16A34A;
  --grdu-action-hover:   #15803D;
  --grdu-action-shadow:  rgba(22, 163, 74, 0.28);

  --grdu-sb-bg:          #064E3B;
  --grdu-sb-text:        #94a3b8;
  --grdu-sb-text-active: #fff;
  --grdu-sb-hover:       rgba(255,255,255,.08);
  --grdu-sb-active:      rgba(255,255,255,.14);
  --grdu-sb-border:      rgba(255,255,255,.08);
  --grdu-sb-accent:      var(--grdu-primary-lt);

  --grdu-tb-bg:          var(--grdu-primary);

  --grdu-success:        #22C55E;
  --grdu-warning:        #FACC15;
  --grdu-danger:         #EF4444;
  --grdu-bg:             #F6FBF8;
  --grdu-text:           #1F2937;
  --grdu-text-muted:     #6B7280;
  --grdu-border:         #E5E7EB;
  --grdu-card-bg:        #FFFFFF;

  /* Assessment/audit status colors — distinct from theme colors, never overridden per-swatch */
  --grdu-status-pass:        #22C55E;
  --grdu-status-pending:     #FACC15;
  --grdu-status-fail:        #EF4444;
  --grdu-status-unchecked:   #94A3B8;
  --grdu-status-inprogress:  #0EA5E9;

  --grdu-sidebar-w:      255px;
  --grdu-topbar-h:       56px;
  --grdu-font:           'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
  --grdu-radius:         10px;
  --grdu-shadow:         0 2px 8px rgba(0,0,0,.08);
}

/* "blue" = the original v3 default, kept as a selectable swatch */
[data-theme="blue"]   { --grdu-primary:#1f4b99; --grdu-primary-lt:#2f62b8; --grdu-primary-dark:#163572; --grdu-action:#1f4b99; --grdu-action-hover:#2f62b8; --grdu-action-shadow:rgba(31,75,153,.28); --grdu-sb-bg:#12233e; --grdu-tb-bg:#1f4b99; }
[data-theme="teal"]   { --grdu-primary:#0d9488; --grdu-primary-lt:#14b8a6; --grdu-primary-dark:#0a7367; --grdu-action:#0d9488; --grdu-action-hover:#14b8a6; --grdu-action-shadow:rgba(13,148,136,.28); --grdu-sb-bg:#0a2420; --grdu-tb-bg:#0d9488; }
[data-theme="purple"] { --grdu-primary:#7c3aed; --grdu-primary-lt:#8b5cf6; --grdu-primary-dark:#5b21b6; --grdu-action:#7c3aed; --grdu-action-hover:#8b5cf6; --grdu-action-shadow:rgba(124,58,237,.28); --grdu-sb-bg:#1c1040; --grdu-tb-bg:#7c3aed; }
[data-theme="rose"]   { --grdu-primary:#e11d48; --grdu-primary-lt:#f43f5e; --grdu-primary-dark:#9f1239; --grdu-action:#e11d48; --grdu-action-hover:#f43f5e; --grdu-action-shadow:rgba(225,29,72,.28); --grdu-sb-bg:#2d0a14; --grdu-tb-bg:#e11d48; }
[data-theme="slate"]  { --grdu-primary:#475569; --grdu-primary-lt:#64748b; --grdu-primary-dark:#334155; --grdu-action:#475569; --grdu-action-hover:#64748b; --grdu-action-shadow:rgba(71,85,105,.28); --grdu-sb-bg:#0f172a; --grdu-tb-bg:#1e293b; }

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

body {
  font-family: var(--grdu-font);
  font-size: 15px;
  background: var(--grdu-bg);
  color: var(--grdu-text);
  margin: 0;
}

/* =========================================
   Auth Layout
   ========================================= */
.grdu-auth-bg {
  /* สีเฉพาะหน้า login/pin — override ตัวแปรธีมหลักเฉพาะ scope นี้ ไม่กระทบหน้าอื่น */
  --grdu-primary: #1F6F5F;
  --grdu-primary-lt: #DDEFEA;
  --grdu-primary-dark: #174F46;
  --grdu-action: #1F6F5F;
  --grdu-action-hover: #174F46;
  --grdu-action-shadow: rgba(31, 111, 95, .28);
  --grdu-auth-accent: #C8A96B;
  --grdu-auth-accent-lt: #faf3e6;
  --grdu-auth-accent-dk: #8a6d3b;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(31, 111, 95, 0.10), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(31, 111, 95, 0.08), transparent 40%),
    linear-gradient(160deg, #eef6f3 0%, #e2efe9 100%);
  padding: 1rem;
}

/* ภาพพื้นหลังหน้า login — ใช้เฉพาะจอกว้าง (จอแคบ/มือถือใช้สีไล่เฉดเดิม เพราะภาพจะถูกครอปมาก) */
@media (min-width: 992px) {
  .grdu-auth-bg {
    background:
      linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)), /* ความจางของภาพ: ปรับ .4 (0 = ชัดเต็ม, 1 = ขาวล้วน) */
      url('../../images/bg.png') center 49% / cover no-repeat,
      linear-gradient(160deg, #eef6f3 0%, #e2efe9 100%);
  }
}

/* ย่อการ์ดลงบนเดสก์ท็อปให้เห็นภาพพื้นหลังรอบๆ — จอเตี้ยย่อเพิ่มเพื่อไม่ต้องเลื่อนหน้า
   (ลำดับสำคัญ: กฎที่ตามหลังทับกฎก่อนหน้า) */
@media (min-width: 992px) {
  .grdu-auth-shell { zoom: .9; }
}
@media (min-width: 992px) and (max-height: 760px) {
  .grdu-auth-shell { zoom: .78; }
}
@media (min-width: 992px) and (max-height: 640px) {
  .grdu-auth-shell { zoom: .68; }
}

.grdu-auth-shell { width: 100%; max-width: 1040px; }

.grdu-auth-card {
  border: none;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(18, 35, 74, 0.22);
}

.grdu-auth-brand {
  position: relative;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,0.16), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.10), transparent 45%),
    linear-gradient(160deg, var(--grdu-primary-dark) 0%, var(--grdu-primary) 60%, #26806f 100%);
  color: #fff;
}

.grdu-auth-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.06));
  pointer-events: none;
}

.grdu-auth-brand-inner { position: relative; z-index: 1; padding: 2rem 1.75rem; min-height: 100%; }
.grdu-auth-identity { display: flex; flex-direction: column; align-items: center; }
/* แผงซ้าย: โลโก้+ชื่อระบบกินพื้นที่ที่เหลือและอยู่กึ่งกลาง; กล่องสื่อ/LINE + ข้อความท้ายรวมเป็นกลุ่มเดียวชิดล่าง */
.grdu-auth-brand-inner > .grdu-auth-identity { flex: 1; justify-content: center; padding: 2.25rem 0 1rem; }
/* .grdu-auth-brand เป็น flex (d-lg-flex) — ถ้าไม่ระบุ เนื้อหาจะหดเท่าความกว้างตัวเองแล้วเหลือแถบว่างด้านขวา */
.grdu-auth-brand-inner { padding-bottom: 1.25rem; flex: 1 1 auto; width: 100%; min-width: 0; }
.grdu-auth-subtitle { overflow-wrap: anywhere; }

.grdu-auth-logo {
  width: 96px; height: 96px; border-radius: 20px; object-fit: cover;
  background: #fff; border: 3px solid rgba(255,255,255,0.5);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.grdu-auth-title { margin-top: 1rem; margin-bottom: 0.35rem; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.3; font-weight: 800; color: #fff; }
.grdu-auth-title-accent { display: block; color: #fff; }
.grdu-auth-subtitle { margin: 0; color: rgba(255,255,255,0.75); font-size: 0.9rem; }

.grdu-auth-highlight {
  margin-top: 1.25rem; padding: 0.85rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9); font-size: 0.86rem;
}

.grdu-auth-guides { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 0.9rem; }
.grdu-auth-guides-title { font-size: 0.9rem; font-weight: 700; color: #fff; margin: 0; }
.grdu-auth-guides-list { list-style: none; padding: 0; margin: 0; }
.grdu-auth-guides-list li { border-bottom: 1px solid rgba(255,255,255,0.12); }
.grdu-auth-guides-list li:last-child { border-bottom: 0; }
.grdu-auth-guides-list li a {
  display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.82rem;
  color: rgba(255,255,255,0.82); padding: 0.48rem; line-height: 1.45; border-radius: 8px;
  text-decoration: none; transition: background .15s;
}
.grdu-auth-guides-list li a:hover { background: rgba(255,255,255,.1); color: #fff; }
.grdu-auth-guides-list li i { color: #7dd3fc; margin-top: 0.1rem; }
.grdu-auth-guides-list li i.bi-box-arrow-up-right { color: rgba(255,255,255,0.45); font-size: .7rem; margin-top: 0.2rem; }

.grdu-auth-logo-strip { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.2rem; }
.grdu-auth-logo-strip img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; border: 2px solid rgba(255,255,255,0.6); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* บนจอ desktop วางมุมขวาบนทับ brand panel (แทนที่จะอยู่กลางแบบ mobile header) */
.grdu-auth-sponsor-bar { position: absolute; top: 1rem; right: 1rem; z-index: 2; justify-content: flex-end; margin-bottom: 0; }
.grdu-auth-sponsor-bar img { width: 36px; height: 36px; }

.grdu-auth-form-wrap { background: #ffffff; padding: 2rem 1.75rem; }
.grdu-auth-heading { color: var(--grdu-primary-dark); font-size: 1.6rem; font-weight: 800; margin-bottom: 0.3rem; }
.grdu-auth-desc { color: #5e6f8d; font-size: 0.95rem; }

.grdu-auth-input .input-group-text { background: #f2f6ff; border-color: #d5deed; color: var(--grdu-primary-dark); }
.grdu-auth-input .form-control { border-color: #d5deed; }
.grdu-auth-input .form-control:focus { border-color: var(--grdu-primary); box-shadow: 0 0 0 0.2rem var(--grdu-action-shadow); }

.grdu-auth-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.grdu-btn-quick { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border-radius: 8px; border: 1px solid; font-size: 0.9rem; font-weight: 500; padding: 0.56rem 0.7rem; text-decoration: none; transition: all 0.15s ease; }
.grdu-btn-register { background: #edf2f8; border-color: #bcc9de; color: #36527a; }
.grdu-btn-register:hover { background: #e4ebf4; color: #2e466a; }
.grdu-btn-forgot { background: #f4f6fa; border-color: #c7d1e2; color: #3f4d67; }
.grdu-btn-forgot:hover { background: #e9eef6; color: #34415a; }

.btn-grdu-login { background: var(--grdu-action); border: 0; color: #fff; font-weight: 700; border-radius: 12px; padding: 0.7rem 1rem; letter-spacing: 0.01em; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-grdu-login:hover { color: #fff; background: var(--grdu-action-hover); transform: translateY(-1px); box-shadow: 0 8px 18px var(--grdu-action-shadow); }

/* ปุ่ม ThaID ในหน้า login — outline น้ำเงิน ไม่แย่งความสำคัญจากปุ่ม Login หลัก */
.btn-grdu-thaid { background: #fff; border: 1.5px solid #1e4fa3; color: #1e4fa3; font-weight: 700; border-radius: 12px; padding: 0.65rem 1rem; transition: background 0.15s ease, transform 0.15s ease; }
.btn-grdu-thaid:hover { background: #eef3fc; color: #17407f; transform: translateY(-1px); }
.btn-grdu-thaid { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .6rem 1rem; }
.btn-grdu-thaid .grdu-thaid-logo { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.btn-grdu-thaid .grdu-thaid-logo-fallback { font-size: 1.6rem; line-height: 36px; flex: none; }
.btn-grdu-thaid .grdu-thaid-text { text-align: left; line-height: 1.25; }
.btn-grdu-thaid .grdu-thaid-text small { display: block; font-weight: 400; font-size: .75rem; color: #5b6b86; }.grdu-auth-or { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem; color: #8a94a6; font-size: .85rem; }
.grdu-auth-or::before, .grdu-auth-or::after { content: ""; flex: 1; border-top: 1px solid #dfe5ee; }

/* Same shape as .btn-grdu-login, yellow fill — for pairing next to it (e.g. Drug Catalog / เพิ่มหัวข้อ) so both buttons match in roundness/padding, not just color. */
.btn-grdu-warning { background: #f6c343; border: 0; color: #3a2b00; font-weight: 700; border-radius: 12px; padding: 0.7rem 1rem; letter-spacing: 0.01em; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.btn-grdu-warning:hover { color: #3a2b00; background: #e6b02f; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(246, 195, 67, 0.35); }

/*
 * Solid-fill action buttons (แก้ไข/ปิด/ลบ ฯลฯ) — outline-only buttons blended
 * together and were hard to tell apart at a glance, so these render filled
 * with color instead of transparent. Scoped to <button>/<a> tags specifically
 * (never <label>) because the toggle-style .btn-check radio/checkbox groups
 * (scope selectors, map indicator switches, active/inactive filters) reuse
 * the same btn-outline-* classes on <label> elements and rely on staying
 * transparent-until-checked — those must be left alone.
 */
button.btn-outline-primary,   a.btn-outline-primary   { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
button.btn-outline-primary:hover,   a.btn-outline-primary:hover   { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; }
button.btn-outline-secondary, a.btn-outline-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
button.btn-outline-secondary:hover, a.btn-outline-secondary:hover { color: #fff; background-color: #5c636a; border-color: #565e64; }
button.btn-outline-success,   a.btn-outline-success    { color: #fff; background-color: #198754; border-color: #198754; }
button.btn-outline-success:hover,   a.btn-outline-success:hover   { color: #fff; background-color: #157347; border-color: #146c43; }
button.btn-outline-danger,    a.btn-outline-danger     { color: #fff; background-color: #dc3545; border-color: #dc3545; }
button.btn-outline-danger:hover,    a.btn-outline-danger:hover    { color: #fff; background-color: #bb2d3b; border-color: #b02a37; }
button.btn-outline-warning,   a.btn-outline-warning    { color: #000; background-color: #ffc107; border-color: #ffc107; }
button.btn-outline-warning:hover,   a.btn-outline-warning:hover   { color: #000; background-color: #ffca2c; border-color: #ffc720; }
button.btn-outline-info,      a.btn-outline-info       { color: #000; background-color: #0dcaf0; border-color: #0dcaf0; }
button.btn-outline-info:hover,      a.btn-outline-info:hover      { color: #000; background-color: #3dd5f3; border-color: #31d2f2; }

/* Password strength dots (visual feedback only — login is never blocked by it) */
.grdu-pw-checklist {
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem;
  margin-top: .55rem; padding-top: .1rem;
}
.grdu-pw-checklist::before {
  content: ''; position: absolute; left: 9%; right: 9%; top: 12px; height: 2px;
  background: var(--grdu-border); z-index: 0;
}
.grdu-pw-rule {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  color: var(--grdu-text-muted); font-size: .68rem; font-weight: 700; line-height: 1.1;
  text-align: center; transition: color .2s;
}
.grdu-pw-rule .dot {
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  border: 4px solid var(--grdu-border);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: .72rem;
  transition: border-color .2s, background .2s, color .2s;
}
.grdu-pw-rule.is-valid { color: var(--grdu-primary-dark); }
.grdu-pw-rule.is-valid .dot { background: var(--grdu-primary); border-color: var(--grdu-primary-lt); color: #fff; }

.grdu-auth-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.grdu-auth-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1.5px solid var(--grdu-border); border-radius: 10px;
  padding: .55rem .7rem; font-size: .85rem; font-weight: 500;
  background: #fff; color: var(--grdu-text); text-decoration: none;
  transition: all .2s;
}
.grdu-auth-action-btn:not(.disabled):hover { background: var(--grdu-bg); border-color: var(--grdu-primary); color: var(--grdu-primary-dark); }
.grdu-auth-action-btn.disabled { cursor: not-allowed; }
.grdu-auth-action-btn small { display: block; font-size: .72em; opacity: .8; }

.grdu-auth-btn-register { background: var(--grdu-primary-lt); border-color: var(--grdu-primary); color: var(--grdu-primary-dark); }
.grdu-auth-btn-forgot { background: var(--grdu-auth-accent-lt); border-color: var(--grdu-auth-accent); color: var(--grdu-auth-accent-dk); }
.grdu-auth-btn-app { background: #eef9f1; border-color: #16A34A; color: #15803D; }
.grdu-auth-btn-app-icon { width: 22px; height: 22px; border-radius: 6px; flex: none; }
/* 3 ปุ่ม: ไอคอนอยู่บนข้อความ ไม่งั้นจอมือถือแคบไม่พอ */
.grdu-auth-actions-3 .grdu-auth-action-btn { flex-direction: column; gap: .15rem; padding: .4rem .35rem; text-align: center; line-height: 1.3; }
.grdu-auth-actions-3 .grdu-auth-action-btn > i { font-size: 1.15rem; line-height: 22px; }

/* Registration: group picker cards */
.grdu-reg-section-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grdu-text-muted); margin-bottom: .5rem;
}
.grdu-reg-section-label::after { content: ''; flex: 1; height: 1px; background: var(--grdu-border); }
.grdu-reg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.grdu-reg-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
  padding: .85rem .7rem; border-radius: 14px; background: #fff; border: 1.5px solid var(--grdu-border);
  text-decoration: none; color: var(--grdu-text); transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.grdu-reg-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.1); border-color: var(--grdu-primary); color: var(--grdu-text); }
.grdu-reg-card-wide { grid-column: 1 / -1; flex-direction: row; text-align: left; gap: .9rem; padding: .9rem 1rem; }
.grdu-reg-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--grdu-primary-lt); color: var(--grdu-primary-dark);
}
.grdu-reg-card-wide .grdu-reg-icon { width: 52px; height: 52px; font-size: 1.4rem; }
.grdu-reg-info { min-width: 0; }
.grdu-reg-title { font-size: .82rem; font-weight: 700; line-height: 1.3; }
.grdu-reg-card-wide .grdu-reg-title { font-size: .95rem; }
.grdu-reg-sub { font-size: .7rem; color: var(--grdu-text-muted); margin-top: .1rem; }
.grdu-reg-arrow { margin-left: auto; color: var(--grdu-text-muted); }

@media (max-width: 380px) {
  .grdu-reg-grid { grid-template-columns: 1fr; }
}

/* สีแยกตามกลุ่ม ไม่ให้ทุกการ์ดกลืนกัน (ไม่ใช้ชุดสีเดียวกับ v1) */
.grdu-reg-icon-fda            { background: #fef3d8; color: #a07830; }
.grdu-reg-icon-hospital       { background: #dbeafe; color: #1d4ed8; }
.grdu-reg-icon-health-center  { background: #d8f4ec; color: #0f766e; }
.grdu-reg-icon-osm            { background: #ffe4d5; color: #c2410c; }
.grdu-reg-icon-consumer       { background: #ede8ff; color: #6d28d9; }

.grdu-auth-notice {
  background: var(--grdu-bg); border-left: 3px solid var(--grdu-primary); border-radius: 0 10px 10px 0;
  padding: .6rem .9rem; font-size: .78rem; color: var(--grdu-text-muted); margin-top: 1.25rem;
}

/* Forgot-password: step dots */
.grdu-reset-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grdu-border); transition: background .2s; }
.grdu-reset-dot.active { background: var(--grdu-primary); }
.grdu-reset-line { width: 60px; height: 2px; background: var(--grdu-border); }

/* Forgot-password: issued reset CODE */
.grdu-reset-code-box {
  background: #fff7e0; border: 1px solid #f3dfa6; border-radius: 12px; padding: 1rem;
}
.grdu-reset-code-title { font-weight: 700; color: #6b4f00; font-size: .9rem; }
.grdu-reset-code-row { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; }
.grdu-reset-code-value {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--grdu-border); border-radius: 10px;
  padding: .7rem .8rem; text-align: center; font-family: Consolas, "Courier New", monospace;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; color: var(--grdu-primary-dark);
  overflow-wrap: anywhere; user-select: all;
}

/* PIN verify page: segmented method switcher */
.grdu-method-switch {
  display: flex; gap: .3rem; padding: .3rem; background: var(--grdu-bg);
  border: 1px solid var(--grdu-border); border-radius: 12px; margin-bottom: 1.25rem;
}
.grdu-method-btn {
  flex: 1; border: 0; border-radius: 9px; padding: .55rem .8rem; font-size: .88rem; font-weight: 600;
  background: transparent; color: var(--grdu-text-muted); display: flex; align-items: center; justify-content: center; gap: .4rem;
  transition: all .18s ease;
}
.grdu-method-btn.active { background: var(--grdu-primary); color: #fff; box-shadow: 0 4px 12px var(--grdu-action-shadow); }

/* PIN boxes */
.grdu-pin-row { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.25rem; }
.grdu-pin-box {
  width: 3rem; height: 3.4rem; text-align: center; font-size: 1.4rem; font-weight: 700;
  border: 1.5px solid var(--grdu-border); border-radius: 12px; color: var(--grdu-primary-dark);
  transition: border-color .18s, box-shadow .18s;
}
.grdu-pin-box:focus { border-color: var(--grdu-primary); box-shadow: 0 0 0 3px var(--grdu-action-shadow); outline: none; }

/* Face-scan panel */
.grdu-face-frame { position: relative; border-radius: 16px; overflow: hidden; background: #111827; aspect-ratio: 4/3; }
.grdu-face-guide {
  position: absolute; inset: 0; margin: auto; width: 62%; height: 78%;
  border: 3px dashed rgba(255,255,255,.55); border-radius: 50% / 45%; pointer-events: none;
}
.grdu-face-counter {
  position: absolute; top: .6rem; right: .6rem; background: rgba(0,0,0,.6); color: #fff;
  font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px;
}

.grdu-auth-footer { font-size: 0.8rem; color: #6a7690; }
.grdu-auth-brand-footer { font-size: 0.78rem; line-height: 1.5; color: rgba(255,255,255,0.78); }

.grdu-auth-mobile-header {
  background: linear-gradient(160deg, var(--grdu-primary-dark) 0%, var(--grdu-primary) 60%, #26806f 100%);
  margin: -2rem -1.75rem 1.5rem; padding: 1.5rem 1.75rem 1.25rem; text-align: center;
}
.grdu-auth-logo-sm { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 8px 20px rgba(0,0,0,0.22); display: block; margin: 0 auto; }
.grdu-auth-mobile-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin-top: 0.5rem; }
.grdu-auth-mobile-sub { font-size: 0.8rem; color: rgba(255,255,255,0.75); margin-top: 0.2rem; }
.grdu-auth-mobile-header .grdu-auth-logo-strip { margin-bottom: 0.75rem; }

@media (max-width: 767.98px) {
  .grdu-auth-card { border-radius: 16px; }
  .grdu-auth-form-wrap { padding: 1.25rem; }
  .grdu-auth-mobile-header { margin: -1.25rem -1.25rem 1.25rem; padding: 1.25rem 1.25rem 1rem; }
  .grdu-auth-guides-list li { font-size: 0.8rem; }
  .grdu-auth-quick-actions { grid-template-columns: 1fr; }
}

/* =========================================
   Shell Layout (topbar + sidebar)
   ========================================= */
.grdu-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--grdu-topbar-h);
  background: var(--grdu-tb-bg); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem; gap: .75rem; z-index: 1030; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.grdu-topbar-brand { font-weight: 800; letter-spacing: .01em; display: flex; align-items: center; gap: .5rem; white-space: nowrap; flex-shrink: 0; }
/* มือถือแคบ: ชื่อระบบ "G-RDU & G-SHP" เคยตกบรรทัด (G-RDU & G- / SHP) — ไม่ตัดบรรทัด ลดขนาดตัวอักษร และซ่อนไอคอนโล่ที่ซ้ำกับปุ่มเมนู */
@media (max-width: 575.98px) {
  .grdu-topbar { padding: 0 .6rem; gap: .4rem; }
  .grdu-topbar-brand { font-size: .95rem; }
}
@media (max-width: 400px) {
  .grdu-topbar-brand i { display: none; }
  .grdu-topbar-user { padding: .25rem .45rem; font-size: .8rem; gap: .3rem; }
}
.grdu-sidebar-toggle { background: none; border: none; color: #fff; font-size: 1.4rem; padding: .25rem .4rem; cursor: pointer; border-radius: 7px; }
.grdu-sidebar-toggle:hover { background: rgba(255,255,255,.15); }

.grdu-topbar-user { display: flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: .3rem .6rem; color: #fff; text-decoration: none; font-size: .85rem; white-space: nowrap; }
.grdu-topbar-user:hover { background: rgba(255,255,255,.25); color: #fff; }
.grdu-topbar-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.75); }
.grdu-account-menu { min-width: 240px; }
.grdu-account-menu .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }

.grdu-shell-body { display: flex; padding-top: var(--grdu-topbar-h); min-height: 100vh; }

.grdu-sidebar {
  width: var(--grdu-sidebar-w); background: var(--grdu-sb-bg);
  border-right: 1px solid var(--grdu-sb-border); flex-shrink: 0;
  position: fixed; top: var(--grdu-topbar-h); bottom: 0; left: 0;
  overflow-y: auto; z-index: 1020; transition: transform .2s ease;
}
.grdu-sidebar::-webkit-scrollbar { width: 4px; }
.grdu-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.grdu-sidebar-user { display: flex; align-items: center; gap: .65rem; padding: .85rem 1.1rem .75rem; border-bottom: 1px solid var(--grdu-sb-border); }
.grdu-sidebar-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.grdu-sidebar-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.grdu-sidebar-name { font-size: .9rem; font-weight: 700; color: var(--grdu-sb-text-active); line-height: 1.25; }
.grdu-sidebar-office { font-size: .76rem; color: var(--grdu-sb-text); line-height: 1.35; }
.grdu-sidebar-footer {
  font-size: .68rem; line-height: 1.5; color: var(--grdu-sb-text); text-align: center;
  padding: .6rem 1rem 1rem; opacity: .75;
}
.grdu-sb-level-badge { font-size: .68rem; background: var(--grdu-sb-accent); color: #fff; border-radius: 6px; padding: .1rem .45rem; display: inline-block; margin-top: .25rem; }

.grdu-nav-link { display: flex; align-items: center; gap: .75rem; padding: .62rem 1.1rem; color: var(--grdu-sb-text); text-decoration: none; font-size: .95rem; border-left: 3px solid transparent; cursor: pointer; }
.grdu-nav-link:hover { background: var(--grdu-sb-hover); color: var(--grdu-sb-text-active); }
.grdu-nav-link.active { background: var(--grdu-sb-active); color: var(--grdu-sb-text-active); border-left-color: var(--grdu-sb-accent); }
.grdu-nav-link i:first-child { font-size: 1.05rem; flex-shrink: 0; opacity: .85; }
.grdu-nav-link.disabled { opacity: .45; pointer-events: none; }

/* Subtle translucent circle behind top-level menu icons, icon itself a touch bigger */
.grdu-nav-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.grdu-nav-link .grdu-nav-icon i:first-child { font-size: 1.15rem; opacity: 1; -webkit-text-stroke: .5px currentColor; }

.grdu-nav-chevron { margin-left: auto; font-size: .75rem; transition: transform .2s ease; opacity: .7; }
.grdu-nav-link[aria-expanded="true"] .grdu-nav-chevron { transform: rotate(180deg); }

.grdu-nav-sublink { display: flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem .5rem 2.3rem; color: var(--grdu-sb-text); text-decoration: none; font-size: .89rem; }
.grdu-nav-sublink:hover { background: var(--grdu-sb-hover); color: var(--grdu-sb-text-active); }
.grdu-nav-sublink.active { background: var(--grdu-sb-active); color: var(--grdu-sb-text-active); }
.grdu-nav-sublink.disabled { opacity: .45; pointer-events: none; }
.grdu-nav-sublink i { font-size: .7rem; opacity: .7; }

.grdu-main { flex: 1 1 auto; margin-left: var(--grdu-sidebar-w); padding: 1.5rem; min-width: 0; }

.grdu-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1015; }

/* Desktop collapse (separate from the mobile off-canvas toggle below) */
@media (min-width: 992px) {
  .grdu-sidebar, .grdu-main { transition: transform .2s ease, margin-left .2s ease; }
  body.grdu-sidebar-collapsed .grdu-sidebar { transform: translateX(-100%); }
  body.grdu-sidebar-collapsed .grdu-main { margin-left: 0; }
}

@media (max-width: 991.98px) {
  .grdu-sidebar { transform: translateX(-100%); }
  .grdu-sidebar.show { transform: translateX(0); }
  .grdu-sidebar.show ~ .grdu-sidebar-backdrop,
  body.grdu-sidebar-open .grdu-sidebar-backdrop { display: block; }
  .grdu-main { margin-left: 0; padding: 1rem; }
  /* keep the page from scrolling behind the off-canvas sidebar while it's open */
  body.grdu-sidebar-open { overflow: hidden; }
  /* WCAG-comfortable tap targets once the sidebar becomes a touch surface */
  .grdu-nav-link, .grdu-nav-sublink { min-height: 44px; }
  .grdu-sidebar-toggle { min-width: 44px; min-height: 44px; }
}

.grdu-stat-card { background: var(--grdu-card-bg); border: 1px solid var(--grdu-border); border-radius: var(--grdu-radius); box-shadow: var(--grdu-shadow); padding: 1rem 1.25rem; }
.grdu-stat-card-sm { padding: .65rem .85rem; }

/* Dashboard breakdown tables: colored group headers (GG/G-RDU/G-SHP/ความรอบรู้) */
.grdu-thgroup-gg   { background: #dcfce7 !important; color: #14532d; }
.grdu-thgroup-grdu { background: #dbeafe !important; color: #1e3a5f; }
.grdu-thgroup-gshp { background: #ede9fe !important; color: #4c1d95; }
.grdu-thgroup-lit  { background: #ffedd5 !important; color: #7c2d12; }
.grdu-stat-card .dataTables_wrapper { padding: 0 .5rem .5rem; }
.grdu-stat-card .grdu-dt-toprow { margin: .75rem 0 1rem !important; }
.grdu-stat-card .dataTables_wrapper > .dataTables_info,
.grdu-stat-card .dataTables_wrapper > .dataTables_paginate { margin-top: .75rem; }

/* มือถือ: ตารางกว้าง (DataTables) ต้องเลื่อนซ้ายขวาได้ — เดิมข้อความในช่องตัดบรรทัดบีบจนคอลัมน์ขวาถูกตัดทิ้งโดยเลื่อนไม่ได้
   ให้ตัวห่อของ DataTables เป็นกรอบเลื่อนเอง และไม่ตัดบรรทัดในช่อง (ตาราง "การ์ดต่อแถว" grdu-cards ยกเว้น) */
@media (max-width: 767.98px) {
  .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .dataTables_wrapper table.dataTable:not(.grdu-cards) th,
  .dataTables_wrapper table.dataTable:not(.grdu-cards) td { white-space: nowrap; }
  .dataTables_wrapper > .dataTables_info,
  .dataTables_wrapper > .dataTables_paginate { position: sticky; left: 0; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* Dashboard summary chart cards (GG/G-RDU/G-SHP/ความรอบรู้) */
.grdu-chart-card { padding: 0; overflow: hidden; }
.grdu-chart-head { padding: .6rem 1rem; color: #fff; font-weight: 600; font-size: .95rem; }
.grdu-chart-head-gg   { background: #16a34a; }
.grdu-chart-head-grdu { background: #2563eb; }
.grdu-chart-head-gshp { background: #7c3aed; }
.grdu-chart-head-lit  { background: #f97316; }
.grdu-chart-body { padding: 1rem 1.25rem; }
.grdu-legend-row { display: flex; justify-content: space-between; align-items: center; padding: .15rem 0; }
.grdu-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

/* KPI icon rings (kbs_icon_pack ports) */
.grdu-icon-ring { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.grdu-icon-ring i { font-size: 1.1rem; }
.grdu-icon-ring-sm { width: 32px; height: 32px; border-radius: 10px; }
.grdu-icon-ring-sm i { font-size: .95rem; }
.grdu-grad-sky    { background: linear-gradient(135deg,#0ea5e9,#22c55e); }
.grdu-grad-purple { background: linear-gradient(135deg,#6366f1,#a855f7); }
.grdu-grad-pink   { background: linear-gradient(135deg,#ec4899,#f97316); }
.grdu-grad-cyan   { background: linear-gradient(135deg,#06b6d4,#3b82f6); }
.grdu-grad-orange { background: linear-gradient(135deg,#f97316,#f59e0b); }
.grdu-grad-green  { background: linear-gradient(135deg,#22c55e,#16a34a); }
.grdu-grad-indigo { background: linear-gradient(135deg,#4f46e5,#0ea5e9); }

/* Assessment checklist cards (assessment/form.blade.php) */
.grdu-assess-card { border: 1px solid var(--grdu-border); border-radius: var(--grdu-radius); box-shadow: var(--grdu-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.grdu-assess-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(2,12,27,.10); }

/* ความรอบรู้ (literacy) circle stepper — ported from legacy frm_chk_kbs2.php's
   stepper-wrapper. Simplified colors (reuses this project's existing status-badge
   variables instead of legacy's own hardcoded hex set) but same completed/partial/
   error/active states + connecting progress line + click-to-jump circles. */
.stepper-wrapper { padding: 0 .5rem; }
.stepper-container { display: flex; justify-content: space-between; position: relative; }
.stepper-container::before { content: ''; position: absolute; top: 20px; left: 5%; right: 5%; height: 2px; background: var(--grdu-border); z-index: 0; }
.stepper-progress { position: absolute; top: 20px; left: 5%; height: 2px; width: 0; background: var(--grdu-status-pass); z-index: 1; transition: width .3s ease; }
.stepper-item { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; cursor: pointer; flex: 1; }
.step-counter { width: 40px; height: 40px; border-radius: 50%; background: var(--grdu-card-bg); border: 2px solid var(--grdu-border); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #94a3b8; transition: all .2s ease; }
.step-name { margin-top: .4rem; font-size: .78rem; text-align: center; color: #64748b; max-width: 90px; }
.stepper-item.active .step-counter { border-color: var(--grdu-primary); color: var(--grdu-primary); box-shadow: 0 0 0 4px var(--grdu-action-shadow); }
.stepper-item.completed .step-counter { background: var(--grdu-status-pass); border-color: var(--grdu-status-pass); color: #fff; }
.stepper-item.partial .step-counter { background: var(--grdu-status-pending); border-color: var(--grdu-status-pending); color: #713f12; }
.stepper-item.error .step-counter { border-color: var(--grdu-status-fail); color: var(--grdu-status-fail); }
@media (max-width: 768px) {
    .step-counter { width: 32px; height: 32px; font-size: .85rem; }
    .step-name { font-size: .65rem; max-width: 60px; }
}

/* Leaflet dashboard map markers — soft glow "pulse dot" look */
.grdu-map-marker { filter: drop-shadow(0 2px 4px rgba(15,23,42,.35)); transition: filter .15s ease; }
.grdu-map-marker:hover { filter: drop-shadow(0 4px 8px rgba(15,23,42,.5)); }

/* =========================================
   Status badges (assessment/audit results — independent of the color theme)
   ========================================= */
.grdu-status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.6; color: #fff; }
.grdu-status-badge.grdu-status-pass        { background: var(--grdu-status-pass); }
.grdu-status-badge.grdu-status-pending     { background: var(--grdu-status-pending); color: #713f12; }
.grdu-status-badge.grdu-status-fail        { background: var(--grdu-status-fail); }
.grdu-status-badge.grdu-status-unchecked   { background: var(--grdu-status-unchecked); }
.grdu-status-badge.grdu-status-inprogress  { background: var(--grdu-status-inprogress); }

/* =========================================
   Page hero header (gradient) — KBS Registry style, reused across
   list pages (store/survey/assessment/...). Uses theme vars so it
   re-colors with whichever swatch is picked, not a fixed hue.
   ========================================= */
.grdu-page-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--grdu-primary-dark) 0%, var(--grdu-primary) 55%, var(--grdu-primary-lt) 100%);
  color: #fff;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
  margin-bottom: 1rem;
}
.grdu-page-head::before {
  content: "";
  position: absolute;
  width: 200px; height: 200px; right: -60px; top: -110px;
  border-radius: 999px; opacity: .18; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.6), transparent);
}
.grdu-hero-title { display: flex; gap: 12px; align-items: center; position: relative; z-index: 1; }
.grdu-hero-icon {
  width: 48px; height: 48px; border-radius: 14px; font-size: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
}
.grdu-hero-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; line-height: 1.4; }
.grdu-hero-h { font-size: 1.3rem; font-weight: 800; line-height: 1.3; margin: 0; }
.grdu-hero-sub { font-size: .84rem; opacity: .9; }
.grdu-hero-stats { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.grdu-hero-pill { min-width: 84px; padding: 7px 12px; border-radius: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); text-align: center; }
.grdu-hero-pill .value { font-size: 1rem; font-weight: 700; line-height: 1.15; }

/* ประกาศข่าว — bell popup cards. --accent is set inline per-card (rotating palette in JS). */
.grdu-announce-card {
  border-left: 4px solid var(--accent, var(--grdu-primary));
  background: var(--grdu-bg);
  border-radius: 0 14px 14px 0;
  padding: .9rem 1.1rem;
  margin-bottom: .9rem;
}
.grdu-announce-card:last-child { margin-bottom: 0; }
.grdu-announce-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.grdu-announce-date {
  font-size: .74rem; font-weight: 700; color: #fff;
  background: var(--accent, var(--grdu-primary));
  padding: .2rem .65rem; border-radius: 20px; display: inline-flex; align-items: center;
}
.grdu-announce-new {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: linear-gradient(135deg, #f43f5e, #e11d48); padding: .18rem .6rem;
  border-radius: 20px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(225,29,72,.35);
  animation: grduAnnouncePulse 1.8s ease-in-out infinite;
}
@keyframes grduAnnouncePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.grdu-announce-body { font-size: .92rem; color: var(--grdu-text); white-space: pre-wrap; line-height: 1.55; flex: 1; min-width: 0; }

/* ข้อความ+รูปเรียงข้างกัน กันข้อความยาวดันรูปลงล่าง; ไฟล์เอกสาร (ไม่ใช่รูป) แยกไว้เต็มความกว้างด้านล่าง */
.grdu-announce-row { display: flex; align-items: flex-start; gap: 1rem; }
.grdu-announce-thumbs { display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; }
.grdu-announce-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
@media (max-width: 480px) {
  .grdu-announce-row { flex-direction: column; }
  .grdu-announce-thumbs { flex-direction: row; flex-wrap: wrap; }
}

.grdu-announce-thumb {
  display: block; position: relative; width: 84px; height: 84px; border-radius: 12px;
  flex-shrink: 0; cursor: zoom-in;
}
.grdu-announce-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px;
  border: 2px solid var(--grdu-border); box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.grdu-announce-thumb:hover img {
  border-color: var(--accent, var(--grdu-primary));
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* พรีวิวรูปขยายใหญ่ตอนชี้เมาส์ — position:fixed ทับทุกอย่างรวมถึง modal เอง
   (ไม่ใช้ transform:scale บน thumbnail ตรงๆ เพราะโดน overflow ของ modal ตัดขอบ) */
.grdu-img-preview {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .72);
  padding: 3rem;
  pointer-events: none;
}
.grdu-img-preview.d-none { display: none; }
.grdu-img-preview img {
  max-width: min(90vw, 900px); max-height: 88vh; object-fit: contain;
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5); border: 5px solid #fff;
  background: #fff;
}
.grdu-announce-file {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600;
  color: var(--grdu-primary-dark); background: var(--grdu-card-bg); border: 1.5px solid var(--grdu-border);
  border-radius: 20px; padding: .4rem .85rem; text-decoration: none; transition: .15s;
}
.grdu-announce-file:hover { border-color: var(--accent, var(--grdu-primary)); background: var(--grdu-bg); }
.grdu-hero-pill .label { font-size: .68rem; opacity: .9; }

/* Section kicker label (e.g. "FILTER" / "REGISTRY LIST") */
.grdu-kicker { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grdu-primary); margin-bottom: .3rem; }

/* Status pill row (ทั้งหมด/เปิด/ปิด/อัตราเปิด) */
.grdu-status-pill-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.grdu-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 20px; font-size: .82rem; font-weight: 600; white-space: nowrap; border: 1px solid; }
.grdu-status-pill-total  { background: #eef6ff; color: #0b6bcb; border-color: #c5dff8; }
.grdu-status-pill-open   { background: #eafcf1; color: #1a7f46; border-color: #b6f0d0; }
.grdu-status-pill-closed { background: #fff1f2; color: #c0293b; border-color: #fecdd3; }
.grdu-status-pill-info   { background: #f3f4ff; color: #3730a3; border-color: #c7d2fe; }
.grdu-status-pill-rate   { background: #fff8ea; color: #92400e; border-color: #fde68a; position: relative; padding-bottom: 10px; }
.grdu-rate-bar-wrap { position: absolute; bottom: 4px; left: 10px; right: 10px; height: 4px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; }
.grdu-rate-bar { display: block; height: 100%; border-radius: 4px; }

/* Table card header bar */
.grdu-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--grdu-border); }

/* =========================================
   Full-page loading overlay — shown while a form submits or a link
   navigates to a new page (real navigation, not AJAX-in-place actions,
   which manage their own inline spinners already).
   ========================================= */
.grdu-page-loading {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(255,255,255,.7);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: .75rem;
}
.grdu-page-loading.show { display: flex; }
.grdu-page-loading .spinner-border { width: 3rem; height: 3rem; color: var(--grdu-primary); }
.grdu-page-loading .label { font-weight: 600; color: var(--grdu-text); font-size: .95rem; }

/* =========================================
   Confirm modal (replaces native window.confirm())
   ========================================= */
.grdu-confirm-modal { border: 0; border-radius: 18px; overflow: hidden; }
.grdu-confirm-icon { font-size: 2.6rem; color: var(--grdu-warning); }

/* =========================================
   Toast notifications (bottom-right, auto-fade) — replaces the static
   top-of-page alert banner for session('status') flashes.
   ========================================= */
.grdu-toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }
.grdu-toast {
  min-width: 260px; max-width: 360px; padding: .75rem 1rem; border-radius: 12px;
  background: var(--grdu-card-bg); box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border-left: 4px solid var(--grdu-success);
  display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--grdu-text);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.grdu-toast.show { opacity: 1; transform: translateY(0); }
.grdu-toast.grdu-toast-error { border-left-color: var(--grdu-danger); }
.grdu-toast i { font-size: 1.1rem; color: var(--grdu-success); }
.grdu-toast.grdu-toast-error i { color: var(--grdu-danger); }

/* =========================================
   Theme (color) picker — trigger + swatch dropdown
   ========================================= */
.grdu-theme-trigger { background: none; border: none; color: #fff; font-size: 1.15rem; width: 2.2rem; height: 2.2rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.grdu-theme-trigger:hover { background: rgba(255,255,255,.15); }
.grdu-theme-menu { padding: .85rem; min-width: 220px; }
.grdu-theme-menu-title { font-size: .78rem; font-weight: 700; color: var(--grdu-text-muted); margin-bottom: .6rem; }
.grdu-theme-swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.grdu-theme-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--grdu-border); background: var(--swatch); padding: 0; cursor: pointer; }
.grdu-theme-swatch:hover { transform: scale(1.08); }
.grdu-theme-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--swatch); }