/* ═══════════════════════════════════════════════════════════════════
   DataraFlow portals (admin, mentor, intern)
   The same world as the public site (df-tokens.css, df-core.css),
   tuned for dense workspace screens: 14px in tables, forms and
   sidebars, 40px rows, tabular figures, hairlines instead of shadows,
   and no page-load motion (people open these dozens of times a day).
   Loaded last by base.html and mentor_base.html on body.portal; public
   pages never load it. Page-specific rules live in portal-admin.css,
   portal-mentor.css and portal-intern.css under a comment naming the
   template. See DESIGN.md, "Portals".
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────── */
body.portal {
    font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    font-optical-sizing: auto;
    background: var(--df-paper);
    color: var(--df-ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-size: var(--df-text);
}
body.portal ::selection { background: var(--df-accent); color: var(--df-on-status); }
body.portal :focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; border-radius: 4px; }
body.portal h1, body.portal h2, body.portal h3, body.portal h4, body.portal h5, body.portal h6,
body.portal .h1, body.portal .h2, body.portal .h3, body.portal .h4, body.portal .h5, body.portal .h6 {
    letter-spacing: -.022em; line-height: 1.15; font-weight: 700; color: var(--df-ink);
}
body.portal h1, body.portal .h1 { font-size: 1.65rem; letter-spacing: -.03em; }
body.portal h2, body.portal .h2 { font-size: 1.3rem; }
body.portal h3, body.portal .h3 { font-size: 1.1rem; }
body.portal h4, body.portal h5, body.portal h6, body.portal .h4, body.portal .h5, body.portal .h6 { font-size: 1rem; }
body.portal .display-1, body.portal .display-2, body.portal .display-3, body.portal .display-4,
body.portal .display-5, body.portal .display-6 { font-weight: 800; letter-spacing: -.035em; }
body.portal table, body.portal .df-num, body.portal .df-stat-value { font-variant-numeric: tabular-nums; }
body.portal .skip-link:focus { background: var(--df-ink); color: var(--df-paper); }
body.portal a { color: var(--df-accent-deep); text-underline-offset: .15em; }
body.portal .df-page-head { padding: 0 0 var(--df-space-5); }
body.portal .df-page-head h1 { max-width: none; margin-bottom: .25rem; }
body.portal .df-page-head .df-lede { font-size: .98rem; max-width: 64ch; }
body.portal .df-page-head .df-actions { margin-top: 0; }

/* ── Bootstrap, re-themed from underneath ─────────────────────────── */
body.portal {
    --bs-body-font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --bs-body-color: var(--df-ink);
    --bs-body-color-rgb: 15, 26, 51;
    --bs-body-bg: var(--df-paper);
    --bs-body-bg-rgb: 245, 247, 251;
    --bs-secondary-color: var(--df-ink-3);
    --bs-secondary-bg: var(--df-paper);
    --bs-tertiary-bg: var(--df-paper);
    --bs-tertiary-color: var(--df-ink-3);
    --bs-emphasis-color: var(--df-ink);
    --bs-heading-color: var(--df-ink);
    --bs-link-color: var(--df-accent-deep);
    --bs-link-color-rgb: 11, 95, 124;
    --bs-link-hover-color: var(--df-accent-deep);
    --bs-link-hover-color-rgb: 11, 95, 124;
    --bs-primary: var(--df-accent);
    --bs-primary-rgb: 8, 122, 158;
    --bs-primary-text-emphasis: var(--df-accent-deep);
    --bs-primary-bg-subtle: var(--df-accent-soft);
    --bs-primary-border-subtle: var(--df-cell);
    --bs-success: var(--df-ok);        --bs-success-rgb: 31, 122, 77;
    --bs-success-text-emphasis: var(--df-ok); --bs-success-bg-subtle: var(--df-ok-soft);
    --bs-warning: var(--df-warn);      --bs-warning-rgb: 154, 91, 0;
    --bs-warning-text-emphasis: var(--df-warn); --bs-warning-bg-subtle: var(--df-warn-soft);
    --bs-danger: var(--df-danger);     --bs-danger-rgb: 192, 57, 43;
    --bs-danger-text-emphasis: var(--df-danger); --bs-danger-bg-subtle: var(--df-danger-soft);
    --bs-info: var(--df-info);         --bs-info-rgb: 37, 99, 235;
    --bs-info-text-emphasis: var(--df-info); --bs-info-bg-subtle: var(--df-info-soft);
    --bs-secondary: var(--df-ink-2);   --bs-secondary-rgb: 70, 81, 106;
    --bs-secondary-text-emphasis: var(--df-ink-2); --bs-secondary-bg-subtle: var(--df-neutral-soft);
    --bs-light: var(--df-paper);       --bs-light-rgb: 245, 247, 251;
    --bs-light-text-emphasis: var(--df-ink-2); --bs-light-bg-subtle: var(--df-surface);
    --bs-dark: var(--df-ink);          --bs-dark-rgb: 15, 26, 51;
    --bs-dark-text-emphasis: var(--df-ink); --bs-dark-bg-subtle: var(--df-neutral-soft);
    --bs-border-color: var(--df-line);
    --bs-border-color-translucent: var(--df-line);
    --bs-border-radius: var(--df-radius-ctl);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--df-radius-panel);
    --bs-border-radius-xl: var(--df-radius-panel);
    --bs-border-radius-2xl: var(--df-radius-panel);
    --bs-box-shadow: var(--df-shadow);
    --bs-box-shadow-sm: var(--df-shadow-soft);
    --bs-box-shadow-lg: var(--df-shadow);
    --bs-focus-ring-color: var(--df-accent-soft);
    --bs-focus-ring-width: 4px;
    --bs-focus-ring-opacity: 1;
    --bs-code-color: var(--df-accent-deep);
}

/* Cards: hairline panels, never shadowed, never gradient-headed. The
   !important on card-header and modal-header is the one place it is
   allowed: dozens of pages paint those with inline `bg-primary text-white`
   or gradient classes, and every one of them should read as a titled
   panel until its page pass removes the class. */
body.portal .card {
    --bs-card-border-color: var(--df-line);
    --bs-card-border-radius: var(--df-radius-panel);
    --bs-card-inner-border-radius: calc(var(--df-radius-panel) - 1px);
    --bs-card-cap-bg: var(--df-surface);
    --bs-card-cap-color: var(--df-ink);
    --bs-card-cap-padding-y: .8rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-title-color: var(--df-ink);
    --bs-card-subtitle-color: var(--df-ink-3);
    --bs-card-bg: var(--df-surface);
    box-shadow: none !important;
}
body.portal .card-header {
    background: var(--df-surface) !important;
    color: var(--df-ink) !important;
    border-bottom: 1px solid var(--df-line) !important;
    font-weight: 600;
    background-image: none !important;
}
body.portal .card-header .text-white, body.portal .card-header .text-light,
body.portal .card-header h1, body.portal .card-header h2, body.portal .card-header h3,
body.portal .card-header h4, body.portal .card-header h5, body.portal .card-header h6 { color: var(--df-ink) !important; }
body.portal .card-header .text-white-50, body.portal .card-header .opacity-75, body.portal .card-header small { color: var(--df-ink-3) !important; opacity: 1; }
body.portal .card-header h5, body.portal .card-header h6, body.portal .card-header .card-title { font-size: 1rem; margin: 0; }
body.portal .card-header .btn-light, body.portal .card-header .btn-outline-light {
    color: var(--df-ink); background: var(--df-surface); border-color: var(--df-line-strong);
}
body.portal .card-header .btn-light:hover, body.portal .card-header .btn-outline-light:hover { background: var(--df-paper); color: var(--df-ink); border-color: var(--df-ink); }
body.portal .card-footer { background: var(--df-paper); border-top: 1px solid var(--df-line); }
body.portal .card.border-0 { border: 1px solid var(--df-line) !important; }
body.portal .card.bg-primary, body.portal .card.bg-success, body.portal .card.bg-info,
body.portal .card.bg-warning, body.portal .card.bg-danger, body.portal .card.bg-dark, body.portal .card.bg-secondary,
body.portal .card.text-bg-primary, body.portal .card.text-bg-success, body.portal .card.text-bg-info,
body.portal .card.text-bg-warning, body.portal .card.text-bg-danger, body.portal .card.text-bg-dark {
    background: var(--df-surface) !important; color: var(--df-ink) !important;
}
body.portal .card.bg-primary .text-white, body.portal .card.bg-success .text-white, body.portal .card.bg-info .text-white,
body.portal .card.bg-warning .text-white, body.portal .card.bg-danger .text-white, body.portal .card.bg-dark .text-white,
body.portal .card.text-bg-primary *, body.portal .card.text-bg-success *, body.portal .card.text-bg-info *,
body.portal .card.text-bg-warning *, body.portal .card.text-bg-danger *, body.portal .card.text-bg-dark * { color: var(--df-ink) !important; }
body.portal .card.bg-light { background: var(--df-paper) !important; }
/* Stat cards that used to be painted by an inline gradient (removed) still
   carry white text utilities; on a surface card they read as ink. */
body.portal .card .text-white, body.portal .card .text-light { color: var(--df-ink) !important; }
body.portal .card .text-white-50, body.portal .card .opacity-75, body.portal .card .opacity-90, body.portal .card .opacity-50 { color: var(--df-ink-3) !important; opacity: 1 !important; }
body.portal .card .fa-2x.opacity-50, body.portal .card .fa-2x.opacity-75, body.portal .card .fa-3x.opacity-50, body.portal .card .fa-3x.opacity-75 { color: var(--df-ink-3) !important; font-size: 1.5em; }

/* Tables */
body.portal .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--df-ink);
    --bs-table-border-color: var(--df-line);
    --bs-table-striped-bg: var(--df-paper);
    --bs-table-striped-color: var(--df-ink);
    --bs-table-hover-bg: var(--df-accent-soft);
    --bs-table-hover-color: var(--df-ink);
    --bs-table-active-bg: var(--df-accent-soft);
    font-size: var(--df-text-sm);
    margin-bottom: 0;
}
body.portal .table > :not(caption) > * > * { padding: .6rem .75rem; vertical-align: middle; }
body.portal .table thead th, body.portal .table th {
    color: var(--df-ink-3); font-weight: 600; font-size: .78rem; letter-spacing: .01em;
    border-bottom: 1px solid var(--df-line-strong); text-transform: none; white-space: nowrap;
}
body.portal .table tbody tr:last-child td { border-bottom-color: transparent; }
body.portal .table-dark, body.portal .table-primary, body.portal .table-secondary, body.portal .table-light,
body.portal .thead-dark th, body.portal .table > thead.table-dark > tr > th, body.portal .table > thead.table-light > tr > th,
body.portal .table > thead.table-primary > tr > th, body.portal .table > thead.bg-primary > tr > th,
body.portal .table > thead.bg-dark > tr > th, body.portal .table > thead.bg-light > tr > th {
    --bs-table-bg: var(--df-paper); --bs-table-color: var(--df-ink-3); background: var(--df-paper) !important; color: var(--df-ink-3) !important;
}
body.portal .table-responsive { border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); background: var(--df-surface); }
body.portal .table-responsive > .table { margin: 0; }
body.portal .table-bordered { --bs-table-border-color: var(--df-line); }
body.portal .table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
body.portal .table .badge { font-size: .75rem; }
body.portal .table .btn-sm { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; min-height: 28px; }

/* Buttons */
body.portal .btn {
    --bs-btn-border-radius: var(--df-radius-ctl);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: .95rem;
    --bs-btn-font-size: .92rem;
    --bs-btn-line-height: 1.25;
    font-family: inherit;
    background-image: none;
    transition: background-color 160ms var(--df-ease), border-color 160ms var(--df-ease), color 160ms var(--df-ease), transform 120ms var(--df-ease), box-shadow 160ms var(--df-ease);
}
body.portal .btn:active { transform: scale(.98); }
body.portal .btn-sm { --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .82rem; --bs-btn-border-radius: 7px; }
body.portal .btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; }
body.portal .btn-primary {
    --bs-btn-bg: var(--df-accent); --bs-btn-border-color: var(--df-accent);
    --bs-btn-hover-bg: var(--df-accent-deep); --bs-btn-hover-border-color: var(--df-accent-deep);
    --bs-btn-active-bg: var(--df-accent-deep); --bs-btn-active-border-color: var(--df-accent-deep);
    --bs-btn-disabled-bg: var(--df-accent); --bs-btn-disabled-border-color: var(--df-accent);
}
body.portal .btn-secondary {
    --bs-btn-color: var(--df-ink); --bs-btn-bg: var(--df-surface); --bs-btn-border-color: var(--df-line-strong);
    --bs-btn-hover-color: var(--df-ink); --bs-btn-hover-bg: var(--df-paper); --bs-btn-hover-border-color: var(--df-ink);
    --bs-btn-active-color: var(--df-ink); --bs-btn-active-bg: var(--df-paper); --bs-btn-active-border-color: var(--df-ink);
    --bs-btn-disabled-color: var(--df-ink-3); --bs-btn-disabled-bg: var(--df-surface); --bs-btn-disabled-border-color: var(--df-line);
}
body.portal .btn-success { --bs-btn-color: var(--df-on-status); --bs-btn-bg: var(--df-ok); --bs-btn-border-color: var(--df-ok); --bs-btn-hover-color: var(--df-on-status); --bs-btn-hover-bg: var(--df-ok-deep); --bs-btn-hover-border-color: var(--df-ok-deep); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-ok-deep); --bs-btn-active-border-color: var(--df-ok-deep); --bs-btn-disabled-bg: var(--df-ok); --bs-btn-disabled-border-color: var(--df-ok); }
body.portal .btn-warning { --bs-btn-color: var(--df-on-status); --bs-btn-bg: var(--df-warn); --bs-btn-border-color: var(--df-warn); --bs-btn-hover-color: var(--df-on-status); --bs-btn-hover-bg: var(--df-warn-deep); --bs-btn-hover-border-color: var(--df-warn-deep); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-warn-deep); --bs-btn-active-border-color: var(--df-warn-deep); --bs-btn-disabled-color: var(--df-on-status); --bs-btn-disabled-bg: var(--df-warn); --bs-btn-disabled-border-color: var(--df-warn); }
body.portal .btn-danger { --bs-btn-color: var(--df-on-status); --bs-btn-bg: var(--df-danger); --bs-btn-border-color: var(--df-danger); --bs-btn-hover-color: var(--df-on-status); --bs-btn-hover-bg: var(--df-danger-deep); --bs-btn-hover-border-color: var(--df-danger-deep); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-danger-deep); --bs-btn-active-border-color: var(--df-danger-deep); --bs-btn-disabled-bg: var(--df-danger); --bs-btn-disabled-border-color: var(--df-danger); }
body.portal .btn-info { --bs-btn-color: var(--df-on-status); --bs-btn-bg: var(--df-info); --bs-btn-border-color: var(--df-info); --bs-btn-hover-color: var(--df-on-status); --bs-btn-hover-bg: var(--df-accent-deep); --bs-btn-hover-border-color: var(--df-accent-deep); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-accent-deep); --bs-btn-active-border-color: var(--df-accent-deep); --bs-btn-disabled-color: var(--df-on-status); --bs-btn-disabled-bg: var(--df-info); --bs-btn-disabled-border-color: var(--df-info); }
body.portal .btn-dark { --bs-btn-color: var(--df-paper); --bs-btn-bg: var(--df-ink); --bs-btn-border-color: var(--df-ink); --bs-btn-hover-color: var(--df-paper); --bs-btn-hover-bg: var(--df-ink-deep); --bs-btn-hover-border-color: var(--df-ink-deep); --bs-btn-active-color: var(--df-paper); --bs-btn-active-bg: var(--df-ink-deep); --bs-btn-active-border-color: var(--df-ink-deep); }
body.portal .btn-light { --bs-btn-color: var(--df-ink); --bs-btn-bg: var(--df-paper); --bs-btn-border-color: var(--df-line); --bs-btn-hover-color: var(--df-ink); --bs-btn-hover-bg: var(--df-surface); --bs-btn-hover-border-color: var(--df-line-strong); --bs-btn-active-bg: var(--df-surface); --bs-btn-active-border-color: var(--df-line-strong); }
body.portal .btn-outline-primary { --bs-btn-color: var(--df-accent-deep); --bs-btn-border-color: var(--df-line-strong); --bs-btn-hover-color: var(--df-accent-deep); --bs-btn-hover-bg: var(--df-accent-soft); --bs-btn-hover-border-color: var(--df-accent-deep); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-accent); --bs-btn-active-border-color: var(--df-accent); }
body.portal .btn-outline-secondary { --bs-btn-color: var(--df-ink); --bs-btn-border-color: var(--df-line-strong); --bs-btn-hover-color: var(--df-ink); --bs-btn-hover-bg: var(--df-paper); --bs-btn-hover-border-color: var(--df-ink); --bs-btn-active-color: var(--df-ink); --bs-btn-active-bg: var(--df-paper); --bs-btn-active-border-color: var(--df-ink); }
body.portal .btn-outline-success { --bs-btn-color: var(--df-ok); --bs-btn-border-color: var(--df-line-strong); --bs-btn-hover-color: var(--df-ok); --bs-btn-hover-bg: var(--df-ok-soft); --bs-btn-hover-border-color: var(--df-ok); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-ok); --bs-btn-active-border-color: var(--df-ok); }
body.portal .btn-outline-warning { --bs-btn-color: var(--df-warn); --bs-btn-border-color: var(--df-line-strong); --bs-btn-hover-color: var(--df-warn); --bs-btn-hover-bg: var(--df-warn-soft); --bs-btn-hover-border-color: var(--df-warn); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-warn); --bs-btn-active-border-color: var(--df-warn); }
body.portal .btn-outline-danger { --bs-btn-color: var(--df-danger); --bs-btn-border-color: var(--df-line-strong); --bs-btn-hover-color: var(--df-danger); --bs-btn-hover-bg: var(--df-danger-soft); --bs-btn-hover-border-color: var(--df-danger); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-danger); --bs-btn-active-border-color: var(--df-danger); }
body.portal .btn-outline-info { --bs-btn-color: var(--df-info); --bs-btn-border-color: var(--df-line-strong); --bs-btn-hover-color: var(--df-info); --bs-btn-hover-bg: var(--df-info-soft); --bs-btn-hover-border-color: var(--df-info); --bs-btn-active-color: var(--df-on-status); --bs-btn-active-bg: var(--df-info); --bs-btn-active-border-color: var(--df-info); }
body.portal .btn-outline-dark { --bs-btn-color: var(--df-ink); --bs-btn-border-color: var(--df-line-strong); --bs-btn-hover-color: var(--df-paper); --bs-btn-hover-bg: var(--df-ink); --bs-btn-hover-border-color: var(--df-ink); }
body.portal .btn-outline-light { --bs-btn-color: var(--df-ink); --bs-btn-border-color: var(--df-line-strong); --bs-btn-hover-color: var(--df-ink); --bs-btn-hover-bg: var(--df-paper); --bs-btn-hover-border-color: var(--df-ink); }
body.portal .btn-link { --bs-btn-color: var(--df-accent-deep); --bs-btn-hover-color: var(--df-accent-deep); text-decoration: none; }
body.portal .btn-link:hover { text-decoration: underline; }
body.portal .btn-group .btn { min-height: 0; }
body.portal .btn-check:checked + .btn-outline-primary, body.portal .btn-check:checked + .btn-outline-secondary { background: var(--df-accent-soft); color: var(--df-accent-deep); border-color: var(--df-accent-deep); }

/* Forms */
body.portal .form-label, body.portal label.form-check-label { font-weight: 600; font-size: var(--df-text-sm); color: var(--df-ink); margin-bottom: .3rem; }
body.portal label.form-check-label { font-weight: 500; color: var(--df-ink-2); }
body.portal .form-text { color: var(--df-ink-3); font-size: .82rem; }
body.portal .invalid-feedback { color: var(--df-danger); font-size: .82rem; font-weight: 500; }
body.portal .form-control, body.portal .form-select {
    font-family: inherit; font-size: var(--df-text-sm); color: var(--df-ink);
    background-color: var(--df-surface); border: 1px solid var(--df-line-strong); border-radius: var(--df-radius-ctl);
    padding: .5rem .8rem; line-height: 1.35; min-height: var(--df-control);
    transition: border-color 160ms var(--df-ease), box-shadow 160ms var(--df-ease);
}
body.portal textarea.form-control { min-height: 6rem; }
body.portal .form-control-sm, body.portal .form-select-sm { min-height: 30px; padding: .28rem .6rem; font-size: .82rem; border-radius: 7px; }
body.portal .form-control-lg, body.portal .form-select-lg { min-height: 44px; font-size: 1rem; }
body.portal .form-control::placeholder { color: var(--df-ink-3); opacity: 1; }
body.portal .form-floating > .form-control::placeholder { color: transparent; } /* the label does the placeholder's job */
body.portal .form-floating > .form-control { min-height: calc(3.5rem + 2px); padding: 1rem .95rem; line-height: 1.25; }
body.portal .form-floating > .form-control:focus, body.portal .form-floating > .form-control:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: .625rem; }
body.portal .form-floating > label { color: var(--df-ink-3); padding: 1rem .95rem; }
body.portal .form-control:focus, body.portal .form-select:focus { outline: none; border-color: var(--df-accent); box-shadow: 0 0 0 4px var(--df-accent-soft); background-color: var(--df-surface); color: var(--df-ink); }
body.portal .form-control.is-invalid, body.portal .form-select.is-invalid { border-color: var(--df-danger); background-image: none; }
body.portal .form-control.is-invalid:focus { box-shadow: 0 0 0 4px var(--df-danger-soft); }
body.portal .form-control:disabled, body.portal .form-select:disabled, body.portal .form-control[readonly] { background-color: var(--df-paper); color: var(--df-ink-2); }
body.portal .form-check-input { width: 1.1em; height: 1.1em; border-color: var(--df-line-strong); margin-top: .2em; background-color: var(--df-surface); }
body.portal .form-check-input:checked { background-color: var(--df-accent); border-color: var(--df-accent); }
body.portal .form-check-input:focus { border-color: var(--df-accent); box-shadow: 0 0 0 4px var(--df-accent-soft); }
body.portal .form-switch .form-check-input { width: 2.1em; }
body.portal .form-switch .form-check-input:not(:checked) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c5cee2'/%3e%3c/svg%3e"); }
body.portal .input-group-text { background: var(--df-paper); border-color: var(--df-line-strong); color: var(--df-ink-3); font-size: var(--df-text-sm); }
body.portal .form-range::-webkit-slider-thumb { background: var(--df-accent); }
body.portal .form-floating > label { color: var(--df-ink-3); }

/* Modals, dropdowns, offcanvas, toasts, popovers */
body.portal .modal {
    --bs-modal-border-radius: var(--df-radius-panel);
    --bs-modal-border-color: var(--df-line);
    --bs-modal-header-border-color: var(--df-line);
    --bs-modal-footer-border-color: var(--df-line);
    --bs-modal-box-shadow: var(--df-shadow);
    --bs-modal-padding: 1.25rem;
    --bs-modal-header-padding: 1rem 1.25rem;
}
body.portal .modal-header { background: var(--df-surface) !important; color: var(--df-ink) !important; background-image: none !important; }
body.portal .modal-header .modal-title, body.portal .modal-header .text-white, body.portal .modal-header h1, body.portal .modal-header h2,
body.portal .modal-header h3, body.portal .modal-header h4, body.portal .modal-header h5, body.portal .modal-header h6 { color: var(--df-ink) !important; font-size: 1.05rem; font-weight: 700; }
body.portal .modal-header .btn-close-white { filter: none; }
body.portal .modal-footer { background: var(--df-paper); }
body.portal .modal-backdrop { --bs-backdrop-bg: var(--df-ink); --bs-backdrop-opacity: .45; }
body.portal .dropdown-menu {
    --bs-dropdown-border-radius: var(--df-radius-ctl);
    --bs-dropdown-border-color: var(--df-line);
    --bs-dropdown-box-shadow: var(--df-shadow);
    --bs-dropdown-link-color: var(--df-ink);
    --bs-dropdown-link-hover-bg: var(--df-paper);
    --bs-dropdown-link-hover-color: var(--df-ink);
    --bs-dropdown-link-active-bg: var(--df-accent-soft);
    --bs-dropdown-link-active-color: var(--df-accent-deep);
    --bs-dropdown-header-color: var(--df-ink-3);
    --bs-dropdown-divider-bg: var(--df-line);
    --bs-dropdown-font-size: var(--df-text-sm);
    --bs-dropdown-padding-y: .35rem;
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-item-padding-x: .9rem;
    box-shadow: var(--df-shadow);
}
body.portal .dropdown-item { border-radius: 6px; margin: 0 .35rem; width: auto; }
body.portal .offcanvas { --bs-offcanvas-border-color: var(--df-line); --bs-offcanvas-bg: var(--df-surface); }
body.portal .toast { --bs-toast-border-color: var(--df-line); --bs-toast-border-radius: var(--df-radius-ctl); --bs-toast-box-shadow: var(--df-shadow); --bs-toast-bg: var(--df-surface); --bs-toast-header-bg: var(--df-surface); --bs-toast-header-border-color: var(--df-line); }
body.portal .popover { --bs-popover-border-color: var(--df-line); --bs-popover-border-radius: var(--df-radius-ctl); --bs-popover-box-shadow: var(--df-shadow); }
body.portal .tooltip { --bs-tooltip-bg: var(--df-ink); --bs-tooltip-border-radius: 6px; }

/* Navs, tabs, pills, breadcrumbs, pagination */
body.portal .nav-tabs { --bs-nav-tabs-border-color: var(--df-line); --bs-nav-tabs-link-active-color: var(--df-accent-deep); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent transparent var(--df-accent); --bs-nav-tabs-link-hover-border-color: transparent transparent var(--df-line-strong); --bs-nav-link-color: var(--df-ink-2); --bs-nav-link-hover-color: var(--df-ink); --bs-nav-link-font-weight: 600; --bs-nav-link-font-size: var(--df-text-sm); }
body.portal .nav-tabs .nav-link { border-bottom-width: 2px; margin-bottom: -1px; }
body.portal .nav-tabs .nav-link.active { border-bottom-width: 2px; }
body.portal .nav-pills { --bs-nav-pills-border-radius: var(--df-radius-ctl); --bs-nav-pills-link-active-bg: var(--df-accent-soft); --bs-nav-pills-link-active-color: var(--df-accent-deep); --bs-nav-link-color: var(--df-ink-2); --bs-nav-link-hover-color: var(--df-ink); --bs-nav-link-font-weight: 600; --bs-nav-link-font-size: var(--df-text-sm); }
body.portal .breadcrumb { --bs-breadcrumb-divider: '/'; --bs-breadcrumb-divider-color: var(--df-line-strong); --bs-breadcrumb-item-active-color: var(--df-ink); font-size: var(--df-text-sm); }
body.portal .breadcrumb a { color: var(--df-ink-2); text-decoration: none; }
body.portal .breadcrumb a:hover { color: var(--df-accent-deep); }
body.portal .pagination { --bs-pagination-color: var(--df-ink); --bs-pagination-border-color: var(--df-line); --bs-pagination-hover-bg: var(--df-paper); --bs-pagination-hover-color: var(--df-ink); --bs-pagination-hover-border-color: var(--df-line-strong); --bs-pagination-focus-box-shadow: 0 0 0 4px var(--df-accent-soft); --bs-pagination-active-bg: var(--df-accent); --bs-pagination-active-border-color: var(--df-accent); --bs-pagination-disabled-color: var(--df-ink-3); --bs-pagination-disabled-border-color: var(--df-line); --bs-pagination-font-size: var(--df-text-sm); --bs-pagination-border-radius: var(--df-radius-ctl); }

/* Alerts, badges, list groups, progress */
body.portal .alert { --bs-alert-border-radius: var(--df-radius-ctl); border: 0; font-size: var(--df-text-sm); }
body.portal .alert-primary, body.portal .alert-info { --bs-alert-bg: var(--df-accent-soft); --bs-alert-color: var(--df-ink); --bs-alert-link-color: var(--df-accent-deep); }
body.portal .alert-success { --bs-alert-bg: var(--df-ok-soft); --bs-alert-color: var(--df-ok); --bs-alert-link-color: var(--df-ok); }
body.portal .alert-warning { --bs-alert-bg: var(--df-warn-soft); --bs-alert-color: var(--df-warn); --bs-alert-link-color: var(--df-warn); }
body.portal .alert-danger { --bs-alert-bg: var(--df-danger-soft); --bs-alert-color: var(--df-danger); --bs-alert-link-color: var(--df-danger); }
body.portal .alert-secondary, body.portal .alert-light, body.portal .alert-dark { --bs-alert-bg: var(--df-neutral-soft); --bs-alert-color: var(--df-ink-2); }
body.portal .badge { --bs-badge-border-radius: var(--df-radius-tag); --bs-badge-font-weight: 600; --bs-badge-padding-x: .55em; --bs-badge-padding-y: .32em; --bs-badge-font-size: .74em; letter-spacing: 0; }
/* Status badges go soft: a table full of solid colour blocks shouts, and
   the pages that use them mostly mean "state", not "look here". */
body.portal .badge.bg-primary, body.portal .badge.text-bg-primary { background: var(--df-accent-soft) !important; color: var(--df-accent-deep) !important; }
body.portal .badge.bg-success, body.portal .badge.text-bg-success { background: var(--df-ok-soft) !important; color: var(--df-ok) !important; }
body.portal .badge.bg-warning, body.portal .badge.text-bg-warning { background: var(--df-warn-soft) !important; color: var(--df-warn) !important; }
body.portal .badge.bg-danger, body.portal .badge.text-bg-danger { background: var(--df-danger-soft) !important; color: var(--df-danger) !important; }
body.portal .badge.bg-info, body.portal .badge.text-bg-info { background: var(--df-info-soft) !important; color: var(--df-info) !important; }
body.portal .badge.bg-secondary, body.portal .badge.text-bg-secondary, body.portal .badge.bg-dark, body.portal .badge.text-bg-dark { background: var(--df-neutral-soft) !important; color: var(--df-neutral) !important; }
body.portal .badge.bg-light, body.portal .badge.text-bg-light { background: var(--df-paper) !important; color: var(--df-ink-2) !important; border: 1px solid var(--df-line); }
body.portal .badge.text-dark { color: var(--df-ink) !important; }
body.portal .badge.rounded-pill { --bs-badge-border-radius: 999px; }
body.portal .list-group { --bs-list-group-border-color: var(--df-line); --bs-list-group-border-radius: var(--df-radius-panel); --bs-list-group-action-hover-bg: var(--df-paper); --bs-list-group-action-active-bg: var(--df-accent-soft); --bs-list-group-active-bg: var(--df-accent-soft); --bs-list-group-active-color: var(--df-accent-deep); --bs-list-group-active-border-color: var(--df-line); --bs-list-group-color: var(--df-ink); --bs-list-group-item-padding-y: .7rem; --bs-list-group-item-padding-x: 1rem; font-size: var(--df-text-sm); }
body.portal .progress { --bs-progress-height: 8px; --bs-progress-bg: var(--df-neutral-soft); --bs-progress-bar-bg: var(--df-accent); --bs-progress-border-radius: 999px; }
body.portal .progress-bar.bg-success { background: var(--df-ok) !important; }
body.portal .progress-bar.bg-warning { background: var(--df-warn) !important; }
body.portal .progress-bar.bg-danger { background: var(--df-danger) !important; }
body.portal .accordion { --bs-accordion-border-color: var(--df-line); --bs-accordion-border-radius: var(--df-radius-panel); --bs-accordion-btn-focus-box-shadow: 0 0 0 4px var(--df-accent-soft); --bs-accordion-active-bg: var(--df-accent-soft); --bs-accordion-active-color: var(--df-accent-deep); --bs-accordion-btn-padding-y: .8rem; }

/* Utilities that pages lean on */
body.portal .text-muted { color: var(--df-ink-3) !important; }
body.portal .text-secondary { color: var(--df-ink-2) !important; }
body.portal .text-primary { color: var(--df-accent-deep) !important; }
body.portal .text-success { color: var(--df-ok) !important; }
body.portal .text-warning { color: var(--df-warn) !important; }
body.portal .text-danger { color: var(--df-danger) !important; }
body.portal .text-info { color: var(--df-info) !important; }
body.portal .text-dark { color: var(--df-ink) !important; }
body.portal .bg-light { background-color: var(--df-paper) !important; }
body.portal .bg-white { background-color: var(--df-surface) !important; }
body.portal .bg-primary.bg-opacity-10, body.portal .bg-info.bg-opacity-10 { background-color: var(--df-accent-soft) !important; }
body.portal .bg-success.bg-opacity-10 { background-color: var(--df-ok-soft) !important; }
body.portal .bg-warning.bg-opacity-10 { background-color: var(--df-warn-soft) !important; }
body.portal .bg-danger.bg-opacity-10 { background-color: var(--df-danger-soft) !important; }
body.portal .shadow-sm { box-shadow: none !important; }
body.portal .shadow { box-shadow: var(--df-shadow-soft) !important; }
body.portal .shadow-lg { box-shadow: var(--df-shadow) !important; }
body.portal .border { border-color: var(--df-line) !important; }
body.portal .border-primary { border-color: var(--df-cell) !important; }
body.portal .rounded { border-radius: var(--df-radius-ctl) !important; }
body.portal .rounded-3, body.portal .rounded-4 { border-radius: var(--df-radius-panel) !important; }
body.portal hr { border-color: var(--df-line); opacity: 1; }
body.portal code { color: var(--df-accent-deep); background: var(--df-accent-soft); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
body.portal pre { background: var(--df-paper); border: 1px solid var(--df-line); border-radius: var(--df-radius-ctl); padding: .75rem 1rem; }
body.portal .spinner-border { --bs-spinner-width: 1.25rem; --bs-spinner-height: 1.25rem; --bs-spinner-border-width: 2px; }

/* ── Legacy page patterns from style.css, in the new world ────────── */
/* The gradient hero with white text (hero-logo-theme, page-hero, the
   welcome banners) becomes a quiet surface band with ink text, and the
   pill-shaped uppercase buttons become ordinary buttons. Pages drop these
   classes in their own pass; until then they read correctly. */
body.portal .btn { border-radius: var(--df-radius-ctl); text-transform: none; letter-spacing: 0; border-width: 1px; border-style: solid; }
body.portal a.btn { color: var(--bs-btn-color); text-decoration: none; }
body.portal a.btn:hover, body.portal a.btn:focus-visible { color: var(--bs-btn-hover-color); }
body.portal a.btn:active { color: var(--bs-btn-active-color); }
body.portal .hero-logo-theme, body.portal .page-hero, body.portal .welcome-banner, body.portal .welcome-header,
body.portal .dashboard-header, body.portal .profile-header, body.portal .page-banner {
    background: var(--df-surface) !important; background-image: none !important; color: var(--df-ink) !important;
    min-height: 0; border-bottom: 1px solid var(--df-line); box-shadow: none !important;
}
body.portal .hero-logo-theme::before, body.portal .page-hero::before, body.portal .welcome-banner::before, body.portal .welcome-header::before { display: none !important; }
body.portal .hero-logo-theme.py-5, body.portal .page-hero { padding-top: var(--df-space-6) !important; padding-bottom: var(--df-space-6) !important; }
body.portal .hero-logo-theme *, body.portal .page-hero *, body.portal .welcome-banner *, body.portal .welcome-header *,
body.portal .dashboard-header *, body.portal .profile-header * { color: inherit; }
body.portal .hero-logo-theme h1, body.portal .page-hero h1, body.portal .welcome-banner h1, body.portal .welcome-header h1, body.portal .welcome-banner h2, body.portal .welcome-header h2 { color: var(--df-ink) !important; }
body.portal .hero-logo-theme .display-4, body.portal .page-hero .display-4 { font-size: 2rem; letter-spacing: -.03em; margin-bottom: .5rem !important; }
body.portal .hero-logo-theme .lead, body.portal .page-hero .lead, body.portal .welcome-banner .lead, body.portal .welcome-header .lead, body.portal .welcome-banner p, body.portal .welcome-header p { color: var(--df-ink-2) !important; opacity: 1; font-size: 1rem; max-width: 64ch; }
body.portal .hero-logo-theme .text-white, body.portal .page-hero .text-white, body.portal .welcome-banner .text-white, body.portal .welcome-header .text-white, body.portal .text-white.hero-logo-theme { color: var(--df-ink) !important; }
body.portal .hero-logo-theme .text-white-50, body.portal .page-hero .text-white-50, body.portal .welcome-banner .text-white-50 { color: var(--df-ink-3) !important; }
body.portal .hero-logo-theme .btn-light, body.portal .page-hero .btn-light, body.portal .welcome-banner .btn-light, body.portal .welcome-header .btn-light {
    background: var(--df-accent); border-color: var(--df-accent); color: var(--df-on-status) !important; font-weight: 600;
}
body.portal .hero-logo-theme .btn-light:hover, body.portal .page-hero .btn-light:hover, body.portal .welcome-banner .btn-light:hover { background: var(--df-accent-deep); border-color: var(--df-accent-deep); color: var(--df-on-status) !important; }
body.portal .hero-logo-theme .btn-outline-light, body.portal .page-hero .btn-outline-light, body.portal .welcome-banner .btn-outline-light, body.portal .welcome-header .btn-outline-light {
    color: var(--df-ink) !important; border-color: var(--df-line-strong); background: var(--df-surface);
}
body.portal .hero-logo-theme .btn-outline-light:hover, body.portal .page-hero .btn-outline-light:hover, body.portal .welcome-banner .btn-outline-light:hover { background: var(--df-paper); border-color: var(--df-ink); color: var(--df-ink) !important; }
body.portal .hero-logo-theme .btn-lg, body.portal .page-hero .btn-lg { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: .95rem; }
body.portal .hero-logo-theme .hero-stats .stat-card, body.portal .page-hero .hero-stats .stat-card, body.portal .hero-logo-theme .stat-card {
    background: var(--df-paper) !important; border: 1px solid var(--df-line) !important; color: var(--df-ink) !important; border-radius: var(--df-radius-panel); backdrop-filter: none;
}
body.portal .hero-logo-theme .hero-stats .stat-card h3, body.portal .hero-logo-theme .stat-card .display-6 { color: var(--df-ink) !important; font-size: 1.85rem; letter-spacing: -.03em; }
body.portal .hero-logo-theme .hero-stats .stat-card p, body.portal .hero-logo-theme .stat-card p { color: var(--df-ink-3) !important; font-size: var(--df-text-sm); }
body.portal .page-hero .hero-badge { background: var(--df-accent-soft); border-color: transparent; color: var(--df-accent-deep); letter-spacing: 0; border-radius: var(--df-radius-tag); }
/* Gradient utility classes on headers and table heads, used across ~13 pages. */
body.portal .bg-gradient-primary, body.portal .bg-gradient-dark, body.portal .bg-gradient-success, body.portal .bg-gradient-info,
body.portal thead.bg-primary, body.portal thead.bg-dark, body.portal thead.table-dark, body.portal .card-header.bg-primary, body.portal .card-header.bg-dark,
body.portal .card-header.bg-success, body.portal .card-header.bg-info, body.portal .card-header.bg-warning, body.portal .card-header.bg-danger, body.portal .card-header.bg-secondary {
    background: var(--df-surface) !important; background-image: none !important; color: var(--df-ink) !important;
}
body.portal .bg-gradient-primary .text-white, body.portal .bg-gradient-dark .text-white, body.portal .bg-gradient-primary.text-white *, body.portal .bg-gradient-dark.text-white *,
body.portal thead.bg-primary *, body.portal thead.bg-dark *, body.portal .card-header.bg-primary *, body.portal .card-header.bg-dark *, body.portal .card-header.bg-success *,
body.portal .card-header.bg-info *, body.portal .card-header.bg-warning *, body.portal .card-header.bg-danger *, body.portal .card-header.bg-secondary *,
body.portal .bg-gradient-primary.text-white, body.portal .bg-gradient-dark.text-white { color: var(--df-ink) !important; }
body.portal thead.bg-gradient-primary th, body.portal thead.bg-gradient-dark th, body.portal thead.bg-primary th, body.portal thead.bg-dark th { color: var(--df-ink-3) !important; background: var(--df-paper) !important; }
body.portal .bg-gradient-primary .btn-light, body.portal .bg-gradient-dark .btn-light, body.portal .card-header.bg-primary .btn-light, body.portal .card-header.bg-dark .btn-light { color: var(--df-ink) !important; background: var(--df-surface); border-color: var(--df-line-strong); }
body.portal .bg-gradient-primary .btn-outline-light, body.portal .card-header.bg-primary .btn-outline-light, body.portal .card-header.bg-dark .btn-outline-light { color: var(--df-ink) !important; border-color: var(--df-line-strong); }
body.portal .bg-gradient-primary .badge.bg-light, body.portal .card-header.bg-primary .badge.bg-light { background: var(--df-paper) !important; color: var(--df-ink-2) !important; }
/* Dark page footers inside the portals become a quiet surface band. */
body.portal footer.bg-dark { background: var(--df-surface) !important; color: var(--df-ink-2) !important; border-top: 1px solid var(--df-line); }
body.portal footer.bg-dark *, body.portal footer.bg-dark .text-white, body.portal footer.bg-dark a { color: var(--df-ink-2) !important; }
body.portal footer.bg-dark h5 { color: var(--df-ink) !important; }
body.portal .modal-header-primary .modal-title { color: var(--df-ink); }
body.portal .modal-header-primary .btn-close { filter: none; }
body.portal .stat-card-admin { border: 1px solid var(--df-line); box-shadow: none; border-radius: var(--df-radius-panel); }
body.portal .stat-card-admin:hover { transform: none; box-shadow: none; border-color: var(--df-line-strong); }
body.portal .stat-card-admin .stat-value { font-variant-numeric: tabular-nums; letter-spacing: -.03em; -webkit-text-fill-color: initial; background: none; color: var(--df-ink); }
body.portal .stat-card-admin .stat-label { text-transform: none; letter-spacing: 0; font-size: var(--df-text-sm); color: var(--df-ink-3); font-weight: 600; }

/* ── Learning (intern and mentor) ─────────────────────────────────── */
.journey-card { border-left: 4px solid var(--df-line-strong); }
.journey-card.unlocked { border-left-color: var(--df-ok); }
.journey-card.locked { opacity: .7; }
/* The week "Continue" points into. */
.journey-card.is-next { border-left-color: var(--df-accent); box-shadow: 0 0 0 1px var(--df-accent); }
.journey-card__week { min-width: 6.5rem; }
.journey-card__bar { --bs-progress-height: 4px; max-width: 20rem; }
.learning-continue { border-left: 4px solid var(--df-accent); background: var(--df-accent-soft); }
.learning-continue .min-w-0, .journey-card .min-w-0, .lesson-row .min-w-0 { min-width: 0; overflow-wrap: anywhere; }
.lesson-row__num { width: 2rem; }
.quiz-checklist { background: var(--df-paper); border: 1px solid var(--df-line); border-radius: var(--df-radius-ctl); padding: var(--df-space-3) var(--df-space-4); color: var(--df-ink-2); }
.quiz-checklist ul { padding-left: 1.1rem; }
body.quiz-practice-open { overflow: hidden; }
.score-tile, .stat-tile { background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); padding: var(--df-space-4) var(--df-space-5); }
.score-tile .value, .stat-tile .value { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; color: var(--df-ink); font-variant-numeric: tabular-nums; }
.lesson-body img { max-width: 100%; height: auto; }
.lesson-body pre { background: var(--df-paper); border: 1px solid var(--df-line); padding: .75rem; border-radius: var(--df-radius-ctl); overflow-x: auto; }
.lesson-body table { width: auto; margin-bottom: 1rem; }
.lesson-body th, .lesson-body td { border: 1px solid var(--df-line); padding: .25rem .5rem; }
.lesson-video { width: 100%; max-height: 70vh; background: var(--df-ink); border-radius: var(--df-radius-ctl); }
.lesson-pdf { width: 100%; height: 80vh; border: 1px solid var(--df-line); border-radius: var(--df-radius-ctl); }
/* The timed quiz screen (lms_quiz.js): one full-viewport layer over the
   lesson, and the warning / confirm / other-window dialogs above it. */
body.quiz-running { overflow: hidden; }
.quiz-exam { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; background: var(--df-surface); }
/* Questions and options cannot be selected or long-pressed into a copy
   menu (lms_quiz.js blocks the copy shortcuts), and the quiz never prints. */
.quiz-exam, .quiz-exam * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media print { .quiz-exam, body.quiz-running > * { display: none !important; } }
.quiz-exam__inner { max-width: 860px; padding-bottom: 6rem; }
.quiz-exam__bar { position: sticky; top: 0; z-index: 1; display: flex; gap: 1rem; align-items: center; background: var(--df-surface); padding: var(--df-space-3) 0; margin-bottom: var(--df-space-4); border-bottom: 1px solid var(--df-line); }
.quiz-clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; color: var(--df-ink); }
.quiz-clock.is-urgent { color: var(--df-danger); }
.quiz-question { margin-bottom: var(--df-space-5); }
.quiz-exam__foot { display: flex; gap: 1rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--df-line); padding-top: var(--df-space-4); }
.quiz-warning { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, var(--df-ink) 60%, transparent); }
.quiz-warning__card { max-width: 440px; width: 100%; }
.quiz-warning[hidden], .quiz-exam[hidden] { display: none; }

/* ── Admin table surfaces (the house pattern) and the markdown editor ── */
.lms-table th, .contacts-table th, .deliverables-table th, .requirements-table th { white-space: nowrap; }
.lms-table td, .contacts-table td, .deliverables-table td, .requirements-table td { vertical-align: middle; }
.item-title { font-weight: 600; color: var(--df-ink); }
.source-tag { font-size: .7rem; }
.EasyMDEContainer { margin-bottom: 1rem; }
.EasyMDEContainer .CodeMirror { min-height: 200px; border: 1px solid var(--df-line-strong); border-radius: var(--df-radius-ctl); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.editor-toolbar { border: 1px solid var(--df-line-strong); border-radius: var(--df-radius-ctl) var(--df-radius-ctl) 0 0; background: var(--df-paper); }
.editor-toolbar.fullscreen, .CodeMirror-fullscreen { z-index: 9999; }
/* Review pages (tuition, laptop, job application detail) */
.field-label { font-size: .78rem; font-weight: 600; color: var(--df-ink-3); margin-bottom: 2px; }
.field-value { font-size: .95rem; color: var(--df-ink); }
.sop-box { background: var(--df-paper); border-left: 3px solid var(--df-accent); padding: 1rem 1.25rem; white-space: pre-wrap; font-size: .92rem; line-height: 1.7; border-radius: 0 var(--df-radius-ctl) var(--df-radius-ctl) 0; color: var(--df-ink-2); }
.doc-link { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: var(--df-radius-ctl); font-size: var(--df-text-sm); text-decoration: none; border: 1px solid var(--df-line-strong); color: var(--df-accent-deep); transition: background-color 160ms var(--df-ease); }
.doc-link:hover { background: var(--df-accent-soft); }
.doc-link.missing { color: var(--df-ink-3); pointer-events: none; border-style: dashed; }
.status-badge-header { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; font-size: var(--df-text-sm); font-weight: 700; }
.note-bubble { background: var(--df-paper); border-left: 3px solid var(--df-accent); border-radius: 0 var(--df-radius-ctl) var(--df-radius-ctl) 0; padding: 12px 16px; }

/* ── Tickets and the vetting panel (admin_tickets.html, mentor_tickets.html) ── */
.table-scroll { overflow-x: auto; }
.tickets-table th { white-space: nowrap; }
.tickets-table td { vertical-align: middle; }
.empty-row td { text-align: center; color: var(--df-ink-3); padding: 2.5rem 1rem; }
.kind-request { background: var(--df-info-soft); color: var(--df-info); }
.kind-exemption { background: var(--df-warn-soft); color: var(--df-warn); }
.kind-issue { background: var(--df-danger-soft); color: var(--df-danger); }
.stage-mentor_review { background: var(--df-warn-soft); color: var(--df-warn); }
.stage-admin_review { background: var(--df-accent-soft); color: var(--df-accent-deep); }
.stage-closed { background: var(--df-neutral-soft); color: var(--df-neutral); }
/* Four distinct risk bands, never two: colour is read first on a vetting
   panel, so `watch`, `at_risk` and `critical` must not share a hue with
   each other or with `healthy`. `unknown` stays plain grey words. */
.band-healthy { background: var(--df-ok-soft); color: var(--df-ok); }
.band-watch { background: var(--df-warn-soft); color: var(--df-warn); }
.band-at_risk { background: var(--df-at-risk-soft); color: var(--df-at-risk); }
.band-critical { background: var(--df-danger-soft); color: var(--df-danger); }
.strip-group-label { font-size: .72rem; font-weight: 600; color: var(--df-ink-3); margin: .35rem 0 .15rem; }
.period-strip { display: flex; flex-wrap: wrap; }
.strip-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: .15rem; border-radius: 6px; font-weight: 700; font-size: .85rem; }
.strip-submitted { background: var(--df-ok-soft); color: var(--df-ok); }
.strip-late { background: var(--df-warn-soft); color: var(--df-warn); }
.strip-missing { background: var(--df-danger-soft); color: var(--df-danger); }
.claimed { outline: 3px solid var(--df-ink); outline-offset: 1px; }
.advisory-reasons { display: block; color: var(--df-ink-3); font-size: .85rem; }
.prior-requests ul { padding-left: 1.1rem; margin-bottom: 0; }
.panel-tile { background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); padding: 1.25rem; margin-bottom: 1rem; }
.panel-tile .label { font-size: .75rem; font-weight: 600; color: var(--df-ink-3); }
.panel-tile .value { font-size: 1.1rem; font-weight: 600; color: var(--df-ink); margin-top: .25rem; }

/* ── Sign-in pages (login.html, admin_login.html, admin_login_code.html) ── */
/* One quiet card on paper. The intern page wraps the card in
   .login-container; the admin pages put the card straight on body. */
body.portal.df-auth { background: var(--df-paper); min-height: 100vh; }
body.portal .login-container { max-width: 440px; margin: 0 auto; padding: 8vh 16px 4vh; position: relative; z-index: 1; min-height: 0; background: transparent; display: block; }
body.portal .login-container::before { display: none; }
body.portal .login-card { background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); box-shadow: var(--df-shadow-soft); padding: var(--df-space-6); width: 100%; max-width: none; }
body.portal .card.login-card { padding: 0; }
body.portal .login-header { text-align: center; margin-bottom: var(--df-space-5); background: transparent; border: 0; }
body.portal .card-header.login-header { padding: var(--df-space-6) var(--df-space-5) var(--df-space-3) !important; margin-bottom: 0; border-bottom: 0 !important; }
body.portal .login-header h2, body.portal .login-header h3, body.portal .login-header h4 { font-size: 1.35rem; margin: .5rem 0 .25rem; }
body.portal .login-header p { color: var(--df-ink-3); font-size: var(--df-text-sm); margin: 0; }
body.portal .login-logo, body.portal .login-header .logo { width: 56px; height: 56px; max-width: 56px; margin: 0 auto .5rem; display: block; }
body.portal .btn-login { width: 100%; padding: .7rem 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: var(--df-radius-ctl); }
body.portal .login-card .form-control { border-radius: var(--df-radius-ctl); text-align: left; letter-spacing: 0; font-size: var(--df-text); padding: .7rem .9rem; min-height: 44px; }
body.portal .login-card .form-control.code-input, body.portal .login-card input[inputmode="numeric"] { text-align: center; font-size: 1.4rem; letter-spacing: .35rem; }
body.portal .cohort-info { background: var(--df-accent-soft); border-radius: var(--df-radius-ctl); padding: .8rem 1rem; margin-bottom: var(--df-space-4); font-size: var(--df-text-sm); color: var(--df-ink-2); border: 0; }
body.portal .login-card .form-floating label { color: var(--df-ink-3); }


/* ── Help (help_index.html, help_page.html; all three portals) ────── */
.help-wrap { max-width: 860px; margin: 0 auto; padding: var(--df-space-5) 1rem 3rem; }
.help-wrap.help-wrap-index { max-width: 960px; }
.help-filter { max-width: 420px; }
.help-card { display: block; border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); padding: 1rem 1.25rem; margin-bottom: .75rem; color: inherit; text-decoration: none; background: var(--df-surface); transition: border-color 160ms var(--df-ease); }
.help-card:hover { border-color: var(--df-accent); color: inherit; }
.help-card h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.help-card p { margin: 0; color: var(--df-ink-2); }
.help-card small { color: var(--df-ink-3); }
/* The filter toggles `hidden` on the cards; don't rely on the CSS
   framework's [hidden] reset being present on every portal base. */
.help-card[hidden] { display: none; }
.help-body { color: var(--df-ink-2); line-height: 1.6; }
.help-body h2 { font-size: 1.25rem; margin-top: 2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--df-line); color: var(--df-ink); }
.help-body h3 { font-size: 1.05rem; margin-top: 1.25rem; color: var(--df-ink); }
.help-body table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
.help-body th, .help-body td { border: 1px solid var(--df-line); padding: .4rem .6rem; text-align: left; }
.help-body th { color: var(--df-ink-3); font-size: .85rem; }
.help-body blockquote { border-left: 3px solid var(--df-accent); margin: .75rem 0; padding: .25rem .75rem; color: var(--df-ink-2); background: var(--df-paper); border-radius: 0 var(--df-radius-ctl) var(--df-radius-ctl) 0; }
.help-body code { background: var(--df-accent-soft); color: var(--df-accent-deep); padding: .1rem .3rem; border-radius: .25rem; }
.help-body strong { color: var(--df-ink); }
.help-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }

/* ── Page head ────────────────────────────────────────────────────── */
.df-page-head-portal { display: flex; flex-wrap: wrap; gap: var(--df-space-3) var(--df-space-6); align-items: flex-end; justify-content: space-between; }
.df-page-head-portal .df-page-head-text { min-width: 0; }
.df-page-head-portal .df-lede { margin: .3rem 0 0; color: var(--df-ink-2); }
.df-page-head-icon { color: var(--df-ink-3); margin-right: .5rem; font-size: .85em; }

/* ── Stat tile ────────────────────────────────────────────────────── */
.df-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--df-space-4); margin-bottom: var(--df-space-5); }
.pi-panel-title { font-size: var(--df-text-sm); color: var(--df-ink-2); font-weight: 600; margin-bottom: var(--df-space-2); }
.pi-stats .df-stat-value-text { font-size: var(--df-text-sm); }
.df-stat { background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); padding: var(--df-space-4) var(--df-space-5); display: grid; gap: .2rem; min-width: 0; align-content: start; }
.df-stat-label { font-size: var(--df-text-sm); color: var(--df-ink-3); font-weight: 600; }
.df-stat-value { font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--df-ink); font-variant-numeric: tabular-nums; }
.df-stat-delta { font-size: var(--df-text-sm); color: var(--df-ink-2); }
.df-stat-delta.is-up { color: var(--df-ok); }
.df-stat-delta.is-down { color: var(--df-danger); }
.df-stat-link { text-decoration: none; color: inherit; transition: border-color 160ms var(--df-ease), background-color 160ms var(--df-ease); }
.df-stat-link:hover { border-color: var(--df-accent); color: inherit; }
/* A tile whose value is words, not a number (the featured article on
   admin_publications.html, the three deliverables on my_research.html). */
.df-stat-value-text { font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── Tables ───────────────────────────────────────────────────────── */
.df-table-wrap { background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); overflow: auto; }
.df-table-wrap > .table, .df-table-wrap > .df-table { margin: 0; }
.df-table-wrap thead th { position: sticky; top: 0; background: var(--df-surface); z-index: 1; }
body.portal .df-table th { font-size: .78rem; padding: .6rem .75rem; }
body.portal .df-table td { padding: .6rem .75rem; height: var(--df-row); vertical-align: middle; font-size: var(--df-text-sm); }
body.portal .df-table tbody tr:hover td { background: var(--df-accent-soft); }
body.portal .df-table td.df-num, body.portal .df-table th.df-num { text-align: right; }
.df-table-empty td { text-align: center; color: var(--df-ink-3); padding: var(--df-space-6) var(--df-space-4) !important; height: auto; }

/* ── Table scrollers and pinned action columns (static/js/portal_tables.js) ── */
/* Every admin and mentor table scrolls inside its card, never the page;
   a table whose last column holds the row's actions gets that column
   pinned on the right, and the shadow appears only while something is
   actually hidden behind it. */
.df-table-scroll { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
body.portal .card > .df-table-scroll, body.portal .card-body.p-0 > .df-table-scroll { border: 0; }
body.portal .df-table-scroll:not(.card *) { background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); }
body.portal .card .table-responsive, body.portal .card .table-scroll { border: 0; border-radius: 0; background: transparent; }
body.portal .df-scroller { scrollbar-width: thin; scrollbar-color: var(--df-line-strong) transparent; }
body.portal .df-scroller .table { margin-bottom: 0; }
body.portal table.df-pin-last th:last-child, body.portal table.df-pin-last td:last-child { position: sticky; right: 0; background: var(--df-surface); z-index: 2; }
body.portal table.df-pin-last thead th:last-child { z-index: 3; background: var(--df-paper); }
body.portal table.df-pin-last td:last-child { white-space: nowrap; }
body.portal table.df-pin-last td:last-child .btn-group { flex-wrap: nowrap; }
body.portal .table-hover tbody tr:hover td:last-child, body.portal table.df-pin-last.table-hover tbody tr:hover td:last-child { background: var(--df-accent-soft); }
body.portal .table-striped > tbody > tr:nth-of-type(odd) > td:last-child { background: var(--df-paper); }
body.portal .df-scroller.is-overflowing table.df-pin-last th:last-child, body.portal .df-scroller.is-overflowing table.df-pin-last td:last-child { box-shadow: -8px 0 8px -8px rgba(15, 26, 51, .2); }
body.portal table.df-pin-last td:last-child:has(.dropdown-menu.show) { z-index: 1040; }
body.portal .df-scroller .dropdown-menu.show { z-index: 1050; }

/* ── Filter bar ───────────────────────────────────────────────────── */
.df-filters { display: flex; flex-wrap: wrap; gap: var(--df-space-2) var(--df-space-3); align-items: center; margin-bottom: var(--df-space-4); }
.df-filters .form-control, .df-filters .form-select { width: auto; min-width: 160px; }
.df-filters .df-filters-search { flex: 1 1 240px; }
.df-filters .df-filters-reset { margin-left: auto; }

/* ── Section card ─────────────────────────────────────────────────── */
.df-card { background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-radius-panel); margin-bottom: var(--df-space-5); }
.df-card-head { display: flex; flex-wrap: wrap; gap: var(--df-space-2) var(--df-space-4); align-items: center; justify-content: space-between; padding: var(--df-space-3) var(--df-space-5); border-bottom: 1px solid var(--df-line); }
.df-card-head h2, .df-card-head h3, .df-card-head h4 { margin: 0; font-size: 1rem; }
.df-card-head .df-muted { font-size: var(--df-text-sm); }
.df-card-body { padding: var(--df-space-5); }
.df-card-body.is-flush { padding: 0; }
.df-card-foot { padding: var(--df-space-3) var(--df-space-5); border-top: 1px solid var(--df-line); background: var(--df-paper); border-radius: 0 0 var(--df-radius-panel) var(--df-radius-panel); }

/* ── Status ───────────────────────────────────────────────────────── */
.df-tag-info { background: var(--df-info-soft); color: var(--df-info); }
body.portal .df-tag-neutral { background: var(--df-neutral-soft); color: var(--df-neutral); border: 0; }
.df-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--df-neutral); margin-right: .4rem; vertical-align: middle; }
.df-dot-ok { background: var(--df-ok); } .df-dot-warn { background: var(--df-warn); } .df-dot-danger { background: var(--df-danger); } .df-dot-info { background: var(--df-info); }

/* ── Stepper (admin_founder_challenge_detail.html, founder_challenge.html) ── */
/* Where something stands in a fixed sequence: done, current, still to come.
   An <ol>, so the order is in the markup and survives without this sheet;
   the state is a class plus aria-current on the current item, never colour
   alone - a done step carries a tick, the others their number. */
.df-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: var(--df-space-2); counter-reset: df-step; }
.df-stepper > li { counter-increment: df-step; position: relative; padding-top: 2.1rem; padding-right: var(--df-space-2); min-width: 0; font-size: var(--df-text-sm); font-weight: 600; line-height: 1.3; color: var(--df-ink-3); }
.df-stepper > li::before { content: counter(df-step); position: absolute; top: 0; left: 0; z-index: 1; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: var(--df-surface); border: 2px solid var(--df-line-strong); color: var(--df-ink-3); }
.df-stepper > li::after { content: ""; position: absolute; top: calc(.8rem - 1px); left: 1.6rem; right: calc(-1 * var(--df-space-2)); height: 2px; background: var(--df-line); }
.df-stepper > li:last-child::after { display: none; }
.df-stepper > li.is-done { color: var(--df-ink-2); }
.df-stepper > li.is-done::before { content: "\2713"; background: var(--df-ok); border-color: var(--df-ok); color: var(--df-on-status); }
.df-stepper > li.is-done::after { background: var(--df-ok); }
.df-stepper > li.is-current { color: var(--df-ink); }
.df-stepper > li.is-current::before { background: var(--df-accent); border-color: var(--df-accent); color: var(--df-on-status); }
/* The attempt stopped here: a rejected topic or paper. Still the current
   step - it is where things stand - but red, with a cross. */
.df-stepper > li.is-failed { color: var(--df-danger); }
.df-stepper > li.is-failed::before { content: "\2715"; background: var(--df-danger); border-color: var(--df-danger); color: var(--df-on-status); }
@media (max-width: 640px) {
    .df-stepper { grid-template-columns: 1fr; gap: var(--df-space-3); }
    .df-stepper > li { padding: 0 0 0 2.3rem; min-height: 1.6rem; display: flex; align-items: center; }
    .df-stepper > li::after { display: none; }
}

/* ── Empty state (portal density) ─────────────────────────────────── */
body.portal .df-empty { padding: var(--df-space-6) var(--df-space-5); background: var(--df-surface); }
body.portal .df-empty .bi, body.portal .df-empty .fas, body.portal .df-empty .fa { font-size: 1.6rem; color: var(--df-ink-3); margin-bottom: .6rem; display: block; }
body.portal .df-empty h3 { font-size: 1.05rem; }
body.portal .df-empty p { font-size: var(--df-text-sm); }

/* ── Sidebar (admin and mentor) ───────────────────────────────────── */
.df-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--df-sidebar-w);
    background: var(--df-surface); border-right: 1px solid var(--df-line);
    display: flex; flex-direction: column; z-index: 1000; overflow-y: auto; overflow-x: hidden;
    transition: width 200ms var(--df-ease), transform 200ms var(--df-ease);
    scrollbar-width: thin; scrollbar-color: var(--df-line-strong) transparent;
}
.df-sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: var(--df-space-4) var(--df-space-4) var(--df-space-3); color: var(--df-ink); font-weight: 700; text-decoration: none; letter-spacing: -.02em; font-size: 1.05rem; min-height: var(--df-topbar-h); }
.df-sidebar-brand:hover { color: var(--df-ink); }
.df-sidebar-brand img { height: 28px; width: auto; flex: none; }
.df-sidebar-brand .bi, .df-sidebar-brand .fas { color: var(--df-accent); font-size: 1.3rem; }
.df-sidebar-user { display: flex; align-items: center; gap: .65rem; padding: var(--df-space-2) var(--df-space-4) var(--df-space-3); border-bottom: 1px solid var(--df-line); }
.df-sidebar-user .df-avatar-initials { width: 34px; height: 34px; border-radius: 10px; font-size: .9rem; flex: none; }
.df-sidebar-user-text { min-width: 0; }
.df-sidebar-user-text h6, .df-sidebar-user-text strong { margin: 0; font-size: var(--df-text-sm); font-weight: 700; color: var(--df-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.df-sidebar-user-text small { color: var(--df-ink-3); font-size: .78rem; display: block; }
.df-sidebar-nav { flex: 1 1 auto; padding: var(--df-space-2) 0 var(--df-space-3); }
.df-sidebar-section { padding: var(--df-space-4) var(--df-space-4) var(--df-space-1); font-size: .72rem; font-weight: 700; color: var(--df-ink-3); letter-spacing: .02em; }
.df-sidebar-link { display: flex; align-items: center; gap: .7rem; margin: 1px var(--df-space-2); padding: .5rem .75rem; border-radius: var(--df-radius-ctl); color: var(--df-ink-2); font-size: var(--df-text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 160ms var(--df-ease), color 160ms var(--df-ease); }
.df-sidebar-link i { width: 18px; text-align: center; color: var(--df-ink-3); font-size: .95rem; flex: none; transition: color 160ms var(--df-ease); }
.df-sidebar-link:hover { background: var(--df-paper); color: var(--df-ink); }
.df-sidebar-link:hover i { color: var(--df-ink-2); }
.df-sidebar-link.active { background: var(--df-accent-soft); color: var(--df-accent-deep); font-weight: 600; }
.df-sidebar-link.active i { color: var(--df-accent-deep); }
.df-sidebar-link .badge { margin-left: auto; }
.df-sidebar-foot { margin-top: auto; padding: var(--df-space-3) var(--df-space-4) var(--df-space-4); border-top: 1px solid var(--df-line); display: grid; gap: .4rem; }
.df-sidebar-foot .df-sidebar-link { margin: 0; }
.df-sidebar-filter { position: relative; margin: var(--df-space-2) var(--df-space-3) var(--df-space-1); }
.df-sidebar-filter i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--df-ink-3); font-size: .85rem; pointer-events: none; }
.df-sidebar-filter input { width: 100%; padding: .42rem .7rem .42rem 2rem; font-size: var(--df-text-sm); font-family: inherit; color: var(--df-ink); border: 1px solid var(--df-line-strong); border-radius: var(--df-radius-ctl); background: var(--df-paper); transition: border-color 160ms var(--df-ease), box-shadow 160ms var(--df-ease); }
.df-sidebar-filter input::placeholder { color: var(--df-ink-3); }
.df-sidebar-filter input:focus { outline: 0; border-color: var(--df-accent); box-shadow: 0 0 0 4px var(--df-accent-soft); background: var(--df-surface); }
.df-sidebar-empty { display: none; padding: var(--df-space-3) var(--df-space-4); color: var(--df-ink-3); font-size: var(--df-text-sm); }
.df-sidebar-toggle { border: 0; background: transparent; color: var(--df-ink-3); width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; transition: background-color 160ms var(--df-ease), color 160ms var(--df-ease); }
.df-sidebar-toggle:hover { background: var(--df-paper); color: var(--df-ink); }
.df-sidebar-brand .df-sidebar-toggle { margin-left: auto; }
/* collapsed to icons (admin) */
.df-sidebar.collapsed { width: var(--df-sidebar-w-collapsed); }
.df-sidebar.collapsed .df-sidebar-brand { padding-inline: 0; justify-content: center; }
.df-sidebar.collapsed .df-sidebar-brand span, .df-sidebar.collapsed .df-sidebar-brand .df-sidebar-toggle,
.df-sidebar.collapsed .df-sidebar-user-text, .df-sidebar.collapsed .df-sidebar-section,
.df-sidebar.collapsed .df-sidebar-link span, .df-sidebar.collapsed .df-sidebar-filter,
.df-sidebar.collapsed .df-sidebar-empty, .df-sidebar.collapsed .df-sidebar-foot .df-sidebar-note { display: none; }
.df-sidebar.collapsed .df-sidebar-user { justify-content: center; padding-inline: 0; }
.df-sidebar.collapsed .df-sidebar-link { justify-content: center; padding: .6rem 0; margin-inline: var(--df-space-2); }
.df-sidebar.collapsed .df-sidebar-link .badge { position: absolute; transform: translate(12px, -10px); }
.df-sidebar.collapsed .df-sidebar-link i { width: auto; font-size: 1.05rem; }
.df-sidebar.collapsed .df-sidebar-foot { padding-inline: var(--df-space-2); }

/* ── Admin shell ──────────────────────────────────────────────────── */
/* admin_nav.html and every admin page still carry their original class
   names (.admin-sidebar, .admin-main-content, .admin-topbar, .page-title,
   .topbar-actions, .nav-item …); they are styled here as aliases of the
   df- shell so unconverted pages already render in the new world. */
.df-sidebar-head { display: flex; align-items: center; padding-right: var(--df-space-3); }
.df-sidebar-head .df-sidebar-brand { flex: 1 1 auto; min-width: 0; }
.df-sidebar-head .df-sidebar-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-sidebar-user .user-info { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.df-sidebar .nav-item.nav-filtered-out, .df-sidebar .nav-section-title.nav-filtered-out { display: none !important; }
.df-sidebar .nav-badge { margin-left: auto; font-size: .7rem; }
.df-sidebar-note { font-size: .8rem; padding-top: .35rem; padding-bottom: .35rem; }
.df-sidebar.collapsed .df-sidebar-head { padding-right: 0; justify-content: center; }
.df-sidebar.collapsed .df-sidebar-head .df-sidebar-toggle { display: inline-grid; position: absolute; right: 50%; transform: translateX(50%); bottom: auto; top: 60px; }
.df-sidebar.collapsed .df-sidebar-head { position: relative; padding-bottom: 36px; }
.df-sidebar.collapsed .df-sidebar-toggle i { transform: rotate(180deg); }
.df-sidebar.mobile-show { transform: none; box-shadow: var(--df-shadow); }
.df-sidebar .px-3.pb-2 { padding: 0 var(--df-space-3) var(--df-space-2) !important; }
.df-main, .admin-main-content { margin-left: var(--df-sidebar-w); min-height: 100vh; transition: margin-left 200ms var(--df-ease); background: var(--df-paper); overflow-x: clip; }
.df-main.expanded, .admin-main-content.expanded { margin-left: var(--df-sidebar-w-collapsed); }
.df-topbar, .admin-topbar { position: sticky; top: 0; z-index: 100; min-height: var(--df-topbar-h); background: var(--df-surface); border-bottom: 1px solid var(--df-line); display: flex; align-items: center; gap: var(--df-space-3); padding: .5rem var(--df-space-5); }
.df-topbar-title, .admin-topbar .page-title { min-width: 0; flex: 1 1 auto; }
.df-topbar-title h1, .df-topbar-title h4, .admin-topbar .page-title h4, .admin-topbar .page-title h1 { font-size: 1.05rem; margin: 0; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.df-topbar-title p, .admin-topbar .page-title p { margin: 0; font-size: .8rem; color: var(--df-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-topbar-actions, .admin-topbar .topbar-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.df-topbar-actions .btn-sm { white-space: nowrap; }
.df-content { padding: var(--df-space-5); }
.df-topbar-toggle { display: none; }
@media (max-width: 991px) {
    .df-sidebar { transform: translateX(-100%); width: var(--df-sidebar-w) !important; }
    .df-sidebar.show { transform: none; box-shadow: var(--df-shadow); }
    .df-sidebar.collapsed .df-sidebar-brand span, .df-sidebar.collapsed .df-sidebar-user-text, .df-sidebar.collapsed .df-sidebar-section,
    .df-sidebar.collapsed .df-sidebar-link span, .df-sidebar.collapsed .df-sidebar-filter { display: revert; }
    .df-sidebar.collapsed .df-sidebar-link { justify-content: flex-start; padding: .5rem .75rem; }
    .df-main, .df-main.expanded, .admin-main-content, .admin-main-content.expanded { margin-left: 0; }
    .df-content { padding: var(--df-space-4); }
    .df-topbar, .admin-topbar { padding: .5rem var(--df-space-4) .5rem 4rem; }
    .df-topbar-toggle { display: inline-grid; }
    .df-topbar-title p { display: none; }
}
@media (max-width: 640px) {
    .df-topbar { flex-wrap: wrap; }
    .df-topbar-actions, .admin-topbar .topbar-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
}

/* ── Mentor shell (mentor_base.html + mentor_sidebar.html) ────────── */
/* The menu button sits above the sidebar (1000) and below a modal's
   backdrop (1050): at 1100 it floated over an open modal's header. */
body.portal .main-content { margin-left: var(--df-sidebar-w); padding: var(--df-space-5); min-height: 100vh; }
body.portal .flash-stack { margin-left: var(--df-sidebar-w); padding: var(--df-space-4) var(--df-space-5) 0; }
body.portal .page-header { display: flex; flex-wrap: wrap; gap: var(--df-space-3) var(--df-space-5); align-items: flex-end; justify-content: space-between; margin-bottom: var(--df-space-5); }
body.portal .page-title { font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em; color: var(--df-ink); margin: 0; }
body.portal .mobile-toggle { display: none; position: fixed; top: .75rem; left: .75rem; z-index: 1040; width: 40px; height: 40px; border: 1px solid var(--df-line-strong); border-radius: var(--df-radius-ctl); background: var(--df-surface); color: var(--df-ink); box-shadow: var(--df-shadow-soft); }
@media (max-width: 991px) {
    body.portal .main-content, body.portal .flash-stack { margin-left: 0; }
    body.portal .main-content { padding: 4rem var(--df-space-4) var(--df-space-4); }
    body.portal .mobile-toggle { display: inline-grid; place-items: center; }
}

/* ── Intern top bar (_intern_nav.html) ────────────────────────────── */
body.portal .navbar-logo-theme { background: var(--df-surface) !important; background-image: none !important; border-bottom: 1px solid var(--df-line); box-shadow: none !important; padding-top: .45rem; padding-bottom: .45rem; }
body.portal .navbar-logo-theme .navbar-brand, body.portal .navbar-logo-theme .navbar-brand span { color: var(--df-ink) !important; letter-spacing: -.02em; }
body.portal .navbar-logo-theme .navbar-brand img { height: 32px !important; }
body.portal .navbar-logo-theme .logo-container { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
body.portal .navbar-logo-theme .navbar-nav .nav-link { color: var(--df-ink-2) !important; font-weight: 500; font-size: var(--df-text-sm); border-radius: var(--df-radius-ctl); padding: .45rem .75rem !important; margin: 0 1px; transition: background-color 160ms var(--df-ease), color 160ms var(--df-ease); }
body.portal .navbar-logo-theme .navbar-nav .nav-link:hover, body.portal .navbar-logo-theme .navbar-nav .nav-link:focus { background: var(--df-paper); color: var(--df-ink) !important; }
body.portal .navbar-logo-theme .navbar-nav .nav-link.active, body.portal .navbar-logo-theme .navbar-nav .nav-link.show { background: var(--df-accent-soft); color: var(--df-accent-deep) !important; font-weight: 600; }
body.portal .navbar-logo-theme .navbar-nav .nav-link i { color: inherit; opacity: .8; }
body.portal .navbar-logo-theme .navbar-toggler { border-color: var(--df-line-strong); }
body.portal .navbar-logo-theme .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%230f1a33' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
body.portal .navbar-logo-theme .dropdown-menu { border-radius: var(--df-radius-ctl); }
body.portal .navbar-logo-theme .btn-outline-light { color: var(--df-ink); border-color: var(--df-line-strong); }
body.portal .navbar-logo-theme .btn-outline-light:hover { background: var(--df-paper); color: var(--df-ink); }
body.portal .navbar-logo-theme .text-white, body.portal .navbar-logo-theme .text-light { color: var(--df-ink) !important; }
body.portal .navbar-logo-theme .text-white-50 { color: var(--df-ink-3) !important; }
@media (max-width: 991px) {
    body.portal .navbar-logo-theme .navbar-collapse { padding: .5rem 0; }
    body.portal .navbar-logo-theme .navbar-nav .nav-link { padding: .6rem .75rem !important; }
}

/* ── Footer (templates/_portal_footer.html; intern and mentor) ────── */
/* A surface band with a hairline, the brand and its promise, the portal's
   places, who is signed in, and the small print. The body becomes a
   column so the band sits at the bottom of a short page rather than in
   the middle of it. */
body.portal:has(> .df-footer) { display: flex; flex-direction: column; min-height: 100vh; }
body.portal:has(> .df-footer) > .df-footer { margin-top: auto; }
body.portal:has(> .df-footer) > .main-content { flex: 1 0 auto; min-height: 0; }
.df-footer { background: var(--df-surface); border-top: 1px solid var(--df-line); color: var(--df-ink-2); font-size: var(--df-text-sm); margin-top: var(--df-space-6); }
.df-footer-mentor { margin-left: var(--df-sidebar-w); }
.df-footer-inner { max-width: 1320px; margin-inline: auto; padding: var(--df-space-6) var(--df-space-5) var(--df-space-4); }
.df-footer-intern .df-footer-inner { max-width: 1320px; }
.df-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--df-space-6) var(--df-space-5); }
.df-footer-logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--df-ink); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; text-decoration: none; margin-bottom: .6rem; }
.df-footer-logo img { height: 28px; width: auto; }
.df-footer-logo:hover { color: var(--df-ink); }
.df-footer-promise { margin: 0 0 .35rem; color: var(--df-ink); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.df-footer-note { margin: 0; color: var(--df-ink-3); max-width: 34ch; line-height: 1.5; }
.df-footer-col h2 { font-size: .8rem; font-weight: 700; color: var(--df-ink-3); margin: .35rem 0 .7rem; letter-spacing: 0; }
.df-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.df-footer-col a { color: var(--df-ink-2); text-decoration: none; transition: color 160ms var(--df-ease); }
.df-footer-col a:hover { color: var(--df-accent-deep); text-decoration: underline; text-underline-offset: .18em; }
.df-footer-name { margin: 0 0 .15rem; color: var(--df-ink); font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.df-footer-who .df-footer-note { margin-bottom: .8rem; }
.df-footer-public { display: inline-flex; align-items: center; gap: .35rem; color: var(--df-accent-deep); font-weight: 600; text-decoration: none; padding: .4rem .7rem; border: 1px solid var(--df-line-strong); border-radius: var(--df-radius-ctl); background: var(--df-surface); transition: border-color 160ms var(--df-ease), background-color 160ms var(--df-ease); }
.df-footer-public:hover { border-color: var(--df-accent-deep); background: var(--df-accent-soft); color: var(--df-accent-deep); }
.df-footer-foot { display: flex; flex-wrap: wrap; gap: .5rem var(--df-space-5); justify-content: space-between; align-items: center; margin-top: var(--df-space-6); padding-top: var(--df-space-4); border-top: 1px solid var(--df-line); color: var(--df-ink-3); font-size: .82rem; }
.df-footer-links { display: flex; gap: var(--df-space-4); }
.df-footer-links a { color: var(--df-ink-3); text-decoration: none; }
.df-footer-links a:hover { color: var(--df-accent-deep); text-decoration: underline; }
@media (max-width: 991px) {
    .df-footer-mentor { margin-left: 0; }
    .df-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .df-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .df-footer-inner { padding: var(--df-space-5) var(--df-space-4) var(--df-space-4); }
    .df-footer-grid { grid-template-columns: 1fr; gap: var(--df-space-5); }
    .df-footer-foot { flex-direction: column; align-items: flex-start; }
}
@media print { .df-footer { display: none; } }

/* No hover lifts anywhere in the portals: the world does not float, and a
   transformed ancestor would become the containing block of every
   position:fixed dropdown menu inside it (the table Actions menu). */
body.portal .card, body.portal .card:hover, body.portal tr, body.portal tr:hover, body.portal .table-hover tbody tr:hover,
body.portal .stat-card:hover, body.portal .df-card:hover, body.portal .list-group-item:hover { transform: none !important; }

/* ── Motion ───────────────────────────────────────────────────────── */
/* Only on hover, focus and open/close. No page-load reveals in the
   portals: these screens are opened dozens of times a day. */
@media (prefers-reduced-motion: reduce) {
    body.portal *, body.portal *::before, body.portal *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}