/* assets/css/app.css — Modern SaaS Bento Grid + Glassmorphism (v19) */

/* ── ซ่อนลูกศรขึ้น-ลง (spin button) ของ input type="number" ทุกช่องในระบบ ──
   ป้องกันการกดพลาดเปลี่ยนค่าโดยไม่ตั้งใจ ยังกรอกตัวเลขผ่านคีย์บอร์ดได้ปกติ */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

:root {
  /* ── 4 สีหลัก พาสเทล-เกรเดียนต์ (ส้ม/ชมพู/ฟ้า/เขียว) — ใช้กับ badge/สถานะ/เกรดเท่านั้น
     ห้ามเปลี่ยนเพราะมีความหมายผูกกับสถานะทั่วระบบ (เขียว=ผ่าน, ชมพู=ไม่ผ่าน, ส้ม=เตือน) ── */
  --orange-1: #FFE8D6; --orange-2: #FFB37A; --orange-3: #FF8A4C; --orange-900: #7A3410;
  --pink-1:   #FFE3EF; --pink-2:   #FFA8CB; --pink-3:   #FF6FA8; --pink-900:   #7A1438;
  --blue-1:   #DCEEFF; --blue-2:   #7EC3FF; --blue-3:   #3D9BFF; --blue-900:   #0D3A66;
  --green-1:  #DFF8EA; --green-2:  #7FE3AE; --green-3:  #34C77B; --green-900:  #0E4A2C;

  /* ── โทนพื้นหลัง/บรรยากาศหน้าเว็บ (ส้ม-มะนาว-ครีม) ── */
  --hero-lime:        #E3F08C;
  --hero-orange-deep: #F4621B;
  --hero-orange-mid:  #FF8A42;
  --hero-orange-soft: #FFD6AC;

  /* ── โทนกลาง / ตัวอักษร ── */
  --ink:        #1F2430;
  --ink-soft:   #6B7280;
  --ink-faint:  #9AA1AC;
  --bg-page:    #F8F3E9;

  /* ── Glass surface — โทนครีมทึบขึ้น ให้กล่องเนื้อหาโดดเด่นชัดเจนจากพื้นหลัง ── */
  --glass:        rgba(251,247,238,0.88);
  --glass-strong: rgba(251,247,238,0.94);
  --border-glass: rgba(255,255,255,0.7);
  --cream:        #FBF7EE;

  /* ── Clay surface (ปุ่ม Claymorphism) ── */
  --clay-shadow-dark:  rgba(31,36,48,0.16);
  --clay-shadow-light: rgba(255,255,255,0.7);

  /* ── ขนาดมุมโค้ง / เงา ── */
  --r-xl: 24px; --r-lg: 20px; --r-md: 16px; --r-sm: 12px;
  --shadow-soft:  0 8px 30px rgba(31,36,48,0.07), 0 2px 8px rgba(31,36,48,0.04);
  --shadow-hover: 0 16px 40px rgba(31,36,48,0.12), 0 4px 12px rgba(31,36,48,0.06);

  /* ── ค่าเดิมที่ยังมีโค้ดอ้างอิงอยู่ (กันพังจุดที่ลืมแก้) ── */
  --border-soft: rgba(31,36,48,0.08);

  /* ── โทนน้ำตาล/มินต์สำหรับเอกสาร ปพ.5 ทางการ (pp5.css อ้างถึงแต่ไม่เคยถูกประกาศ
     มาก่อน ทำให้หัวตาราง/แถวเฉลี่ย/ไฮไลต์คะแนนสูงในแท็บสรุปผลไม่มีสีเลย) ── */
  --brown-50:  #FBF6EE; --brown-100: #F3E8D7; --brown-200: #E8D4B0;
  --brown-600: #8B6F47; --brown-700: #6F5736; --brown-800: #5A4628; --brown-900: #3D2F1A;
  --mint-100:  #DFF8EA;
}

body {
  font-family: 'Plus Jakarta Sans', 'Sarabun', sans-serif;
  font-size: 14px;
  color: var(--ink);
  /* พื้นหลังโทนส้ม-มะนาว-ครีมแบบจางลง (เวอร์ชันนวล) — ใช้เป็นค่าเริ่มต้นทุกหน้า
     เพราะหลายหน้ามีตารางข้อมูลแน่น สีจึงต้องเบาพอให้อ่านง่าย ส่วนหน้า landing/
     login ที่ไม่มีตารางจะใช้ .bg-hero (สีเข้มจัดเต็มตามต้นแบบ) แทน */
  background:
    radial-gradient(circle at 8% 4%,   rgba(227,240,140,0.45) 0%, transparent 32%),
    radial-gradient(circle at 90% 6%,  rgba(244,98,27,0.16)   0%, transparent 42%),
    radial-gradient(circle at 90% 88%, rgba(255,138,66,0.14)  0%, transparent 46%),
    var(--bg-page);
  min-height: 100vh;
}

/* ── พื้นหลังเข้มจัดเต็มสำหรับหน้า landing/login/แดชบอร์ดภาพรวม (ไม่มีตารางข้อมูลแน่น) ── */
body.bg-hero {
  background:
    radial-gradient(circle at 10% 2%,  var(--hero-lime) 0%, transparent 28%),
    radial-gradient(ellipse at 75% 8%, var(--hero-orange-deep) 0%, transparent 52%),
    radial-gradient(circle at 88% 80%, var(--hero-orange-mid) 0%, transparent 58%),
    linear-gradient(165deg, var(--hero-orange-mid) 0%, var(--hero-orange-soft) 75%);
}

/* ══════════════════════════════════════════════════════════
   FLOATING HEADER
   ══════════════════════════════════════════════════════════ */
.navbar {
  position: sticky;
  top: 16px;
  z-index: 50;
  margin: 16px 20px 24px !important;
  background: var(--glass-strong) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-glass) !important;
  border-radius: 28px !important;
  padding: 10px 22px !important;
  box-shadow: var(--shadow-soft);
}
.navbar-brand {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  display: flex; align-items: center; gap: 10px;
}
.navbar-brand .icon-box {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, var(--orange-3), var(--pink-3)) !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255,138,76,0.35);
}
.navbar-brand .icon-box i { color: #fff !important; font-size: 17px; }
.nav-link {
  color: var(--ink-soft) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  transition: background 0.15s, color 0.15s;
}
.nav-link.active {
  color: var(--ink) !important;
  background: rgba(251,247,238,0.7) !important;
}
.nav-link:hover {
  color: var(--ink) !important;
  background: rgba(251,247,238,0.45) !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS — glass surface พื้นฐานของทุกอย่าง
   ══════════════════════════════════════════════════════════ */
.icon-box {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.card {
  background: var(--glass) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.card-header {
  background-color: rgba(251,247,238,0.5) !important;
  border-bottom: 1px solid var(--border-glass) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  font-weight: 700 !important;
}
.bg-light { background-color: rgba(251,247,238,0.6) !important; }

/* ── Modal — กล่องครีมทึบเด่นชัด มุมโค้งเข้าธีมเดียวกับ .card ── */
.modal-content {
  background: var(--cream) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-hover) !important;
}
.modal-header, .modal-footer { border-color: rgba(31,36,48,0.08) !important; }

/* ── Stat cards (เหมือน mockup: ไอคอนวงกลมเกรเดียนต์ + ตัวเลขใหญ่) ── */
.stat-card {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px;
  min-height: 140px;
}
/* ── ไอคอนวงกลมเกรเดียนต์ — ใช้ได้ทั้งใน stat-card และแยกเดี่ยว (เช่น shortcut cards) ── */
.icon-badge {
  width: 42px; height: 42px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}
.stat-card .icon-badge { margin-bottom: 14px; }
.stat-card .num { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.stat-card .lbl { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.stat-card.s-orange .icon-badge { background: linear-gradient(135deg, var(--orange-2), var(--orange-3)); }
.stat-card.s-pink   .icon-badge { background: linear-gradient(135deg, var(--pink-2),   var(--pink-3));   }
.stat-card.s-blue   .icon-badge { background: linear-gradient(135deg, var(--blue-2),   var(--blue-3));   }
.stat-card.s-green  .icon-badge { background: linear-gradient(135deg, var(--green-2),  var(--green-3));  }

/* ── Hero banner (ใช้ทั่วไปสำหรับหัวข้อสำคัญ/ประกาศ) ── */
.hero-banner {
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, rgba(255,138,76,0.85), rgba(255,111,168,0.78) 45%, rgba(61,155,255,0.75) 100%);
  padding: 30px 34px;
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.hero-banner h2 { color: #fff; font-weight: 800; letter-spacing: -0.3px; }
.hero-banner p  { color: rgba(255,255,255,0.92); }
.hero-banner .btn-glass {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff; font-weight: 700;
  border-radius: 14px;
  padding: 10px 20px;
}
.hero-banner .btn-glass:hover { background: rgba(255,255,255,0.4); }

/* ══════════════════════════════════════════════════════════
   ปุ่ม — Claymorphism (ปุ่มทึบสี) + Glassmorphism (ปุ่ม outline)
   ปุ่มทึบสี: นูนฟู เงาคู่ทิศตรงข้าม + แสงไฮไลต์ด้านในแบบดินปั้น (clay)
   ปุ่ม outline: กระจกฝ้าโปร่งแสง + ขอบสว่างบางๆ (glass)
   ══════════════════════════════════════════════════════════ */
.btn {
  border-width: 0 !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

/* ── Claymorphism: ปุ่มทึบสี ── */
.btn-primary, .btn-danger, .btn-success, .btn-warning {
  border: none !important;
  box-shadow:
    6px 6px 14px var(--clay-shadow-dark),
    -5px -5px 12px var(--clay-shadow-light),
    inset 1px 1px 1px rgba(255,255,255,0.4) !important;
}
.btn-primary:hover, .btn-danger:hover, .btn-success:hover, .btn-warning:hover {
  transform: translateY(-2px);
  box-shadow:
    8px 8px 18px var(--clay-shadow-dark),
    -6px -6px 14px var(--clay-shadow-light),
    inset 1px 1px 1px rgba(255,255,255,0.45) !important;
}
.btn-primary:active, .btn-danger:active, .btn-success:active, .btn-warning:active {
  transform: translateY(1px);
  box-shadow:
    inset 3px 3px 8px rgba(31,36,48,0.18),
    inset -3px -3px 8px rgba(255,255,255,0.3) !important;
}

.btn-primary {
  background: linear-gradient(145deg, var(--orange-3), var(--pink-3)) !important;
  color: #fff !important;
}
.btn-danger {
  background: linear-gradient(145deg, var(--pink-2), var(--pink-3)) !important;
  color: #fff !important;
}
.btn-success {
  background: linear-gradient(145deg, var(--green-2), var(--green-3)) !important;
  color: #fff !important;
}
.btn-warning {
  background: linear-gradient(145deg, var(--orange-2), var(--orange-3)) !important;
  color: var(--orange-900) !important;
}

/* ── Glassmorphism: ปุ่ม outline ── */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger,
.btn-outline-success, .btn-outline-warning {
  background: rgba(251,247,238,0.5) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow:
    0 4px 14px rgba(31,36,48,0.07),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover,
.btn-outline-success:hover, .btn-outline-warning:hover {
  background: rgba(251,247,238,0.85) !important;
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px rgba(31,36,48,0.1),
    inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
.btn-outline-primary:active, .btn-outline-secondary:active, .btn-outline-danger:active,
.btn-outline-success:active, .btn-outline-warning:active {
  transform: translateY(0);
}

.btn-outline-primary   { color: var(--ink)       !important; }
.btn-outline-secondary { color: var(--ink-soft)  !important; }
.btn-outline-danger    { color: var(--pink-900)  !important; border-color: rgba(255,111,168,0.4) !important; }
.btn-outline-danger:hover { background: var(--pink-1) !important; }
.btn-outline-success    { color: var(--green-900)  !important; border-color: rgba(52,199,123,0.4) !important; }
.btn-outline-warning    { color: var(--orange-900) !important; border-color: rgba(255,138,76,0.4) !important; }

.btn-sm:hover { transform: translateY(-1px); }
.btn-sm:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════
   Badge — pill เกรเดียนต์อ่อนๆ
   ══════════════════════════════════════════════════════════ */
.bg-primary-subtle  { background-color: var(--blue-1)   !important; }
.text-primary         { color: var(--blue-900)  !important; }
.bg-success-subtle  { background-color: var(--green-1)  !important; }
.text-success         { color: var(--green-900) !important; }
.bg-warning-subtle  { background-color: var(--orange-1) !important; }
.text-warning         { color: var(--orange-900) !important; }
.bg-danger-subtle   { background-color: var(--pink-1)   !important; }
.text-danger          { color: var(--pink-900)  !important; }
.bg-secondary-subtle{ background-color: rgba(31,36,48,0.06) !important; }
.text-secondary       { color: var(--ink-soft) !important; }
.text-muted           { color: var(--ink-faint) !important; }
.badge { border-radius: 10px !important; font-weight: 700 !important; padding: 5px 10px !important; }

/* badge สถานะแบบสีเข้ม (ไม่ใช่ subtle) — ใช้เกรเดียนต์เดียวกับ stat card
   เพื่อให้ดูเป็นธีมเดียวกันทั้งระบบ ไม่หลุดเป็นสี Bootstrap ดั้งเดิม */
.badge.bg-success {
  background: linear-gradient(135deg, var(--green-2), var(--green-3)) !important;
  color: var(--green-900) !important;
}
.badge.bg-warning {
  background: linear-gradient(135deg, var(--orange-2), var(--orange-3)) !important;
  color: var(--orange-900) !important;
}
.badge.bg-danger {
  background: linear-gradient(135deg, var(--pink-2), var(--pink-3)) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   Tables
   ══════════════════════════════════════════════════════════ */
.table-light, .table > :not(caption) > * > * { background-color: transparent; }
.table-light { background-color: rgba(251,247,238,0.5) !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(251,247,238,0.6) !important; }
.pp5-tbl th { font-size: 15px; white-space: nowrap; color: var(--ink-soft); }
.pp5-tbl td { font-size: 16px; }
#score-table { width: auto; margin: 0 auto; }
#score-table input.form-control { font-size: 16px; }
.score-input {
  width: 66px !important;
  min-width: unset;
  padding: 2px 4px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
}
.form-control, .form-select {
  border-radius: 12px !important;
  border-color: var(--border-glass) !important;
  background-color: rgba(251,247,238,0.7) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue-3) !important;
  box-shadow: 0 0 0 3px rgba(61,155,255,0.15) !important;
}

/* Badge เกรด — ไล่สีตามระดับผลการเรียน */
.grade-high  { background: var(--green-1)  !important; color: var(--green-900)  !important; }
.grade-mid   { background: var(--blue-1)   !important; color: var(--blue-900)   !important; }
.grade-low   { background: var(--orange-1) !important; color: var(--orange-900) !important; }
.grade-fail  { background: var(--pink-1)   !important; color: var(--pink-900)   !important; }

/* สถานะพิเศษ (ปกติ/ร/มส) วางข้างๆ badge เกรดในหน้ากรอกคะแนน */
.grade-cell-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.grade-status-select {
  display: block;
  width: 64px;
  font-size: 12px;
  padding: 1px 4px !important;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   Upload zone
   ══════════════════════════════════════════════════════════ */
.upload-zone {
  border: 2px dashed rgba(61,155,255,0.35);
  border-radius: var(--r-lg);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  background-color: rgba(251,247,238,0.5);
}
.upload-zone:hover, .upload-zone.drag-over {
  background: var(--blue-1);
  border-color: var(--blue-3);
}

/* ══════════════════════════════════════════════════════════
   เวลาเรียน — สีแจ้งเตือน
   ══════════════════════════════════════════════════════════ */
.att-bad  { color: var(--pink-900); }
.att-warn { color: var(--orange-900); }
.att-sub-hdr { font-size: 15px; font-weight: 600; background: rgba(251,247,238,0.5); }
#attendance-table input.att-input { font-size: 15px; padding: 2px 4px; text-align: center; }

/* สถานะรายชั่วโมง (มา/ขาด/ลา/ป่วย) — ไฮไลต์สีให้เห็นเด่นในตารางที่มีคอลัมน์เยอะ */
.hourly-status.status-absent {
  background-color: var(--pink-1) !important;
  color: var(--pink-900) !important;
  border-color: rgba(255,111,168,0.5) !important;
  font-weight: 700 !important;
}
.hourly-status.status-leave {
  background-color: var(--blue-1) !important;
  color: var(--blue-900) !important;
  border-color: rgba(61,155,255,0.5) !important;
  font-weight: 700 !important;
}
.hourly-status.status-sick {
  background-color: var(--orange-1) !important;
  color: var(--orange-900) !important;
  border-color: rgba(255,138,76,0.5) !important;
  font-weight: 700 !important;
}

/* ── สรุปเวลาเรียนรายเทอม — การ์ดพื้นขาวโดดเด่น คอลัมน์กว้างพอดีกับข้อความ
   (ไม่ใช้พื้นโปร่งแสงแบบตารางทั่วไป เพราะตัวเลขเยอะ/แน่น อ่านยากถ้าทับพื้นไล่สี) ── */
.att-summary-wrap {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 6px;
  box-shadow: var(--shadow-soft);
}
.att-summary-tbl th, .att-summary-tbl td {
  background-color: #fff !important;
  border-color: rgba(31,36,48,0.1) !important;
  padding: 9px 14px !important;
  white-space: nowrap;
}
.att-summary-tbl thead th {
  color: var(--blue-900) !important;
  font-weight: 700 !important;
}
.att-summary-tbl thead tr:first-child th { background-color: var(--blue-1) !important; }
.att-summary-tbl .att-sub-hdr { background-color: rgba(126,195,255,0.18) !important; }
.att-summary-tbl .col-name { min-width: 170px; text-align: left !important; }
.att-summary-tbl th.text-center, .att-summary-tbl td.text-center { min-width: 42px; }

/* ── การ์ดตารางพื้นขาวทึบ (ใช้ทั่วไป) — ครอบตารางกรอกคะแนน/ตัวชี้วัด/ผลประเมิน/
   เวลาเรียนรายชั่วโมงในหน้ากรอกคะแนนของครู ที่แต่ก่อนวางตารางลอยๆ ไม่มีการ์ดครอบ
   ทำให้โปร่งใสทับพื้นไล่สีจนอ่านยาก ไม่แก้ padding เดิมเพราะตารางพวกนี้คอลัมน์แน่น
   อยู่แล้ว (จงใจบีบเพื่อให้พอดีจอ) แก้แค่พื้นหลัง/สีหัวตารางให้ชัดเจนขึ้น ── */
.tbl-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 6px;
  box-shadow: var(--shadow-soft);
}
.tbl-card table th, .tbl-card table td {
  background-color: #fff !important;
  border-color: rgba(31,36,48,0.1) !important;
}
.tbl-card table thead th { color: var(--blue-900) !important; font-weight: 700 !important; }
.tbl-card table thead tr:first-child th { background-color: var(--blue-1) !important; }
.tbl-card table thead tr:not(:first-child) th { background-color: rgba(126,195,255,0.18) !important; }
.tbl-card table tfoot td { background-color: rgba(126,195,255,0.12) !important; }
.tbl-card table .col-name { text-align: left !important; }

/* ══════════════════════════════════════════════════════════
   A4 / เอกสารพิมพ์ — คงสไตล์ทางการไว้เหมือนเดิม ไม่ใช้ธีม Bento
   เพราะเป็นเอกสารราชการที่ต้องดูเป็นทางการตอนพิมพ์ออกมาจริง
   ══════════════════════════════════════════════════════════ */
.a4-frame {
  background: rgba(255,255,255,0.5);
  padding: 16px;
  border-radius: var(--r-lg);
}
.a4-page {
  background: #fff;
  width: 100%;
  max-width: 794px;
  margin: 0 auto;
  padding: 24px 28px;
  font-size: 14px;
  color: #1a1a1a;
  font-family: 'TH SarabunPSK', 'Sarabun', sans-serif;
  border-radius: var(--r-md);
}
.a4-title    { text-align: center; font-size: 16px; font-weight: 600; }
.a4-subtitle { text-align: center; font-size: 13px; color: #555; margin-bottom: 8px; }
.a4-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 4px;
}

.sig-row {
  display: flex;
  justify-content: space-around;
  margin-top: 28px;
  gap: 12px;
  flex-wrap: wrap;
}
.sig-box { text-align: center; font-size: 12px; min-width: 160px; }
.sig-line { border-top: 0.5px solid #999; margin-top: 32px; padding-top: 4px; }

/* ══════════════════════════════════════════════════════════
   Print styles — ห้ามแก้ logic เดิม (ผ่านการแก้บั๊กหลายรอบแล้ว)
   ══════════════════════════════════════════════════════════ */
@media print {
  @page { size: A4 portrait; margin: 12mm; }

  .navbar, .nav-tabs, .btn, .upload-zone, .alert { display: none !important; }

  .a4-frame {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .tab-pane { display: none !important; }
  .tab-pane.print-target { display: block !important; opacity: 1 !important; }

  body, .a4-page, .a4-page * {
    font-family: 'TH SarabunPSK', 'Sarabun', sans-serif !important;
    font-size: 16pt !important;
    color: #000 !important;
    background-color: #fff !important;
    background-image: none !important;
  }

  .a4-page {
    max-width: 100%;
    padding: 0;
  }

  .a4-title    { font-size: 18pt !important; }
  .a4-subtitle { font-size: 14pt !important; }

  .pp5-print-tbl, .pp5-print-tbl * {
    font-size: 10pt !important;
  }
  #score-table.pp5-print-tbl, #score-table.pp5-print-tbl * {
    font-size: 8.5pt !important;
  }

  .pf-print-label {
    display: inline !important;
    font-weight: 600;
  }

  .pp5-print-tbl input.form-control {
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .grade-status-select { display: none !important; }
}