/* Admin panel */
:root{
  --orange:#ff6b00;--orange-deep:#c4500a;--gold:#f5c542;
  --bg:#0e1116;--panel:#161a22;--panel-2:#1d222c;--line:#262c38;
  --txt:#e7eaf0;--muted:#8b93a3;--font:'Kanit','Sarabun',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--txt);display:flex;min-height:100vh}
a{color:inherit;text-decoration:none}

/* Sidebar */
.sidebar{width:250px;background:var(--panel);border-right:1px solid var(--line);padding:22px 0;position:fixed;height:100vh;overflow:auto}
.sidebar .logo{display:flex;align-items:center;gap:.6rem;padding:0 22px 18px;font-weight:700;border-bottom:1px solid var(--line);margin-bottom:14px}
.sidebar .logo span{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--gold));display:grid;place-items:center;color:#111}
.sidebar nav a{display:flex;align-items:center;gap:.7rem;padding:.8rem 22px;color:var(--muted);transition:.2s;font-size:.95rem}
.sidebar nav a:hover,.sidebar nav a.active{background:var(--panel-2);color:#fff;border-left:3px solid var(--orange)}
.sidebar .signout{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}

/* Main */
.main{margin-left:250px;flex:1;padding:26px 32px;width:calc(100% - 250px)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.topbar h1{font-size:1.5rem}
.topbar .user{color:var(--muted);font-size:.9rem}

/* Cards / stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:26px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;position:relative;overflow:hidden}
.stat .v{font-size:2rem;font-weight:700}
.stat .l{color:var(--muted);font-size:.9rem;margin-top:4px}
.stat .ic{position:absolute;right:14px;top:14px;font-size:1.6rem;opacity:.5}
.stat.t-total{border-top:3px solid #6c8cff}
.stat.t-pending{border-top:3px solid #f0ad4e}
.stat.t-paid{border-top:3px solid #0d6efd}
.stat.t-approved{border-top:3px solid #28a745}
.stat.t-rejected{border-top:3px solid #dc3545}
.stat.t-money{border-top:3px solid var(--gold)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:22px}
.panel h2{font-size:1.1rem;margin-bottom:16px}

/* Table */
table{width:100%;border-collapse:collapse}
th,td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}
tbody tr:hover{background:var(--panel-2)}
.badge{padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap}

/* Filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filters input,.filters select{padding:.6rem .8rem;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:#fff;font-family:inherit}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:10px;font-weight:600;
  cursor:pointer;border:none;font-family:inherit;font-size:.9rem;transition:.2s}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff}
.btn-primary:hover{opacity:.9}
.btn-sm{padding:.4rem .8rem;font-size:.82rem}
.btn-ghost{background:var(--panel-2);border:1px solid var(--line);color:#fff}
.btn-success{background:#28a745;color:#fff}
.btn-danger{background:#dc3545;color:#fff}

/* Pagination */
.pagination{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap}
.pagination a,.pagination span{padding:.45rem .8rem;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);font-size:.9rem}
.pagination .cur{background:var(--orange);border-color:var(--orange)}

/* Login */
.login-wrap{margin:auto;width:min(420px,92%)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px}
.login-card h1{text-align:center;margin-bottom:6px}
.login-card .sub{text-align:center;color:var(--muted);margin-bottom:24px;font-size:.9rem}
.login-card .field{margin-bottom:16px;display:flex;flex-direction:column}
.login-card label{font-size:.88rem;margin-bottom:.4rem;color:var(--muted)}
.login-card input{padding:.8rem 1rem;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);color:#fff;font-family:inherit;font-size:1rem}
.login-card input:focus{outline:none;border-color:var(--orange)}
.alert{padding:.8rem 1rem;border-radius:10px;margin-bottom:16px;font-size:.9rem}
.alert-err{background:#dc354522;color:#ff8a96;border:1px solid #dc354555}
.alert-ok{background:#28a74522;color:#7ee2a0;border:1px solid #28a74555}

/* Detail grid */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.kv span{color:var(--muted)}
.thumb{width:90px;height:90px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.doc-link{display:inline-block;padding:.5rem .9rem;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;margin:4px 6px 4px 0;font-size:.88rem}

@media(max-width:820px){
  .sidebar{transform:translateX(-100%);transition:.3s;z-index:100}
  .sidebar.open{transform:none}
  .main{margin-left:0;width:100%}
  .detail-grid{grid-template-columns:1fr}
  .mobile-menu{display:inline-block!important}
}
.mobile-menu{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}