[hidden]{display:none !important}
:root{
  --navy:#0f1f3d; --navy-2:#182c52; --navy-3:#24406f;
  --gold:#c9a24a; --gold-l:#e6c97a; --gold-d:#9c7a2c;
  --sand:#f5efe4; --beige:#ebe1cf; --paper:#fffdf8;
  --terra:#8e3a2a; --ink:#1d2433; --muted:#6b6f7a; --line:#e2d8c4;
  --ok:#2f7d4f; --ok-bg:#e5f3ea; --warn:#b7791f; --warn-bg:#fdf3dc;
  --bad:#b23b3b; --bad-bg:#f9e4e4; --gray-bg:#eceae5;
  --radius:16px; --shadow:0 10px 30px rgba(15,31,61,.10);
  --font:'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--sand);
  background-image:radial-gradient(circle at 20% 0%, rgba(201,162,74,.10), transparent 40%),
                   radial-gradient(circle at 100% 100%, rgba(15,31,61,.06), transparent 45%);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:16px}
a{color:inherit}

/* Header */
.top{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 60%,var(--navy-3) 100%);
  color:#fff; padding:18px 20px; display:flex; align-items:center; gap:16px;
  border-bottom:3px solid var(--gold); position:relative; overflow:hidden;
}
.top::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(230,201,122,.05) 22px 23px);
  pointer-events:none;
}
.top .logo{height:62px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.top .titles{flex:1;min-width:0;position:relative;z-index:1}
.top .org{color:var(--gold-l);font-weight:700;font-size:14px;letter-spacing:.3px}
.top h1{margin:2px 0 0;font-size:26px;font-weight:800}
.top .badge{
  position:relative;z-index:1;border:1px solid rgba(230,201,122,.5);color:var(--gold-l);
  border-radius:999px;padding:8px 14px;font-size:13px;white-space:nowrap;background:rgba(0,0,0,.15)
}
@media (max-width:640px){
  .top{flex-wrap:wrap;padding:14px}
  .top .logo{height:48px}
  .top h1{font-size:21px}
  .top .badge{width:100%;text-align:center;white-space:normal}
}

/* Generic */
.wrap{max-width:1080px;margin:0 auto;padding:22px 16px 60px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{
  border:0;border-radius:12px;padding:13px 22px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-gold{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--navy);box-shadow:0 4px 14px rgba(201,162,74,.35)}
.btn-gold:not(:disabled):hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-ok{background:var(--ok);color:#fff}
.btn-bad{background:var(--bad);color:#fff}
.btn-sm{padding:8px 14px;font-size:14px;border-radius:10px}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:14px;color:var(--navy)}
.field label .req{color:var(--terra)}
.field small{color:var(--muted);font-size:12.5px}
.input,select.input,textarea.input{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,74,.18)}
.input.err{border-color:var(--bad);box-shadow:0 0 0 4px rgba(178,59,59,.12)}
textarea.input{min-height:120px;resize:vertical;line-height:1.7}

.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700}
.chip.pending{background:var(--warn-bg);color:var(--warn)}
.chip.approved{background:var(--ok-bg);color:var(--ok)}
.chip.rejected{background:var(--bad-bg);color:var(--bad)}
.chip.cancelled{background:var(--gray-bg);color:var(--muted)}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120px);
  background:var(--navy);color:#fff;padding:13px 20px;border-radius:12px;box-shadow:var(--shadow);
  transition:.3s;z-index:100;max-width:92vw;text-align:center;border-inline-start:4px solid var(--gold);opacity:0;pointer-events:none
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.bad{border-inline-start-color:var(--bad)}

.loader{position:fixed;inset:0;background:rgba(245,239,228,.75);display:none;align-items:center;justify-content:center;z-index:90;backdrop-filter:blur(2px)}
.loader.show{display:flex}
.spinner{width:46px;height:46px;border-radius:50%;border:4px solid var(--beige);border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.footer{text-align:center;color:var(--muted);font-size:12.5px;padding:10px 0 26px}