/* Commissioned International — Board Portal
   Brand colors from CI brand guidelines / logo SVGs:
     Indigo  #004F7A (primary)   Mid-blue #3A82B0 (secondary)   Gold #F2B03E (accent) */
:root {
  --indigo: #004f7a;
  --indigo-700: #013e60;
  --indigo-050: #e8f1f7;
  --blue: #3a82b0;
  --blue-050: #eaf2f8;
  --gold: #f2b03e;
  --gold-dark: #c98a17;
  --gold-050: #fdf4e1;

  --ink: #14212e;
  --body: #33414f;
  --muted: #6b7a89;
  --line: #e6eaef;
  --line-strong: #d3dae2;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-2: #fbfcfe;

  --green: #1f7a4d;   --green-050: #e6f4ec;
  --amber: #9a6a06;   --amber-050: #fbf1d8;
  --red:   #b23b32;   --red-050:   #fbeae8;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(20,33,46,.06), 0 1px 3px rgba(20,33,46,.05);
  --shadow: 0 2px 4px rgba(20,33,46,.05), 0 6px 20px rgba(20,33,46,.06);
  --ring: 0 0 0 3px rgba(58,130,176,.25);
  --font: "Proxima Nova", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Proxima Nova", "Montserrat", -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--blue); }

/* ---------- Header (light, modern) ---------- */
.header {
  background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 0 24px; display: flex; align-items: center; gap: 18px; min-height: 68px;
  position: sticky; top: 0; z-index: 50;
}
.header .brand { display: flex; align-items: center; gap: 12px; }
.header .brand img { height: 34px; width: auto; display: block; }
.header .brand .div { width: 1px; height: 26px; background: var(--line-strong); }
.header .brand .ptitle { font: 700 15px/1.1 var(--display); color: var(--indigo); letter-spacing: .2px; }
.header .brand .ptitle small { display: block; font: 500 11px/1.3 var(--font); color: var(--muted); letter-spacing: .3px; text-transform: uppercase; }
.header nav { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.header nav a {
  color: var(--body); padding: 8px 13px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: background .12s, color .12s;
}
.header nav a:hover { background: var(--indigo-050); color: var(--indigo); }
.header nav a.active { background: var(--indigo); color: #fff; }
@media (max-width: 900px){ .header { min-height:auto; padding:12px 16px; flex-wrap:wrap; } .header nav { width:100%; } }

/* ---------- Layout ---------- */
.wrap { max-width: 1120px; margin: 30px auto; padding: 0 24px; }
.wrap.narrow { max-width: 720px; }
h1 { font: 700 27px/1.2 var(--display); color: var(--ink); margin: 0 0 6px; letter-spacing: -.2px; }
h2 { font: 700 18px/1.3 var(--display); color: var(--ink); margin: 26px 0 12px; }
h3 { font: 700 15px/1.3 var(--display); color: var(--ink); }
.sub { color: var(--muted); margin: 0 0 20px; font-size: 15px; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 18px;
}
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px){ .grid.cols-2,.grid.cols-3,.grid.cols-4 { grid-template-columns:1fr; } }

/* ---------- Stat cards ---------- */
.stat { text-align: left; }
.stat .n { font: 800 30px/1 var(--display); color: var(--indigo); letter-spacing: -.5px; }
.stat .l { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; }
.card.stat { position: relative; overflow: hidden; }
.card.stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--gold); }

/* ---------- Forms ---------- */
label { display: block; font-weight: 600; margin: 15px 0 6px; font-size: 13.5px; color: var(--ink); }
input[type=text], input[type=email], input[type=number], input[type=password], input[type=file], select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--ink); transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
textarea { min-height: 96px; resize: vertical; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 500; margin: 10px 0; color: var(--ink); }
.check input { width: auto; accent-color: var(--indigo); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; background: var(--indigo); color: #fff; border: none; cursor: pointer;
  padding: 11px 20px; border-radius: var(--radius-sm); font: 600 14.5px var(--font); text-decoration: none;
  transition: background .12s, transform .04s, box-shadow .12s; box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--indigo-700); color:#fff; }
.btn:active { transform: translateY(1px); }
.btn.gold { background: var(--gold); color: var(--indigo-700); }
.btn.gold:hover { background: var(--gold-dark); color:#fff; }
.btn.ghost { background: #fff; color: var(--indigo); border: 1px solid var(--line-strong); box-shadow:none; }
.btn.ghost:hover { background: var(--indigo-050); border-color: var(--blue); }
.btn.sm { padding: 6px 12px; font-size: 13px; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--panel-2); }

/* ---------- Badges / tags ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.badge.green { background: var(--green-050); color: var(--green); }
.badge.amber { background: var(--amber-050); color: var(--amber); }
.badge.red { background: var(--red-050); color: var(--red); }
.badge.gray { background: #eef1f5; color: var(--muted); }
.badge.navy { background: var(--indigo-050); color: var(--indigo); }
.badge.gold { background: var(--gold-050); color: var(--gold-dark); }
.tag { display:inline-block; background:var(--blue-050); color:var(--indigo); border-radius:6px; padding:2px 9px; font-size:12px; font-weight:500; margin:2px 3px 2px 0; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; }
.dot.green{background:var(--green)} .dot.red{background:var(--red)} .dot.amber{background:var(--amber)}

/* ---------- Notices ---------- */
.notice { background: var(--blue-050); border:1px solid #cfe0ee; color:#254c66; padding:13px 15px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:14px; }
.notice.ok { background:var(--green-050); border-color:#c2e3d0; color:#175c39; }
.notice.warn { background:var(--gold-050); border-color:#f0dca7; color:#7d5605; }
.muted { color: var(--muted); }
.right { text-align: right; }

/* ---------- Hero / tiles ---------- */
.hero { text-align:center; padding: 34px 20px 10px; }
.hero .herologo { height: 120px; width:auto; margin: 0 auto 8px; display:block; }
.hero .tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-top:26px; text-align:left; }
.tile { display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); transition:transform .1s ease, box-shadow .1s ease, border-color .1s; position:relative; overflow:hidden; }
.tile::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .15s ease; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color:var(--line-strong); }
.tile:hover::after { transform:scaleX(1); }
.tile .ic { font-size:26px; }
.tile h3 { margin:12px 0 4px; color:var(--indigo); }
.tile p { margin:0; color:var(--muted); font-size:14px; }

/* ---------- Misc ---------- */
.split { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.searchbar { display:flex; gap:8px; margin-bottom:14px; }
.searchbar input { flex:1; }
.pill-row { margin: 6px 0 0; }
.foot { text-align:center; color:var(--muted); font-size:13px; margin:34px 0; }
hr.soft { border:none; border-top:1px solid var(--line); margin:18px 0; }
.login-shell { min-height: calc(100vh - 68px); display:grid; place-items:center; padding: 24px; }
.login-card { width:100%; max-width: 420px; }
.login-card .ci { height: 54px; margin: 0 auto 18px; display:block; }

/* ---------- Agenda builder ---------- */
.sortable { list-style: none; margin: 6px 0 0; padding: 0; }
.sortable.subs { margin: 4px 0 4px 34px; padding-left: 4px; border-left: 2px dashed var(--line-strong); min-height: 12px; }
.ag-item { margin: 8px 0; }
.ag-row { display: flex; align-items: flex-start; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.ag-item.dragging > .ag-row { opacity: .5; border-style: dashed; border-color: var(--blue); }
.ag-handle { cursor: grab; color: var(--muted); font-size: 18px; line-height: 1.2; user-select: none; padding-top: 1px; }
.ag-handle:active { cursor: grabbing; }
.ag-main { flex: 1; min-width: 0; }
.ag-title { margin-bottom: 2px; }
.ag-files { margin: 8px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ag-file { font-size: 13px; background: var(--blue-050); border-radius: 6px; padding: 3px 8px; }
.ag-x { border: none; background: none; color: var(--red); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.ag-addfile { margin-top: 6px; }
.ag-addfile summary { cursor: pointer; color: var(--indigo); font-size: 13px; font-weight: 600; }
.ag-addfile .row > * { min-width: 140px; }
.ag-actions { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Readiness / progress ---------- */
.bar { background: var(--line); border-radius: 999px; height: 9px; overflow: hidden; margin: 4px 0 2px; }
.bar > i { display: block; height: 100%; background: var(--indigo); border-radius: 999px; }
.bar.sm { height: 6px; }
.barrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; margin-top: 10px; }
.airow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.airow:last-child { border-bottom: none; }
.quick-actions a { margin: 0 8px 8px 0; }
.chk-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.chk-item:last-child { border-bottom: none; }
.chk-item.done label { color: var(--muted); text-decoration: line-through; }
.chk-item input { width: auto; accent-color: var(--indigo); width: 17px; height: 17px; }
.chk-item label { flex: 1; margin: 0; font-weight: 400; cursor: pointer; }
.chk-sec { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--blue); font-weight: 700; margin: 16px 0 4px; }