:root {
  --color-bg:    #f9fafb;
  --color-card:  #ffffff;
  --color-primary: #1c8a65; /*#3b82f6;*/
  --color-accent:  #3b82f6; /*#10b981;*/
  --color-text:  #1f2937;
  --color-muted: #6b7280;
  --radius:      0.5rem;
  --spacing:     1rem;
  --font-sans: 'Inter', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--spacing);
}

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

button {
  font-family: inherit;
  cursor: pointer;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s, transform 0.1s;
}
button:hover:not(:disabled) {
  background: var(--color-accent);
}
button:active:not(:disabled) {
  transform: scale(0.97);
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Centering additions ─────────────────────── */
#auth-section, #app-section {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Center inputs, selects, textareas, buttons inside auth and app sections */
#auth-section input,
#auth-section textarea,
#auth-section select,
#auth-section button,
#app-section input,
#app-section textarea,
#app-section select,
#app-section button {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Center inputs/selects/textarea inside table cells */
#applications-table td input,
#applications-table td textarea,
#applications-table td select {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ─── Auth Section ─────────────────────────────── */
#auth-section {
  max-width: 400px;
  width: 100%;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#auth-section h2 {
  color: var(--color-primary);
  font-size: 2rem;
  margin-bottom: var(--spacing);
}
#auth-section input, #auth-section textarea, #auth-section select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: var(--spacing);
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  font-family: var(--font-sans);
}
#auth-section button {
  width: 100%;
  margin-bottom: var(--spacing);
}

/* ─── App Section ─────────────────────────────── */
#app-section {
  width: 100%;
  max-width: 900px;
}

/* ─── Cards ─────────────────────────────────────── */
.card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: var(--spacing);
  margin-bottom: var(--spacing);
  text-align: center;
}

/* ─── Add Application Form ─────────────────────── */
#app-section input[type="text"],
#app-section input[type="date"],
#app-section input[type="url"],
#app-section select,
#app-section textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: var(--spacing);
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  resize: vertical;
}

#app-section textarea {
  min-height: 80px;
}

/* ─── Table Styles ─────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing);
  font-family: var(--font-sans);
}
thead {
  background-color: var(--color-primary);
  color: white;
}
th, td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}
td button {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  border-radius: var(--radius);
}
/* Make the Status header and cells wider */
#applications-table th:nth-child(4),
#applications-table td:nth-child(4) {
  min-width: 120px; /* or adjust to your preferred width */
  max-width: 200px; /* optional max width */
  text-align: center;
}
#applications-table th:nth-child(7),
#applications-table td:nth-child(7) {
  min-width: 300px;
  max-width: 400px;
  white-space: normal;
}

#applications-table textarea.notes-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  border-radius: var(--radius);
  border: 1px solid #d1d5db;
  padding: 0.3rem 0.5rem;
}

/* Make the Link header and cells wider */
#applications-table th:nth-child(8),
#applications-table td:nth-child(8) {
  min-width: 50px;
  max-width: 100px;
  text-align: center;
}

/* Center the applications table horizontally */
#applications-table {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: auto;
}

/* ─── Status Styles ─────────────────────────────── */
.status-planned {
  background-color: #9dc5fa; /* light blue */
}

.status-applied {
  background-color: #d694f2; /* light purple */
}

.status-interview {
  background-color: #fef3c7; /* light yellow */
}

.status-offer {
  background-color: #5df592; /* light green */
}

.status-rejected {
  background-color: #fc9090; /* light red */
}

.status-withdrawn {
  background-color: #b8b4b4; /* light grey */
}

/* Optional: on hover, slightly darken the background */
tbody tr:hover {
  filter: brightness(0.95);
}

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 600px) {
  body {
    padding: 0.5rem;
  }
  #app-section {
    max-width: 100%;
  }
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    display: none;
  }
  tbody tr {
    margin-bottom: var(--spacing);
    border: 1px solid #ddd;
    border-radius: var(--radius);
    padding: var(--spacing);
    background: var(--color-card);
  }
  tbody td {
    padding-left: 50%;
    position: relative;
    text-align: left;
  }
  tbody td::before {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    width: 45%;
    white-space: nowrap;
    font-weight: 600;
    content: attr(data-label);
  }
  td button {
    width: 100%;
    margin-top: 0.5rem;
  }
}