/* ============================================================
   e-Pay Slip System — Global Stylesheet
   Thai Government Style · PHP 5.6 Compatible
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ─── CSS Variables ─── */
:root {
  --primary:       #1a3a6e;
  --primary-light: #2453a0;
  --primary-pale:  #e8eef8;
  --accent:        #c8a84b;
  --accent-light:  #f5edd6;
  --success:       #1a7a4a;
  --success-pale:  #d4eddf;
  --danger:        #b91c1c;
  --danger-pale:   #fee2e2;
  --warning:       #92400e;
  --warning-pale:  #fef3c7;
  --text:          #1a2333;
  --text-muted:    #5a6a7e;
  --border:        #d0d8e4;
  --bg:            #f0f4fa;
  --surface:       #ffffff;
  --radius:        10px;
  --radius-lg:     16px;
  --shadow:        0 2px 12px rgba(26,58,110,.10);
  --shadow-lg:     0 6px 28px rgba(26,58,110,.14);
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Sarabun', 'TH Sarabun New', 'TH SarabunPSK', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
}
a { color: var(--primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-weight:700; line-height:1.3; color:var(--primary); }
h2 { font-size:1.35rem; }
h3 { font-size:1.15rem; }

/* ─── Layout ─── */
.wrap { max-width:1140px; margin:0 auto; padding:20px 16px; }

/* ─── Card ─── */
.card {
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  border:1px solid rgba(26,58,110,.07);
  padding:22px 24px;
  margin-bottom:18px;
}

/* ─── Topbar / Brand ─── */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.brand  { display:flex; gap:14px; align-items:center; }

/* ─── Logo ─── */
.logo {
  width:52px; height:52px; border-radius:12px;
  background:linear-gradient(145deg,var(--primary),var(--primary-light));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem; letter-spacing:.04em;
  box-shadow:0 4px 14px rgba(26,58,110,.28); flex-shrink:0;
}

/* ─── Buttons ─── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  border:0; border-radius:8px; padding:9px 18px;
  font-size:.95rem; font-family:inherit; font-weight:600;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  line-height:1.4; transition:opacity .15s,box-shadow .15s;
}
.btn:hover { opacity:.88; text-decoration:none; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(26,58,110,.22); }
.btn-primary:hover { background:var(--primary-light); box-shadow:0 4px 14px rgba(26,58,110,.28); opacity:1; }
.btn-dark    { background:#1f2937; color:#fff; }
.btn-light   { background:#e8edf5; color:var(--primary); }
.btn-danger  { background:var(--danger); color:#fff; }
.btn-sm      { padding:6px 12px; font-size:.85rem; border-radius:6px; }

/* ─── Inputs ─── */
.input, select {
  width:100%; padding:10px 13px; border:1.5px solid var(--border);
  border-radius:8px; font-family:inherit; font-size:.97rem;
  color:var(--text); background:#fff; outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.input:focus, select:focus {
  border-color:var(--primary-light);
  box-shadow:0 0 0 3px rgba(36,83,160,.12);
}
label { display:block; font-weight:600; font-size:.9rem; color:var(--primary); margin-bottom:5px; }

/* ─── Grid ─── */
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.col-4 { grid-column:span 4; }
.col-6 { grid-column:span 6; }
.col-8 { grid-column:span 8; }
.col-12{ grid-column:span 12; }

/* ─── Summary boxes ─── */
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.summary .box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 20px; position:relative; overflow:hidden;
}
.summary .box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
}
.summary .box .muted { font-size:.85rem; color:var(--text-muted); margin-bottom:6px; }
.summary .box h2 { font-size:1.7rem; color:var(--primary); }

/* ─── Tables ─── */
.table { width:100%; border-collapse:collapse; font-size:.95rem; }
.table thead tr { background:var(--primary); }
.table thead th {
  color:#fff; font-weight:600; padding:11px 13px; text-align:left;
  font-size:.88rem; letter-spacing:.02em; border:none;
}
.table tbody tr { border-bottom:1px solid #edf1f7; transition:background .12s; }
.table tbody tr:hover { background:var(--primary-pale); }
.table tbody td { padding:10px 13px; vertical-align:middle; }
.table tbody tr:last-child { border-bottom:none; }
.table tfoot td,.table tfoot th { padding:10px 13px; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); }

/* ─── Alerts ─── */
.alert { padding:13px 16px; border-radius:9px; margin-bottom:14px; font-size:.95rem; border-left:4px solid transparent; }
.alert-danger  { background:var(--danger-pale);  color:var(--danger);  border-color:var(--danger); }
.alert-success { background:var(--success-pale); color:var(--success); border-color:var(--success); }
.alert-warning { background:var(--warning-pale); color:var(--warning); border-color:#f59e0b; }

/* ─── Badges ─── */
.badge { display:inline-block; padding:4px 11px; border-radius:999px; font-size:.8rem; font-weight:700; line-height:1.4; white-space:nowrap; }
.badge-success   { background:var(--success-pale); color:var(--success); }
.badge-warning   { background:var(--warning-pale); color:var(--warning); }
.badge-danger    { background:var(--danger-pale);  color:var(--danger);  }
.badge-secondary { background:#e5e7eb; color:#374151; }

/* ─── Utilities ─── */
.muted       { color:var(--text-muted); }
.text-right  { text-align:right; }
.text-center { text-align:center; }
.number      { text-align:right; }
.print-only  { display:none; }
.pill { display:inline-block; padding:4px 12px; border-radius:999px; background:var(--primary-pale); color:var(--primary); font-size:.82rem; font-weight:600; }
hr { border:none; border-top:1px solid var(--border); margin:16px 0; }

/* ─── Slip page (screen) ─── */
.slip-page { max-width:210mm; margin:0 auto; }

/* ─── Login ─── */
.login-wrap { max-width:440px; margin:48px auto 0; padding:0 16px; }

/* ─── Responsive ─── */
@media(max-width:768px){
  .col-4,.col-6,.col-8 { grid-column:span 12; }
  .summary { grid-template-columns:1fr 1fr; }
  .wrap { padding:12px; }
  .card { padding:16px; border-radius:12px; }
  .topbar { flex-direction:column; align-items:flex-start; }
  .topbar>div:last-child { width:100%; display:flex; flex-wrap:wrap; gap:8px; }
  .topbar>div:last-child .btn { flex:1; justify-content:center; }
  .table thead th,.table tbody td { padding:9px 10px; font-size:.88rem; }
}
@media(max-width:480px){
  .summary { grid-template-columns:1fr; }
  .btn { padding:8px 14px; font-size:.9rem; }
  h2 { font-size:1.15rem; }
}

/* ─── Print (general pages) ─── */
@media print{
  body { background:#fff !important; }
  .no-print { display:none !important; }
  .print-only { display:block; }
  .wrap { max-width:100%; padding:0; }
  .card { box-shadow:none; border-radius:0; border:none; margin:0; padding:0; }
  .table thead th,.table tbody td { font-size:11pt; padding:5px 7px; }
  @page { size:A4 portrait; margin:12mm 14mm; }
}