/* Pretty Clean — shared resets & tokens */

:root {
  /* Pretty Saditty brand: hunter green is the main color, black + warm cream
     for structure, gold reserved for the logo-style wordmark accent only. */
  --pc-pink: #2a5d3f;
  --pc-pink-dark: #1e4530;
  --pc-gold: #b8860b;
  --pc-ink: #17130f;
  --pc-muted: #6b6560;
  --pc-bg: #faf9f5;
  --pc-surface: #ffffff;
  --pc-border: #e6e1d6;
  --pc-green: #2a5d3f;
  --pc-green-bg: #e3ece5;
  --pc-amber: #8f640d;
  --pc-amber-bg: #f8eed7;
  --pc-red: #c4433e;
  --pc-red-bg: #fbeae9;
  --pc-blue: #33667f;
  --pc-blue-bg: #e6eef1;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(23, 19, 15, 0.06), 0 4px 16px rgba(23, 19, 15, 0.06);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: var(--pc-bg);
  color: var(--pc-ink);
  line-height: 1.4;
}

a {
  color: var(--pc-pink-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  font-weight: 700;
  margin: 0 0 0.5em;
}

.badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-pending { background: var(--pc-amber-bg); color: var(--pc-amber); }
.badge-completed { background: var(--pc-blue-bg); color: var(--pc-blue); }
.badge-approved { background: var(--pc-green-bg); color: var(--pc-green); }
.badge-rejected { background: var(--pc-red-bg); color: var(--pc-red); }
.badge-overdue { background: var(--pc-red-bg); color: var(--pc-red); }

.badge-priority-low { background: #eeede6; color: #5c584f; }
.badge-priority-normal { background: var(--pc-blue-bg); color: var(--pc-blue); }
.badge-priority-high { background: var(--pc-red-bg); color: var(--pc-red); }

.btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 0.55em 1.1em;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  color: var(--pc-ink);
}
.btn:hover { background: #f2f0e9; text-decoration: none; }
.btn-primary { background: var(--pc-pink); color: #fff; border-color: var(--pc-pink); }
.btn-primary:hover { background: var(--pc-pink-dark); }
.btn-success { background: var(--pc-green); color: #fff; border-color: var(--pc-green); }
.btn-success:hover { filter: brightness(0.95); }
.btn-danger { background: var(--pc-red); color: #fff; border-color: var(--pc-red); }
.btn-danger:hover { filter: brightness(0.95); }
.btn-sm { padding: 0.3em 0.7em; font-size: 0.82rem; }
.btn-block { display: block; width: 100%; text-align: center; }

.messages {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.messages li {
  padding: 0.7em 1em;
  border-radius: 8px;
  margin-bottom: 0.5em;
  background: var(--pc-green-bg);
  color: var(--pc-green);
  font-weight: 600;
}
.messages li.error { background: var(--pc-red-bg); color: var(--pc-red); }

form p { margin: 0 0 1rem; }
label { display: block; font-weight: 600; margin-bottom: 0.3em; font-size: 0.9rem; }
input[type=text], input[type=number], input[type=date], input[type=password],
input[type=email], textarea, select {
  width: 100%;
  padding: 0.6em 0.7em;
  border: 1px solid var(--pc-border);
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  color: var(--pc-ink);
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--pc-pink);
  outline-offset: 1px;
}
.helptext { color: var(--pc-muted); font-size: 0.82rem; display: block; margin-top: 0.25em; }
ul.errorlist { color: var(--pc-red); font-size: 0.85rem; margin: 0.2em 0; padding-left: 1.1em; }

.card {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem;
}