/* ===================== Green Sport Theme ===================== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700&display=swap');

:root{
  --bg: #ffffff;
  --header-grad: linear-gradient(90deg,#c8f6d0 0%, #b7eec0 50%, #e3f7e6 100%);
  --accent-green: #136f3b;
  --accent-2: #2aa05b;
  --card-bg: #ffffff;
  --muted: #5a6b59;
  --pill-1: #dff6e7;
  --pill-2: #f0f9ef;
  --pill-3: #e6f7ff;
  --btn-primary: linear-gradient(90deg,#0d8a45,#2aa05b);
  --btn-accent: #ef6b5a;
  --soft-shadow: 0 14px 40px rgba(17,74,38,0.06);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  font-family:'Kanit',sans-serif;
  color:#17321f;
}

.wrap{
  max-width:1250px;
  margin:18px auto;
  padding:18px;
}

/* HEADER */
header{
  background:var(--header-grad);
  border-radius:12px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--soft-shadow);
  position:relative;
  overflow:hidden;
}
header::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-20px;
  width:420px;
  height:420px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420"><g fill="%2318642f" fill-opacity="0.03"><circle cx="300" cy="80" r="120"/><rect x="10" y="220" width="380" height="120" rx="24"/></g></svg>');
  background-repeat:no-repeat;
  transform:rotate(10deg);
  pointer-events:none;
  opacity:1;
}
header .brand{display:flex;align-items:center;gap:14px}
.logo{
  width:64px;height:64px;border-radius:12px;
  background:linear-gradient(180deg,#fff,#f0fff0);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,0.06);
  border:2px solid rgba(10,80,30,0.06);
}
.logo img{width:64px;height:64px;border-radius:12px;object-fit:cover}
header h1{margin:0;color:var(--accent-green);font-weight:800;font-size:20px}
header .small{color:var(--muted);font-size:13px}

/* TOP PILLS */
.top-pills{
  display:flex;
  gap:10px;
  margin:18px 0;
  flex-wrap:wrap;
}
.pill{
  padding:10px 14px;
  border-radius:18px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(17,74,38,0.04);
  border:1px solid rgba(0,0,0,0.03);
  cursor:pointer;
  display:flex;
  gap:8px;
  align-items:center;
  user-select:none;
  background:var(--pill-2);
  color:var(--accent-green);
}
.pill-icon{font-size:16px}
.pill .label{font-weight:900;color:var(--accent-green);font-size:14px}
.pill.home{background:var(--pill-1);}
.pill.manage{background:var(--pill-2);}
.pill.check{background:var(--pill-3);}
.pill.report{background:linear-gradient(90deg,#36a84b,#2aa05b);color:#fff;}
.pill.report .label{color:#fff;}
.pill.active{
  box-shadow:0 14px 40px rgba(10,110,50,0.12);
  transform:translateY(-2px);
  outline:2px solid rgba(10,110,50,0.06);
}

/* GENERIC */
.card{
  background:var(--card-bg);
  border-radius:14px;
  padding:16px;
  border:1px solid rgba(9,76,36,0.03);
  box-shadow:var(--soft-shadow);
  margin-bottom:18px;
}
.inner-card{
  background:linear-gradient(180deg,#f6fff7,#ffffff);
}
.inputs{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.inputs input, textarea, select{
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
  background:#fff;
  color:#17321f;
}
textarea{min-height:80px;resize:vertical}
.small{font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}
.page-title{margin:0 0 10px 0;color:var(--accent-green);font-weight:800;font-size:18px}
.section-title{margin:0 0 8px 0;color:var(--accent-green);font-weight:800}

/* BUTTONS */
.btn{
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  border:none;
}
.btn-primary{
  background:var(--btn-primary);
  color:#fff;
  box-shadow:0 12px 30px rgba(10,119,56,0.12);
}
.btn-ghost{
  background:transparent;
  border:2px solid rgba(0,0,0,0.04);
  color:var(--accent-green);
}
.btn-accent{
  background:var(--btn-accent);
  color:#fff;
}
.btn:focus{
  outline:3px solid rgba(10,110,50,0.18);
  outline-offset:3px;
}

/* PAGE SWITCH */
.page{}

/* DIVISION LIST */
.division-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.div-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.div-row input.div-label{
  flex:1 1 auto;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  font-weight:800;
  color:var(--accent-green);
}
.div-row .div-index{
  flex:0 0 32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--pill-1);
  font-weight:900;
  color:var(--accent-green);
}
.div-row .btn-remove-div{
  flex:0 0 auto;
}

/* INNER HEADER */
.inner-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

/* TEAM LIST (PAGE 2) */
.team-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.team-row{
  display:flex;
  gap:8px;
  align-items:center;
  background:linear-gradient(180deg,#f8fff7,#ffffff);
  padding:8px;
  border-radius:10px;
  border:1px solid rgba(6,54,31,0.06);
  box-shadow:0 6px 18px rgba(10,90,40,0.03);
}
.team-row .idx{
  flex:0 0 36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--pill-1);
  color:var(--accent-green);
  font-weight:900;
  border-radius:8px;
  font-size:13px;
}
.team-row input.team-name{
  flex:1 1 auto;
  border-radius:8px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.06);
  font-weight:800;
  font-size:15px;
  color:var(--accent-green);
  background:#fff;
}
.team-row .actions{
  display:flex;
  gap:6px;
  align-items:center;
  flex:0 0 auto;
}
.btn-small{
  padding:6px 8px;
  border-radius:8px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  border:none;
}
.btn-small.ghost{
  background:transparent;
  border:1px solid rgba(0,0,0,0.04);
  color:var(--accent-green);
}
.btn-small.danger{
  background:#ff6b6b;
  color:#fff;
}

/* GRID */
.grid-2{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:18px;
}
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr;}
}

/* DRAW PAGE */
.wheel-card-simple{
  border-radius:12px;
  border:1px dashed rgba(0,0,0,0.08);
  padding:12px;
  background:linear-gradient(180deg,#f7fff9,#ffffff);
}
.current-draw-result{
  margin-top:6px;
  font-weight:900;
  font-size:18px;
  color:#0a4a28;
}

/* ADVANCED WHEEL (PAGE 3) */
.wheel-card-advanced{
  position:relative;
  border-radius:16px;
  border:1px dashed rgba(0,0,0,0.08);
  padding:14px;
  background:radial-gradient(circle at top left,#f7fff9 0,#ffffff 50%,#e8f9ff 100%);
  overflow:hidden;
}
.wheel-card-advanced::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 0 100%,rgba(46,204,113,0.12),transparent 60%),
    radial-gradient(circle at 100% 0,rgba(52,152,219,0.14),transparent 55%);
  pointer-events:none;
}
.wheel-card-advanced > *{
  position:relative;
  z-index:1;
}

.dual-wheel-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:8px;
}
@media (max-width:900px){
  .dual-wheel-wrap{
    flex-direction:column;
  }
}
.wheel-column{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.wheel-label-top{
  font-size:13px;
  font-weight:800;
  color:var(--accent-green);
}

/* วงล้อพื้นฐาน */
.spin-wheel{
  position:relative;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(9,76,36,0.2);
  background:conic-gradient(
    #7bed9f,
    #70a1ff,
    #ffafcc,
    #ffdd59,
    #2ed573,
    #70a1ff
  );
  overflow:hidden; /* ให้ SVG ไม่ล้นออกนอกวง */
}
.small-wheel{
  width:160px;
  height:160px;
}
.big-wheel{
  width:260px;
  height:260px;
  border-radius:50%;
  overflow:hidden; /* กัน SVG ล้น */
}

/* SVG วงล้อ (ชื่อรอบวงกลม) */
.spin-wheel svg.wheel-svg,
.big-wheel svg.wheel-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
}

.wheel-core{
  width:34%;
  height:34%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffffff,#dff6e7);
  box-shadow:0 0 0 6px rgba(255,255,255,0.9);
}

.wheel-center-text{
  position:absolute;
  max-width:75%;
  text-align:center;
  font-weight:900;
  font-size:16px;
  color:#0b4a2a;
  pointer-events:none;
}
.small-wheel .wheel-center-text{
  font-size:14px;
}

.wheel-spinning{
  filter:drop-shadow(0 18px 40px rgba(0,0,0,0.35));
}

.wheel-status{
  margin-top:4px;
}

/* SUMMARY */
.division-summary-block{
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.05);
  padding:10px;
  margin-bottom:10px;
  background:#ffffff;
}
.division-summary-title{
  font-weight:900;
  color:var(--accent-green);
  margin-bottom:4px;
}
.group-title{
  font-weight:800;
  color:#0b6f3a;
  margin-top:4px;
}
.group-team{
  padding-left:12px;
  font-size:14px;
}

/* PAGE 4 TABLES */
.controls-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 12px;
}
.controls-grid .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.controls-grid label{
  font-size:13px;
  color:var(--accent-green);
  font-weight:800;
}
.full-row{
  grid-column:1 / -1;
}
.result-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
.result-table th,
.result-table td{
  border:1px solid rgba(0,0,0,0.05);
  padding:6px 8px;
  font-size:13px;
}
.result-table th{
  background:linear-gradient(180deg,#eaf7ed,#fff);
  color:var(--accent-green);
  font-weight:900;
}
.result-table td{
  background:#fff;
  color:#06361f;
}
.result-table td[contenteditable="true"]{
  background:#fdfdfd;
}
.section-row td{
  background:#fff9d6;
  font-weight:900;
  text-align:center;
}
.footer{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* RESPONSIVE */
@media (max-width:520px){
  .team-row{gap:6px;padding:6px;}
  .team-row .idx{flex:0 0 30px;height:30px;font-size:12px;}
  .team-row input.team-name{font-size:14px;padding:8px;}
}

/* MINI MATCH CELL (คอลัมน์คู่แข่งขัน) */
.mini-match{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:6px;
  align-items:center;
}

.mini-match .left-cell,
.mini-match .right-cell{
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:#ffffff;
  font-size:13px;
  font-weight:800;
  color:#06361f;
  min-width:0;
}

.mini-match .vs-cell{
  padding:4px 8px;
  font-weight:900;
  font-size:12px;
  color:var(--accent-green);
  white-space:nowrap;
}

/* จัดทุกช่องในหน้า 4 ให้อยู่กึ่งกลางทั้งหมด */
#p4_resultTable th,
#p4_resultTable td,
#p4_typeTableWrap table th,
#p4_typeTableWrap table td,
#p4_groupSummary table th,
#p4_groupSummary table td {
  text-align: center !important;   /* กึ่งกลางแนวนอน */
  vertical-align: middle !important; /* กึ่งกลางแนวตั้ง */
}


/* ✅ อนุญาตให้แก้ไข cell ในหน้า P4 */
#p4_typeTableWrap td[contenteditable="true"]{
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
  cursor: text;
}





.btn-primary-blue{
  background: linear-gradient(90deg, #1e90ff, #4facfe);
  color:#fff;
  border:none;
  font-weight:800;
  border-radius:10px;
  padding:10px 14px;
  box-shadow:0 8px 18px rgba(30,144,255,0.35);
  cursor:pointer;
}

.btn-primary-blue:hover{
  filter:brightness(1.06);
}





/* ===================== ADS (Step1 uploader + Step3 overlay) ===================== */
.ads-uploader input[type="file"]{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px dashed rgba(0,0,0,0.18);
  background:#fbfffc;
}

.ads-list{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width:720px){
  .ads-list{ grid-template-columns:1fr; }
}
.ad-item{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,0.05);
  overflow:hidden;
}
.ad-thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  background:#f3f7f4;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ad-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ad-body{
  padding:10px;
}
.ad-body .row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.ad-body input, .ad-body textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.10);
  font-family:'Kanit',sans-serif;
}
.ad-body textarea{ min-height:70px; resize:vertical; }
.ad-actions{
  margin-top:8px;
  display:flex;
  justify-content:flex-end;
}
.ad-del{
  border:none;
  background:#ff4757;
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
}

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:56px; height:32px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:#dfe6e9; transition:.2s; border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
}
.slider:before{
  position:absolute; content:"";
  height:24px; width:24px; left:4px; top:4px;
  background:white; transition:.2s; border-radius:50%;
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}
.switch input:checked + .slider{ background:linear-gradient(90deg,#0d8a45,#2aa05b); }
.switch input:checked + .slider:before{ transform:translateX(24px); }

/* Step3 floating ad overlay */
.ad-overlay{
  position:fixed;
  right:16px;
  top:84px;
  width:min(360px, calc(100vw - 32px));
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 22px 55px rgba(0,0,0,0.22);
  border:1px solid rgba(0,0,0,0.10);
  overflow:hidden;
  z-index:9999;
}
.ad-overlay .ad-close{
  position:absolute;
  right:8px; top:8px;
  width:34px; height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  font-size:22px;
  line-height:32px;
  font-weight:900;
  cursor:pointer;
}
.ad-overlay .ad-media{
  width:100%;
  aspect-ratio:16/9;
  background:#f3f7f4;
}
.ad-overlay .ad-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ad-overlay .ad-meta{
  padding:10px 12px 12px;
}
.ad-title{ font-weight:900; color:#0b6f3a; font-size:16px; }
.ad-desc{ color:#334; font-size:13px; margin-top:4px; white-space:pre-line; }
.ad-link{
  display:inline-block;
  margin-top:8px;
  background:#70a1ff;
  color:#fff;
  font-weight:900;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
}
@media (max-width:720px){
  .ad-overlay{
    left:16px;
    right:16px;
    top:auto;
    bottom:16px;
  }
}