/* GreerGuard Partner Portal - Dvance Development */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* App-exact color tokens */
:root {
    --bg-grad-start: #3D74E8;
    --bg-grad-mid:   #2A5CD6;
    --bg-grad-end:   #1A3DAA;
    --navy:          #1A3DAA;
    --blue:          #3D74E8;
    --cta-gold:      #F5C400;
    --cta-text:      #1A1A1A;
    --muted-blue:    #AAC4FF;
    --green:         #1B8A4C;
    --green-bg:      #E6F5ED;
    --red:           #D62B2B;
    --medium-amber:  #C17D00;
    --card-white:    #FFFFFF;
    --text-primary:  #1A1A1A;
    --text-secondary:#555555;
    --text-muted:    #999999;
    --border:        #DDE3F0;
    --light-bg:      #EEF3FF;
}

body.ggp-body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(160deg, var(--bg-grad-start), var(--bg-grad-mid), var(--bg-grad-end));
    background-attachment: fixed;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ── Header ── */
.ggp-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 28, 80, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 0 24px;
}
.ggp-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo mark */
.ggp-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.ggp-logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3D74E8, #1A3DAA);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    flex-shrink: 0;
}
.ggp-logo-text {
    line-height: 1.2;
}
.ggp-logo-text .wordmark {
    font-size: 17px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -.01em;
}
.ggp-logo-text .section {
    font-size: 11px;
    color: var(--muted-blue);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
}

/* Keep old .ggp-brand for backward compat */
.ggp-brand { display: flex; align-items: center; gap: 10px; color: #FFFFFF; font-size: 17px; }
.ggp-brand strong { font-weight: 700; }

.ggp-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--muted-blue);
}

/* ── Main ── */
.ggp-main {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 20px;
}

/* ── Cards ── */
.ggp-card {
    background: var(--card-white);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.15);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.ggp-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 16px;
}
.ggp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 680px) { .ggp-row { grid-template-columns: 1fr; } }

/* ── Stats ── */
.ggp-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 760px) { .ggp-stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ggp-stats-row { grid-template-columns: 1fr; } }

.ggp-stat-card {
    background: var(--card-white);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.ggp-stat-highlight {
    background: linear-gradient(135deg, var(--cta-gold), #E6B000);
    border-color: transparent;
}
.ggp-stat-highlight .ggp-stat-value { color: var(--cta-text); }
.ggp-stat-highlight .ggp-stat-label { color: rgba(26,26,26,.7); }

.ggp-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.1;
}
.ggp-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Login ── */
.ggp-login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
}
.ggp-login-card {
    width: 100%;
    max-width: 420px;
}

/* ── Form elements ── */
.ggp-field { margin-bottom: 16px; }

/* Standalone input — same visual style as .ggp-field input, for use outside a .ggp-field wrapper */
.ggp-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    color: var(--text-primary);
    background: #fff;
}
.ggp-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(61,116,232,.15);
}
.ggp-input::placeholder { color: var(--text-muted); }

.ggp-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ggp-field input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    color: var(--text-primary);
}
.ggp-field input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(61,116,232,.15);
}
.ggp-field select,
.ggp-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    color: var(--text-primary);
    background: #fff;
    font-family: inherit;
}
.ggp-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
.ggp-field select:focus,
.ggp-field textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(61,116,232,.15);
}
.ggp-field textarea {
    resize: vertical;
    line-height: 1.6;
    min-height: 110px;
}

/* Toggle rows - styled checkbox/option rows used throughout config forms */
.ggp-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    margin-bottom: 8px;
}
.ggp-toggle-row:hover {
    background: var(--light-bg);
    border-color: var(--blue);
}
.ggp-toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: var(--navy);
    cursor: pointer;
}
.ggp-toggle-row.ggp-toggle-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Outline/ghost button for secondary destructive-ish actions */
.ggp-btn-outline {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-family: inherit;
}
.ggp-btn-outline:hover { border-color: var(--navy); color: var(--navy); }

/* ── Buttons ── */
.ggp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 26px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity .15s, transform .1s;
    text-decoration: none;
    /* Default: visible on white/card backgrounds */
    background: var(--light-bg);
    color: var(--navy);
}
.ggp-btn:active { transform: scale(.98); }
.ggp-btn:hover  { opacity: .9; }

/* Primary: gold CTA matching app's "Begin Upgrade" */
.ggp-btn-primary {
    background: var(--cta-gold);
    color: var(--cta-text);
}
/* Secondary: solid navy for less-prominent actions */
.ggp-btn-navy {
    background: var(--navy);
    color: #FFFFFF;
}
.ggp-btn-full { width: 100%; }
.ggp-btn-ghost {
    background: transparent;
    color: var(--muted-blue);
    border: 1px solid rgba(255,255,255,.25);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 600;
}

/* ── Alerts ── */
.ggp-alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}
.ggp-alert-error   { background: #FFF0F0; color: var(--red);   border: 1px solid var(--red); }
.ggp-alert-success { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }

/* ── Tables ── */
.ggp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ggp-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 2px solid var(--border);
    font-weight: 700;
}
.ggp-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.ggp-table tr:last-child td { border-bottom: none; }

.ggp-detail-table { width: 100%; font-size: 14px; }
.ggp-detail-table th { color: var(--text-muted); font-weight: 600; padding: 7px 0; width: 50%; font-size: 13px; }
.ggp-detail-table td { padding: 7px 0; color: var(--text-primary); }

.ggp-positive { color: var(--green); font-weight: 700; }
.ggp-negative { color: var(--red);   font-weight: 700; }

.ggp-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ggp-tag-commission            { background: var(--green-bg); color: var(--green); }
.ggp-tag-payout_request        { background: #FFF8E1; color: #C17D00; }
.ggp-tag-refund_chargeback     { background: #FFF0F0; color: var(--red); }
.ggp-tag-chargeback_penalty    { background: #FFF0F0; color: var(--red); }
.ggp-tag-force_cancel_clawback { background: #FFF0F0; color: var(--red); }
.ggp-tag-dispute_won           { background: var(--green-bg); color: var(--green); }
.ggp-tag-refund                { background: #FFF0F0; color: var(--red); }

.ggp-code {
    background: var(--light-bg);
    color: var(--navy);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 15px;
    letter-spacing: .1em;
    font-weight: 700;
}

/* ── Form layout helpers ── */
.ggp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) { .ggp-field-row { grid-template-columns: 1fr; } }

.ggp-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--navy);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
}

/* ── Misc ── */
.ggp-muted { color: var(--text-muted); font-size: 14px; }

/* ── Named grid helpers (used instead of inline styles for responsiveness) ── */
.ggp-stats-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.ggp-funnel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    text-align: center;
}

/* Responsive 3-col and 2-col grids - replaces all inline grid styles */
.ggp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ggp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .ggp-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    .ggp-grid-3 { grid-template-columns: 1fr; }
    .ggp-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .ggp-grid-2 { grid-template-columns: 1fr; }
}

/* Stat tiles that use flex - collapse to 2-wide on phones */
.ggp-stat-tiles {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.ggp-stat-tiles > * {
    flex: 1 1 140px;
    min-width: 0;
}
@media (max-width: 420px) {
    .ggp-stat-tiles > * { flex-basis: 100%; }
}

/* ── Footer ── */
.ggp-footer {
    text-align: center;
    padding: 32px 20px;
    color: var(--muted-blue);
    font-size: 13px;
}
.ggp-footer a { color: var(--muted-blue); text-decoration: none; opacity: .8; }
.ggp-footer a:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   MOBILE - comprehensive responsive overrides
   ═══════════════════════════════════════════════════════ */

/* background-attachment:fixed causes rendering bugs on iOS Safari */
@media (max-width: 768px) {
    body.ggp-body { background-attachment: scroll; }
}

/* ── Hamburger toggle (mobile nav) ── */
.ggp-nav-toggle-input { display: none; }

.ggp-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.22);
    background: transparent;
    flex-shrink: 0;
    margin-left: auto;
}
.ggp-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.ggp-nav-toggle-input:checked ~ .ggp-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ggp-nav-toggle-input:checked ~ .ggp-hamburger span:nth-child(2) { opacity: 0; }
.ggp-nav-toggle-input:checked ~ .ggp-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header: tighten on small screens */
@media (max-width: 600px) {
    .ggp-header { padding: 0 16px; }
    .ggp-header-inner {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        padding: 10px 0;
        gap: 0;
    }
    .ggp-logo-text .section { display: none; }
    .ggp-logo-text .wordmark { font-size: 15px; }

    /* Show hamburger, hide right nav by default */
    .ggp-hamburger { display: flex; }
    .ggp-header-right {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 8px 0 4px;
        border-top: 1px solid rgba(255,255,255,.1);
        margin-top: 10px;
    }
    /* Nav items inside the dropdown */
    .ggp-header-right a,
    .ggp-header-right span,
    .ggp-header-right form {
        width: 100%;
        padding: 11px 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
        font-size: 14px;
    }
    .ggp-header-right form { border-bottom: none; padding-top: 8px; }
    .ggp-header-right .ggp-btn-ghost {
        width: 100%;
        text-align: left;
        border: none;
        padding: 11px 0;
        font-size: 14px;
        border-radius: 0;
    }
    .ggp-header-right .ggp-btn.ggp-btn-primary {
        width: 100%;
        margin-top: 4px;
        text-align: center;
    }
    /* Reveal nav when checkbox is checked */
    .ggp-nav-toggle-input:checked ~ .ggp-header-right { display: flex; }
}

/* Main content: reduce margins and padding on mobile */
@media (max-width: 768px) {
    .ggp-main { margin: 16px auto; padding: 0 12px; }
    .ggp-card { padding: 16px; margin-bottom: 14px; }
    .ggp-card h3 { font-size: 15px; margin-bottom: 12px; }
}

/* Stats: 2-col at tablet, 1-col on phone */
@media (max-width: 760px) {
    .ggp-stats-row        { grid-template-columns: repeat(2, 1fr) !important; }
    .ggp-stats-3          { grid-template-columns: repeat(2, 1fr) !important; }
    .ggp-funnel-grid      { grid-template-columns: repeat(2, 1fr); }
    .ggp-stat-value       { font-size: 26px; }
    .ggp-stat-card        { padding: 14px 10px; }
}
@media (max-width: 420px) {
    .ggp-stats-row        { grid-template-columns: 1fr !important; }
    .ggp-stats-3          { grid-template-columns: 1fr !important; }
    .ggp-funnel-grid      { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .ggp-stats-row        { grid-template-columns: 1fr !important; }
    .ggp-stats-3          { grid-template-columns: 1fr !important; }
}

/* Tables: horizontal scroll instead of overflow */
@media (max-width: 768px) {
    .ggp-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;           /* keeps columns from collapsing */
    }
    .ggp-table th,
    .ggp-table td { white-space: nowrap; padding: 8px 10px; font-size: 13px; }
}

/* Code blocks: wrap instead of overflow */
@media (max-width: 768px) {
    .ggp-code { font-size: 13px; letter-spacing: .05em; word-break: break-all; }
    code       { word-break: break-all; }
}

/* Detail table: compact on mobile */
@media (max-width: 480px) {
    .ggp-detail-table { font-size: 13px; }
    .ggp-detail-table th,
    .ggp-detail-table td { padding: 5px 0; }
    .ggp-detail-table th { width: 45%; }
}

/* Forms: 16px prevents iOS auto-zoom; larger touch targets */
@media (max-width: 768px) {
    .ggp-field input,
    .ggp-field select,
    .ggp-field textarea { font-size: 16px; padding: 12px 14px; }
    .ggp-toggle-row { padding: 12px; }
    .ggp-field { margin-bottom: 12px; }
    .ggp-field-row { gap: 8px; }
    .ggp-btn { min-height: 44px; }          /* Apple HIG minimum touch target */
    .ggp-section-label { margin-top: 12px; }
}

/* Login & register pages: remove tall min-height on mobile */
@media (max-width: 600px) {
    .ggp-login-wrap { min-height: auto; padding: 20px 0 40px; align-items: flex-start; }
}

/* Checkout URL box: let it wrap rather than overflow */
@media (max-width: 600px) {
    #ggp-checkout-url { font-size: 12px; word-break: break-all; letter-spacing: 0; }
}

/* Two-column row: already collapses at 680px, reduce gap on mobile */
@media (max-width: 680px) {
    .ggp-row { gap: 14px; }
}

/* Footer: smaller on mobile */
@media (max-width: 480px) {
    .ggp-footer { padding: 20px 16px; font-size: 12px; }
}

/* ── Icon system ─────────────────────────────────────────────────────────── */
.ggp-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.ggp-icon--star { stroke: none; }
.ggp-icon--fire { stroke: none; }
.ggp-icon--new  { stroke: none; }