/* สถิติแอป (#/admin/stats) — prefix .as- · Wadee Vivid Blue
   ใช้โทเคนสีของ base.css ล้วน (ไม่มีค่าสีน้ำเงินตายตัว) → ทุกธีม (สว่าง/เข้ม/เย็นสบายตา/ชมพูม่วงอ่อน) เปลี่ยนตามเอง
   แถบบน .top-bar · การ์ดแบบ v-card · ไอคอนบน .v-plate */

.as-page{flex:1;display:flex;flex-direction:column;padding:0 16px 28px}

/* ---- แถบบน ---- */
.as-top{align-items:flex-start;padding-left:0;padding-right:0}
.as-top .icon-btn{flex:none}
.as-titles{flex:1;min-width:0;padding-top:1px}
.as-titles h1{font-size:20px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.as-titles p{font-size:12.5px;line-height:1.5;margin-top:3px;color:var(--ink-dim)}
#as-refresh.spin svg{animation:as-spin .9s linear infinite}
@keyframes as-spin{to{transform:rotate(360deg)}}

.as-body{display:flex;flex-direction:column;gap:10px}
.as-page .skeleton{border-radius:19px;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.06) 25%,rgba(var(--accent-rgb),.15) 50%,rgba(var(--accent-rgb),.06) 75%);
  background-size:200% 100%}

/* ---- หัวข้อส่วน ---- */
.as-sec{font-size:13.5px;font-weight:700;color:var(--ink-dim);margin:10px 2px 0;letter-spacing:.1px}
.as-sec:first-child{margin-top:2px}

/* ---- การ์ดฐาน ---- */
.as-card,.as-tile{position:relative;border-radius:19px;color:var(--ink);
  background:var(--grad-surface);border:1px solid var(--card-brd);
  box-shadow:inset 0 1px 1px var(--hi),0 3px 8px rgba(var(--shadow-rgb),.09)}
.as-card{padding:16px}

/* ---- ช่องตัวเลขใหญ่ ---- */
.as-grid{display:grid;gap:8px}
.as-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.as-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.as-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.as-tile{display:flex;flex-direction:column;gap:4px;padding:13px 12px 12px;min-width:0}
.as-num{display:flex;align-items:center;gap:6px;font-size:26px;line-height:1.1;font-weight:700;
  letter-spacing:-.5px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.as-lbl{font-size:12px;line-height:1.35;color:var(--ink-dim)}
.as-tile.big{border-color:rgba(var(--accent-rgb),.42);background:linear-gradient(160deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),.03)),var(--grad-surface)}
.as-tile.big .as-num{color:var(--accent)}
.as-grid.g4 .as-num{font-size:22px}
.as-grid.g3 .as-num{font-size:22px}
/* จุดเขียว = ตัวเลขสด (ไม่กระพริบ — สเปกห้ามแอนิเมชันวนตลอด) */
.as-live{flex:none;width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(var(--green-rgb),.22)}

/* ---- กราฟแท่งสมัครใหม่รายวัน ---- */
.as-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.as-chart-head h3{font-size:14px;font-weight:700;color:var(--ink)}
.as-chart-head .dim{font-size:12px;color:var(--ink-dim)}
.as-plot{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;align-items:end;height:128px;
  border-bottom:1px solid var(--line)}
.as-bar{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
  padding:0;border:0;background:none;cursor:pointer;min-width:0;-webkit-tap-highlight-color:transparent}
.as-bar-fill{display:block;border-radius:4px 4px 0 0;background:rgba(var(--accent-rgb),.55);transition:background .15s}
.as-bar.today .as-bar-fill{background:var(--accent)}
.as-bar:hover .as-bar-fill,.as-bar.sel .as-bar-fill{background:var(--accent-hi)}
.as-bar.sel{outline:none}
.as-bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.as-bar-n{font-size:10.5px;font-weight:700;line-height:1;margin-bottom:3px;text-align:center;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.as-axis{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;margin-top:6px}
/* ป้ายกว้างกว่าช่อง → ล้นออกด้านข้างแบบคุมทิศ: ซ้ายสุดชิดซ้าย · ขวาสุดชิดขวา · ที่เหลือกึ่งกลาง */
.as-axis span{display:flex;justify-content:center;font-size:10px;line-height:1.2;color:var(--ink-dim);white-space:nowrap;min-width:0}
.as-axis span:first-child{justify-content:flex-start}
.as-axis span:last-child{justify-content:flex-end}
.as-tip{min-height:18px;margin-top:8px;font-size:12px;color:var(--ink-dim)}

/* ---- ช่องทางที่ใช้ ---- */
.as-plat{display:flex;flex-direction:column;gap:11px}
.as-plat-row{display:grid;grid-template-columns:minmax(92px,auto) 1fr auto;align-items:center;gap:10px}
.as-plat-lbl{font-size:13px;color:var(--ink);white-space:nowrap}
.as-plat-track{height:10px;border-radius:5px;background:rgba(var(--accent-rgb),.1);overflow:hidden}
.as-plat-fill{display:block;height:100%;border-radius:5px;background:var(--accent)}
.as-plat-n{min-width:28px;text-align:right;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.as-plat-row.muted .as-plat-lbl{color:var(--ink-dim)}
.as-plat-row.muted .as-plat-fill{background:rgba(var(--ink-rgb),.28)}
.as-note{font-size:11.5px;line-height:1.5;color:var(--ink-dim)}

.as-foot{font-size:11.5px;line-height:1.55;text-align:center;margin-top:10px;color:var(--ink-dim)}
.as-empty{text-align:center;padding:40px 0;color:var(--ink-dim)}

/* ---- แผงไม่มีสิทธิ์ ---- */
.as-denied{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 22px;margin-top:22px}
.as-denied-ico.v-plate{width:72px;height:72px;border-radius:22px}
.as-denied-ico.v-plate svg{width:52px;height:52px}
.as-denied h2{font-size:17px;font-weight:700}
.as-denied p{font-size:13px;line-height:1.6}
.as-denied .btn-outline-green{margin-top:6px;width:auto;padding:11px 24px}

/* ตารางสำหรับโปรแกรมอ่านหน้าจอ (ซ่อนจากตา) */
.as-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* จอแคบมาก (< 360px) → สมัครใหม่ 2×2 */
@media (max-width:359px){
  .as-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-plat-row{grid-template-columns:minmax(80px,auto) 1fr auto}
}
@media (prefers-reduced-motion:reduce){ #as-refresh.spin svg{animation:none} }