/* Shared visual refresh for deals/teams/moderation/routes/claims + repository pages.
   Purely presentational — names the dark theme tokens already used inline site-wide. */

:root {
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-hover: rgba(255, 255, 255, 0.08);
    --bg-card-subtle: rgba(255, 255, 255, 0.03);
    --border-card: rgba(255, 255, 255, 0.1);
    --border-card-hover: rgba(255, 255, 255, 0.2);
    --border-card-danger: rgba(220, 53, 69, 0.35);
    --bg-card-danger: rgba(220, 53, 69, 0.06);
    --accent-blue: #42A5F5;
    --accent-blue-dark: #1976D2;
    --accent-purple: #9C27B0;
    --accent-pink: #E91E63;
    --accent-green: #66BB6A;
    --accent-red: #EF5350;
    --accent-yellow: #FFC107;
    --text-muted: #B0BEC5;
    --text-dim: #78909C;
    --text-bright: #E3F2FD;
}

.pr-page {
    width: 90%;
    margin: 0 auto;
}

.pr-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.pr-card.pr-card-danger {
    background: var(--bg-card-danger);
    border: 1px solid var(--border-card-danger);
}

.pr-header {
    padding: 24px 24px 16px;
    margin-bottom: 20px;
}

.pr-header h1,
.pr-header h2,
.pr-header #page_title {
    background: linear-gradient(45deg, var(--accent-blue), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
    display: inline-block;
}

/* #page_title_container carries a site-wide margin-top (clearing the fixed header)
   that's meant to collapse straight through a plain, unpadded wrapper div. Once it's
   nested inside a .pr-card/.pr-header (which has padding, blocking that collapse),
   the huge margin becomes empty space trapped *inside* the card, pushing its visible
   border way above the title. Zero it here and move the same clearance onto the
   outer card itself via .pr-header-top, where it collapses through the unpadded
   .pr-page ancestor exactly like the original margin did. */
.pr-card #page_title_container,
.pr-header #page_title_container {
    margin-top: 0;
}

.pr-header-top {
    margin-top: 237px;
}

.pr-section-title {
    color: var(--accent-blue);
    margin-bottom: 14px;
}

.pr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-list-item,
.deal,
.route-row {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 12px 16px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.deal:hover,
.route-row:hover,
.pr-list-item:hover {
    border-color: var(--border-card-hover);
}

/* .basic_button previously had no CSS definition anywhere and rendered unstyled */
.basic_button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-card-hover);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.basic_button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* repositories.ejs listing cards — shared by server-rendered and loadMoreSearch()-built cards */
.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card) !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease;
}
.team-card:hover {
    border-color: var(--border-card-hover) !important;
}

/* team-mini card dark-theme border (was a light #ddd border) */
.team_item {
    background: var(--bg-card);
    border: 1px solid var(--border-card) !important;
}

/* team.ejs payout popup — recolored to dark-theme equivalents of the same
   semantic yellow/red meaning (was light-theme #fff3cd/#856404 etc.) */
.team-info {
    border-bottom: 1px solid var(--border-card);
}
.ledger-item {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
}
.member-name {
    color: var(--text-bright);
}
.member-details {
    color: var(--text-muted);
}
.payout-amount {
    color: var(--accent-green);
}
.payout-percentage {
    color: var(--text-muted);
}
.no-stripe {
    color: var(--accent-red);
}
.pay-button {
    background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-dark));
    border: none;
    border-radius: 20px;
}
.pay-button:hover {
    background: linear-gradient(45deg, var(--accent-blue-dark), var(--accent-blue));
}
.pay-button:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
}
.total-info {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-card);
}
.error-message {
    color: var(--accent-red);
}
.warning {
    background: rgba(255, 193, 7, 0.1);
    color: #FFD54F;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* Text-like inputs on these pages were plain unstyled browser white fields;
   bring them in line with the existing dark-glass textarea look (header.css). */
.pr-page input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
.pr-page select,
.pr-page textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 0.95em;
}

.pr-page input:not([type="radio"]):not([type="checkbox"])::placeholder,
.pr-page textarea::placeholder {
    color: var(--text-dim);
}

.pr-page input:not([type="radio"]):not([type="checkbox"]):focus,
.pr-page select:focus,
.pr-page textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.pr-page input[readonly] {
    color: var(--text-dim);
}

/* Buttons on these pages: plain unstyled <button>s and a flat .grey-button/.basic_button.
   Give them the same pill/gradient treatment as reputation-rewards.ejs's .enhanced-button. */
.pr-page button:not(.star-btn),
.pr-page .grey-button,
.pr-page .basic_button,
.pr-page .basic_btn {
    background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-dark));
    border: none;
    color: #fff;
    padding: 9px 18px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.pr-page button:not(.star-btn):hover,
.pr-page .grey-button:hover,
.pr-page .basic_button:hover,
.pr-page .basic_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(66, 165, 245, 0.35);
    background: linear-gradient(45deg, var(--accent-blue-dark), var(--accent-blue));
}

.pr-page button:disabled,
.pr-page .grey-button:disabled,
.pr-page .basic_button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pr-page .grey-button.danger,
.pr-page .basic_button.danger {
    background: linear-gradient(45deg, var(--accent-red), #C62828);
}

.pr-page .grey-button.danger:hover,
.pr-page .basic_button.danger:hover {
    background: linear-gradient(45deg, #C62828, var(--accent-red));
    box-shadow: 0 4px 14px rgba(239, 83, 80, 0.35);
}

/* #create-team / #enter-team / #post-passage are plain <a>/<button> tags, but book.css
   styles them as flat old-style boxes via a shared ID rule (#post-passage, #create-team,
   #enter-team, .grey-button). #post-passage is reused sitewide so that rule can't be
   touched directly; overriding the two team-only ids here (scoped under .pr-page, higher
   specificity than the bare id selector) gives them the same pill look without touching
   the shared rule or any other page that doesn't use .pr-page. */
.pr-page #create-team,
.pr-page #enter-team {
    display: inline-block;
    background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-dark));
    border: none;
    color: #fff !important;
    padding: 9px 18px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    opacity: 1;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.pr-page #create-team:hover,
.pr-page #enter-team:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(66, 165, 245, 0.35);
    background: linear-gradient(45deg, var(--accent-blue-dark), var(--accent-blue));
    opacity: 1;
}

/* create-team-form.ejs / edit-team-form.ejs render inside a popup() modal outside
   .pr-page, so they need their own scoped rules (safe: #create-team-form and
   #edit-team-form are unique to the teams pages, unlike the shared #post-passage id). */
#create-team-form input:not([type="hidden"]),
#create-team-form textarea,
#edit-team-form input:not([type="hidden"]),
#edit-team-form textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-muted);
}

#create-team-form #post-passage,
#edit-team-form #post-passage {
    background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-dark));
    border: none;
    color: #fff;
    padding: 9px 18px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#create-team-form #post-passage:hover,
#edit-team-form #post-passage:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(66, 165, 245, 0.35);
    background: linear-gradient(45deg, var(--accent-blue-dark), var(--accent-blue));
}

@media (max-width: 768px) {
    .pr-page {
        width: 96%;
    }
    .pr-card,
    .pr-header {
        padding: 16px;
    }
}

/* Matches #page_title_container's own mobile.css breakpoints (180px under 820px,
   90px under 715px) so .pr-header-top keeps the same fixed-header clearance at
   every width instead of only the desktop 237px value. */
@media screen and (max-width: 820px) {
    .pr-header-top {
        margin-top: 180px;
    }
}
@media screen and (max-width: 715px) {
    .pr-header-top {
        margin-top: 90px;
    }
}