/* WMF Corporate UI Theme (V1) */
:root{
  --navy-950:#06142b;
  --navy-900:#071a38;
  --navy-800:#0b2752;
  --navy-700:#12346a;
  --panel:#ffffff;
  --panel-2:#f6f8fb;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --shadow: 0 16px 50px rgba(0,0,0,.18);
  --gold:#d2b15b;
  --gold-2:#b9922f;
  --blue:#1e40af;
  --green:#16a34a;
  --amber:#d97706;
  --gray:#6b7280;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);
  background: radial-gradient(900px 600px at 20% 10%, rgba(210,177,91,.18), transparent 60%),
              radial-gradient(900px 600px at 80% 0%, rgba(59,130,246,.20), transparent 55%),
              linear-gradient(180deg, var(--navy-800), var(--navy-950));
  min-height:100vh;
}

/* Links */
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Shell */
.page-wrap{max-width:1200px;margin:0 auto;padding:22px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.panel.pad{padding:18px}

/* Top Nav */
.topnav{
  background: linear-gradient(180deg, rgba(7,26,56,.95), rgba(6,20,43,.90));
  border-bottom: 2px solid rgba(210,177,91,.55);
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
}
.topnav .inner{max-width:1200px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand-badge{
  width:44px;height:44px;border-radius:12px;
  background: linear-gradient(135deg, rgba(210,177,91,.22), rgba(210,177,91,.06));
  border:1px solid rgba(210,177,91,.55);
  display:grid;place-items:center;
}
.brand-badge svg{width:28px;height:28px;fill:var(--gold)}
.brand-title{font-weight:900;letter-spacing:.2px;font-size:20px}
.brand-sub{font-size:12px;color:rgba(255,255,255,.75);margin-top:2px}

.navlinks{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.navlinks a{color:rgba(255,255,255,.92);font-weight:800;font-size:14px}
.navlinks a.active{color:#fff;position:relative}
.navlinks a.active:after{
  content:'';position:absolute;left:0;right:0;bottom:-10px;height:2px;
  background: linear-gradient(90deg, transparent, rgba(210,177,91,1), transparent);
}
.userbox{display:flex;gap:10px;align-items:center;color:#fff;white-space:nowrap}
.userdot{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center}
.userdot svg{width:18px;height:18px;fill:rgba(255,255,255,.88)}
.userbox .name{font-weight:800}
.userbox .caret{opacity:.8}

/* Breadcrumbs */
.breadcrumbs{
  max-width:1200px;margin:0 auto;
  padding:10px 18px 0;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  color:rgba(255,255,255,.78);
  font-size:13px;
}
.breadcrumbs a{color:rgba(255,255,255,.86)}
.crumb-sep{opacity:.5}

/* License banner */
.license-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px}
.license-left{display:flex;gap:14px;align-items:center}
.license-icon{
  width:56px;height:56px;border-radius:14px;background:rgba(30,64,175,.08);
  border:1px solid rgba(30,64,175,.22);
  display:grid;place-items:center;
}
.license-icon svg{width:28px;height:28px;fill:var(--blue)}
.license-title{font-weight:900;font-size:18px}
.license-meta{color:var(--muted);margin-top:4px}
.badge-ok{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:900}
.badge-ok .dot{width:10px;height:10px;border-radius:999px;background:var(--green)}
.badge-warn{display:inline-flex;align-items:center;gap:8px;color:var(--amber);font-weight:900}
.badge-warn .dot{width:10px;height:10px;border-radius:999px;background:var(--amber)}
.badge-bad{display:inline-flex;align-items:center;gap:8px;color:#dc2626;font-weight:900}
.badge-bad .dot{width:10px;height:10px;border-radius:999px;background:#dc2626}

/* Grid + cards */
.grid{display:grid;gap:16px}
@media(min-width:980px){.grid.cols-2{grid-template-columns: 1.25fr .75fr}}
@media(min-width:900px){.grid.cols-4{grid-template-columns: repeat(4,1fr)}}

.metric{background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,251,.96));
  border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:center}
.metric .icon{
  width:52px;height:52px;border-radius:14px;
  background: rgba(210,177,91,.14);
  border:1px solid rgba(210,177,91,.32);
  display:grid;place-items:center;
}
.metric .icon svg{width:28px;height:28px;fill:var(--gold-2)}
.metric .label{color:var(--muted);font-weight:800;font-size:13px}
.metric .value{font-weight:950;font-size:24px;margin-top:2px}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:12px;border-bottom:1px solid var(--line)}
.table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.status{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;font-weight:900;font-size:12px;border:1px solid var(--line)}
.status.active{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.22);color:var(--green)}
.status.pending{background:rgba(217,119,6,.10);border-color:rgba(217,119,6,.22);color:var(--amber)}
.status.draft{background:rgba(107,114,128,.10);border-color:rgba(107,114,128,.22);color:var(--gray)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);font-weight:900;cursor:pointer}
.btn.primary{background:linear-gradient(180deg, rgba(210,177,91,.32), rgba(210,177,91,.18));border-color:rgba(210,177,91,.55);color:#1f2937}
.btn.blue{background:linear-gradient(180deg, rgba(30,64,175,.22), rgba(30,64,175,.10));border-color:rgba(30,64,175,.30);color:var(--blue)}
.btn.ghost{background:#fff}
.btnbar{display:flex;gap:10px;flex-wrap:wrap}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* Directory cards */
.person{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.avatar{width:52px;height:52px;border-radius:999px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg, #e2e8f0, #f8fafc);display:grid;place-items:center}
.avatar img{width:100%;height:100%;object-fit:cover}
.person .name{font-weight:950}
.person .role{color:var(--muted);margin-top:2px}
.flag{width:26px;height:18px;border-radius:4px;border:1px solid var(--line);overflow:hidden}
.flag img{width:100%;height:100%;object-fit:cover}

/* Footer spacing */
.section-title{font-weight:950;margin:0 0 12px;font-size:18px}
.muted{color:var(--muted)}