:root{
  --navy: #0f2a4a;
  --navy-dark: #0a1d33;
  --gold: #b8891f;
  --gold-light: #d9a441;
  --bg: #f4f6f9;
  --paper: #ffffff;
  --ink: #1e2b3a;
  --muted: #6b7788;
  --success: #1e7e4f;
  --danger: #b3261e;
  --warning: #b8891f;
  --border: #e2e6ec;
}

*{ box-sizing: border-box; }

body{
  background: var(--bg);
  font-family: 'Sarabun', sans-serif;
  color: var(--ink);
}

/* ---------- Navbar ---------- */
.app-navbar{
  background: linear-gradient(90deg, var(--navy-dark) 0%, var(--navy) 100%);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.app-navbar .nav-link{
  color: rgba(255,255,255,.82);
  font-weight: 500;
  padding: .55rem .9rem;
  border-radius: 6px;
  transition: background .15s;
}
.app-navbar .nav-link:hover, .app-navbar .nav-link.active{
  color: #fff;
  background: rgba(255,255,255,.12);
}
.app-navbar .navbar-brand{ color: #fff; }
.app-navbar .navbar-brand i{ color: var(--gold-light); }

/* ---------- Login page ---------- */
.login-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, #16385f, var(--navy-dark) 60%);
  padding: 1.5rem;
}
.login-card{
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.login-card .brand-bar{
  background: linear-gradient(90deg, var(--navy) 0%, var(--gold) 130%);
  padding: 2rem 2rem 1.4rem;
  color: #fff;
  text-align: center;
}
.login-card .brand-bar i{ font-size: 2.4rem; color: #fff; }
.login-card .brand-bar h1{ font-size: 1.15rem; margin-top: .5rem; font-weight: 600; }
.login-card .form-area{ padding: 1.8rem 2rem 2.2rem; }

/* ---------- Cards / panels ---------- */
.panel{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: 0 1px 3px rgba(15,42,74,.04);
}
.stat-card{
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.stat-card i{ font-size: 2rem; opacity: .35; position: absolute; right: 1rem; top: 1rem; }
.stat-card .num{ font-size: 1.9rem; font-weight: 700; }
.stat-card .label{ font-size: .85rem; opacity: .9; }
.stat-card.bg-navy{ background: linear-gradient(135deg, var(--navy), #1a4675); }
.stat-card.bg-gold{ background: linear-gradient(135deg, var(--gold), #d9a441); }
.stat-card.bg-success{ background: linear-gradient(135deg, #146c43, var(--success)); }
.stat-card.bg-danger{ background: linear-gradient(135deg, #8f1f19, var(--danger)); }

/* ---------- Table ---------- */
.table-doc thead th{
  background: var(--navy);
  color: #fff;
  font-weight: 500;
  border: none;
  white-space: nowrap;
}
.table-doc tbody tr{ cursor: pointer; }
.table-doc tbody tr:hover{ background: #eef3fa; }

/* ---------- Badges ---------- */
.badge-status{ font-weight: 500; padding: .4em .7em; border-radius: 20px; }
.badge-pending{ background:#fff4e0; color:#a05a00; }
.badge-in_progress{ background:#e3edfb; color:#0b4ea2; }
.badge-signed{ background:#e6f4ea; color:#146c43; }
.badge-completed{ background:#e6f4ea; color:#146c43; }
.badge-rejected{ background:#fbe7e6; color:#b3261e; }
.badge-urgent{ background:#fff4e0; color:#a05a00; }
.badge-very_urgent{ background:#fbe7e6; color:#b3261e; }
.badge-normal{ background:#eef1f5; color:#54606f; }

/* ---------- Signature pad ---------- */
.sig-pad-wrap{
  border: 2px dashed #c8d0dc;
  border-radius: 10px;
  background: #fbfcfe;
  touch-action: none;
}
#sigCanvas{ width: 100%; height: 220px; display: block; cursor: crosshair; touch-action: none; }

.timeline{ position: relative; padding-left: 1.6rem; }
.timeline::before{
  content:'';
  position:absolute; left: 6px; top: 4px; bottom: 4px; width: 2px;
  background: var(--border);
}
.timeline-item{ position: relative; padding-bottom: 1.3rem; }
.timeline-item::before{
  content:'';
  position:absolute; left: -1.6rem; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--navy); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--navy);
}
.timeline-item.done::before{ background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.timeline-item.rejected::before{ background: var(--danger); box-shadow: 0 0 0 2px var(--danger); }

.btn-navy{ background: var(--navy); border-color: var(--navy); color:#fff; }
.btn-navy:hover{ background: var(--navy-dark); border-color: var(--navy-dark); color:#fff; }
.btn-gold{ background: var(--gold); border-color: var(--gold); color:#fff; }
.btn-gold:hover{ background:#a17418; border-color:#a17418; color:#fff; }

.required::after{ content:' *'; color: var(--danger); }