/* Shadows custom Control Panel styles. Loaded into the CP <head> via
   Statamic::externalStyle() in ShadowsCpServiceProvider — an inline <style>
   inside the CP content area gets stripped by Statamic's Vue layer, so it
   must be a real external stylesheet. */
.sh {
    --sh-bg: #0e0b14;
    --sh-panel: #17121f;
    --sh-panel2: #1e1729;
    --sh-line: rgba(255,255,255,.09);
    --sh-purple: #8e2de2;
    --sh-magenta: #ff269e;
    --sh-text: #efecf5;
    --sh-muted: #9c93ac;
    --sh-grad: linear-gradient(135deg,#8e2de2,#ff269e);
    /* Destructive actions. Tokenised so "danger" is defined once instead of
       being retyped as a raw hex in each Blade view. */
    --sh-danger: #c0392b;
    --sh-danger-deep: #7d1f16;
    --sh-danger-text: #ff8a8a;
    --sh-danger-grad: linear-gradient(135deg,#c0392b,#7d1f16);
    background: var(--sh-bg);
    color: var(--sh-text);
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 24px;
    font-feature-settings: "tnum" 1;
}
.sh * { box-sizing: border-box; }
.sh a { color: #d9b3ff; text-decoration: none; }
.sh__head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.sh__title { font-size:22px; font-weight:700; letter-spacing:.3px; margin:0; }
.sh__title span { background:var(--sh-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sh__sub { color:var(--sh-muted); font-size:13px; margin:2px 0 0; }

.sh-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.sh-tab { padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--sh-muted);
    background:var(--sh-panel); border:1px solid var(--sh-line); text-transform:capitalize; }
.sh-tab:hover { color:var(--sh-text); }
.sh-tab--on { background:var(--sh-grad); color:#fff; border-color:transparent; box-shadow:0 4px 18px rgba(255,38,158,.28); }

.sh-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:18px; }
.sh-kpi { position:relative; background:var(--sh-panel); border:1px solid var(--sh-line); border-radius:14px; padding:16px 16px 15px; overflow:hidden; }
.sh-kpi::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--sh-grad); opacity:.9; }
.sh-kpi__label { color:var(--sh-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; }
.sh-kpi__val { font-size:26px; font-weight:700; margin-top:6px; line-height:1.1; }
.sh-kpi__val small { font-size:15px; color:var(--sh-muted); font-weight:600; }

.sh-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
@media (max-width:900px){ .sh-grid{ grid-template-columns:1fr; } }
.sh-card { background:var(--sh-panel); border:1px solid var(--sh-line); border-radius:14px; padding:16px 18px; }
.sh-card__h { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--sh-muted); margin:0 0 14px; }

.sh-bars { display:flex; flex-direction:column; gap:10px; }
.sh-bar__row { display:grid; grid-template-columns:92px 1fr auto; align-items:center; gap:10px; font-size:13px; }
.sh-bar__track { height:9px; border-radius:999px; background:var(--sh-panel2); overflow:hidden; }
.sh-bar__fill { height:100%; border-radius:999px; background:var(--sh-grad); }
.sh-bar__val { color:var(--sh-muted); font-variant-numeric:tabular-nums; }
.sh-cap { text-transform:capitalize; }

.sh-table { width:100%; border-collapse:collapse; font-size:13px; }
.sh-table th { text-align:left; color:var(--sh-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:8px 10px; border-bottom:1px solid var(--sh-line); }
.sh-table td { padding:10px; border-bottom:1px solid rgba(255,255,255,.05); }
.sh-table tr:last-child td { border-bottom:0; }
.sh-pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid var(--sh-line); text-transform:capitalize; }
.sh-pill--paid { color:#6ff2b8; border-color:rgba(111,242,184,.3); background:rgba(111,242,184,.08); }
.sh-pill--pending { color:#ffd479; border-color:rgba(255,212,121,.3); background:rgba(255,212,121,.08); }
.sh-pill--refunded,.sh-pill--failed { color:#ff8a8a; border-color:rgba(255,138,138,.3); background:rgba(255,138,138,.08); }

.sh-empty { color:var(--sh-muted); font-size:13px; padding:18px 0; text-align:center; }

.sh-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.sh-field { display:flex; flex-direction:column; gap:6px; }
.sh-field--full { grid-column:1/-1; }
.sh-field label { font-size:12px; color:var(--sh-muted); font-weight:600; }
.sh-input, .sh-select { background:var(--sh-panel2); border:1px solid var(--sh-line); border-radius:10px; padding:10px 12px; color:var(--sh-text); font-size:14px; width:100%; }
.sh-input:focus, .sh-select:focus { outline:none; border-color:var(--sh-magenta); box-shadow:0 0 0 3px rgba(255,38,158,.18); }
.sh-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border:0; border-radius:10px; cursor:pointer;
    background:var(--sh-grad); color:#fff; font-weight:700; font-size:14px; box-shadow:0 6px 20px rgba(142,45,226,.3); }
.sh-btn:hover { filter:brightness(1.07); }
.sh-check { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--sh-text); }
.sh-note { color:var(--sh-muted); font-size:12px; margin-top:6px; }
.sh-flash { background:rgba(111,242,184,.12); border:1px solid rgba(111,242,184,.35); color:#8ff5c6; padding:10px 14px; border-radius:10px; margin-bottom:16px; font-size:13.5px; }
.sh-section { background:var(--sh-panel); border:1px solid var(--sh-line); border-radius:14px; padding:18px; margin-bottom:16px; }
.sh-section__h { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; margin:0 0 14px; }
.sh-badge { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 9px; border-radius:999px; }
.sh-badge--on { background:rgba(111,242,184,.14); color:#7ff0bb; }
.sh-badge--off { background:rgba(255,255,255,.07); color:var(--sh-muted); }
.sh-chart { width:100%; height:auto; display:block; }

/* Destructive controls, using the tokens above. */
.sh-tab--danger { border-color: var(--sh-danger); color: var(--sh-danger-text); }
.sh-tab--danger:hover { background: rgba(192,57,43,.15); color: var(--sh-danger-text); }
.sh-btn--danger { background: var(--sh-danger-grad); }

/* Semantic text tokens — these hexes were repeated inline across the CP views. */
.sh { --sh-ok-text: #7ff0bb; --sh-warn-text: #ffd479; --sh-link: #c98bdb; }
.sh-ok   { color: var(--sh-ok-text); }
.sh-warn { color: var(--sh-warn-text); }

/* Error variant of .sh-flash. The base class is styled green for success, so
   every error banner was overriding it inline with the same three declarations. */
.sh-flash--error {
    background: rgba(255,138,138,.12);
    border-color: rgba(255,138,138,.4);
    color: var(--sh-danger-text);
}
.sh-danger-text { color: var(--sh-danger-text); }

/* ---------------------------------------------------------------------------
   Visual email editor (public/vendor/shadows/cp-email-editor.js).

   The editing surface is deliberately WHITE with dark text, unlike the rest of
   this dark CP theme: it mirrors the white content panel in the real email
   template, so what the owner writes is what the member receives. Styling it in
   club purple would flatter the draft and mislead about the result.
   ------------------------------------------------------------------------- */
.sh .sh-ed {
    border: 1px solid var(--sh-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--sh-panel2);
}

.sh .sh-ed__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    background: var(--sh-panel);
    border-bottom: 1px solid var(--sh-line);
}

.sh .sh-ed__btn {
    padding: 5px 10px;
    border: 1px solid var(--sh-line);
    border-radius: 7px;
    background: var(--sh-panel2);
    color: var(--sh-text);
    font-size: 12.5px;
    line-height: 1.2;
    cursor: pointer;
}

.sh .sh-ed__btn:hover { border-color: var(--sh-magenta); color: #fff; }
.sh .sh-ed__btn:disabled { opacity: .55; cursor: default; }

.sh .sh-ed__sel {
    padding: 5px 8px;
    border: 1px solid var(--sh-line);
    border-radius: 7px;
    background: var(--sh-panel2);
    color: var(--sh-text);
    font-size: 12.5px;
}

.sh .sh-ed__colour {
    width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--sh-line);
    border-radius: 7px;
    background: var(--sh-panel2);
    cursor: pointer;
}

.sh .sh-ed__area {
    min-height: 260px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 18px 20px;
    background: #fff;
    color: #222;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

.sh .sh-ed__area:focus { outline: 2px solid var(--sh-magenta); outline-offset: -2px; }
.sh .sh-ed__area img { max-width: 100%; height: auto; }
.sh .sh-ed__area a { color: #8e2de2; }
.sh .sh-ed__area h1 { font-size: 24px; margin: 0 0 10px; }
.sh .sh-ed__area h2 { font-size: 19px; margin: 0 0 8px; }
.sh .sh-ed__area blockquote {
    margin: 0 0 10px;
    padding-left: 14px;
    border-left: 3px solid #ddd;
    color: #555;
}

/* Source view: the original textarea, shown in place of the editing surface. */
.sh .sh-ed textarea {
    display: block;
    width: 100%;
    min-height: 260px;
    border: 0;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

/* Secondary action next to a primary .sh-btn — Preview and Send test sit
   beside Send email, and must not look equally final. */
.sh .sh-btn--ghost {
    background: transparent;
    border: 1px solid var(--sh-line);
    color: var(--sh-text);
}

.sh .sh-btn--ghost:hover { border-color: var(--sh-magenta); }

/* Upload progress and failures, shown in the toolbar. An alert() was too easy
   to dismiss unread, and left nothing on screen to report afterwards. */
.sh .sh-ed__status {
    flex: 1 1 100%;
    min-height: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sh-muted);
}

.sh .sh-ed__status:empty { display: none; }
.sh .sh-ed__status--ok { color: #4ade80; }
.sh .sh-ed__status--error { color: var(--sh-danger-text); }