html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/* ---- Admin mega-menu panel: the whole admin menu on one screen ---- */
.navbar { position: relative; }

.admin-mega {
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0 0 .5rem .5rem;
    border-top: 3px solid rgba(0, 0, 0, .15);
}

.admin-mega-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    margin-bottom: .35rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid #e9ecef;
}

.admin-mega .dropdown-item {
    padding: .18rem .25rem;
    font-size: .875rem;
    border-radius: .25rem;
    white-space: normal; /* long labels wrap inside their column */
}

.admin-mega .dropdown-item:hover {
    background: #f1f3f5;
}

/* Collapsed (mobile) navbar: the panel flows inline; keep it scrollable if very tall */
@media (max-width: 575.98px) {
    .admin-mega {
        position: static;
        box-shadow: none !important;
        border-top: 0;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ---- Process flowcharts (Help pages): colour = who acts at each step ---- */
    .pf { --office:#1f4e89; --office-bg:#e9f0fa; --student:#1b6b4f; --student-bg:#e7f4ee;
          --faculty:#5b3a8c; --faculty-bg:#f1ebf9; --system:#4f5b69; --system-bg:#eef1f5;
          --line:#aab4c1; --milestone:#14202e; max-width: 920px; margin: 0 auto; }
    .pf-legend { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.85rem; }
    .pf-legend span { display:inline-flex; align-items:center; gap:6px; }
    .pf-dot { width:12px; height:12px; border-radius:3px; display:inline-block; }

    .pf-flow { display:flex; flex-direction:column; align-items:stretch; }
    .pf-node { border:1px solid; border-left-width:5px; border-radius:8px; padding:12px 14px;
               background:#fff; display:flex; flex-direction:column; gap:4px; }
    .pf-office  { border-color:var(--office);  background:var(--office-bg); }
    .pf-student { border-color:var(--student); background:var(--student-bg); }
    .pf-faculty { border-color:var(--faculty); background:var(--faculty-bg); }
    .pf-system  { border-color:var(--system);  background:var(--system-bg); }
    .pf-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
    .pf-num { font-weight:700; font-variant-numeric:tabular-nums; min-width:1.6rem; }
    .pf-title { font-weight:600; }
    .pf-role { margin-left:auto; font-size:.7rem; font-weight:700; letter-spacing:.07em;
               text-transform:uppercase; padding:2px 8px; border-radius:999px; color:#fff; }
    .pf-office  .pf-role { background:var(--office); }
    .pf-student .pf-role { background:var(--student); }
    .pf-faculty .pf-role { background:var(--faculty); }
    .pf-system  .pf-role { background:var(--system); }
    .pf-text { font-size:.9rem; color:#2b3440; }
    .pf-where { font-size:.82rem; }
    .pf-where a { margin-right:10px; }

    /* arrows between steps */
    .pf-arrow { height:26px; position:relative; }
    .pf-arrow::before { content:""; position:absolute; left:50%; top:2px; bottom:8px; border-left:2px solid var(--line); }
    .pf-arrow::after  { content:""; position:absolute; left:calc(50% - 6px); bottom:2px;
                        border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--line); }

    /* the two intake routes, side by side, merging below */
    .pf-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .pf-lane { border:1px dashed #c3ccd7; border-radius:10px; padding:12px; display:flex; flex-direction:column; }
    .pf-lane-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#5a6675; margin-bottom:8px; }
    .pf-lane .pf-arrow { height:18px; }
    @media (max-width: 720px) { .pf-split { grid-template-columns:1fr; } }

    .pf-milestone { background:var(--milestone); color:#fff; border-radius:999px; padding:10px 18px;
                    text-align:center; font-weight:600; }
    .pf-milestone small { display:block; font-weight:400; opacity:.8; }

    .pf-decision { border:2px dashed #8a5d14; border-radius:10px; background:#fdf6ea; padding:12px 14px; }
    .pf-q { font-weight:600; margin-bottom:8px; }
    .pf-q::before { content:"\25C6  "; color:#8a5d14; }
    .pf-branches { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:.9rem; }
    .pf-yes, .pf-no { border-radius:6px; padding:8px 10px; background:#fff; border:1px solid #e3d6bf; }
    .pf-yes b { color:#1b6b4f; } .pf-no b { color:#9a2b2b; }
    @media (max-width: 720px) { .pf-branches { grid-template-columns:1fr; } }

    .pf-aside { border:1px solid #d6dde6; border-radius:8px; background:#fafbfc; padding:10px 14px; font-size:.86rem; margin-top:8px; }
    @media print { .pf-where a { text-decoration:none; color:inherit; } nav, footer, .no-print { display:none !important; } }

/* ---- Graphical flowchart (Help → Admission Process): SVG drawn by ProcessChart.cs ---- */
    .pfx-legend { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.85rem; }
    .pfx-legend span { display:inline-flex; align-items:center; gap:6px; }
    .pfx-key-diamond { width:11px; height:11px; transform:rotate(45deg); background:#fff8e6; border:1.5px solid #b7791f; display:inline-block; margin:0 2px; }
    .pfx-key-optional { width:22px; height:13px; border:1.5px dashed #b7791f; border-radius:3px; background:#fffdf6; display:inline-block; }
    .pfx-key-skip { width:24px; height:0; border-top:2px dashed #b7791f; display:inline-block; }
    .pfx-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #e2e8f0; border-radius:12px; background:#fff; }
    .pfx-svg { display:block; width:100%; min-width:760px; height:auto;
               font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
    .pfx-svg text { font-family:inherit; }
    .pfx-office  { --c:#1f4e89; --bg:#e9f0fa; }
    .pfx-student { --c:#1b6b4f; --bg:#e7f4ee; }
    .pfx-faculty { --c:#5b3a8c; --bg:#f1ebf9; }
    .pfx-system  { --c:#4f5b69; --bg:#eef1f5; }
    .pfx-warn    { --c:#9a6412; --bg:#fff8e6; }
    .pfx-muted   { --c:#64748b; --bg:#f8fafc; }

    .pfx-band { fill:#fff; }
    .pfx-band-alt { fill:#f8fafc; }
    .pfx-rail { fill:#e2e8f0; }
    .pfx-rail-label { font-size:10.5px; font-weight:800; letter-spacing:.16em; fill:#475569; text-anchor:middle; dominant-baseline:central; }
    .pfx-lane rect { fill:#fff; stroke:#cbd5e1; stroke-width:1.2; stroke-dasharray:5 4; }
    .pfx-lane-kicker { font-size:10.5px; font-weight:800; letter-spacing:.12em; fill:#64748b; }
    .pfx-lane-title { font-size:12.5px; font-weight:600; fill:#334155; }

    .pfx-card { fill:#fff; stroke:var(--c); stroke-width:1.6; filter:url(#pfx-shadow); transition:stroke-width .12s; }
    .pfx-opt .pfx-card { fill:#fffdf6; stroke:#b7791f; stroke-dasharray:7 5; }
    .pfx-ic { fill:var(--c); }
    .pfx-title { font-size:15px; font-weight:600; fill:#0f172a; }
    .pfx-num { fill:var(--c); font-weight:800; }
    .pfx-sub { font-size:12px; fill:#475569; }
    .pfx-tag rect { fill:var(--c); }
    .pfx-opt-tag rect { fill:#b7791f; }
    .pfx-tag text, .pfx-opt-tag text { fill:#fff; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-anchor:middle; }
    .pfx-svg a, .pfx-svg a:hover { cursor:pointer; text-decoration:none; }
    .pfx-svg a:hover .pfx-card, .pfx-svg a:focus .pfx-card { stroke-width:2.8; }
    .pfx-svg a:hover .pfx-title, .pfx-svg a:hover .pfx-side-title { text-decoration:underline; }

    .pfx-arrow { fill:none; stroke:#8795a8; stroke-width:2; }
    .pfx-skip { fill:none; stroke:#b7791f; stroke-width:1.8; stroke-dasharray:6 5; }
    .pfx-dot { fill:#b7791f; }
    .pfx-skip-label { font-size:11.5px; font-style:italic; fill:#8a5d14; text-anchor:end; }
    .pfx-return { fill:none; stroke:#8795a8; stroke-width:1.6; stroke-dasharray:5 4; }
    .pfx-return-label { font-size:11px; font-style:italic; fill:#64748b; text-anchor:middle; }
    .pfx-connector { fill:none; stroke:#94a3b8; stroke-width:1.4; stroke-dasharray:2 4; }

    .pfx-decision polygon { fill:#fff8e6; stroke:#b7791f; stroke-width:1.8; filter:url(#pfx-shadow); }
    .pfx-decision text { font-size:13.5px; font-weight:600; fill:#5c3d0b; text-anchor:middle; }
    .pfx-yes { font-size:12px; font-weight:800; fill:#1b6b4f; }
    .pfx-no  { font-size:12px; font-weight:800; fill:#9a2b2b; }

    .pfx-side rect { fill:var(--bg); stroke:var(--c); stroke-width:1.2; }
    .pfx-side-ic { color:var(--c); }
    .pfx-side-title { font-size:12.5px; font-weight:700; fill:var(--c); }
    .pfx-side-text { font-size:11.5px; fill:#334155; }

    .pfx-milestone rect { fill:#166534; filter:url(#pfx-shadow); }
    .pfx-ms-title { font-size:14.5px; font-weight:700; fill:#fff; text-anchor:middle; }
    .pfx-ms-sub { font-size:11px; fill:#d1fae5; text-anchor:middle; }

    /* the text version of the chart, under it */
    .pfx-steps { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
    .pfx-optional-step { border-style:dashed; border-left-style:solid; border-color:#b7791f; background:#fffdf6; }
    .pfx-badge-optional { font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
                          padding:2px 8px; border-radius:999px; color:#fff; background:#b7791f; }
    @media print {
        .pfx-wrap { overflow:visible; border:0; }
        .pfx-svg { min-width:0; }
        .pfx-steps { display:block; }
        .pfx-steps .pf-node { break-inside:avoid; margin-bottom:8px; }
    }

/* ── Flowcharts drawn with FlowSvg (Help → Integration API, Super Admin → Infrastructure) ── */
.pfx-client { --c:#0f766e; --bg:#e6f6f4; }
.pfx-aws    { --c:#c2410c; --bg:#fff4ec; }
.pfx-super  { --c:#4338ca; --bg:#eef2ff; }
.pfx-dev    { --c:#6d28d9; --bg:#f3eefe; }
.pfx-error  { --c:#b91c1c; --bg:#fef2f2; }
.fx-arrow-red   { fill:none; stroke:#b91c1c; stroke-width:1.8; }
.fx-arrow-amber { fill:none; stroke:#b7791f; stroke-width:1.8; }
.fx-branch      { font-size:12px; font-weight:800; fill:#475569; }
.fx-loop-label  { font-size:11px; font-style:italic; fill:#64748b; }
.fx-pill rect       { fill:#334155; }
.fx-pill text       { fill:#fff; font-size:10.5px; font-weight:700; letter-spacing:.02em; text-anchor:middle; }
.fx-pill-blue rect  { fill:#1d4ed8; }
.fx-pill-amber rect { fill:#b45309; }
.pfx-lane.fx-cloud rect { fill:#fffbf5; stroke:#ea580c; stroke-width:1.6; stroke-dasharray:9 5; }
.pfx-lane.fx-cloud .pfx-lane-kicker { fill:#c2410c; }
.pfx-lane.fx-vpc rect { fill:#f3fbf6; stroke:#16a34a; stroke-width:1.4; stroke-dasharray:7 4; }
.pfx-lane.fx-vpc .pfx-lane-kicker { fill:#15803d; }
.pfx-lane.fx-vpc .pfx-lane-title { fill:#166534; font-weight:500; }
.pfx-lane.fx-sg rect { fill:rgba(254,242,242,.55); stroke:#dc2626; stroke-width:1.4; stroke-dasharray:4 3; }
.pfx-lane.fx-sg .pfx-lane-kicker { fill:#b91c1c; }
.pfx-lane.fx-sg .pfx-lane-title { fill:#7f1d1d; font-weight:500; }
.fx-key-sg   { width:22px; height:13px; border:1.5px dashed #dc2626; border-radius:3px; background:#fef2f2; display:inline-block; }
.fx-key-vpc  { width:22px; height:13px; border:1.5px dashed #16a34a; border-radius:3px; background:#f3fbf6; display:inline-block; }
.fx-key-pill { width:24px; height:12px; border-radius:6px; background:#1d4ed8; display:inline-block; }
.pf-node.fx-client { border-color:#0f766e; background:#e6f6f4; }
.pf-node.fx-client .pf-role { background:#0f766e; }

/* ── Footer: institution, then the product and its makers (as in the OLT MDP app) ── */
.app-footer { background:#fff; color:#6b7280; font-size:.92rem; }
.app-footer-inst { color:#1f2937; font-weight:600; font-size:1.02rem; }
.app-footer-contact { margin-top:2px; }
.app-footer-contact a { color:inherit; text-decoration:none; }
.app-footer-contact a:hover { text-decoration:underline; }
.app-footer .sep { color:#c0c6cf; margin:0 .45rem; }
.app-footer-rule { border:0; border-top:1px solid #e5e7eb; margin:.75rem 0 .6rem; opacity:1; }
.app-footer-powered { color:#374151; font-weight:600; font-size:.84rem; }
.app-footer-legal { font-size:.82rem; line-height:1.5; }
@media print { .app-footer { font-size:.8rem; } }

/* ── Platform landing page (the platform host's root) ── */
.cx-hero { background:linear-gradient(135deg, #eef4ff 0%, #f5f8ff 55%, #ffffff 100%); border:1px solid #e2e8f0; }
.cx-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700; color:#1d4ed8; }
.cx-title { font-size:clamp(2.2rem, 4vw, 3.2rem); font-weight:700; color:#0f172a; margin:.25rem 0 .75rem; }
.cx-lead { color:#334155; max-width:38rem; }
.cx-art svg { width:100%; height:auto; max-width:440px; display:block; margin:0 auto; }
.cx-path { fill:none; stroke:#c7d7fe; stroke-width:5; stroke-linecap:round; }
.cx-step circle { fill:#1f4e89; }
.cx-step.cx-first circle { fill:#0f766e; }
.cx-step.cx-done circle { fill:#15803d; }
.cx-step text { font-size:13px; font-weight:600; fill:#1e293b; text-anchor:middle; }
.cx-feature { display:flex; gap:.85rem; align-items:flex-start; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:1rem 1.1rem; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.cx-ic { flex:0 0 40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
    background:#e8efff; color:#1d4ed8; }