:root{
  --ink:#1f2430; --muted:#5b6472; --accent:#1d5b79; --accent2:#468b97;
  --gold:#b08442; --line:#dde3ea; --soft:#f4f7fa; --bg:#eef2f6;
  --ok:#2f7d4f; --warn:#b0632f; --danger:#b23b3b; --white:#fff;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"Segoe UI",system-ui,Arial,sans-serif; color:var(--ink);
  background:var(--bg); font-size:15px; line-height:1.45;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--accent); color:#fff; padding:10px 18px; gap:10px;
}
.brand{font-weight:700; font-size:18px; display:flex; align-items:center; gap:8px}
.logo{color:var(--gold)}
nav a{color:#dbe7ee; margin-left:16px; font-weight:600; padding:4px 2px; border-bottom:2px solid transparent}
nav a.active{color:#fff; border-bottom-color:var(--gold)}
main{max-width:1000px; margin:22px auto; padding:0 16px}
.appfoot{text-align:center; color:var(--muted); font-size:12px; padding:18px}
.loading{padding:40px; text-align:center; color:var(--muted)}

/* Cards */
.card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin:14px 0;
      box-shadow:0 1px 2px rgba(20,40,60,.04)}
.card h2{margin:0 0 10px; color:var(--accent); font-size:18px}
.card h3{margin:14px 0 6px; color:var(--accent2); font-size:15px}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end}
.grow{flex:1 1 180px}
.page-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:6px}
.page-head h1{font-size:22px; color:var(--accent); margin:0}

/* Forms */
label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin:8px 0 3px; text-transform:uppercase; letter-spacing:.3px}
input,select,textarea{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent2); border-color:var(--accent2)}
textarea{min-height:60px; resize:vertical}
.btn{
  display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:7px;
  padding:9px 14px; font:inherit; font-weight:600; cursor:pointer;
}
.btn:hover{background:#17495f}
.btn.sec{background:#fff; color:var(--accent); border:1px solid var(--accent)}
.btn.gold{background:var(--gold)}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.btn.sm{padding:5px 9px; font-size:13px}
.btn.danger{background:var(--danger)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btnbar{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

/* Tables */
table{border-collapse:collapse; width:100%; margin-top:8px; font-size:14px}
th,td{border-bottom:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
th{color:var(--accent); font-size:12px; text-transform:uppercase; letter-spacing:.4px}
tbody tr:hover{background:var(--soft)}
.r{text-align:right}
.num{font-variant-numeric:tabular-nums}

/* Badges & misc */
.badge{display:inline-block; padding:1px 9px; border-radius:12px; font-size:12px; font-weight:600;
       background:var(--soft); border:1px solid var(--line); color:var(--accent)}
.badge.draft{color:var(--muted)}
.badge.confirmed,.badge.issued{color:var(--accent); border-color:var(--accent2)}
.badge.completed,.badge.paid{color:var(--ok); border-color:var(--ok)}
.badge.cancelled,.badge.void{color:var(--danger); border-color:var(--danger)}
.badge.in_progress{color:var(--gold); border-color:var(--gold)}
.muted{color:var(--muted)}
.pill{background:var(--soft); border:1px solid var(--line); border-radius:20px; padding:1px 8px; font-size:12px; margin:2px}
.right{margin-left:auto}
.toast{position:fixed; right:16px; bottom:16px; max-width:340px; padding:12px 14px; border-radius:8px;
       color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.2); z-index:50; font-size:14px}
.toast.err{background:var(--danger)} .toast.ok{background:var(--ok)}
.alert{border-left:4px solid var(--gold); background:#fbf5ea; padding:8px 12px; border-radius:0 6px 6px 0; margin:8px 0}
.alert.err{border-color:var(--danger); background:#fbeeee}
.kv{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:14px; margin:2px 0}
.kv b{color:var(--ink)}
.totline{display:flex; justify-content:space-between; padding:3px 0}
.totline.grand{font-weight:700; font-size:17px; color:var(--accent); border-top:2px solid var(--line); margin-top:4px; padding-top:6px}
.empty{color:var(--muted); padding:16px; text-align:center}
/* Auth: user bar + login + role badges */
.userbar{margin-left:auto; display:flex; align-items:center; gap:10px; color:#dbe7ee; font-size:13px}
.userbar .who{font-weight:600; color:#fff}
.userbar .btn{padding:4px 10px; font-size:13px}
.rolebadge{display:inline-block; padding:1px 8px; border-radius:12px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; background:#fff; color:var(--accent)}
.rolebadge.admin{background:var(--gold); color:#fff}
.rolebadge.coordinator{background:#2f7d4f; color:#fff}
.rolebadge.finance{background:#1d5b79; color:#fff}
.rolebadge.viewer{background:#8a97a6; color:#fff}
body.logged-out #nav, body.logged-out #userbar{display:none}
.login-wrap{max-width:380px; margin:8vh auto}
.login-wrap .card{padding:22px 24px}
.login-wrap h2{text-align:center}
.login-hint{font-size:12px; color:var(--muted); text-align:center; margin-top:10px}
@media (max-width:560px){
  main{margin:12px auto}
  .topbar{flex-direction:column; align-items:flex-start}
  nav a{margin-left:0; margin-right:16px}
  .userbar{margin-left:0; margin-top:6px}
}