/* Basic stylesheet for the administrative obligations app */
:root {
  --primary: #005f99;
  --secondary: #008cba;
  --accent: #f5fbff;
  --bg: #f5f7fa;
  --text: #333;
  --success: #0a7e07;
  --warning: #c86400;
  --danger: #b30000;
  --card-bg: #fff;
  --card-shadow: rgba(0, 0, 0, 0.05);
  --border-radius: 6px;
  --transition: 0.2s ease-in-out;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg);
  color: var(--text);
}

/* -----------------------------------------------------------------------------
   Dark theme
   The application supports a dark mode by toggling the "dark" class on the body
   element. When active, CSS custom properties are overridden here. The
   JavaScript will toggle this class and persist the user preference in
   localStorage. See toggleDarkMode() in app.js.  */
body.dark {
  /* base palette */
  --primary: #80bfff;
  --secondary: #66aadd;
  --accent: #202a36;
  --bg: #121212;
  --text: #e0e0e0;
  --success: #53c653;
  --warning: #e6a04e;
  --danger: #e05252;
  --card-bg: #1e1e1e;
  --card-shadow: rgba(0, 0, 0, 0.5);
}

/* Ensure background and text colors update when dark mode is active */
body.dark {
  background-color: var(--bg);
  color: var(--text);
}

header {
  background-color: var(--primary);
  color: #fff;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px var(--card-shadow);
}

header h1 {
  margin: 0;
  font-size: 20px;
}

/* Highlight active navigation link */
.navbar-nav .nav-link.active {
  border-bottom: 2px solid var(--secondary);
}

.hidden {
  display: none;
}

main {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

form {
  max-width: 500px;
  margin: 0 auto 20px auto;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 25px;
  box-shadow: 0 2px 8px var(--card-shadow);
}

form h2 {
  margin-top: 0;
}

form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

form input, form select, form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

form button {
  background-color: var(--secondary);
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
}

form button:hover {
  background-color: var(--primary);
}

button {
  font-family: inherit;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px var(--card-shadow);
  overflow: hidden;
}

table th, table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 14px;
}

table th {
  background-color: var(--accent);
}

/* Calendar-specific styles */
#calendar-table td {
  vertical-align: top;
  height: 80px;
  padding: 6px;
}
.cal-date {
  font-size: 12px;
  margin-bottom: 4px;
}

/* status colors reused in timeline */
.status-completed {
  color: var(--success);
  font-weight: bold;
}
.status-pending {
  color: var(--warning);
  font-weight: bold;
}
.status-late {
  color: var(--danger);
  font-weight: bold;
}

.badge {
  display: inline-block;
  background-color: var(--accent);
  border-radius: var(--border-radius);
  padding: 4px 8px;
  margin: 4px 4px;
  font-size: 12px;
  color: var(--primary);
}

/* Alerts */
.alert {
  padding: 10px;
  background-color: #ffe6e6;
  border: 1px solid #ffb3b3;
  margin-bottom: 15px;
  border-radius: var(--border-radius);
}
.success {
  padding: 10px;
  background-color: #e6ffed;
  border: 1px solid #b3ffce;
  margin-bottom: 15px;
  border-radius: var(--border-radius);
}

/* Warning alert styling for upcoming notifications */
.alert-warning {
  padding: 10px;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  margin-bottom: 15px;
  border-radius: var(--border-radius);
  color: #856404;
}

/* Timeline styles */
.timeline {
  position: relative;
  margin-left: 30px;
  margin-top: 30px;
  padding-left: 20px;
  border-left: 2px solid var(--primary);
}

.timeline-item {
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--secondary);
}

.timeline-item.status-completed::before {
  background-color: var(--success);
}
.timeline-item.status-late::before {
  background-color: var(--danger);
}

.timeline-date {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--primary);
}

.timeline-title {
  font-size: 14px;
  color: var(--text);
}

/* Progress bar for gamification */
.progress-container {
  background-color: #eee;
  border-radius: var(--border-radius);
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-bar {
  height: 100%;
  background-color: var(--secondary);
  width: 0;
  transition: width var(--transition);
}