.portal-wrapper { display: flex; gap: 2rem; padding: 2rem 0; margin-top: 160px; }
body.admin-bar .portal-wrapper { margin-top: 192px; }
.portal-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 80px; align-self: flex-start; z-index: 10000; }
body.admin-bar .portal-sidebar { top: 80px; }
.portal-sidebar ul { list-style: none; margin: 0; padding: 0; }
.portal-sidebar a { display: block; padding: 0.75rem 1rem; color: var(--tct-text); text-decoration: none; border-radius: 4px; font-size: 0.95rem; }
.portal-sidebar a:hover, .portal-sidebar a.is-active { background: var(--tct-primary); color: #fff; }
.portal-content { flex: 1; min-width: 0; }

.portal-stats { display: flex; gap: 1.5rem; margin: 1.5rem 0; }
.portal-stat { background: #f5f5f5; border-radius: 8px; padding: 1.5rem; text-align: center; flex: 1; }
.portal-stat__number { display: block; font-size: 2.5rem; font-weight: 700; color: var(--tct-primary); }
.portal-stat__label { font-size: 0.9rem; color: #666; }

.portal-nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1rem; margin-top: 2rem; }
.portal-nav__item { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem; border: 2px solid #e5e5e5; border-radius: 8px; text-decoration: none; color: var(--tct-text); transition: border-color 0.2s,box-shadow 0.2s; }
.portal-nav__item:hover { border-color: var(--tct-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.portal-nav__item strong { font-size: 1rem; }
.portal-nav__item span { font-size: 0.85rem; color: #666; }

.portal-tabs { display: flex; border-bottom: 2px solid #e5e5e5; margin-bottom: 1.5rem; }
.portal-tab { padding: 0.6rem 1.25rem; text-decoration: none; color: var(--tct-text); border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 0.95rem; }
.portal-tab.is-active { border-bottom-color: var(--tct-primary); font-weight: 700; color: var(--tct-primary); }

.prayer-card { border: 1px solid #e5e5e5; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
.prayer-card__meta { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; font-size: 0.85rem; color: #666; }
.prayer-card__text { margin: 0 0 1rem; }
.prayer-card__actions { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.prayer-card__actions textarea { flex: 1; min-width: 200px; font-size: 0.9rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }

.tct-status { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.tct-status--pending, .tct-status--new    { background: #fff3cd; color: #856404; }
.tct-status--approved, .tct-status--completed { background: #d1e7dd; color: #0a3622; }
.tct-status--rejected                    { background: #f8d7da; color: #842029; }
.tct-status--assigned, .tct-status--in_prayer { background: #cfe2ff; color: #084298; }

.schedule-slot { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border: 1px solid #e5e5e5; border-radius: 6px; margin-bottom: 0.5rem; }
.schedule-slot--open { border-color: var(--tct-secondary); }

.training-category { margin-bottom: 2.5rem; }
.training-item { border: 1px solid #e5e5e5; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
.training-item.is-complete { border-color: #d1e7dd; background: #f0fff4; }
.training-item__header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.training-item__check { color: #0a3622; font-size: 0.85rem; font-weight: 600; }
.training-item__content { line-height: 1.7; }
iframe { border-radius: 6px; display: block; max-width: 100%; }

.tct-form__success { background: #d1e7dd; color: #0a3622; padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.tct-form__error   { background: #f8d7da; color: #842029; padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }

/* ── Portal Users (WP-admin style) ── */
.portal-subsubsub { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.25rem; font-size: 0.85rem; }
.portal-subsubsub li { display: inline; }
.portal-subsubsub a { text-decoration: none; color: var(--tct-primary); }
.portal-subsubsub a.current { font-weight: 700; color: var(--tct-text); }
.portal-subsubsub .count { color: #666; }

.portal-wp-table { width: 100%; border-collapse: collapse; border: 1px solid #c3c4c7; font-size: 0.9rem; margin-top: 0.5rem; }
.portal-wp-table thead { background: #f6f7f7; }
.portal-wp-table th { padding: 0.6rem 1rem; text-align: left; font-weight: 600; border-bottom: 1px solid #c3c4c7; white-space: nowrap; color: #2c3338; }
.portal-wp-table td { padding: 0.65rem 1rem; border-bottom: 1px solid #f0f0f0; vertical-align: middle; color: #2c3338; }
.portal-wp-table tbody tr.alternate { background: #f6f7f7; }
.portal-wp-table tbody tr:hover td { background: #f0f6fc; }
.portal-wp-table tbody tr:last-child td { border-bottom: none; }
.portal-wp-table a { color: var(--tct-primary); text-decoration: none; }
.portal-wp-table a:hover { text-decoration: underline; }

.portal-tablenav { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.portal-tablenav .button { display: inline-block; padding: 0.3rem 0.9rem; border: 1px solid #2271b1; border-radius: 3px; font-size: 0.85rem; color: #2271b1; text-decoration: none; background: #f6f7f7; }
.portal-tablenav .button:hover { background: #2271b1; color: #fff; }
.portal-tablenav__pages { font-size: 0.85rem; color: #666; }

.tct-status--prayer_volunteer         { background: #d1e7dd; color: #0a3622; }
.tct-status--prayer_volunteer_pending { background: #fff3cd; color: #856404; }
.tct-status--portal_admin             { background: #cfe2ff; color: #084298; }

.portal-user-card { border: 1px solid #c3c4c7; border-radius: 4px; overflow: hidden; max-width: 600px; margin-top: 1rem; }
.portal-user-card__row { display: flex; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.portal-user-card__row:last-child { border-bottom: none; }
.portal-user-card__row:nth-child(even) { background: #f6f7f7; }
.portal-user-card__label { width: 140px; flex-shrink: 0; font-weight: 600; color: #2c3338; }

/* ── Training LMS ─────────────────────────────────────────────────── */

.training-intro { color: #555; margin: 0 0 1.75rem; font-size: .95rem; }

/* Module card grid */
.training-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }

.training-module-card {
    display: flex; flex-direction: column; gap: .5rem;
    background: #fff; border: 2px solid #e5e7eb; border-radius: 12px;
    padding: 1.4rem 1.25rem 1rem; text-decoration: none; color: var(--tct-text);
    position: relative; transition: border-color .2s, box-shadow .2s;
}
.training-module-card:hover { border-color: var(--tct-primary); box-shadow: 0 4px 16px rgba(0,48,135,.1); }
.training-module-card.is-complete { border-color: #bbf7d0; background: #f0fdf4; }

.training-module-card__badge {
    position: absolute; top: .75rem; right: .75rem;
    background: #b32d2e; color: #fff; font-size: .7rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.training-module-card__badge--done { background: #0a3622; }

.training-module-card__icon { font-size: 2rem; line-height: 1; }
.training-module-card__title { margin: 0; font-size: 1rem; font-weight: 700; color: #111; }
.training-module-card__desc { margin: 0; font-size: .82rem; color: #555; line-height: 1.5; flex: 1; }
.training-module-card__footer { display: flex; justify-content: space-between; font-size: .78rem; color: #888; margin-top: auto; padding-top: .5rem; }

.training-module-card__progress-track { height: 5px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.training-module-card__progress-fill { height: 100%; background: var(--tct-primary); border-radius: 999px; transition: width .4s; }
.training-module-card.is-complete .training-module-card__progress-fill { background: #16a34a; }

/* Breadcrumb */
.training-breadcrumb { font-size: .85rem; color: #888; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.training-breadcrumb a { color: var(--tct-primary); text-decoration: none; }
.training-breadcrumb a:hover { text-decoration: underline; }

/* Module detail progress bar */
.training-module__desc { color: #555; margin: 0 0 1.25rem; }
.training-module__progress-bar-wrap { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-bottom: .4rem; }
.training-module__progress-bar-fill { height: 100%; background: var(--tct-primary); border-radius: 999px; transition: width .4s; }
.training-module__progress-text { font-size: .82rem; color: #555; margin: 0 0 1.5rem; }

/* Material rows */
.training-materials-list { display: flex; flex-direction: column; gap: .5rem; }
.training-material-row {
    display: flex; align-items: center; gap: .9rem;
    padding: .9rem 1rem; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 8px; text-decoration: none; color: var(--tct-text);
    transition: border-color .15s, background .15s;
}
.training-material-row:hover { border-color: var(--tct-primary); background: #f8faff; }
.training-material-row.is-viewed { border-color: #bbf7d0; background: #f0fdf4; }

.training-material-row__num { width: 24px; height: 24px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.training-material-row.is-viewed .training-material-row__num { background: #bbf7d0; color: #0a3622; }
.training-material-row__icon { font-size: 1.25rem; flex-shrink: 0; }
.training-material-row__info { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.training-material-row__info strong { font-size: .9rem; }
.training-material-row__type { font-size: .76rem; color: #888; text-transform: uppercase; letter-spacing: .04em; }
.training-material-row__viewed { font-size: .8rem; color: #0a3622; font-weight: 600; white-space: nowrap; }
.training-material-row__new { font-size: .8rem; color: #888; white-space: nowrap; }
.training-material-row__arrow { font-size: 1.2rem; color: #aaa; }

/* Material detail */
.training-material__viewed-badge {
    display: inline-block; background: #d1e7dd; color: #0a3622;
    padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
    margin-bottom: 1rem;
}
.training-material__body { margin: 1.25rem 0; }
.training-material__content { line-height: 1.8; }
.training-material__footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }

/* Acknowledgment form */
.training-ack {
    margin-top: 2rem; padding: 1.5rem; background: #f8f9fa;
    border: 1px solid #dee2e6; border-radius: 8px;
}
.training-ack__heading { margin: 0 0 .4rem; font-size: 1.05rem; color: #003087; }
.training-ack__desc { margin: 0 0 1.25rem; color: #555; font-size: .92rem; }
.training-ack__fields { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.training-ack__field { display: flex; flex-direction: column; gap: .35rem; }
.training-ack__field label { font-size: .88rem; font-weight: 600; color: #333; }
.training-ack__field input,
.training-ack__field textarea {
    padding: .45rem .7rem; border: 1px solid #ced4da; border-radius: 5px;
    font-size: .92rem; font-family: inherit;
}
.training-ack__field input:focus,
.training-ack__field textarea:focus { outline: none; border-color: #003087; box-shadow: 0 0 0 3px rgba(0,48,135,.12); }
.training-ack__actions { margin-top: .75rem; }

@media (max-width: 768px) {
    .portal-wrapper { flex-direction: column; }
    .portal-sidebar { width: 100%; }
    .portal-stats { flex-direction: column; }
    .training-module-grid { grid-template-columns: 1fr 1fr; }
    .training-material-row { flex-wrap: wrap; }
    .training-material-row__status { width: 100%; padding-left: calc(24px + .9rem + 1.25rem + .9rem); }
}
@media (max-width: 480px) {
    .training-module-grid { grid-template-columns: 1fr; }
}