/*
 * Written to sit beside the Shopify admin rather than to imitate it.
 *
 * Polaris is a React component library, so using it would mean a build step and
 * a dependency tree for a settings screen with a dozen fields on it. This takes
 * the admin's own font stack, spacing and colour and stops there.
 */

:root {
    --wp-text: #303030;
    --wp-muted: #616161;
    --wp-line: #e3e3e3;
    --wp-bg: #f1f1f1;
    --wp-card: #ffffff;
    --wp-brand: #303030;
    --wp-ok: #0c5132;
    --wp-ok-bg: #cdfee1;
    --wp-bad: #8e1f0b;
    --wp-bad-bg: #ffd6d6;
    --wp-warn-bg: #ffeec2;
    --wp-radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--wp-text);
    background: var(--wp-bg);
    -webkit-font-smoothing: antialiased;
}

body.wp-plain { display: flex; justify-content: center; padding: 48px 16px; }

.wp-page { max-width: 800px; margin: 0 auto; padding: 16px; }

.wp-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 8px 4px 16px; }
.wp-header h1 { font-size: 20px; margin: 0 0 2px; }

.wp-card {
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-radius);
    padding: 20px;
    margin: 0 0 16px;
}
.wp-card h2 { font-size: 16px; margin: 0 0 4px; }
.wp-card h3 { font-size: 14px; margin: 24px 0 4px; }
.wp-card > p { margin: 8px 0; }

.wp-narrow { max-width: 520px; width: 100%; }
.wp-narrow-input { max-width: 160px; }

label { display: block; font-weight: 600; margin: 20px 0 6px; }
label.wp-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 16px 0 4px; }
label.wp-check input { margin-top: 3px; }

input[type="text"], input[type="password"], input[type="number"], select {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid #8a8a8a;
    border-radius: var(--wp-radius);
}
input:focus, select:focus { outline: 2px solid #005bd3; outline-offset: 1px; }

.wp-help, .wp-muted { color: var(--wp-muted); font-size: 13px; margin: 6px 0 0; }
.wp-help code { background: var(--wp-bg); padding: 1px 4px; border-radius: 4px; }

.wp-button {
    font: inherit;
    font-weight: 600;
    padding: 8px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--wp-radius);
    background: #fff;
    color: var(--wp-text);
    cursor: pointer;
}
.wp-button:hover:not(:disabled) { background: #f7f7f7; }
.wp-button:disabled { opacity: 0.5; cursor: progress; }
.wp-button--primary { background: var(--wp-brand); color: #fff; border-color: var(--wp-brand); }
.wp-button--primary:hover:not(:disabled) { background: #1a1a1a; }

.wp-action { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--wp-line); }

.wp-result { font-size: 13px; margin: 8px 0 0; }
.wp-result:empty { display: none; }
.wp-result.is-ok { color: var(--wp-ok); }
.wp-result.is-bad { color: var(--wp-bad); }
.wp-result.is-working { color: var(--wp-muted); }

.wp-alert { padding: 12px 14px; border-radius: var(--wp-radius); margin: 12px 0; }
.wp-alert--error { background: var(--wp-bad-bg); color: var(--wp-bad); }
.wp-alert--warn { background: var(--wp-warn-bg); }

.wp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-badge { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 20px; background: var(--wp-bg); }
.wp-badge--ok { background: var(--wp-ok-bg); color: var(--wp-ok); }
.wp-badge--bad { background: var(--wp-bad-bg); color: var(--wp-bad); }
.wp-badge--warn { background: var(--wp-warn-bg); }

.wp-save {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--wp-card);
    border: 1px solid var(--wp-line);
    border-radius: var(--wp-radius);
    margin: 0 0 16px;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--wp-line); vertical-align: top; }
th { font-weight: 600; color: var(--wp-muted); }
td code { font-size: 12px; }

/* Wide content scrolls inside itself rather than pushing the page sideways —
   the app is in an iframe, and a horizontal scrollbar there is a trap. */
.wp-scroll { overflow-x: auto; }

.wp-log { font-size: 12px; }
.wp-log div { padding: 5px 0; border-bottom: 1px solid var(--wp-line); }
.wp-log time { color: var(--wp-muted); margin-right: 8px; white-space: nowrap; }
.wp-log .level-error { color: var(--wp-bad); }
.wp-log .level-warning { color: #8a6116; }

.wp-loading { padding: 60px; text-align: center; color: var(--wp-muted); }
.wp-footer { text-align: center; color: var(--wp-muted); font-size: 12px; margin: 24px 0; }
.wp-form { margin: 20px 0; }
.wp-empty { color: var(--wp-muted); padding: 12px 0; }