/* ======================================================================
   Mercy Outreach Global — Fund Management
   ITNS-Global brand system (IBM Carbon palette, IBM Plex type)
   ====================================================================== */
:root{
  --navy:#1B3A6B; --navy-dk:#12294D; --navy-700:#16325C; --navy-600:#1F4178;
  --navy-500:#2E5290; --gold:#F5A623; --cyan:#0062FF;
  --ink:#161616; --body:#3D4654; --muted:#6F7B8F; --rule:#E2E7EF;
  --bg:#F5F7FA; --white:#fff;
  --ok:#1E7A3C; --ok-bg:#E8F5ED; --warn:#B45309; --warn-bg:#FFF4E0;
  --err:#C0392B; --err-bg:#FDECEA; --info-bg:#EDF4FF;
  --sb:264px; --radius:8px;
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 4px 14px rgba(16,24,40,.09);
  --shadow-3:0 10px 28px rgba(16,24,40,.14);
  --t:.16s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--body);background:var(--bg);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--cyan)}
.ico{flex:0 0 auto;vertical-align:middle}

/* ============================ SIDEBAR ============================ */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sb);flex:0 0 var(--sb);background:var(--navy-dk);color:#C5D4EA;
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;
  transition:transform var(--t);overflow:hidden}
.sb-brand{display:flex;gap:11px;align-items:center;padding:17px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
/* Brand logos. Kept square-cropped with object-fit so a logo of any
   aspect ratio sits correctly without distorting. */
.sb-logo{flex:0 0 auto;width:30px;height:30px;object-fit:contain}
.sb-logo.sm{width:20px;height:20px}
/* If a logo is dark and disappears against the navy sidebar, give it a
   white tile by uncommenting the rule below.
.sb-logo{background:#fff;padding:3px;border-radius:5px}
.sb-logo.sm{padding:2px;border-radius:4px}
*/
.login-logo{display:block;margin:0 auto 15px;width:52px;height:52px;object-fit:contain}
.sb-name{color:#fff;font-weight:600;font-size:14.5px;line-height:1.3;display:block}
.sb-name em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:#8FADD6;
  letter-spacing:.3px;margin-top:2px}

.sb-nav{flex:1 1 auto;overflow-y:auto;padding:12px 11px 18px}
.sb-nav::-webkit-scrollbar{width:7px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}
.sb-group{margin:17px 0 6px;padding:0 10px;font-size:10px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:#6A86AD}
.sb-group:first-child{margin-top:3px}

.sb-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:6px;
  color:#B8CAE4;font-size:13.8px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;transition:background var(--t),color var(--t),box-shadow var(--t);
  position:relative}
.sb-item span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-item:hover{background:rgba(255,255,255,.085);color:#fff}
.sb-item:hover .ico{color:var(--gold)}
.sb-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sb-item.on{background:var(--navy-500);color:#fff;font-weight:600;box-shadow:var(--shadow-1)}
.sb-item.on::before{content:"";position:absolute;left:-11px;top:7px;bottom:7px;width:3px;
  background:var(--gold);border-radius:0 3px 3px 0}
.sb-item.on .ico{color:var(--gold)}

.sb-toggle .caret{transition:transform var(--t);opacity:.75}
.sb-branch.open .caret{transform:rotate(90deg)}
/* The 0fr -> 1fr collapse only sizes the FIRST grid row, so every link
   must sit inside a single child element or the rest stay visible. */
.sb-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t)}
.sb-branch.open .sb-sub{grid-template-rows:1fr}
.sb-sub-inner{min-height:0;overflow:hidden;visibility:hidden;transition:visibility var(--t)}
.sb-branch.open .sb-sub-inner{visibility:visible}
.sb-subitem{display:block;padding:7px 11px 7px 41px;font-size:13px;color:#93AACB;border-radius:6px;
  transition:background var(--t),color var(--t)}
.sb-subitem:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-subitem.on{color:#fff;font-weight:600;background:rgba(255,255,255,.08)}

.sb-foot{border-top:1px solid rgba(255,255,255,.08);padding:14px 11px 16px}
.sb-powered{margin:0 0 5px;padding:0 11px;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:#5F7BA3}
.sb-vendor{display:flex;align-items:center;gap:8px;padding:6px 11px;margin-bottom:6px;color:#D4E0F2;
  font-size:13px;font-weight:600;border-radius:6px;transition:background var(--t),color var(--t)}
a.sb-vendor:hover{background:rgba(255,255,255,.085);color:#fff}
a.sb-vendor:hover .sb-logo{transform:scale(1.06)}
a.sb-vendor:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sb-vendor .sb-logo{transition:transform var(--t)}
.sb-item.logout{color:#9FB4D4}
.sb-item.logout:hover{background:rgba(192,57,43,.22);color:#FFD9D4}

/* ============================= SHELL ============================= */
.main{flex:1 1 auto;margin-left:var(--sb);display:flex;flex-direction:column;min-width:0;min-height:100vh}
.topbar{display:flex;align-items:center;gap:16px;
  background:linear-gradient(100deg,#E9F1FB 0%,#D3E2F5 55%,#C2D7F0 100%);
  border-bottom:1px solid #AFC7E6;box-shadow:0 1px 3px rgba(27,58,107,.09);
  padding:0 26px;height:60px;position:sticky;top:0;z-index:20}
.topbar-title{flex:1 1 auto;margin:0;font-family:"IBM Plex Serif",Georgia,serif;font-size:18px;
  font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hamburger{display:none;background:rgba(255,255,255,.65);border:1px solid #AFC7E6;border-radius:6px;
  padding:7px;color:var(--navy);cursor:pointer}
.hamburger:hover{background:#fff}
.who{display:flex;align-items:center;gap:11px;font-size:13px}
.who .date{color:#3C5681;font-size:12.5px;white-space:nowrap;font-weight:500}
.avatar{width:33px;height:33px;border-radius:50%;background:var(--navy);color:#fff;display:grid;
  place-items:center;font-weight:600;font-size:13px;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.whotext{display:flex;flex-direction:column;line-height:1.25}
.whotext strong{font-size:13px;color:var(--navy-dk);font-weight:600}
.whotext em{font-style:normal;font-size:11px;color:#3A5580}

.content{flex:1 1 auto;padding:24px 26px 44px;max-width:1420px;width:100%}
.foot{padding:16px 26px;border-top:1px solid var(--rule);background:var(--white);
  color:var(--muted);font-size:11.5px;text-align:center}
.scrim{display:none;position:fixed;inset:0;background:rgba(18,41,77,.5);z-index:30}
.scrim.show{display:block}

/* ========================== TYPOGRAPHY =========================== */
h1{font-family:"IBM Plex Serif",Georgia,serif;color:var(--navy);font-size:25px;margin:0 0 5px;font-weight:600}
h2{color:var(--navy);font-size:16.5px;margin:28px 0 12px;font-weight:600}
h3{color:var(--ink);font-size:14.5px;margin:18px 0 8px}
.lead{color:var(--muted);margin:0 0 20px;font-size:14px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:4px}
.fineprint{font-size:12.5px;color:var(--muted);font-style:italic}

/* ============================= CARDS ============================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin:18px 0 26px}
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:15px 17px;
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-1);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.4,0,.2,1)}
a.card{color:inherit;cursor:pointer}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:#C9D6EA}
a.card:hover::after{transform:scaleX(1)}
a.card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.card .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);font-weight:600}
.card .v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:23px;font-weight:600;color:var(--ink);
  letter-spacing:-.4px;line-height:1.25}
.card .s{font-size:12px;color:var(--muted)}
.card .go{position:absolute;right:14px;bottom:13px;color:var(--cyan);opacity:0;
  transform:translateX(-5px);transition:opacity var(--t),transform var(--t)}
a.card:hover .go{opacity:1;transform:translateX(0)}
.card.nav-dark{background:var(--navy);border-color:var(--navy)}
.card.nav-dark .k{color:#9FC0F0}
.card.nav-dark .v{color:#fff}
.card.nav-dark .s{color:#9FC0F0}
.card.nav-dark::after{background:var(--gold)}
.card.nav-dark .go{color:var(--gold)}
a.card.nav-dark:hover{border-color:var(--navy-500)}

/* ============================= TABLES ============================ */
.tablewrap{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-1);margin-bottom:22px}
table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;margin-bottom:22px;box-shadow:var(--shadow-1)}
.tablewrap table{border:0;border-radius:0;margin:0;box-shadow:none}
th{background:var(--navy);color:#fff;text-align:left;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.9px;padding:11px 13px;font-weight:600;white-space:nowrap}
td{padding:10px 13px;border-top:1px solid var(--rule);font-size:13.8px;vertical-align:middle}
tbody tr{transition:background var(--t),box-shadow var(--t)}
tbody tr:nth-child(even){background:#FBFCFE}
tbody tr:hover{background:var(--info-bg)}
tr[data-href]{cursor:pointer}
tr[data-href]:hover{box-shadow:inset 3px 0 0 var(--cyan)}
tr[data-href]:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
td.r,th.r{text-align:right}
td.strong{font-weight:600;color:var(--ink)}
.mono,td.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px}
.empty{text-align:center;color:var(--muted);padding:30px}
table.kv th{background:#F6F8FC;color:var(--body);width:38%;text-transform:none;letter-spacing:0;font-size:13px}
table.audit td{font-size:12.8px}
td.diff{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--muted);max-width:300px}

/* ============================== TAGS ============================= */
.tag{display:inline-block;padding:2.5px 9px;border-radius:20px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.5px;font-weight:700;white-space:nowrap}
.tag.restricted{background:var(--err-bg);color:#A52A2A}
.tag.unrestricted,.tag.active,.tag.posted{background:var(--ok-bg);color:var(--ok)}
.tag.designated,.tag.suspended,.tag.draft{background:var(--warn-bg);color:#8A5A00}
.tag.closed,.tag.reversed{background:#EFF2F6;color:var(--muted)}
.tag.plain{background:var(--info-bg);color:var(--navy)}
.code{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);margin-left:5px}

/* ============================ BUTTONS ============================ */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--rule);
  border-radius:6px;background:var(--white);color:var(--navy);font-size:13.5px;cursor:pointer;
  font-family:inherit;font-weight:500;transition:all var(--t);box-shadow:var(--shadow-1)}
.btn:hover{background:var(--info-bg);border-color:#BED0EA;color:var(--navy);transform:translateY(-1px);
  box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.primary:hover{background:var(--navy-600);color:#fff}
.btn.ghost{border-color:transparent;color:var(--muted);box-shadow:none}
.btn.ghost:hover{background:#EDF1F7;color:var(--body);box-shadow:none}
.btn.wide{width:100%;justify-content:center;margin-top:8px}

/* ============================= FORMS ============================= */
.form{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:22px;
  max-width:980px;box-shadow:var(--shadow-1)}
fieldset{border:0;border-top:1px solid var(--rule);margin:0 0 18px;padding:16px 0 0}
fieldset:first-of-type{border-top:0;padding-top:0}
legend{font-weight:700;color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:.9px;padding:0 8px 0 0}
label{display:block;margin-bottom:14px;font-size:12.5px;font-weight:600;color:var(--ink)}
input,select,textarea{width:100%;padding:8.5px 11px;border:1px solid #C8D2E0;border-radius:6px;
  font-family:inherit;font-size:13.8px;font-weight:400;color:var(--body);margin-top:5px;background:#fff;
  transition:border-color var(--t),box-shadow var(--t)}
input:hover,select:hover,textarea:hover{border-color:#A9BAD2}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,98,255,.13)}
input:disabled{background:#F3F6FA;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hint{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:4px}
.err{display:block;font-weight:400;font-size:12.5px;color:var(--err);margin-top:4px}
.actions{display:flex;gap:10px;margin-top:8px}
label.check{display:flex;gap:9px;align-items:flex-start;font-weight:400;padding:9px 11px;
  border:1px solid var(--rule);border-radius:6px;transition:all var(--t);cursor:pointer}
label.check:hover{background:var(--info-bg);border-color:#BED0EA}
label.check input{width:auto;margin-top:3px}
.permgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:10px}
.permgrid small{color:var(--muted);font-weight:400}

.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px;
  box-shadow:var(--shadow-1)}
.filters label{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.filters input,.filters select{min-width:138px;margin-top:4px}

/* ============================== MISC ============================= */
.tabs{display:flex;gap:5px;margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:8px 15px;background:var(--white);border:1px solid var(--rule);border-radius:20px;
  font-size:13px;transition:all var(--t);box-shadow:var(--shadow-1)}
.tabs a:hover{border-color:#BED0EA;background:var(--info-bg);transform:translateY(-1px)}
.tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tabs a b{font-family:"IBM Plex Mono",monospace;opacity:.65;margin-left:5px;font-weight:600}

.flash{padding:12px 16px;border-radius:6px;margin-bottom:16px;font-size:13.8px;border-left:4px solid;
  box-shadow:var(--shadow-1)}
.flash.success{background:var(--ok-bg);border-color:var(--ok);color:#14532d}
.flash.warning{background:var(--warn-bg);border-color:var(--gold);color:#7A4A00}
.flash.error{background:var(--err-bg);border-color:var(--err);color:#7F1D1D}

.note{background:var(--info-bg);border-left:4px solid var(--cyan);padding:13px 16px;border-radius:6px;
  margin-bottom:18px;font-size:13.8px}
.note.small{font-size:13px;margin:4px 0 0;padding:10px 14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{background:var(--white);border:1px solid var(--rule);border-radius:20px;padding:6px 15px;
  font-size:12.8px;box-shadow:var(--shadow-1);transition:all var(--t)}
a.chip:hover{border-color:#BED0EA;background:var(--info-bg);transform:translateY(-1px)}
.chip b{font-family:"IBM Plex Mono",monospace;color:var(--navy);margin-left:4px}

/* ============================= LOGIN ============================= */
.anon{display:grid;place-items:center;min-height:100vh;
  background:linear-gradient(145deg,#12294D 0%,#1B3A6B 55%,#24487F 100%)}
.anonwrap{width:100%;max-width:412px;padding:24px}
.loginbox{background:var(--white);border-radius:12px;padding:38px 34px;box-shadow:var(--shadow-3)}
.loginbrand{text-align:center;margin-bottom:26px}
.loginbrand h1{font-size:20px;margin:0}
.loginbrand p{color:var(--muted);margin:4px 0 0;font-size:13.5px}

/* =========================== RESPONSIVE ========================== */
@media(max-width:1000px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-3)}
  .main{margin-left:0}
  .hamburger{display:inline-flex}
  .who .date,.whotext{display:none}
}
@media(max-width:780px){
  .row2,.row3,.split{grid-template-columns:1fr}
  .content{padding:18px 16px 36px}
  .topbar{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}