/* =============================================================================
   settings-upgrade.css — Typography + tap-target refresh for the Settings modal.
   May 21 2026.

   Carlos's feedback during Step 3 testing: settings text and buttons are all
   too small. The content is right ("exactly what I wanted") — only sizing
   needs a pass. Scoped with #settingsModal selectors so we don't ripple
   across the rest of the app. No !important; specificity does the work.

   Tasks addressed:
     #119  Settings modal — typography pass
     #125  Account & Settings — team logo + name treatment
     (Adjacent: #120 Playbook quick actions — separate file when we get to it)
   ============================================================================= */

/* --- Modal-wide font baseline ------------------------------------------- */

#settingsModal {
    font-size: 15px;
    line-height: 1.45;
}

/* Tab labels — the row at the top of the settings modal */
#settingsModal .settings-tab,
#settingsModal .settings-tab-v2,
#settingsModal [class*="tab-label"] {
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* Row titles + subtitles — the most common settings list pattern */
#settingsModal .settings-row-title,
#settingsModal .settings-section-title {
    font-size: 16px;
    font-weight: 600;
}
#settingsModal .settings-row-subtitle,
#settingsModal .settings-section-subtitle {
    font-size: 14px;
}

/* Labels above inputs */
#settingsModal label,
#settingsModal .form-label {
    font-size: 14px;
    font-weight: 500;
}

/* Text inputs + selects + textareas */
#settingsModal input[type="text"],
#settingsModal input[type="email"],
#settingsModal input[type="number"],
#settingsModal input[type="tel"],
#settingsModal input[type="search"],
#settingsModal select,
#settingsModal textarea {
    font-size: 15px;
    padding: 10px 12px;
    min-height: 44px;
}

/* Buttons inside the modal: ensure tap-target minimums + readable text */
#settingsModal button,
#settingsModal .gc-btn,
#settingsModal .btn-primary,
#settingsModal .btn-secondary,
#settingsModal .pm-btn-primary,
#settingsModal .pm-btn-secondary {
    font-size: 15px;
    min-height: 44px;
    padding: 10px 18px;
}

/* Save Roster button specifically — biggest action in the modal,
   deserves marquee treatment. */
#settingsModal .btn-save-roster {
    font-size: 16px;
    font-weight: 600;
    min-height: 48px;
    padding: 12px 24px;
    letter-spacing: 0.01em;
}

/* --- Pending invites (roster tab) --------------------------------------- */

/* The "invite pending" label next to a roster row */
#settingsModal .pm-roster-parent.invite-pending {
    font-size: 13px;
    font-weight: 600;
}

/* The email address shown under a pending name — was barely readable */
#settingsModal .pm-pending-email,
#settingsModal .pm-roster-parent .pm-pending-email,
#settingsModal .invite-pending-email,
#settingsModal [class*="pending"] [class*="email"] {
    font-size: 13px;
    color: var(--gc-text-color-secondary, #94a3b8);
    word-break: break-word;
}

/* Resend + cancel icon buttons — bumped so they're actually tappable */
#settingsModal .pm-invite-action,
#settingsModal .pm-pending-action,
#settingsModal .btn-invite-resend,
#settingsModal .btn-invite-cancel {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#settingsModal .pm-invite-action svg,
#settingsModal .pm-pending-action svg {
    width: 16px;
    height: 16px;
}

/* Date stamp on pending invite rows — readable, secondary tone */
#settingsModal .pm-invite-date,
#settingsModal [class*="invite-date"],
#settingsModal [class*="pending-date"] {
    font-size: 12px;
    color: var(--gc-text-color-muted, #64748b);
}

/* --- Account & Settings team list (#125) -------------------------------- */

/* Carlos: "your team's logos and names of teams are really small.
   Make those look a little bigger, bolder, prettier, whatever." */

#settingsModal .settings-team-item {
    padding: 14px 16px;
    gap: 14px;
    margin-bottom: 10px;
}

#settingsModal .settings-team-item-logo {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 12px;
}

#settingsModal .settings-team-item-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#settingsModal .settings-team-item-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.005em;
}

#settingsModal .settings-team-item-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
}

/* Hover/active polish — subtle lift so the cards feel like real surfaces */
#settingsModal .settings-team-item {
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
#settingsModal .settings-team-item:hover {
    transform: translateY(-1px);
}

/* --- Playbook tab Quick Actions grid (#120) ----------------------------- */

/* 2x2 on small screens (mobile / narrow iPad portrait), 4-col on wide.
   Tap targets bumped — each tile is a real action, not a thin one-line bar. */
.pm-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 720px) {
    .pm-quick-actions-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pm-quick-action {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 14px 12px;
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;
}

.pm-quick-action i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.pm-quick-action span {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

/* --- Coaching Staff list (#123, Settings → Team) ------------------------ */

.pm-coaching-staff-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.pm-coach-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--gc-bg-elevated, #1e2433);
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pm-coach-row-you {
    border-color: rgba(34, 197, 94, 0.35);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06), rgba(34, 197, 94, 0));
}

.pm-coach-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gc-bg-panel, #151b28), var(--gc-bg-elevated, #1e2433));
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--gc-text-color-primary, #fff);
    letter-spacing: 0.02em;
}

.pm-coach-row-you .pm-coach-avatar {
    border-color: rgba(34, 197, 94, 0.5);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
}

.pm-coach-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pm-coach-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--gc-text-color-primary, #fff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-coach-role {
    font-size: 13px;
    color: var(--gc-text-color-secondary, #94a3b8);
}

.pm-coach-you-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22c55e;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Pending invite row — slightly muted, mail icon avatar, gold accent */
.pm-coach-row-pending .pm-coach-name {
    color: var(--gc-text-color-secondary, #94a3b8);
    font-weight: 500;
    word-break: break-word;
}
.pm-coach-row-pending .pm-coach-role {
    color: #f59e0b;
    font-weight: 600;
}
/* Bumped specificity: .pm-coach-row + .pm-coach-avatar-pending chains two
   classes so we beat the single-class .pm-coach-avatar base rule without
   needing !important. */
.pm-coach-row .pm-coach-avatar-pending {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.06));
    border-color: rgba(245, 158, 11, 0.45);
    color: #f59e0b;
}
.pm-coach-avatar-pending i,
.pm-coach-avatar-pending svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Action buttons (remove / resend / cancel) on the right side of each row */
.pm-coach-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pm-coach-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.08));
    color: #94a3b8;                      /* Explicit muted gray — visible on dark */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.pm-coach-action:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
.pm-coach-action-resend:hover {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.4);
}
/* Icon inside the action button. Specificity bumped with #settingsModal
   id selector so we beat Lucide's HTML width/height attributes (which
   would tie with a single class selector) without resorting to !important.
   Set fill:none explicitly because Lucide outputs fill="none" as an attr,
   which can be overridden by ancestor CSS — we want to win that race. */
#settingsModal .pm-coach-action i,
#settingsModal .pm-coach-action svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    pointer-events: none;
    flex-shrink: 0;
}

/* Invite form — pinned to the bottom of the card.
   Specificity bumped with #settingsModal id throughout: the existing
   .gc-input rule sets width:100% and the .pm-btn-primary defaults
   sometimes get full-width treatment from settings-context CSS. Without
   id-level specificity, the input collapses to 0 (flex shrinks) AND the
   button takes the rest, pushing it off-screen. */
#settingsModal .pm-coach-invite-form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--gc-border-subtle, rgba(255, 255, 255, 0.1));
    align-items: stretch;
    width: 100%;
}
/* Email input: flex:1 1 0 (not auto) so width starts at 0 and grows to fill;
   beats the .gc-input width:100% which would otherwise force-shrink the
   button via flexbox negotiation. min-width:0 lets the input shrink past
   its placeholder length on narrow viewports. */
#settingsModal .pm-coach-invite-form > input.pm-coach-invite-email {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
    background: var(--gc-bg-elevated, #1e2433);
    border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    color: var(--gc-text-color-primary, #fff);
    box-sizing: border-box;
}
#settingsModal .pm-coach-invite-form > input.pm-coach-invite-email::placeholder {
    color: var(--gc-text-color-muted, #64748b);
}
#settingsModal .pm-coach-invite-form > input.pm-coach-invite-email:focus {
    outline: none;
    border-color: rgba(34, 197, 94, 0.5);
    background: var(--gc-bg-panel, #151b28);
}
/* Button: flex:0 0 auto pins to content width so the input gets the rest.
   Override any width:100% inherited from pm-btn-primary settings-card use. */
#settingsModal .pm-coach-invite-form > button.pm-coach-invite-btn {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-height: 44px;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}
/* Invite send icon — explicit white so it shows on the green button.
   Targets both pre-processed `i` and post-processed `svg` (Lucide swaps). */
.pm-coach-invite-btn i,
.pm-coach-invite-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    color: #fff;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .pm-coach-invite-form {
        flex-direction: column;
    }
    .pm-coach-invite-btn {
        justify-content: center;
    }
}

/* Light-mode parity for new pieces */
html[data-theme="light"] .pm-coach-row-pending .pm-coach-name {
    color: #475569;
}
html[data-theme="light"] .pm-coach-action {
    border-color: #e2e8f0;
    color: #94a3b8;
}

/* Light-mode coaching staff polish */
html[data-theme="light"] .pm-coach-row {
    background: #fff;
    border-color: #e2e8f0;
}
html[data-theme="light"] .pm-coach-row-you {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0));
    border-color: rgba(34, 197, 94, 0.4);
}
html[data-theme="light"] .pm-coach-avatar {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}
html[data-theme="light"] .pm-coach-name {
    color: #1e293b;
}
html[data-theme="light"] .pm-coach-role {
    color: #64748b;
}

/* --- Light-mode parity -------------------------------------------------- */

html[data-theme="light"] #settingsModal .settings-row-subtitle,
html[data-theme="light"] #settingsModal .pm-pending-email {
    color: #475569;
}
html[data-theme="light"] #settingsModal .pm-invite-date {
    color: #64748b;
}