/* ===================================================================
   Edu.Harbour Team Portal — stylesheet
   Standalone (not linked to the public website CSS).
   Aesthetic: minimalist, black & white, blue for links/accents,
   shades of grey, dotted dividers — consistent with eduharbour.com.
   =================================================================== */

:root {
    --black:   #141414;
    --white:   #ffffff;
    --paper:   #fafafa;
    --grey-1:  #f0f0f0;
    --grey-2:  #d9d9d9;
    --grey-3:  #8a8a8a;
    --grey-4:  #5c5c5c;
    --blue:    hsl(211 100% 47%);
    --blue-dk: hsl(211 100% 38%);
    --green:   #1f8a4c;
    --red:     #c0392b;
    --sidebar-w: 250px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--black);
    background: var(--paper);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-weight: 600; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- Layout */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--white);
    border-right: 1px dotted var(--black);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 50;
}

.main {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---------------------------------------------------------------- Brand */

.brand {
    padding: 26px 22px 20px;
    border-bottom: 1px dotted var(--grey-2);
    text-align: center;
}

.brand-logo {
    height: 46px;
    /* logo.svg is white lines on a transparent background -> invert to black */
    filter: invert(1);
}

.brand-text {
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--grey-4);
}

/* ---------------------------------------------------------------- Nav */

.nav { padding: 14px 0; flex: 1; overflow-y: auto; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    color: var(--grey-4);
    font-size: 14px;
    border-left: 3px solid transparent;
}

.nav-link i { width: 18px; text-align: center; font-size: 15px; }
.nav-link span { flex: 1; }

.nav-link:hover {
    background: var(--grey-1);
    color: var(--black);
    text-decoration: none;
}

.nav-link.active {
    color: var(--black);
    /* border-left-color: var(--blue); */
    border-left-color: var(--black);
    font-weight: 600;
}

.nav-tag {
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--grey-3);
    border-radius: 3px;
    padding: 1px 5px;
    font-style: normal;
}

/* Thin divider between the personal nav items and the general ones. */
.nav-sep {
    height: 1px;
    background: var(--grey-2);
    margin: 13px 22px;
}

/* Rarely-used management items — dimmed so they recede. Hover/active still
   darken them (those rules have higher specificity). */
.nav-link-muted { color: var(--grey-3); }

/* ---------------------------------------------------------------- Sidebar footer */

.sidebar-foot {
    border-top: 1px dotted var(--grey-2);
    padding: 16px 22px;
}

.who-name { font-weight: 600; font-size: 14px; }
.who-role { font-size: 12px; color: var(--grey-3); margin-bottom: 12px; }

.logout-btn {
    display: block;
    text-align: center;
    padding: 9px;
    border: 1px solid var(--black);
    border-radius: 999px;
    color: var(--black);
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}
.logout-btn:hover {
    background: var(--black);
    color: var(--white);
    text-decoration: none;
}

/* ---------------------------------------------------------------- Topbar */

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 36px;
    background: var(--white);
    border-bottom: 1px dotted var(--black);
}

.page-title { font-size: 22px; font-weight: 600; }

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--black);
}

/* ---------------------------------------------------------------- Content */

.content { padding: 32px 36px; max-width: 1100px; width: 100%; }

.section-intro {
    color: var(--grey-4);
    margin-bottom: 24px;
}

/* ---------------------------------------------------------------- Cards / panels */

.panel {
    background: var(--white);
    border: 1px solid var(--grey-2);
    border-radius: 6px;
    padding: 24px 26px;
    margin-bottom: 24px;
}

.panel h2 {
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey-4);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px dotted var(--grey-2);
}

/* ---------------------------------------------------------------- Flash messages */

.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 5px;
    margin-bottom: 18px;
    font-size: 14px;
}
.flash-success { background: #e8f5ec; color: var(--green); border: 1px solid #bfe2cb; }
.flash-error   { background: #fdecea; color: var(--red);   border: 1px solid #f3c6c0; }

/* ---------------------------------------------------------------- Dashboard tiles */

/* Dashboard sections — "Program Access" and "Edu.Harbour Tools". */
.dash-section + .dash-section { margin-top: 70px; }
.dash-heading {
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--grey-4);
    padding-bottom: 9px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--grey-2);
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
}

.tile {
    background: var(--white);
    border: 1px solid var(--grey-2);
    border-radius: 6px;
    padding: 26px 14px;
    text-align: center;
    color: var(--black);
    transition: background 0.18s, color 0.18s, transform 0.18s, border-color 0.18s;
}
.tile:hover {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
    text-decoration: none;
    transform: translateY(-3px);
}
.tile i { font-size: 34px; color: var(--blue); }
.tile:hover i { color: var(--white); }
.tile .tile-title {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* The one tile that is a form: it carries an environment picker, which cannot live
   inside an <a>. It still READS and behaves as a tile - the body is the submit control,
   so a click anywhere on it opens - and the padding moves onto that button so the whole
   face is clickable. The select keeps the global input colours, which is what stops it
   disappearing when the tile inverts on hover. */
.tile-sso { padding: 0; }
.tile-sso-go {
    display: block;
    width: 100%;
    padding: 26px 14px 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.tile-sso select {
    width: calc(100% - 28px);
    margin: 0 14px 16px;
    padding: 6px 8px;
    font-size: 12px;
}

/* Program logo inside a dashboard tile — sits on a white chip so it stays
   readable whether the tile background is white or (on hover) black. */
.tile-logo {
    height: 40px;
    width: auto;
    max-width: 90%;
    object-fit: contain;
    background: var(--white);
    border-radius: 6px;
    padding: 5px;
}

.empty-hint {
    color: var(--grey-3);
    font-style: italic;
    padding: 20px 0;
}

/* ---------------------------------------------------------------- Tables */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey-3);
    padding: 8px 12px;
    border-bottom: 1px solid var(--grey-2);
}
.table td {
    padding: 11px 12px;
    border-bottom: 1px dotted var(--grey-2);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .note-col { color: var(--grey-3); }

/* Optional validity range shown under a document's display name. */
.doc-validity { font-size: 12.5px; color: var(--grey-3); margin-top: 3px; }

/* Original filename shown under a document's display name. */
.file-origin { font-size: 12px; color: var(--grey-3); margin-top: 2px; }

/* Program logos in the Programs admin table / edit form. */
.program-logo-thumb {
    height: 36px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
    vertical-align: middle;
}
.current-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.current-logo img {
    height: 46px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    border: 1px solid var(--grey-2);
    border-radius: 4px;
    padding: 3px;
}
.current-logo span { font-size: 12px; color: var(--grey-3); }

/* People directory — a vertical list of cards (name large, role + email grey). */
.people-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.person {
    background: var(--white);
    border: 1px solid var(--grey-2);
    border-radius: 6px;
    padding: 18px 20px;
}
.person-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.person-role { font-size: 13px; color: var(--grey-4); margin-top: 5px; }
.person-email {
    font-size: 13px;
    color: var(--grey-3);
    margin-top: 2px;
    word-break: break-word;
}

/* Per-member document groups in the admin Files view. */
.doc-group { margin-bottom: 30px; }
.doc-group:last-child { margin-bottom: 0; }
.doc-group-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 7px 12px;
    background: var(--grey-1);
    border-radius: 4px;
    margin-bottom: 6px;
}
.doc-group-title i { color: var(--grey-3); margin-right: 6px; }

/* ---------------------------------------------------------------- Collapsible "details" block */

/* Hide the default disclosure arrow so a <summary> styled with .btn classes
   reads as a plain button (used by the Applications page to fold the rarely
   needed "edit example emails" form). */
details > summary { list-style: none; cursor: pointer; display: inline-block; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ''; }

.examples-toggle { display: block; margin-bottom: 18px; }

/* ---------------------------------------------------------------- Application cards */

.app-card {
    border: 1px solid var(--grey-2);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: var(--paper);
}
.app-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dotted var(--grey-2);
}
.app-card-name { font-size: 16px; }

.app-card-details { margin-bottom: 4px; }

.app-block {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dotted var(--grey-2);
}
.app-block-title {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-3);
    margin-bottom: 4px;
}
.app-block-body {
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ---------------------------------------------------------------- Badges */

.badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
}
.badge-admin  { background: var(--black); color: var(--white); }
.badge-member { background: var(--grey-1); color: var(--grey-4); }
.badge-visible { background: #e8f5ec; color: var(--green); }
.badge-hidden  { background: var(--grey-1); color: var(--grey-4); }
.badge-fail    { background: #fdecea; color: var(--red); }

/* Program (logo + name) cell on the API log page. */
.api-prog { display: flex; align-items: center; gap: 12px; }

/* Redacted request query string shown in the API log. */
.api-qs {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
    margin-top: 3px;
}

/* ---------------------------------------------------------------- Forms */

.form-row { margin-bottom: 16px; }
.form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
}
.form-row .hint { font-size: 12px; color: var(--grey-3); font-weight: 400; }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=date], input[type=number], input[type=file], select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--grey-2);
    border-radius: 5px;
    font-family: inherit;
    font-size: 14px;
    background: var(--white);
    color: var(--black);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue);
}
textarea { resize: vertical; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.form-grid .full { grid-column: 1 / -1; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
}
.checkbox-row input { width: auto; margin-top: 3px; }
.checkbox-row label { font-weight: 400; margin: 0; }

/* ---------------------------------------------------------------- Program access */

.prog-access { margin-bottom: 14px; }
.prog-access > .checkbox-row { margin-bottom: 6px; }

/* Per-page permission list — hidden until the program checkbox is ticked. */
.prog-menu {
    margin: 4px 0 10px 30px;
    padding-left: 16px;
    border-left: 2px solid var(--grey-1);
}
.prog-menu[hidden] { display: none; }

.prog-menu-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

/* "Copy from <program>" control in the per-page permission bar. */
.prog-copy { display: inline-flex; align-items: center; gap: 6px; }
.prog-copy-from {
    width: auto;
    padding: 3px 6px;
    font-size: 12px;
}

.perm-list { max-width: 560px; }

.perm-row {
    display: grid;
    grid-template-columns: 1fr 54px 64px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dotted var(--grey-2);
}
.perm-row:last-child { border-bottom: none; }

.perm-row-head {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-3);
    border-bottom: 1px solid var(--grey-2);
}

.perm-name { font-size: 13px; }
.perm-col  { text-align: center; }
.perm-col input { width: auto; cursor: pointer; }

/* ---------------------------------------------------------------- Buttons */

.btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--black);
    background: var(--black);
    color: var(--white);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn:hover { background: var(--white); color: var(--black); text-decoration: none; }

.btn-outline { background: var(--white); color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }

.btn-danger { background: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--white); color: var(--red); }

.btn-sm { padding: 5px 13px; font-size: 12px; }

.btn-link {
    background: none; border: none; color: var(--blue);
    cursor: pointer; font-size: 13px; font-family: inherit; padding: 0;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--red); }

.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Detail list */

.detail-list { width: 100%; }
.detail-list .row {
    display: flex;
    padding: 11px 0;
    border-bottom: 1px dotted var(--grey-2);
}
.detail-list .row:last-child { border-bottom: none; }
.detail-list .key {
    width: 200px;
    flex-shrink: 0;
    color: var(--grey-3);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.detail-list .val { flex: 1; }

/* ---------------------------------------------------------------- Login page */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    padding: 20px;
}
.login-card {
    background: var(--white);
    border: 1px solid var(--grey-2);
    /* border-radius: 8px; */
    padding: 42px 38px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}
.login-card .login-logo {
    height: 64px;
    filter: invert(1);
    animation: floatWaves 1.7s ease-in-out infinite;
}
.login-card input[type=text],
.login-card input[type=password] {
    border: none;
    border-bottom: 1px solid var(--black);
    border-radius: 0;
    background: none;
    padding-left: 2px;
    padding-right: 2px;
}
.login-card input[type=text]:focus,
.login-card input[type=password]:focus {
    border-bottom-color: var(--black);
}
@keyframes floatWaves {
    0%   { transform: translateY(8px)  translateX(0)   rotate(0deg); }
    25%  { transform: translateY(0)    translateX(5px) rotate(5deg); }
    50%  { transform: translateY(8px)  translateX(0)   rotate(0deg); }
    75%  { transform: translateY(0)    translateX(-5px) rotate(-5deg); }
    100% { transform: translateY(8px)  translateX(0)   rotate(0deg); }
}
.login-card h1 {
    font-size: 17px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 18px 0 4px;
}
.login-card .sub { color: var(--grey-3); font-size: 13px; margin-bottom: 26px; }
.login-card .form-row { text-align: left; }
.login-card .btn { width: 100%; margin-top: 6px; }
.login-alt { margin-top: 20px; font-size: 13px; }
.login-alt a { color: var(--grey-3); text-decoration: none; }
.login-alt a:hover { color: var(--black); text-decoration: underline; }

/* ---------------------------------------------------------------- Docs / placeholder */

.notes-meta {
    color: var(--grey-3);
    font-size: 12px;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px dotted var(--grey-2);
}

/* Rendered Markdown on the Docs page. */
.doc-content { font-size: 14.5px; line-height: 1.7; }
.doc-content h1, .doc-content h2, .doc-content h3,
.doc-content h4, .doc-content h5, .doc-content h6 {
    letter-spacing: 0.02em;
    margin: 26px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px dotted var(--grey-2);
}
.doc-content h1 { font-size: 20px; }
.doc-content h2 { font-size: 17px; }
.doc-content h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--grey-4);
}
.doc-content > :first-child { margin-top: 0; }
.doc-content ul { margin: 10px 0 10px 22px; }
.doc-content li { margin-bottom: 12px; line-height: 1.6; }
.doc-content li:last-child { margin-bottom: 0; }
/* Nested bullet lists: tighter spacing and a different marker. */
.doc-content ul ul {
    margin: 7px 0 7px 18px;
    list-style: circle;
}
.doc-content ul ul li { margin-bottom: 6px; }
.doc-content ul ul ul { list-style: square; }
.doc-content p { margin-bottom: 12px; }
.doc-content a { word-break: break-word; }
.doc-content strong { font-weight: 600; }

.placeholder {
    text-align: center;
    padding: 70px 20px;
    color: var(--grey-3);
}
.placeholder i { font-size: 52px; color: var(--grey-2); }
.placeholder h2 {
    border: none; text-transform: none; color: var(--black);
    font-size: 19px; margin: 18px 0 8px;
}

/* ---------------------------------------------------------------- Drag-and-drop reorder */

#links-rows tr { cursor: grab; }
#links-rows tr:active { cursor: grabbing; }
#links-rows tr.dragging {
    opacity: 0.4;
    background: var(--grey-1);
}

.drag-handle {
    color: var(--grey-3);
    text-align: center;
    width: 34px;
}
#links-rows tr:hover .drag-handle { color: var(--black); }

.reorder-status {
    font-size: 12px;
    color: var(--grey-3);
    margin-top: 12px;
    min-height: 1em;
}
.reorder-status.error { color: var(--red); }

/* ---------------------------------------------------------------- Global Calendar */

.cal { overflow-x: auto; }

.cal-month { margin-bottom: 26px; min-width: 700px; }

.cal-month-head {
    background: var(--black);
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 12px;
}
.cal-month-past .cal-month-head { background: var(--grey-3); }

.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }

.cal-day {
    border: 1px solid var(--grey-2);
    margin: -1px 0 0 -1px;          /* collapse the shared 1px borders */
    min-height: 84px;
    padding: 3px 4px;
    overflow: hidden;
}
.cal-week.is-large .cal-day { min-height: 168px; }
.cal-day-empty { background: var(--paper); }
.cal-day-past  { background: #f6f6f6; }
.cal-day-past .cal-date { color: var(--grey-3); }
.cal-day-today {
    background: #dcdcdc;
    border: 1px solid #000;
    border-top: 3px solid #000;
}

.cal-date {
    font-size: 10px;
    font-weight: 700;
    color: var(--grey-4);
    margin-bottom: 3px;
}

/* Event card */
.cal-event {
    border: 1px solid #a2a2a2;
    background: #fff;
    margin: 5px 0;
    font-size: 9px;
    line-height: 1.4;
}
.cal-event-passed { opacity: 0.45; }

/* Title bar: [logo] [time] [tag] */
.cal-event-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    font-weight: 700;
    font-size: 11px;
    background: #dadada;
    color: #000;
}
.cal-event-logo {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    border-radius: 2px;
}
.cal-event-time { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cal-event-tag {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* White body: description + countdowns + log */
.cal-event-body { padding: 3px 4px 4px; }
.cal-event-desc { color: #333; margin-bottom: 2px; }
.cal-countdown {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cal-countdown-stop { font-weight: 400; color: var(--grey-3); }
.cal-event-log { display: inline-block; margin-top: 2px; }

.cal-event-red  { border-color: #a97878; }
.cal-event-red  .cal-event-bar { background: #d89d9d; color: #491515; }
.cal-event-blue { border-color: hsl(219 69% 76%); }
.cal-event-blue .cal-event-bar { background: hsl(218.7 68.9% 91.2%); color: hsl(219 69% 27%); }
.cal-event-grey { border-color: #a2a2a2; }
.cal-event-grey .cal-event-bar { background: #dadada; color: #000; }

/* The calendar page centres its content column. */
.page-calendar .content { margin-left: auto; margin-right: auto; }

/* Floating tooltip for a truncated event tag (appended to <body>). */
.cal-tip {
    position: fixed;
    display: none;
    z-index: 1000;
    background: var(--black);
    color: var(--white);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 280px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 880px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.25s; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .menu-toggle { display: block; }
    .content { padding: 22px 18px; }
    .topbar { padding: 16px 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .detail-list .row { flex-direction: column; }
    .detail-list .key { width: auto; margin-bottom: 2px; }
}

/* Assistant Role Access — "Copy" controls above each program-access block. */
.aat-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.aat-following {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    background: #e7f4eb;
    border: 1px solid #b6dfc5;
    border-radius: 999px;
    color: #1d6a36;
    font-size: 0.82rem;
}
.aat-following[hidden] { display: none; }

/* In-page confirm dialog (portal.js window.portalConfirm). */
.pc-backdrop {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, 0.35);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.pc-dialog {
    background: #fff; border-radius: 6px; max-width: 440px; width: 100%;
    padding: 1.1rem 1.2rem 0.9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.pc-msg { margin: 0 0 1rem; line-height: 1.45; white-space: pre-line; }
.pc-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }