/* ---------------------- Global Styles ---------------------- */
body {
  background-color: #121212;
  color: #E0E0E0;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 0;
  text-align: center;
  transition: background-color 0.3s, color 0.3s;
}

.container {
  width: 85%;
  max-width: 1200px;
  margin: 30px auto;
  padding: 25px;
  background-color: #1E1E1E;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s, box-shadow 0.3s;
}

h1, h2, h3 {
  color: #D32F2F;
  margin-bottom: 15px;
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }

.clock {
  font-size: 24px;
  color: #D32F2F;
  font-weight: bold;
  margin: 10px 0;
}

/* ---------------------- General Buttons ---------------------- */
button {
  background-color: #D32F2F;
  color: #fff;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  transition: background-color 0.3s;
  margin: 5px;
}

button:hover {
  background-color: #B71C1C;
}

/* ---------------------- Form Toggle Buttons ---------------------- */
#showPatrolFormBtn { background-color: #bd5603; }
#showPatrolFormBtn:hover { background-color: #B71C1C; }

#showIncidentFormBtn { background-color: #bd5603; }
#showIncidentFormBtn:hover { background-color: #C62828; }

#showForceFormBtn { background-color: #bd5603; }
#showForceFormBtn:hover { background-color: #bd5603; }

#showMedicalFormBtn { background-color: #bd5603; }
#showMedicalFormBtn:hover { background-color: #E53935; }

#showMpiuFormBtn { background-color: #bd5603; }
#showMpiuFormBtn:hover { background-color: #D50000; }

/* ---------------------- Forms ---------------------- */
.form-container {
  display: none;
  flex-direction: column;
  gap: 12px;
  border: 2px solid #444;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  transition: border-color 0.3s;
}

input, textarea, select {
  background-color: #333;
  color: #fff;
  border: 2px solid #444;
  padding: 12px;
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  box-sizing: border-box;
}

textarea { height: 120px; }

input:focus, textarea:focus, select:focus {
  border-color: #D32F2F;
  outline: none;
}

/* ---------------------- Report Lists ---------------------- */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #2C2C2C;
  margin: 10px 0;
  padding: 15px;
  border-radius: 12px;
  text-align: left;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color 0.3s, box-shadow 0.3s;
  white-space: pre-wrap;       /* preserve line breaks */
  word-wrap: break-word;       /* break long words */
  overflow-wrap: break-word;   /* modern standard */
  max-width: 100%;             /* keep inside container */
  box-sizing: border-box;
}

li:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  background-color: #3A3A3A;
}

li pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

li .delete-btn {
  align-self: flex-end;
  background-color: #D32F2F;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
}

li .delete-btn:hover {
  background-color: #C62828;
}

/* ---------------------- Button Groups ---------------------- */
.button-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 20px 0;
}

/* ---------------------- Light Theme ---------------------- */
body.light-theme {
  background-color: #F0F0F0;
  color: #222;
}

body.light-theme .container {
  background-color: #FFF;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

body.light-theme h1, body.light-theme h2, body.light-theme h3 {
  color: #B71C1C;
}

body.light-theme button {
  background-color: #B71C1C;
  color: #FFF;
}

body.light-theme button:hover {
  background-color: #D32F2F;
}

body.light-theme .form-container {
  border: 2px solid #CCC;
}

body.light-theme input,
body.light-theme textarea,
body.light-theme select {
  background-color: #FFF;
  color: #222;
  border: 2px solid #CCC;
}

body.light-theme li {
  background-color: #EEE;
  color: #222;
  border: 1px solid #CCC;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

body.light-theme li:hover {
  background-color: #DDD;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ---------------------- MPIU Specific ---------------------- */
#mpiuFormContainer,
#mpiuListSection {
  margin-top: 20px;
}

#mpiuFormContainer input,
#mpiuFormContainer textarea {
  font-family: 'Courier New', monospace;
}

#mpiuList li {
  font-family: 'Courier New', monospace;
  background-color: #2A2A2A;
}

body.light-theme #mpiuList li {
  background-color: #F5F5F5;
  color: #222;
}