/**
 * RCA unified mobile-first UI — admin, portal, staff, student, public forms
 * Colors: navy #16466e / #031634, green #52743e, gold #8e7a36, bg #f5f6f8
 */

:root {
    --rca-navy: #16466e;
    --rca-navy-dark: #031634;
    --rca-green: #52743e;
    --rca-gold: #8e7a36;
    --rca-bg: #f5f6f8;
    --rca-border: #e3e8f0;
    --rca-text: #121b2b;
    --rca-muted: #59677c;
    --rca-radius: 0.75rem;
    --rca-radius-lg: 1rem;
    --rca-touch: 44px;
    --rca-bottom-nav-h: 4.25rem;
}

/* ─── Shell & safe areas ─── */
.rca-shell,
.portal-body {
    font-family: Manrope, system-ui, sans-serif;
    padding-bottom: env(safe-area-inset-bottom, 0);
    -webkit-font-smoothing: antialiased;
}

.rca-main,
.portal-main {
    padding-bottom: calc(var(--rca-bottom-nav-h) + 1.25rem + env(safe-area-inset-bottom, 0));
}

@media (min-width: 768px) {
    .rca-main,
    .portal-main {
        padding-bottom: 2rem;
    }

    .rca-shell.admin-shell .dashboard-content {
        padding-bottom: 2rem !important;
    }
}

.safe-top { padding-top: env(safe-area-inset-top, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ─── Bottom navigation ─── */
.rca-bottom-nav,
.portal-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    border-top: 1px solid var(--rca-border);
    background: rgb(255 255 255 / 0.95);
    backdrop-filter: blur(12px);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 768px) {
    .rca-bottom-nav,
    .portal-bottom-nav,
    .admin-mobile-nav {
        display: none !important;
    }
}

.rca-bottom-nav__inner,
.portal-bottom-nav > div {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.25rem;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0.35rem 0.5rem;
}

.rca-nav-link,
.portal-bottom-nav .portal-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
    max-width: 5.5rem;
    min-height: 3.25rem;
    padding: 0.3rem 0.2rem;
    border-radius: var(--rca-radius);
    border: none;
    background: transparent;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--rca-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.rca-nav-link .material-symbols-outlined,
.portal-bottom-nav .portal-nav-link .material-symbols-outlined {
    font-size: 1.35rem;
}

.rca-nav-link.is-active,
.portal-bottom-nav .portal-nav-link.is-active {
    background: #16466e14;
    color: var(--rca-navy);
}

.rca-nav-link:active,
.portal-bottom-nav .portal-nav-link:active {
    background: #16466e22;
}

/* ─── Cards, buttons, inputs ─── */
.rca-card,
.portal-card {
    border-radius: var(--rca-radius-lg);
    border: 1px solid var(--rca-border);
    background: #fff;
    box-shadow: 0 1px 3px rgb(22 70 110 / 6%);
}

.rca-list-item,
.portal-list-item {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid #eef1f6;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.rca-list-item:last-child,
.portal-list-item:last-child { border-bottom: none; }

.rca-list-item:active,
.portal-list-item:active { background: #f0f4f8; }

.rca-btn,
.portal-btn {
    display: inline-flex;
    min-height: var(--rca-touch);
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--rca-radius);
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.rca-btn:active,
.portal-btn:active { transform: scale(0.98); }

.rca-btn-primary, .portal-btn-primary { background: var(--rca-navy-dark); color: #fff; }
.rca-btn-secondary, .portal-btn-secondary { background: #fff; color: #1f2f47; border: 1px solid #cfd6e3; }
.rca-btn-outline, .portal-btn-outline { background: transparent; color: var(--rca-navy); border: 1px solid var(--rca-navy); }
.rca-btn-danger, .portal-btn-danger { background: #fff; color: #dc3545; border: 1px solid #f5c2c7; }
.rca-btn-block, .portal-btn-block { width: 100%; }

.rca-input, .rca-select, .rca-textarea,
.portal-input, .portal-select, .portal-textarea {
    width: 100%;
    min-height: var(--rca-touch);
    padding: 0.65rem 0.85rem;
    border: 1px solid #cfd6e3;
    border-radius: var(--rca-radius);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--rca-text);
}

.rca-textarea, .portal-textarea { min-height: 6rem; resize: vertical; }

.rca-label, .portal-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2f47;
}

.rca-field, .portal-field { margin-bottom: 1rem; }

/* Sticky form actions */
.rca-form-actions,
.portal-form-actions {
    position: sticky;
    bottom: calc(var(--rca-bottom-nav-h) + env(safe-area-inset-bottom, 0));
    z-index: 30;
    margin: 1.5rem -1rem -1rem;
    padding: 1rem;
    background: linear-gradient(to top, var(--rca-bg) 85%, transparent);
}

@media (min-width: 768px) {
    .rca-form-actions,
    .portal-form-actions {
        position: static;
        margin: 1.5rem 0 0;
        padding: 0;
        background: none;
    }
}

/* Rating pills */
.rating-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rating-pills input { position: absolute; opacity: 0; pointer-events: none; }
.rating-pills label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 2px solid #cfd6e3;
    border-radius: var(--rca-radius);
    font-size: 0.95rem;
    font-weight: 800;
    color: #4f5e74;
    cursor: pointer;
    user-select: none;
}
.rating-pills input:checked + label { border-color: var(--rca-navy); background: var(--rca-navy); color: #fff; }
.rating-pills-aff input:checked + label { border-color: var(--rca-green); background: var(--rca-green); color: #fff; }

/* Dual list/table views */
@media (max-width: 767px) {
    .portal-table-desktop,
    .rca-table-desktop { display: none !important; }
}
@media (min-width: 768px) {
    .portal-cards-mobile,
    .rca-cards-mobile { display: none !important; }
}

/* ─── Admin shell — mobile overrides only ─── */
.rca-shell.admin-shell {
    background: var(--rca-bg);
}

@media (max-width: 767px) {
    .rca-shell.admin-shell .dashboard-content {
        padding: 1rem !important;
        padding-bottom: calc(var(--rca-bottom-nav-h) + 1.5rem + env(safe-area-inset-bottom, 0)) !important;
    }

    .rca-shell.admin-shell .admin-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
        margin-bottom: 1rem !important;
    }

    .rca-shell.admin-shell .admin-header .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .rca-shell.admin-shell .admin-title {
        font-size: 1.35rem !important;
    }

    .rca-shell.admin-shell .btn-add-member,
    .rca-shell.admin-shell .admin-header .btn-primary,
    .rca-shell.admin-shell .admin-header a.btn {
        width: 100%;
    }

    .rca-shell.admin-shell .card-body {
        padding: 1rem;
    }

    .rca-shell.admin-shell .welcome-section h1 {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    /* Full desktop admin — do not constrain layout */
    .rca-shell.admin-shell .dashboard-content {
        padding: 2rem !important;
        padding-bottom: 2rem !important;
        max-width: none !important;
    }

    .rca-shell.admin-shell .admin-header {
        flex-direction: row !important;
        align-items: center !important;
    }

    .rca-shell.admin-shell .admin-header > .d-flex {
        flex-direction: row !important;
        align-items: center !important;
    }

    .rca-shell.admin-shell .admin-title {
        font-size: inherit !important;
    }

    .rca-shell.admin-shell .welcome-section h1 {
        font-size: 2rem;
    }

    .rca-shell.admin-shell .card-body {
        padding: 1.25rem 1.5rem;
    }

    .rca-shell.admin-shell .card-header {
        padding: 1rem 1.5rem;
    }
}

/* Admin polish (all breakpoints — subtle) */
.rca-shell.admin-shell .admin-subtitle {
    font-size: 0.875rem;
    color: var(--rca-muted);
}

.rca-shell.admin-shell .btn-add-member,
.rca-shell.admin-shell .admin-header .btn-primary,
.rca-shell.admin-shell .admin-header a.btn {
    min-height: var(--rca-touch);
    border-radius: var(--rca-radius);
    font-weight: 700;
    justify-content: center;
}

.rca-shell.admin-shell .card {
    border-radius: var(--rca-radius-lg);
    border-color: var(--rca-border);
    box-shadow: 0 1px 3px rgb(22 70 110 / 6%);
}

@media (max-width: 767px) {
    .rca-shell.admin-shell .btn,
    .rca-shell.admin-shell .btn-primary,
    .rca-shell.admin-shell .btn-secondary,
    .rca-shell.admin-shell .btn-outline-primary,
    .rca-shell.admin-shell .btn-outline-secondary,
    .rca-shell.admin-shell .btn-outline-danger,
    .rca-shell.admin-shell .btn-danger {
        min-height: var(--rca-touch);
        border-radius: var(--rca-radius);
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .rca-shell.admin-shell .form-control,
    .rca-shell.admin-shell .form-select,
    .rca-shell.admin-shell textarea.form-control {
        min-height: var(--rca-touch);
        border-radius: var(--rca-radius);
        border-color: #cfd6e3;
        font-size: 1rem;
    }
}

.rca-shell.admin-shell .form-label,
.rca-shell.admin-shell label.form-label {
    font-weight: 700;
    font-size: 0.875rem;
    color: #1f2f47;
}

.rca-shell.admin-shell .alert {
    border-radius: var(--rca-radius);
    border: none;
}

.rca-shell.admin-shell .stat-card {
    border-radius: var(--rca-radius-lg);
    border-color: var(--rca-border);
}

.rca-shell.admin-shell .topbar {
    background: rgb(255 255 255 / 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rca-border);
    padding-top: env(safe-area-inset-top, 0);
}

.rca-shell.admin-shell .breadcrumb-text {
    font-weight: 800;
    color: #0d1a2f;
}

/* Portal pages on desktop — full width within admin */
@media (min-width: 768px) {
    .rca-shell.admin-shell .portal-desktop-table {
        display: block !important;
    }

    .rca-shell.admin-shell .portal-cards-mobile {
        display: none !important;
    }
}

/* Student portal — full width on desktop */
@media (min-width: 768px) {
    .rca-shell.portal-body .portal-main,
    .rca-shell.portal-body .portal-header-inner {
        max-width: 72rem;
    }

    .rca-shell.portal-body .rca-bottom-nav,
    .rca-shell.portal-body .portal-bottom-nav {
        display: none !important;
    }

    .rca-shell.portal-body .portal-main {
        padding-bottom: 2rem;
    }
}

/* Mobile stacked tables (auto-enhanced via JS) */
@media (max-width: 767px) {
    .rca-shell table.rca-mobile-table thead {
        display: none;
    }

    .rca-shell table.rca-mobile-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 1rem;
        border-radius: var(--rca-radius-lg);
        border: 1px solid var(--rca-border);
        background: #fff;
        box-shadow: 0 1px 3px rgb(22 70 110 / 6%);
    }

    .rca-shell table.rca-mobile-table tbody tr td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.4rem 0;
        border: none;
        text-align: right;
    }

    .rca-shell table.rca-mobile-table tbody tr td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.75rem;
        color: var(--rca-muted);
        text-align: left;
        flex-shrink: 0;
    }

    .rca-shell table.rca-mobile-table tbody tr td:last-child {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding-top: 0.75rem;
        margin-top: 0.25rem;
        border-top: 1px solid #eef1f6;
    }

    .rca-shell table.rca-mobile-table tbody tr td:last-child::before {
        content: 'Actions';
    }

    .rca-shell table.rca-mobile-table .team-action-buttons,
    .rca-shell table.rca-mobile-table .action-buttons,
    .rca-shell table.rca-mobile-table .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .rca-shell table.rca-mobile-table .btn {
        width: 100%;
    }

    .rca-shell .table-responsive {
        overflow: visible;
    }

    .rca-shell .form-actions,
    .rca-shell .form-actions.mt-4 {
        position: sticky;
        bottom: calc(var(--rca-bottom-nav-h) + env(safe-area-inset-bottom, 0));
        z-index: 20;
        flex-direction: column;
        gap: 0.5rem;
        margin: 1rem -0.5rem 0;
        padding: 1rem 0.5rem;
        background: linear-gradient(to top, var(--rca-bg) 85%, transparent);
    }

    .rca-shell .form-actions .btn {
        width: 100%;
    }

    .rca-shell.admin-shell .topbar-center,
    .rca-shell.admin-shell .user-info,
    .rca-shell.admin-shell .notification-dropdown {
        display: none !important;
    }

    .rca-shell.admin-shell .user-dropdown-btn {
        min-height: var(--rca-touch);
        padding: 0.35rem;
    }

    .rca-shell.admin-shell .user-dropdown-btn .user-avatar-wrapper {
        margin: 0;
    }
}

/* Desktop: restore hidden topbar items */
@media (min-width: 768px) {
    .rca-shell.admin-shell .topbar-center,
    .rca-shell.admin-shell .user-info,
    .rca-shell.admin-shell .notification-dropdown {
        display: revert !important;
    }
}

/* ─── Public site form touch targets ─── */
.rca-shell-public .form-control,
.rca-shell-public input[type="text"],
.rca-shell-public input[type="email"],
.rca-shell-public input[type="tel"],
.rca-shell-public input[type="password"],
.rca-shell-public select,
.rca-shell-public textarea {
    min-height: var(--rca-touch);
    border-radius: var(--rca-radius);
    font-size: 1rem;
}

.rca-shell-public .btn:not(.portal-btn) {
    min-height: var(--rca-touch);
    border-radius: var(--rca-radius);
    font-weight: 700;
}

/* Flash alerts — shared */
.rca-flash {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--rca-radius);
    font-size: 0.875rem;
}

.rca-flash--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.rca-flash--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }