@import url('fonts.css');

/* ===== ธีมหรูหรา: น้ำเงินกรม × ทองคำ ===== */
:root{
  --navy:#122a5e; --navy-d:#0c1d43; --navy-l:#274a94; --navy-ink:#0a1730;
  --gold:#c9a227; --gold-l:#e7c86a; --gold-d:#9c7c16; --gold-soft:#f6edcf;
  --amber:#c9a227; --amber-d:#9c7c16;               /* alias เดิม → ทอง */
  --bg:#eaeef6; --card:#ffffff; --line:#e6e9f2; --line-2:#eef1f8;
  --ink:#16203a; --muted:#5b6480; --soft:#98a2bd;
  --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7;
  --danger:#dc2626; --danger-bg:#fee2e2; --info:#0369a1; --info-bg:#e0f2fe;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(12,29,67,.06), 0 6px 20px -6px rgba(12,29,67,.12);
  --shadow-lg:0 20px 50px -12px rgba(12,29,67,.28);
  --gold-grad:linear-gradient(135deg,var(--gold-l),var(--gold) 55%,var(--gold-d));
  --navy-grad:linear-gradient(135deg,var(--navy-l),var(--navy) 60%,var(--navy-d));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);
  font-family:'Sarabun','TH Sarabun New',system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  background:
    radial-gradient(1100px 560px at 100% -8%, rgba(201,162,39,.12), transparent 58%),
    radial-gradient(950px 520px at -8% 2%, rgba(18,42,94,.12), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--navy-l);text-decoration:none;transition:.15s}
a:hover{color:var(--navy);text-decoration:underline}
h1,h2,h3{margin:0 0 .5em;line-height:1.28;letter-spacing:-.01em;color:var(--navy-ink)}
h1{font-size:1.55rem;font-weight:700}
h2{font-size:1.2rem;font-weight:700}
::selection{background:var(--gold-soft)}

/* ===== แถบบน / เมนู ===== */
.topbar{
  background:var(--navy-grad);color:#fff;position:sticky;top:0;z-index:50;
  border-bottom:2px solid transparent;
  border-image:var(--gold-grad) 1;
  box-shadow:0 6px 24px -8px rgba(10,23,48,.5);
}
.topbar-inner{max-width:1180px;margin:0 auto;padding:.6rem 1.1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none}
.brand img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:12px;padding:3px;
  box-shadow:0 0 0 2px var(--gold), 0 4px 12px rgba(0,0,0,.25)}
.brand:hover{text-decoration:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:1.08rem;letter-spacing:.01em}
.brand-text small{font-size:.74rem;color:var(--gold-l);opacity:.95;letter-spacing:.04em}
.nav-toggle{display:none;margin-left:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:1.3rem;border-radius:10px;padding:.2rem .6rem;cursor:pointer}
.mainnav{display:flex;align-items:center;gap:.15rem;margin-left:auto;flex-wrap:wrap}
.mainnav a{color:rgba(255,255,255,.86);padding:.5rem .85rem;border-radius:10px;font-size:.94rem;display:inline-flex;align-items:center;gap:.4rem;position:relative;transition:.18s}
.mainnav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
.mainnav a.active{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.mainnav a.active::after{content:'';position:absolute;left:.85rem;right:.85rem;bottom:.15rem;height:2px;border-radius:2px;background:var(--gold-grad)}
.mainnav .ico{font-size:1.05rem}
.badge{background:var(--gold-grad);color:#3b2600;font-weight:800;font-size:.72rem;border-radius:999px;padding:.05rem .45rem;min-width:1.35em;text-align:center;box-shadow:0 2px 6px rgba(156,124,22,.5)}
.nav-user{display:flex;align-items:center;gap:.5rem;margin-left:.6rem;padding-left:.8rem;border-left:1px solid rgba(255,255,255,.2)}
.nav-user .uname{font-size:.9rem;color:rgba(255,255,255,.92);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-ghost{color:#fff !important;font-size:.85rem;padding:.32rem .7rem;border:1px solid rgba(231,200,106,.5);border-radius:9px;transition:.15s}
.btn-ghost:hover{background:rgba(231,200,106,.16);border-color:var(--gold-l);text-decoration:none}

/* ===== เลย์เอาต์ ===== */
.container{max-width:1180px;margin:0 auto;padding:1.6rem 1.1rem 3.5rem}
.footer{text-align:center;color:var(--muted);font-size:.85rem;padding:1.5rem;border-top:1px solid var(--line)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.page-head h1{position:relative;padding-left:.9rem}
.page-head h1::before{content:'';position:absolute;left:0;top:.12em;bottom:.12em;width:5px;border-radius:3px;background:var(--gold-grad)}
.page-head .sub{color:var(--muted);font-size:.95rem}

/* ===== การ์ด ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 1.4rem;margin-bottom:1.3rem;transition:transform .18s, box-shadow .18s}
.card:hover{box-shadow:0 10px 30px -10px rgba(12,29,67,.2)}
.card h2{margin-top:0;position:relative}
.card h2::after{content:'';display:block;width:44px;height:3px;border-radius:3px;background:var(--gold-grad);margin-top:.4rem}
.grid{display:grid;gap:1.15rem}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

/* ===== การ์ดสถิติ ===== */
.stat{position:relative;overflow:hidden;border-radius:var(--radius);padding:1.2rem 1.3rem;color:#fff;box-shadow:var(--shadow);transition:transform .18s, box-shadow .18s}
.stat::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat .n{font-size:2.2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .t{font-size:.96rem;opacity:.94;margin-top:.35rem}
.stat .u{font-size:.8rem;opacity:.82}
.stat .em{position:absolute;right:.7rem;top:.55rem;font-size:2.5rem;opacity:.3}
.stat.sick{background:linear-gradient(135deg,#f0616e,#b91c1c)}
.stat.personal{background:linear-gradient(135deg,#4f8cf7,#1d4ed8)}
.stat.maternity{background:linear-gradient(135deg,#ef77b0,#be185d)}
.stat.total{background:var(--navy-grad)}
.stat.total,.stat.pending{box-shadow:0 0 0 1px rgba(231,200,106,.35), var(--shadow)}
.stat.pending{background:var(--gold-grad);color:#3b2600}
.stat.pending .em{opacity:.35}
.stat.teachers{background:linear-gradient(135deg,#12b886,#047857)}

/* ===== ปุ่ม ===== */
.btn{display:inline-flex;align-items:center;gap:.45rem;justify-content:center;
  background:var(--navy);color:#fff;border:0;border-radius:11px;padding:.62rem 1.2rem;
  font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:.16s;
  box-shadow:0 4px 12px -4px rgba(12,29,67,.4)}
.btn:hover{background:var(--navy-d);text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(12,29,67,.5)}
.btn:active{transform:translateY(0)}
.btn.gold,.btn.amber{background:var(--gold-grad);color:#3b2600;box-shadow:0 4px 12px -4px rgba(156,124,22,.55)}
.btn.gold:hover,.btn.amber:hover{filter:brightness(1.04);background:var(--gold-grad)}
.btn.ok{background:linear-gradient(135deg,#1ea952,var(--ok))}.btn.ok:hover{filter:brightness(.95)}
.btn.danger{background:linear-gradient(135deg,#ef4444,var(--danger))}.btn.danger:hover{filter:brightness(.95)}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:#fff;border-color:var(--gold);color:var(--navy-d);box-shadow:0 4px 12px -6px rgba(156,124,22,.4)}
.btn.sm{padding:.35rem .75rem;font-size:.85rem;border-radius:9px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ===== ตาราง ===== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm)}
table.data{width:100%;border-collapse:collapse;font-size:.95rem}
table.data th,table.data td{padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--line)}
table.data th{background:linear-gradient(var(--line-2),var(--line-2));color:var(--navy);font-weight:700;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;text-transform:none}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr{transition:.12s}
table.data tr:hover td{background:#faf8f0}
table.data td.num,table.data th.num{text-align:center;font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--muted);padding:2.6rem 1rem}
.empty .em{font-size:2.8rem;display:block;margin-bottom:.4rem;opacity:.55}

/* ===== ฟอร์ม ===== */
.form-row{margin-bottom:1.05rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
label.lbl{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem;color:#2b3654}
.req{color:var(--danger)}
input[type=text],input[type=password],input[type=date],input[type=tel],input[type=number],input[type=email],select,textarea{
  width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:.16s}
input:hover,select:hover,textarea:hover{border-color:#cdd4e6}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
input:read-only,input[readonly]{background:#f4f6fb;color:#475569}
textarea{resize:vertical;min-height:84px}
.hint{font-size:.82rem;color:var(--muted);margin-top:.35rem}
.radio-line{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.radio-line label{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;cursor:pointer;
  border:1px solid var(--line);padding:.45rem .85rem;border-radius:10px;transition:.15s}
.radio-line label:hover{border-color:var(--gold);background:#fffdf6}
.radio-line input{width:auto;accent-color:var(--navy)}

/* ===== flash ===== */
.flash{padding:.85rem 1.15rem;border-radius:11px;margin-bottom:1rem;font-weight:500;border:1px solid transparent;box-shadow:var(--shadow)}
.flash-ok{background:var(--ok-bg);color:#166534;border-color:#bbf7d0}
.flash-danger,.flash-err{background:var(--danger-bg);color:#991b1b;border-color:#fecaca}
.flash-warn{background:var(--warn-bg);color:#92400e;border-color:#fde68a}
.flash-info{background:var(--info-bg);color:#075985;border-color:#bae6fd}

/* ===== ป้ายสถานะ ===== */
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .7rem;border-radius:999px;font-size:.82rem;font-weight:700;letter-spacing:.01em}
.pill.ok{background:var(--ok-bg);color:#166534}
.pill.warn{background:var(--warn-bg);color:#92400e}
.pill.danger{background:var(--danger-bg);color:#991b1b}
.pill.muted{background:#eef1f8;color:var(--muted)}

/* ===== timeline ===== */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 1.1rem 1.7rem;border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent}
.timeline li::before{content:'';position:absolute;left:-7px;top:2px;width:13px;height:13px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.timeline li.done::before{background:var(--ok)}
.timeline li.deny::before{background:var(--danger)}
.timeline .tl-time{font-size:.8rem;color:var(--muted)}

/* ===== แท็บช่วงเวลา ===== */
.tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.1rem}
.tabs a{padding:.42rem .95rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:.9rem;font-weight:600;transition:.15s}
.tabs a.active{background:var(--navy-grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px -4px rgba(12,29,67,.4)}
.tabs a:hover{text-decoration:none;border-color:var(--gold)}
.tabs a.active:hover{border-color:transparent}

/* ===== เบ็ดเตล็ด ===== */
.muted{color:var(--muted)}
.right{text-align:right}.center{text-align:center}
.mt{margin-top:1rem}.mb{margin-bottom:1rem}
.flex{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.chart-box{position:relative;height:300px}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:1.3rem 0;border:0}

/* ===== หน้า login ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;position:relative;overflow:hidden;
  background:
    radial-gradient(700px 400px at 80% 10%, rgba(201,162,39,.28), transparent 60%),
    radial-gradient(600px 500px at 10% 90%, rgba(39,74,148,.5), transparent 60%),
    var(--navy-grad)}
.auth-card{position:relative;background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);padding:2.4rem 2rem;width:100%;max-width:480px;text-align:center;
  border-top:4px solid transparent;border-image:var(--gold-grad) 1}
.auth-card img{width:92px;height:92px;object-fit:contain;margin-bottom:.6rem;
  border-radius:16px;padding:4px;box-shadow:0 0 0 2px var(--gold-soft)}
.auth-card h1{font-size:1.12rem;color:var(--navy);white-space:nowrap;letter-spacing:-.01em}
@media(max-width:520px){.auth-card h1{white-space:normal;font-size:1.05rem}}
.auth-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:1.6rem}
.auth-card .form-row{text-align:left}

/* ===== responsive ===== */
@media(max-width:860px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .mainnav{display:none;width:100%;flex-direction:column;align-items:stretch;margin-top:.5rem}
  body.nav-open .mainnav{display:flex}
  .mainnav a{width:100%}
  .mainnav a.active::after{display:none}
  .nav-user{margin:0;padding:.5rem 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.2);width:100%;flex-wrap:wrap}
  .nav-user .uname{max-width:none}
}