/* BounceNot design tokens + shared primitives (plain CSS, no framework). */
:root {
    --light-bg: #f1f4f0;
    --accent-yellow: #f8c33f;
    --dark-burgundy: #4e1b2e;
    --orange-red: #db502c;

    --white: #ffffff;
    --ink: #2a2126;
    --muted: #7a6f74;
    --border: #e4e0dd;
    --green: #2e8b57;
    --green-bg: #e3f3ea;
    --red: #c0392b;
    --red-bg: #fbe7e4;
    --yellow-bg: #fdf3d6;
    --gray-bg: #eeeae7;

    --radius: 6px;
    --radius-sm: 6px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(78, 27, 46, 0.12);
    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--light-bg);
    line-height: 1.6;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main,
body > .app-shell {
    flex: 1 0 auto;
}

a { color: var(--orange-red); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--dark-burgundy); margin: 0 0 0.5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
.container-narrow { max-width: 460px; margin: 0 auto; padding: 0 1.25rem; }

.muted { color: var(--muted); }
.text-center { text-align: center; }
.font-medium { font-weight: 600; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-yellow { color: #b8860b; }
.text-gray { color: #4b5563; }
.row { display: flex; gap: 1rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: 1.25rem; }
/* Grid items default to min-width:auto, so one long unbreakable line (e.g. a curl command) would
   widen the column past the viewport; with 0 the code block scrolls inside itself instead. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; }
.overflow-x-auto { overflow-x: auto; }
.hidden { display: none !important; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 0.62rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--white);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--orange-red);
    box-shadow: 0 0 0 3px rgba(219, 80, 44, 0.15);
}
.form-textarea { min-height: 140px; resize: vertical; }
.select { width: auto; min-width: 80px; padding: 0.62rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; font: inherit; }
.form-card { max-width: 760px; }
.form-footer-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; padding: 1.5rem; border-top: 1px solid #e5e7eb; }
.search-field { position: relative; flex: 1 1 240px; }
.search-field i { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.search-field .form-input { padding-left: 2.35rem; }

/* Tables */
table.data { width: 100%; border-collapse: collapse; background: var(--white); min-width: 720px; }
table.data th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4b5563;
    background: #f9fafb;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
}
table.data td { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; font-size: 0.9rem; white-space: nowrap; }
table.data tr:hover td { background: #faf8f6; }
.table-header { background: #f9fafb; }

.status-badge,
.validation-result {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.status-completed,
.result-valid,
.badge--valid,
.badge--completed { background: #dcfce7; color: #166534; }
.status-processing,
.badge--processing,
.badge--pending { background: #fef3c7; color: #92400e; }
.status-empty,
.badge--empty,
.badge--unknown { background: #f3f4f6; color: #374151; }
.result-invalid,
.badge--invalid { background: #fee2e2; color: #991b1b; }
.status-warning { background: #ffedd5; color: #9a3412; }

.tabs { display: flex; gap: 0; overflow-x: auto; }
.tab {
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
}
.tab:hover { color: var(--orange-red); text-decoration: none; }
.tab.is-active,
.tab-active { color: var(--orange-red); border-bottom-color: var(--orange-red); }

.code-block {
    position: relative;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    font: 0.85rem/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    white-space: pre;
}
.code-block code,
.code-block pre { color: inherit; font: inherit; margin: 0; white-space: pre; }
.info-note {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1e40af;
    padding: 1rem;
}
.list-clean { list-style: none; padding: 0; margin: 0; }
.detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.detail-list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 0.75rem; }
.detail-list li:last-child { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 860px) {
    .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
    table.data td, table.data th { padding: 0.75rem 1rem; }
}
@media (max-width: 560px) {
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}
/* Dense tables (emails): tighter cells so every column, incl. row actions, fits the content area. */
table.data--compact th, table.data--compact td { padding-left: 1rem; padding-right: 1rem; }
table.data--compact { min-width: 0; }
.form-input--readonly, .form-input[readonly] { background: var(--gray-bg); color: #4b5563; cursor: default; }

/* Long names/descriptions wrap inside a bounded column instead of pushing the other columns off-card. */
table.data td .list-cell__name { display: inline-block; max-width: 32rem; white-space: normal; }
table.data td .list-cell__desc {
    max-width: 32rem; white-space: normal; font-size: 0.85rem; margin-top: 0.15rem;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 600px) { table.data td .list-cell__name, table.data td .list-cell__desc { max-width: 14rem; } }