/*
 * BLUCA application design system
 *
 * This file is the authoritative component layer for authenticated pages. It is
 * loaded after legacy and page styles so that old modules can be aligned without
 * changing their business logic. Marketing, print, kiosk and embedded views do
 * not use the authenticated application layout and remain intentionally separate.
 */

/* Status chips must not inherit the muted card text on a light chip background. */
.app-page-frame .presence-entry-card .evidence-pill {
    color: #334155;
    background: #edf1f4;
}
.app-page-frame .presence-entry-card .evidence-pill:is(.evidence-verified, .evidence-plausible) {
    color: #087546;
    background: #d9f7e9;
}
.app-page-frame .presence-entry-card .evidence-pill.evidence-warning {
    color: #855d00;
    background: #fff0bf;
}
.app-page-frame .presence-entry-card .evidence-pill.evidence-conflict {
    color: #a01d2a;
    background: #ffe0e2;
}

:root {
    --app-content-max: 1480px;
    --app-gutter: clamp(.875rem, 2vw, 1.75rem);
    --app-section-gap: clamp(.875rem, 1.6vw, 1.25rem);
    --app-space-1: .25rem;
    --app-space-2: .5rem;
    --app-space-3: .75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.5rem;
    --app-radius-control: 12px;
    --app-radius-panel: 18px;
    --app-radius-hero: 22px;
    --app-control-height: 44px;
    --app-text: #f8fafc;
    --app-text-secondary: #b8c5d4;
    --app-text-subtle: #92a2b5;
    --app-border: rgba(226, 239, 250, .16);
    --app-border-strong: rgba(226, 239, 250, .26);
    --app-header-bg: #142237;
    --app-nav-bg: #0d1b2d;
    --app-toolbar-bg: #142238;
    --app-panel-bg: #121f32;
    --app-panel-soft: #19283d;
    --app-elevated-bg: #1b2c43;
    --app-shadow: 0 16px 38px rgba(2, 8, 18, .24);
    --app-shadow-elevated: 0 24px 60px rgba(2, 8, 18, .34);
    --app-field-bg: #f8fafc;
    --app-field-text: #07111f;
    --app-field-placeholder: #64748b;
}

:root:not([data-theme="dark"]) {
    --app-text: #0f172a;
    --app-text-secondary: #475569;
    --app-text-subtle: #64748b;
    --app-border: rgba(15, 23, 42, .13);
    --app-border-strong: rgba(15, 23, 42, .22);
    --app-header-bg: #f7f9fc;
    --app-nav-bg: #f5f8fc;
    --app-toolbar-bg: #f7f9fc;
    --app-panel-bg: #ffffff;
    --app-panel-soft: #f2f6fb;
    --app-elevated-bg: #ffffff;
    --app-shadow: 0 14px 34px rgba(15, 23, 42, .10);
    --app-shadow-elevated: 0 22px 54px rgba(15, 23, 42, .16);
    --app-field-bg: #ffffff;
    --app-field-text: #0f172a;
    --app-field-placeholder: #64748b;
}

/* Application frame and predictable page width. */
.app-page-frame {
    width: min(100%, var(--app-content-max));
    max-width: var(--app-content-max);
    min-width: 0;
    margin-inline: auto;
    padding: clamp(.75rem, 1.8vw, 1.5rem) var(--app-gutter) clamp(2rem, 4vw, 3.5rem);
}

.app-page-frame > .container,
.app-page-frame > .container-fluid,
.app-page-frame > .app-page,
.app-page-frame > .analytics-page,
.app-page-frame > .athlete-profile-shell,
.app-page-frame > .benefit-verify-shell,
.app-page-frame > .benefit-voucher-shell,
.app-page-frame > .resource-shell,
.app-page-frame > .superadmin-shell,
.app-page-frame > .time-tracking-page {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
}

.app-page,
.competition-page,
.resource-shell {
    display: grid;
    gap: var(--app-section-gap);
    min-width: 0;
}

.app-prewrap { white-space: pre-wrap; }
.app-field-narrow { max-width: 28rem !important; }
.app-scroll-code { max-height: 32rem; overflow: auto; }
.app-progress-compact { height: 14px; }
.app-column-limit { min-width: 220px; }

/* Typography: one compact hierarchy across every module. */
.app-page-frame h1,
.app-page-frame .h1 {
    max-width: 28ch;
    margin-block: 0;
    color: var(--app-text);
    font-size: clamp(2rem, 4vw, 3.45rem);
    font-weight: 820;
    letter-spacing: -.045em;
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.app-page-frame h2,
.app-page-frame .h2 {
    color: var(--app-text);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 780;
    letter-spacing: -.025em;
    line-height: 1.16;
}

.app-page-frame h3,
.app-page-frame .h3 {
    color: var(--app-text);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: 760;
    line-height: 1.22;
}

.app-page-frame p,
.app-page-frame li,
.app-page-frame label,
.app-page-frame td,
.app-page-frame th {
    line-height: 1.5;
}

.app-page-frame .text-muted,
.app-page-frame .form-text,
.app-page-frame small,
.app-page-frame .resource-subtle {
    color: var(--app-text-secondary) !important;
}

.app-page-frame .eyebrow,
.app-page-frame .text-primary.fw-semibold {
    margin-bottom: .35rem;
    color: color-mix(in srgb, var(--primary) 78%, var(--app-text)) !important;
    font-size: .76rem;
    font-weight: 800 !important;
    letter-spacing: .055em;
    text-transform: uppercase;
}

/* One page-header treatment, including legacy aliases. */
.app-page-frame :is(.page-head, .page-hero, .dashboard-hero, .analytics-hero, .athlete-profile-hero, .superadmin-hero, .resource-hero, .cockpit-hero, .training-control-hero, .app-page-header) {
    min-width: 0;
    margin: 0 0 var(--app-section-gap);
    padding: clamp(1.15rem, 2.5vw, 2rem);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-hero);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
        var(--app-header-bg);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

.app-page-frame :is(.page-head, .page-hero, .dashboard-hero, .analytics-hero, .athlete-profile-hero, .superadmin-hero, .resource-hero, .cockpit-hero, .training-control-hero, .app-page-header) > * {
    min-width: 0;
}

.app-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.app-page-header__copy {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.app-page-header__copy > p:last-child,
.app-page-header__copy > div:last-child {
    max-width: 76ch;
    margin-bottom: 0;
    color: var(--app-text-secondary);
}

.app-page-header__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

/* Opaque content hierarchy. Decorative transparency is allowed only inside it. */
.app-page-frame :is(
    .surface,
    .card,
    .app-card,
    .item-card,
    .event-card,
    .metric,
    .resource-panel,
    .resource-card,
    .superadmin-card,
    .benefit-card,
    .portal-card,
    .package-card,
    .dashboard-news-card,
    .dashboard-news-empty,
    .analytics-chart-card,
    .analytics-table-card,
    .athlete-profile-card,
    .benefit-admin-card,
    .benefit-offer-card,
    .benefit-verify-card,
    .benefit-voucher-card,
    .chat-dashboard-card,
    .competition-org-card,
    .competition-org-panel,
    .content-card,
    .course-participant-card,
    .course-participants-panel,
    .course-sessions-panel,
    .course-signal-card,
    .dashboard-sponsor-card,
    .dashboard-tile-panel,
    .event-slim-card,
    .exam-card,
    .family-event-card,
    .info-card,
    .invitation-qr-card,
    .member-card-qr-panel,
    .metric-card,
    .mobile-today-card,
    .optional-linking-panel,
    .package-admin-card,
    .package-discount-panel,
    .package-product-card,
    .package-status-panel,
    .package-usage-panel,
    .parent-add-child-panel,
    .person-card,
    .portal-camera-card,
    .portal-chart-card,
    .portal-code-card,
    .portal-security-panel,
    .premium-preview-panel,
    .premium-version-card,
    .premium-version-panel,
    .presence-entry-card,
    .profile-image-card,
    .push-device-panel,
    .sponsor-list-panel,
    .sponsor-showcase-card,
    .stat-card,
    .structure-team-card,
    .superadmin-club-card,
    .superadmin-club-delete-panel,
    .time-approval-card,
    .today-course-card,
    .today-course-panel,
    .trainer-group-card,
    .trainer-more-panel,
    .trainer-now-card,
    .trainer-participant-card,
    .training-attendance-panel,
    .training-control-event-card,
    .training-season-card,
    .workforce-person-card,
    .workforce-absence-card,
    .workforce-activity-card,
    .workforce-activity-link-card,
    .chat-thread,
    .trainer-note-box
) {
    min-width: 0;
    border-color: var(--app-border);
    border-radius: var(--app-radius-panel);
    background: var(--app-panel-bg);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
    opacity: 1;
}

.app-page-frame .card {
    --bs-card-bg: var(--app-panel-bg);
    --bs-card-color: var(--app-text);
    --bs-card-border-color: var(--app-border);
}

.app-page-frame :is(.card-header, .card-footer) {
    border-color: var(--app-border);
    background: var(--app-panel-soft) !important;
    color: var(--app-text);
}

.app-page-frame :is(.surface, .app-card, .resource-panel) {
    padding: clamp(1rem, 1.8vw, 1.35rem);
}

/* Secondary navigation and tabs. */
.app-page-frame :is(
    .workforce-nav,
    .app-section-nav,
    .settings-tabs,
    .training-knowledge-tabs,
    .trainer-mobile-nav,
    .nav-tabs,
    .app-subnav
) {
    display: flex;
    max-width: 100%;
    gap: .4rem;
    margin: 0 0 var(--app-section-gap);
    padding: .5rem;
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-control);
    background: var(--app-nav-bg);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
    opacity: 1;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.app-page-frame :is(.workforce-nav-link, .training-knowledge-tabs a, .trainer-mobile-nav a, .nav-tabs .nav-link, .app-subnav a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .55rem .8rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--app-text);
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.app-page-frame :is(.workforce-nav-link, .training-knowledge-tabs a, .trainer-mobile-nav a, .nav-tabs .nav-link, .app-subnav a):is(:hover, :focus-visible) {
    border-color: var(--app-border-strong);
    background: color-mix(in srgb, var(--primary) 12%, var(--app-panel-soft));
    color: var(--app-text);
}

.app-page-frame :is(.workforce-nav-link.active, .training-knowledge-tabs a[aria-current="page"], .trainer-mobile-nav a.active, .nav-tabs .nav-link.active, .app-subnav a.active) {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--app-border));
    background: color-mix(in srgb, var(--primary) 20%, var(--app-elevated-bg));
    color: var(--app-text);
    box-shadow: inset 0 -3px 0 var(--primary);
}

/* Filters, toolbars and action groups share one surface. */
.app-page-frame :is(
    .bluca-toolbar,
    .filter-bar,
    .people-directory-toolbar,
    .superadmin-toolbar,
    .analytics-filter,
    .attendance-toolbar,
    .event-toolbar-compact,
    .calendar-toolbar,
    .dashboard-tile-toolbar,
    .newsletter-send-panel,
    .attendance-save-bar,
    .chat-compose-bar,
    .resource-filter,
    .competition-trainer-toolbar,
    .workforce-overview-toolbar,
    .app-toolbar
) {
    min-width: 0;
    padding: clamp(.8rem, 1.5vw, 1rem);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-control);
    background: var(--app-toolbar-bg);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
    opacity: 1;
}

/* Buttons follow the configured club/premium colors, never a fixed blue skin. */
.app-page-frame .btn {
    min-height: var(--app-control-height);
    border-radius: var(--app-radius-control);
    padding: .58rem .9rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: normal;
}

.app-page-frame :is(.btn-primary, .resource-primary) {
    border-color: color-mix(in srgb, var(--primary) 82%, #000) !important;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, var(--accent))) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

.app-page-frame :is(.btn-primary, .resource-primary):is(:hover, :focus-visible) {
    border-color: var(--accent) !important;
    filter: brightness(1.06);
}

.app-page-frame .btn-outline-primary {
    border-color: color-mix(in srgb, var(--primary) 70%, var(--app-border)) !important;
    background: color-mix(in srgb, var(--primary) 8%, var(--app-panel-bg)) !important;
    color: color-mix(in srgb, var(--primary) 75%, var(--app-text)) !important;
}

.app-page-frame .btn-outline-primary:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--primary) 18%, var(--app-panel-bg)) !important;
    color: var(--app-text) !important;
}

.app-page-frame :is(.btn-secondary, .btn-light, .btn-outline-light, .btn-outline-secondary) {
    border-color: var(--app-border-strong) !important;
    background: var(--app-panel-soft) !important;
    color: var(--app-text) !important;
}

.app-page-frame .btn-link {
    color: color-mix(in srgb, var(--primary) 72%, var(--app-text));
}

.app-page-frame .btn:disabled,
.app-page-frame .btn.disabled {
    cursor: not-allowed;
    opacity: .58;
    filter: saturate(.55);
}

.app-page-frame .btn-sm {
    min-height: 36px;
    padding: .4rem .65rem;
}

.app-page-frame .btn-lg {
    min-height: 48px;
    padding: .72rem 1.1rem;
}

/* Status labels share one readable rhythm while retaining semantic colors. */
.app-page-frame :is(.badge, [class$="-badge"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    max-width: 100%;
    padding: .28rem .58rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: normal;
}

/* Form controls: consistent size and readable text in both themes. */
.app-page-frame :is(.form-control, .form-select, select, textarea, input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="url"], input[type="search"], input[type="file"]) {
    width: 100%;
    max-width: 100%;
    min-height: var(--app-control-height);
    border: 1px solid var(--app-border-strong) !important;
    border-radius: var(--app-radius-control);
    background: var(--app-field-bg) !important;
    color: var(--app-field-text) !important;
    box-shadow: none !important;
    -webkit-text-fill-color: var(--app-field-text);
    caret-color: var(--app-field-text);
}

.app-page-frame textarea.form-control,
.app-page-frame textarea {
    min-height: 7rem;
    resize: vertical;
}

.app-page-frame :is(.form-control, .form-select, select, textarea, input):focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 20%, transparent) !important;
    outline: 0;
}

.app-page-frame :is(.form-control, textarea, input)::placeholder {
    color: var(--app-field-placeholder) !important;
    opacity: 1;
    -webkit-text-fill-color: var(--app-field-placeholder);
}

.app-page-frame :is(.form-control, .form-select, select):disabled,
.app-page-frame :is(.form-control, .form-select, select)[readonly] {
    background: color-mix(in srgb, var(--app-field-bg) 86%, #94a3b8) !important;
    color: #475569 !important;
    opacity: 1;
    -webkit-text-fill-color: #475569;
}

.app-page-frame .form-label,
.app-page-frame label {
    color: var(--app-text);
}

.app-page-frame .form-check-input {
    border-color: var(--app-border-strong);
}

.app-page-frame .validation-summary-valid {
    display: none !important;
}

/* Tables and lists remain legible over every club background. */
.app-page-frame :is(.table-responsive, .table-wrap) {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-control);
    background: var(--app-panel-bg);
    color: var(--app-text);
    box-shadow: none;
    overscroll-behavior-inline: contain;
}

.app-page-frame .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    width: 100%;
    margin-bottom: 0;
    color: var(--app-text);
}

.app-page-frame .table > thead > tr > * {
    padding: .8rem .75rem;
    background: var(--app-panel-soft);
    color: var(--app-text);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    vertical-align: middle;
}

.app-page-frame .table > tbody > tr > * {
    padding: .8rem .75rem;
    background: var(--app-panel-bg);
    color: var(--app-text);
    vertical-align: middle;
}

.app-page-frame .table > tbody > tr:nth-child(even) > * {
    background: color-mix(in srgb, var(--app-panel-soft) 56%, var(--app-panel-bg));
}

.app-page-frame .table-hover > tbody > tr:hover > * {
    background: color-mix(in srgb, var(--primary) 10%, var(--app-panel-bg));
    color: var(--app-text);
}

.app-page-frame :is(.list-group, .accordion) {
    --bs-list-group-bg: var(--app-panel-bg);
    --bs-list-group-color: var(--app-text);
    --bs-list-group-border-color: var(--app-border);
    --bs-accordion-bg: var(--app-panel-bg);
    --bs-accordion-color: var(--app-text);
    --bs-accordion-border-color: var(--app-border);
}

.app-page-frame :is(.list-group-item, .accordion-item, .accordion-button) {
    border-color: var(--app-border);
    background: var(--app-panel-bg);
    color: var(--app-text);
}

.app-page-frame .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--primary) 12%, var(--app-panel-soft));
    color: var(--app-text);
}

/* Floating layers are always opaque enough to preserve contrast. */
:is(.modal-content, dialog, .offcanvas, .popover, .dropdown-menu, .app-dropdown, .chat-floating-window) {
    border-color: var(--app-border-strong);
    border-radius: var(--app-radius-panel);
    background: var(--app-elevated-bg);
    color: var(--app-text);
    box-shadow: var(--app-shadow-elevated);
    opacity: 1;
}

:is(.dropdown-menu, .app-dropdown) {
    --bs-dropdown-bg: var(--app-elevated-bg);
    --bs-dropdown-color: var(--app-text);
    --bs-dropdown-link-color: var(--app-text);
    --bs-dropdown-link-hover-color: var(--app-text);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--primary) 12%, var(--app-elevated-bg));
}

:is(.dropdown-menu, .app-dropdown) :is(.dropdown-item, .dropdown-header) {
    color: var(--app-text);
}

/* Competition module: same header, grid and controls as the rest of BLUCA. */
.competition-page > .app-page-header,
.competition-page > .page-head {
    margin-bottom: 0;
}

.competition-page .competition-card-link {
    color: var(--app-text);
}

.competition-page .competition-card-link:hover {
    color: var(--app-text);
}

.competition-page .competition-live-list,
.competition-page .competition-start-countdowns,
.competition-page .competition-inline-timers {
    min-width: 0;
}

.competition-page .competition-heat-form {
    min-width: 0;
}

/* Resource management now uses the same tokens instead of a private white UI. */
.resource-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.resource-actions,
.resource-meta,
.resource-mini-form,
.resource-dept-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.resource-filter {
    display: grid;
    grid-template-columns: minmax(180px, .6fr) repeat(2, minmax(180px, 1fr)) auto;
    align-items: end;
    gap: .65rem;
    margin: 0;
}

.resource-filter label {
    display: grid;
    gap: .3rem;
    margin: 0;
    font-size: .8rem;
    font-weight: 750;
}

.resource-actions a,
.resource-actions button,
.resource-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-control-height);
    padding: .6rem .9rem;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-control);
    font-weight: 750;
    text-decoration: none;
}

.resource-actions a {
    background: var(--app-panel-soft);
    color: var(--app-text);
}

.resource-alert {
    margin: 0;
    padding: .85rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-control);
    font-weight: 700;
}

.resource-alert.ok { border-color: #15945f; background: color-mix(in srgb, #15945f 18%, var(--app-panel-bg)); color: var(--app-text); }
.resource-alert.error { border-color: #d83d4f; background: color-mix(in srgb, #d83d4f 18%, var(--app-panel-bg)); color: var(--app-text); }

.resource-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr);
    gap: var(--app-section-gap);
    min-width: 0;
}

.resource-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: .75rem;
}

.resource-card {
    padding: 1rem;
}

.resource-panel h2,
.resource-card h3 {
    margin-top: 0;
}

.resource-meta {
    color: var(--app-text-secondary);
    font-size: .88rem;
}

.resource-badge {
    display: inline-flex;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: var(--app-panel-soft);
    color: var(--app-text);
    font-size: .78rem;
    font-weight: 800;
}

.resource-badge.Available,
.resource-badge.Approved { background: color-mix(in srgb, #15945f 20%, var(--app-panel-bg)); color: var(--app-text); }
.resource-badge.Restricted,
.resource-badge.Requested { background: color-mix(in srgb, #f0a313 22%, var(--app-panel-bg)); color: var(--app-text); }
.resource-badge.Blocked,
.resource-badge.OutOfService { background: color-mix(in srgb, #d83d4f 20%, var(--app-panel-bg)); color: var(--app-text); }

.resource-booking {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    margin: .55rem 0;
    padding: .8rem 1rem;
    border-left: 5px solid #15945f;
    border-radius: var(--app-radius-control);
    background: var(--app-panel-soft);
}

.resource-booking.pending { border-left-color: #f0a313; }

.resource-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.resource-form .wide { grid-column: 1 / -1; }
.resource-form label { display: block; margin-bottom: .25rem; font-size: .88rem; font-weight: 750; }
.resource-form input[type="checkbox"] { width: auto; min-height: auto; }

.resource-details {
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-panel);
    background: var(--app-panel-bg);
}

.resource-details > summary {
    padding: 1rem;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.resource-details > div { padding: 0 1rem 1rem; }
.resource-table-scroll { max-height: 520px; overflow: auto; }
.resource-empty { padding: 1rem; border: 1px dashed var(--app-border-strong); border-radius: var(--app-radius-control); color: var(--app-text-secondary); }
.resource-danger { border-color: #d83d4f !important; background: color-mix(in srgb, #d83d4f 8%, var(--app-panel-bg)) !important; color: color-mix(in srgb, #d83d4f 72%, var(--app-text)) !important; }
.resource-mini-form button { min-height: 38px; border: 1px solid var(--app-border-strong); border-radius: 9px; background: var(--app-panel-soft); color: var(--app-text); font-weight: 700; }
.resource-overdue { color: #ef6b78; font-weight: 800; }
.resource-dept-checks { align-items: center; padding: .65rem; border-radius: var(--app-radius-control); background: var(--app-panel-soft); }
.resource-hierarchy { color: var(--app-text-subtle); font-size: .8rem; }

.location-qr-page {
    width: min(100%, 760px) !important;
    margin-inline: auto !important;
}

/* Former page-local rules, kept here so component CSS has one owner. */
.cockpit-page { color: var(--app-text); }
.cockpit-page :is(.app-card, .cockpit-kpi, .cockpit-item) { border-color: var(--app-border); background: var(--app-panel-bg); color: var(--app-text); }
.cockpit-page :is(.text-muted, .cockpit-kpi span, .cockpit-item small) { color: var(--app-text-secondary) !important; }
.cockpit-filter label,
.cockpit-item :is(h3, p, summary) { color: var(--app-text); }
.cockpit-kpis,
.cockpit-sections { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cockpit-kpi { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-panel); }
.cockpit-kpi strong { font-size: 2rem; }
.cockpit-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin-bottom: .75rem; padding: 1rem; border: 1px solid var(--app-border); border-left: 6px solid #64748b; border-radius: var(--app-radius-panel); }
.cockpit-item.priority-critical { border-left-color: #dc3545; }
.cockpit-item.priority-high { border-left-color: #fd7e14; }
.cockpit-item.priority-medium { border-left-color: #ffc107; }
.cockpit-item.priority-success { border-left-color: #198754; }
.cockpit-item .badge.border { border-color: var(--app-border) !important; background: var(--app-panel-soft); color: var(--app-text) !important; }
.cockpit-actions { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: .5rem; max-width: 25rem; }
.cockpit-explanation { padding: .75rem; border-radius: var(--app-radius-control); background: var(--app-panel-soft); color: var(--app-text); }
.cockpit-timeline > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .25rem 1rem; padding: 0 0 1rem 1rem; border-left: 3px solid var(--primary); }
.cockpit-timeline small { grid-column: 2; color: var(--app-text-secondary); }

.club-ai-workspace :is(.form-control, .form-select) { min-height: var(--app-control-height); }
.club-ai-workspace textarea.form-control { min-height: 7rem; }
.club-ai-workspace pre { max-height: 22rem; overflow: auto; font-size: .875rem; }
.club-ai-workspace .table { --bs-table-bg: transparent; }
.club-ai-workspace details summary { cursor: pointer; font-weight: 650; }

.soft-panel,
.structure-team-card,
.team-archive,
.team-impact {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-control);
    background: var(--app-panel-soft);
    color: var(--app-text);
}
.soft-panel,
.structure-team-card { padding: 1rem; }
.team-archive { background: color-mix(in srgb, #f59e0b 8%, var(--app-panel-soft)); }
.archived-team-card { border-color: color-mix(in srgb, var(--app-border) 65%, #f59e0b 35%); }
.team-impact { display: grid; gap: .2rem; padding: .8rem 1rem; }
.team-impact span { color: var(--app-text-secondary); font-size: .9rem; }
.department-admin-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .35rem .3rem .75rem; border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-panel-soft); }
.department-admin-pill button { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 999px; background: color-mix(in srgb, #dc3545 18%, transparent); color: inherit; line-height: 1; }

@media (min-width: 1200px) {
    .app-page-frame :is(.workforce-nav, .app-section-nav, .settings-tabs, .training-knowledge-tabs, .trainer-mobile-nav, .nav-tabs, .app-subnav) {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

@media (max-width: 1024px) {
    .resource-grid { grid-template-columns: 1fr; }
    .app-page-header { align-items: flex-start; flex-direction: column; }
    .app-page-header__actions { justify-content: flex-start; }
}

@media (max-width: 768px) {
    .app-page-frame {
        padding: .75rem max(.625rem, env(safe-area-inset-left)) calc(1.5rem + env(safe-area-inset-bottom));
    }

    .app-page-frame :is(.page-head, .page-hero, .dashboard-hero, .analytics-hero, .athlete-profile-hero, .superadmin-hero, .resource-hero, .cockpit-hero, .training-control-hero, .app-page-header) {
        align-items: flex-start;
        flex-direction: column;
        padding: 1rem;
        border-radius: 18px;
    }

    .app-page-frame h1,
    .app-page-frame .h1 {
        font-size: clamp(1.75rem, 9vw, 2.45rem);
    }

    .app-page-frame :is(.workforce-nav, .app-section-nav, .settings-tabs, .training-knowledge-tabs, .trainer-mobile-nav, .nav-tabs, .app-subnav) {
        flex-wrap: nowrap !important;
        scroll-snap-type: inline proximity;
    }

    .app-page-frame :is(.workforce-nav, .app-section-nav, .settings-tabs, .training-knowledge-tabs, .trainer-mobile-nav, .nav-tabs, .app-subnav) > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .app-page-frame :is(.filter-bar, .people-directory-toolbar, .analytics-filter, .resource-filter) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch;
    }

    .app-page-frame :is(.filter-bar, .people-directory-toolbar, .analytics-filter, .resource-filter) > * {
        min-width: 0;
        width: 100%;
    }

    .app-page-frame :is(.filter-bar, .people-directory-toolbar, .analytics-filter, .resource-filter) .btn,
    .app-page-header__actions,
    .app-page-header__actions .btn {
        width: 100%;
    }

    .resource-hero { align-items: flex-start; flex-direction: column; }
    .resource-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .resource-booking,
    .resource-form { grid-template-columns: 1fr; }
    .resource-form .wide { grid-column: auto; }

    .cockpit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cockpit-sections,
    .cockpit-item { grid-template-columns: 1fr; }
    .cockpit-actions { justify-content: flex-start; max-width: none; }
    .cockpit-page { padding-inline: 0 !important; }
    .cockpit-timeline > div { grid-template-columns: 5.5rem minmax(0, 1fr); }

    .app-page-frame .table-responsive > .table {
        min-width: 640px;
    }

    .app-page-frame .table-responsive::after {
        content: "Seitlich wischen, um alle Spalten zu sehen";
        display: block;
        padding: .55rem .75rem;
        border-top: 1px solid var(--app-border);
        color: var(--app-text-secondary);
        font-size: .72rem;
        text-align: center;
    }
}

@media (max-width: 430px) {
    .app-page-frame :is(.surface, .app-card, .resource-panel, .card-body) {
        padding: .85rem;
    }

    .cockpit-kpis { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .app-page-frame *,
    .app-page-frame *::before,
    .app-page-frame *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}