.noto-bold{
	font-family: 'Google Sans';
	font-weight: 600;
}

.curveType{
	border-radius : 0.5rem;
	padding-top: -0.5vh;
	padding-bottom: -0.5vh;
	min-height: 3rem;
}
.stationTypeTrain{
	margin-top: 0.75rem;
	font-family: 'Google Sans';
	font-size: 1.4rem;
	font-weight: 500;
}
.stationTypeTrain9{
	margin-top: 0.75rem;
	font-family: 'Google Sans';
	font-size: 1.05rem;
	font-weight: 500;
	white-space: nowrap;
}
.stationTrainNo{
	font-family: 'Google Sans';
	font-size: 2.2rem;
	font-weight: 700;
}
.stationSpTypeTrain{
	font-family: 'Google Sans';
	font-size: 1.2rem;
	font-weight: 500;
}
.stationSpTypeTrain9{
	font-family: 'Google Sans';
	font-size: 0.92rem;
	font-weight: 500;
	white-space: nowrap;
}
.stationSpCode{
	margin-top: -0.25rem;
	font-family: 'Google Sans';
	font-size: 0.8rem;
	font-weight: 500!important;
}

.destHead{
	font-size: 1rem;
	font-weight: 400;
}
.dest{
	margin-top: -0.25rem;
	font-family: 'Google Sans';
	font-size: 1.5rem;
	font-weight: 600;
}
.longName{
	margin-top: -0.25rem;
	font-family: 'Google Sans' !important;
	font-size: 1.5rem;
	font-weight: 600;
	font-stretch: 80%;
}

.stationTime{
	margin-top: 0.25rem;
	font-family: 'Google Sans';
	font-size: 2rem;
	font-weight: 500;
}
.depPlat{
	padding-top: -0.5vh;
	padding-bottom: -0.5vh;
	font-family: 'Google Sans';
	background-color: #000;
	border-radius : 0.75rem;
	color: #fff;
	border: 2px solid #fff;
	font-weight: 400;
	min-height: 3rem;
}
.gate{
	font-size: 2.2rem;
	font-weight: 600!important;
}

.textBlink {
	animation: op 0.85s 5;
}
.trBlink {
	animation: op 0.85s 5;
}
@keyframes op {
	50%  {opacity: 0;}
}

.stBoard{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.7rem;
	padding: 0.3rem 0.6rem;
	border-radius: 0.5rem;
	background-color: #f2f4f7;
	color: #1d2b3a;
	line-height: 1.15;
}
/* [15/08/2569 user] "ตรง card สถานะ ช่วยทำให้ตัวใหญ่เหมือนกับชานชาลา"
   ชานชาลาใช้ .gate = 2.2rem ⇒ สถานะเท่ากัน · ตัวอักษรไทยยาวกว่าเลขชานชาลามาก
   จึงปล่อยให้ตัดบรรทัดได้ (ไม่ nowrap) และคุมความสูงขั้นต่ำไว้ที่ .stBoard เหมือนเดิม */
.stBoard-label{
	font-family: 'Google Sans';
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.1;
}
.stBoard .stDot{ font-size: 1.1rem; }
.stChip .stDot{ font-size: 0.62rem; }

.stChip{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border-radius: 999px;
	padding: 0.12rem 0.7rem;
	font-family: 'Google Sans';
	font-size: 0.92rem;
	font-weight: 700;
	background-color: #f2f4f7;
	color: #1d2b3a;
	white-space: nowrap;
}
.stSmHead{ white-space: nowrap; font-size: 0.9rem; }

/* [15/08/2569 user] "ตัววงสถานะ มันควรเป็นไปตามสีของตัวจอ PID"
   ยกจานสีจากจอสถานะจริง (ttsmaster_UAT/v3/screen/status_board/index.css):
     .Cancel / .WaitTrack (งด · รอเปิดทาง)  #8f0000   แดงเข้ม
     .FinalCall           (เรียกขึ้นครั้งสุดท้าย/วิกฤต) #FF3737   แดงสด
     .showDelay           (ล่าช้า ≥ 5 นาที)  #FF9933   ส้ม
     .Departed / .Arrived (ออกแล้ว/ถึงแล้ว)  #003366   น้ำเงินกรม
   🪤 "ตรงเวลา" (.st-ok) ไม่ใช้จุดสี — user สั่ง 15/08 ให้เป็นกล่องกลับสีกับพื้นจอ
      แทน (เหมือน .Confirmed ของ PID) ดูบล็อก .st-ok ท้ายส่วนนี้ */
.st-warn  .stDot{ color: #FF9933; }
.st-late  .stDot{ color: #FF3737; }
.st-final .stDot{ color: #003366; }
.st-issue{ background-color: #fdecec; color: #8f0000; }
.st-issue .stDot{ color: #8f0000; }
.st-none{ background-color: #f0f1f3; color: #6b7280; }
.st-none .stDot{ color: #9aa1a9; }

[data-bs-theme="dark"] .stBoard,
[data-bs-theme="dark"] .stChip{ background-color: #262b31; color: #e6edf3; }
[data-bs-theme="dark"] .st-issue{ background-color: #3a1d1d; color: #ff8f8a; }
[data-bs-theme="dark"] .st-issue .stDot{ color: #ff8f8a; }
[data-bs-theme="dark"] .st-none{ background-color: #2a2f35; color: #a7b0ba; }
[data-bs-theme="dark"] .st-none .stDot{ color: #7d868f; }

/* [15/08/2569 user] "ตรงเวลา ให้ใช้พื้นหลังขาว ตัวอักษรดำ สำหรับ dark-mode
   พื้นหลังดำ อักษรขาว สำหรับ light-mode"
   = กล่อง "ตรงเวลา" กลับสีกับพื้นจอเสมอ (วิธีเดียวกับ .Confirmed บนจอ PID ที่เป็น
   กล่องขาวตัวดำบนจอพื้นดำ) — สถานะที่เจอบ่อยที่สุดจึงอ่านชัดที่สุด
   🔴 ต้องอยู่ "ท้ายสุด" ของบล็อกสถานะ — น้ำหนัก selector เท่ากับ .stBoard/.stChip
      และเท่ากับ [data-bs-theme="dark"] .stBoard ⇒ ตัวที่มาทีหลังเท่านั้นที่ชนะ
   จุดวงใช้ color: inherit เพราะ #003366 บนพื้นดำแทบมองไม่เห็น */
.st-ok{ background-color: #000000; color: #ffffff; }
.st-ok .stDot{ color: inherit; }
[data-bs-theme="dark"] .st-ok{ background-color: #ffffff; color: #000000; }
[data-bs-theme="dark"] .st-ok .stDot{ color: inherit; }

.station-modebar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0 0.25rem;
}
.sm-toggle{
	display: inline-flex;
	background-color: #eef1f5;
	border-radius: 999px;
	padding: 0.2rem;
}
.sm-btn{
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-family: 'Google Sans';
	font-weight: 600;
	color: #55606f;
	cursor: pointer;
	white-space: nowrap;
	transition: background .12s, color .12s;
}
.sm-btn.sm-cur{ background-color: #8f0d16; color: #ffffff; }
.sm-datewrap{ display: flex; align-items: center; gap: 0.4rem; }
.sm-datelabel{ font-size: 0.9rem; margin: 0; white-space: nowrap; }
.sm-dateinput{ max-width: 8.5rem; text-align: center; }

[data-bs-theme="dark"] .sm-toggle{ background-color: #262b31; }
[data-bs-theme="dark"] .sm-btn{ color: #c3ccd8; }
[data-bs-theme="dark"] .sm-btn.sm-cur{ background-color: #8f0d16; color: #ffffff; }

body.sb-page{ margin: 0; overflow-x: hidden; }
body.sb-page,
.sb-page td, .sb-page th{ font-family: 'Google Sans'; font-weight: 300; }
.sb-page .footerType{ font-size: 0.8rem; }

.sb-wrap{ max-width: 1400px; margin: 0 auto; padding: 0 0.75rem 1.5rem; }

.sb-head{ margin: 0.75rem 0 0.25rem; }
.sb-head .sb-name{ font-size: 1.75rem; font-weight: 600; font-family: 'Google Sans'; line-height: 1.2; }
.sb-head .sb-sub{ font-size: 0.95rem; color: #55606f; }
[data-bs-theme="dark"] .sb-head .sb-sub{ color: #aab4c0; }

.sb-maplink{
	display: inline-flex; align-items: center; gap: 0.35rem;
	border: 1.5px solid #8f0d16; color: #8f0d16; background: transparent;
	border-radius: 999px; padding: 0.3rem 0.85rem;
	font-family: 'Google Sans'; font-weight: 600; font-size: 0.92rem;
	text-decoration: none; white-space: nowrap;
}
.sb-maplink:hover{ background: #8f0d16; color: #fff; }
[data-bs-theme="dark"] .sb-maplink{ border-color: #cf8983; color: #cf8983; }
[data-bs-theme="dark"] .sb-maplink:hover{ background: #8f0d16; color: #fff; }

.sb-daydiv td{
	background-color: #eef2f7;
	color: #33415c;
	font-weight: 700;
	text-align: center !important;
	padding: 0.35rem;
	letter-spacing: 0.02em;
}
[data-bs-theme="dark"] .sb-daydiv td{ background-color: #2a2f36; color: #cdd6e2; }

.sb-done > td{ opacity: 0.45; }
.sb-done .stBoard, .sb-done .stChip{ opacity: 1; }
.sb-actual{ color: #0d6efd; font-weight: 600; white-space: nowrap; }
.sb-actual i{ font-size: 0.7em; margin-right: 0.15rem; }
[data-bs-theme="dark"] .sb-actual{ color: #7fb0ff; }

.sb-cause{ font-size: 0.85rem; color: #b3160d; margin-top: 0.15rem; line-height: 1.2; }
[data-bs-theme="dark"] .sb-cause{ color: #ff8f8a; }

.sb-updated{ font-size: 0.82rem; color: #6c757d; text-align: right; margin: 0.2rem 0.1rem 0; }
[data-bs-theme="dark"] .sb-updated{ color: #aab4c0; }

.sb-empty{
	text-align: center; font-family: 'Google Sans'; font-weight: 600;
	font-size: 1.15rem; color: #55606f; padding: 2rem 0.5rem;
}
[data-bs-theme="dark"] .sb-empty{ color: #aab4c0; }

.sb-act{ display: inline-flex; flex-direction: column; gap: 0.25rem; }
.sb-act .btn{ white-space: nowrap; }