/* style.css */

/* 1) Color palette with light-blue accent */
:root {
  --color-bg-start:     #0f1e35;
  --color-bg-end:       #162847;
  --color-text:         #f4f4f4;
  --color-muted:        #a0a0a0;
  --color-accent:       #5dade2;   /* lighter blue */
  --color-accent-hover: #3498db;   /* darker blue */
  --error-color:        #e74c3c;
  --radius:             4px;
  --transition:         0.2s ease-in-out;
  --font:               'Open Sans', sans-serif;
}

/* 2) Reset & base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--color-bg-start), var(--color-bg-end));
  color: var(--color-text);
  font-family: var(--font);
  line-height: 1.6;
  text-align: center;
  padding: 2rem;
}

/* 3) Centered container */
.container {
  max-width: 480px;
  margin: 0 auto;
  background: rgba(0,0,0,0.4);
  padding: 2rem;
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}

/* 4) Typography */
h1 {
  font-size: 1.8rem;
  margin-bottom: 0.5em;
}
p {
  margin: 0.75em 0;
}
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-accent-hover);
}

/* 5) Buttons */
button {
  background: var(--color-accent);
  border: none;
  color: #fff;
  padding: 0.6em 1.2em;
  font-size: 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
button:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
}

/* 6) Code snippet */
code {
  display: inline-block;
  background: #222;
  color: var(--color-accent);
  padding: 0.3em 0.6em;
  border-radius: var(--radius);
  font-size: 1rem;
  margin-top: 0.5em;
}

/* 7) Admin form inputs: auto-sized, not full width */
.container form label {
  display: block;
  margin-top: 1em;
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
}
.container form input,
.container form select,
.container form textarea {
  display: inline-block;
  width: auto;
  min-width: 240px;
  max-width: 100%;
  padding: 0.5em 0.8em;
  margin: 0.5em auto 1em;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.1);
  color: var(--color-text);
  font-size: 1rem;
  transition: border-color var(--transition), background var(--transition);
}
.container form input:focus,
.container form select:focus,
.container form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255,255,255,0.15);
}

/* 8) Table (analytics/logs) */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}
th, td {
  padding: 0.6em;
  border-bottom: 1px solid var(--color-muted);
}
th {
  background: rgba(255,255,255,0.1);
  font-weight: bold;
}

/* 9) Utilities */
.text-right { text-align: right; }
.mt-1 { margin-top: 1em; }
.mb-1 { margin-bottom: 1em; }

/* 10) Validation styling */
.container form[novalidate] input:invalid,
.container form[novalidate] select:invalid,
.container form[novalidate] textarea:invalid {
  border-color: var(--error-color) !important;
  background: rgba(231,76,60,0.1) !important;
}
.container form[novalidate] input:valid,
.container form[novalidate] select:valid,
.container form[novalidate] textarea:valid {
  border-color: var(--color-accent) !important;
  background: rgba(93,173,226,0.1) !important;
}

/* 11) Error list */
.field-error {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  text-align: left;
  color: var(--error-color);
  font-size: 0.9rem;
}
.field-error li {
  margin: 0.25rem 0;
  padding-left: 1.2em;
  position: relative;
}
.field-error li::before {
  content: '⚠';
  position: absolute;
  left: 0;
}

/* 12) Placeholder text */
input::placeholder,
textarea::placeholder {
  color: var(--color-muted);
}