/* LuckyPixel Atlas — standalone styles (no framework) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Instrument+Serif&display=swap');

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light only; }

/* === Variables === */
:root {
  --primary: #2A4A3A;
  --primary-hover: #1E3A2E;
  --accent: #B8965A;
  --accent-hover: #A6854D;
  --accent-focus: rgba(184, 150, 90, 0.15);
  --bg: #F5F2EB;
  --surface: #FDFCF9;
  --color: #2C2C2C;
  --muted: #555555;
  --border: #DDD8CC;
  --danger: #C45C4A;
  --danger-hover: #A84A3A;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
}

/* === Base === */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color);
  background-color: var(--bg);
}

/* === Typography === */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--primary);
  line-height: 1.2;
}

h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.3;
}

h1 { font-size: 2.25rem; margin-bottom: 1rem; }
h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
h4 { font-size: 1.1rem; margin-bottom: 0.5rem; }
h5 { font-size: 1rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }
small { font-size: 0.875rem; color: var(--muted); }
strong { font-weight: 700; }
em { font-style: italic; }
mark { background-color: #F0F5F2; color: var(--primary); padding: 0.25rem 0.5rem; }
ins { text-decoration: none; color: var(--danger); }
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

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

ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: 0.25rem; }

/* === Details / Summary === */
details {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background-color: var(--surface);
  margin-bottom: 0.75rem;
}

details > summary {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  background-color: var(--surface);
  transition: background-color 0.15s;
  list-style-type: none;
}

details > summary::-webkit-details-marker { display: none; }

details > summary::before {
  content: "▸ ";
  color: var(--accent);
  font-weight: 700;
}

details[open] > summary::before {
  content: "▾ ";
}

details > summary:hover {
  background-color: var(--accent-focus);
}

details > :not(summary) {
  padding: 0 1.25rem;
}

details > figure,
details > p,
details > div {
  padding: 0 1.25rem 1rem;
}

/* === Figure (table wrapper) === */
figure {
  margin: 0;
  overflow-x: auto;
}

/* === Layout === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-fluid {
  width: 100%;
  padding: 0 1.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* === Buttons === */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
a[role="button"] {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
[role="button"]:hover,
a[role="button"]:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
  text-decoration: none;
}

/* Outline variant */
.outline,
a.outline {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.outline:hover,
a.outline:hover {
  background-color: var(--primary);
  color: #fff;
}

/* Secondary button */
.secondary,
a.secondary,
a[role="button"].secondary {
  background-color: var(--muted);
  border-color: var(--muted);
  color: #fff;
}

.secondary:hover,
a.secondary:hover,
a[role="button"].secondary:hover {
  background-color: var(--color);
  border-color: var(--color);
}

/* Primary explicit class (default button is already primary-colored) */
.primary,
a.primary,
a[role="button"].primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.primary:hover,
a.primary:hover,
a[role="button"].primary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Secondary outline combo */
.secondary.outline,
a.secondary.outline,
a[role="button"].secondary.outline {
  background-color: transparent;
  color: var(--muted);
  border: 1px solid var(--muted);
}

.secondary.outline:hover,
a.secondary.outline:hover,
a[role="button"].secondary.outline:hover {
  background-color: var(--muted);
  color: #fff;
}

/* Danger button */
.btn-danger,
a.btn-danger,
a[role="button"].btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-danger:hover,
a.btn-danger:hover,
a[role="button"].btn-danger:hover {
  background-color: var(--danger-hover);
  border-color: var(--danger-hover);
}

/* === Forms === */
label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

input,
textarea,
select {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--color);
  margin-bottom: 1rem;
  transition: border-color 0.15s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(42, 74, 58, 0.15);
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
  margin-bottom: 0;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

fieldset {
  border: 1px solid var(--border);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* === Tables === */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

table th {
  background-color: var(--primary);
  color: #F5F2EB;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  text-align: left;
}

table td {
  background-color: var(--surface);
  color: var(--color);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

table tr:last-child td {
  border-bottom: none;
}

/* === Nav / Header === */
.lp-header {
  background-color: var(--primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  margin-bottom: 2.5rem;
}

.lp-header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lp-header nav ul {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 0.25rem;
}

.lp-header nav ul li a {
  color: #fff;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem;
  text-decoration: none;
  transition: background-color 0.15s;
}

.lp-header nav ul li a:hover,
.lp-header nav ul li a:focus {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.lp-header nav ul li strong {
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
}

/* === Footer === */
.lp-footer {
  margin-top: 3rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* === Page heading — gold underline === */
main > h1 {
  font-size: 2.25rem;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
}

/* === Dashboard Cards === */
.dashboard-card {
  margin-bottom: 2.5rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background-color: var(--surface);
}

.dashboard-card h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: 1.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

/* === Stats Grid === */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.stat-box {
  padding: 1.5rem 1rem;
  background-color: var(--primary);
  text-align: center;
}

.stat-box .stat-value {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.stat-box .stat-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* === Job Status Cards === */
.job-status {
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-left: 4px solid transparent;
  background-color: var(--surface);
}

.job-status.pending {
  border-color: #555;
  border-left-color: #555;
}

.job-status.running {
  background-color: #FAF6EE;
  border-color: var(--accent);
  border-left-color: var(--accent);
}

.job-status.failed,
.job-status.error {
  background-color: #FDF5F4;
  border-color: var(--danger);
  border-left-color: var(--danger);
  color: #8B3A2F;
}

.job-status.completed,
.job-status.success {
  background-color: #F0F5F2;
  border-color: var(--primary);
  border-left-color: var(--primary);
  color: var(--primary-hover);
}

.job-status mark {
  padding: 0.25rem 0.5rem;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
}

.job-status.pending mark {
  background-color: #555;
  color: #fff;
}

.job-status.running mark {
  background-color: var(--accent);
  color: #fff;
}

/* === Form Sections === */
.form-section {
  margin-bottom: 2.5rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background-color: var(--surface);
}

.form-section h3 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: 1.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

/* === Pagination === */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.pagination .current-page {
  padding: 0.5rem 1rem;
  background-color: var(--primary);
  color: #fff;
  font-weight: bold;
  border: 1px solid var(--primary);
}

/* === Accordion === */
.accordion {
  margin-bottom: 0.5rem;
}

.accordion-header {
  background-color: var(--border);
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.15s;
  font-size: 0.95rem;
}

.accordion-header:hover {
  background-color: var(--accent-focus);
}

.accordion-content {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-top: none;
  display: none;
  background-color: var(--surface);
}

.accordion.active > .accordion-header {
  background-color: var(--accent-focus);
}

.accordion.active > .accordion-content {
  display: block;
}

/* === Messages === */
.error-message {
  color: var(--danger);
  font-size: 1rem;
  margin-top: 0.25rem;
  padding: 0.75rem;
  border-left: 4px solid var(--danger);
  background-color: #FDF5F4;
}

.success-message {
  color: var(--primary);
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-left: 4px solid var(--primary);
  background-color: #F0F5F2;
}

/* Notice (generic container used with .error modifier) */
.notice.error {
  color: var(--danger);
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--danger);
  background-color: #FDF5F4;
}

/* === Action Grid === */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.action-card {
  padding: 2rem 1.5rem;
  border: 1px solid var(--border);
  text-align: center;
  background-color: var(--surface);
  transition: all 0.2s ease;
}

.action-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(184, 150, 90, 0.15);
  transform: translateY(-2px);
}

.action-card h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
}

.action-card p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

/* === Empty State === */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}

/* === Badge === */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-primary { background-color: var(--primary); color: #fff; }
.badge-secondary { background-color: var(--color); color: #fff; }
.badge-success { background-color: #3D6B4F; color: #fff; }
.badge-warning { background-color: var(--accent); color: #fff; }

/* === Project Actions === */
.project-actions {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.35rem;
}

.project-actions a[role="button"] {
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
  margin: 0;
  text-align: center;
}

/* === Breadcrumb nav === */
nav[aria-label="breadcrumb"] ul {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

nav[aria-label="breadcrumb"] ul li + li::before {
  content: "/";
  margin-right: 0.25rem;
  color: var(--muted);
}

/* === Article — page content wrapper === */
article {
  margin-bottom: 2rem;
}

article > header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

article > header h2 {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
}

article > header p {
  color: var(--muted);
}

/* Sections inside articles (explicit card sections) */
article > section {
  margin-bottom: 2rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background-color: var(--surface);
}

article > section h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
}

/* Forms directly inside articles (no section wrapper, e.g. client-data) */
article > form {
  margin-bottom: 2rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  background-color: var(--surface);
}

/* Loose paragraphs/content after header in articles */
article > p,
article > div:not(.success-message):not(.error-message) {
  margin-bottom: 1rem;
}

/* === Fieldset refinement === */
fieldset {
  margin-bottom: 1rem;
}

fieldset legend {
  font-weight: 500;
  padding: 0 0.25rem;
}

fieldset label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

/* === File inputs === */
input[type="file"] {
  padding: 0.5rem;
}

/* === Disabled button === */
button:disabled,
button[disabled] {
  background-color: var(--muted);
  border-color: var(--muted);
  color: #fff;
  cursor: not-allowed;
  opacity: 0.6;
}

/* === hgroup (login page) === */
hgroup {
  margin-bottom: 1.5rem;
}

hgroup h1 {
  margin-bottom: 0.25rem;
}

hgroup h2 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}