/* =========================================
FieldHive Command Core Styling
Dark Civic Infrastructure Theme
========================================= */

body {

  margin: 0;
  padding: 0;

  font-family: Arial, Helvetica, sans-serif;

  background: #0b1628;
  color: #ffffff;

}

/* =========================================
HEADER
========================================= */

h1 {

  color: #f5b841;
  text-align: center;
  margin-top: 30px;

}

p {

  text-align: center;
  color: #cbd5e1;

}

/* =========================================
LAYOUT
========================================= */

.card {

  width: 80%;
  margin: 30px auto;
  padding: 25px;

  background: #13223c;

  border-radius: 10px;

  border: 1px solid #f5b841;

  box-shadow: 0 0 15px rgba(0,0,0,0.5);

}

/* =========================================
CARD HEADERS
========================================= */

.card h2 {

  color: #f5b841;
  margin-top: 0;

}

/* =========================================
INPUTS
========================================= */

input {

  width: 100%;
  padding: 10px;

  margin-top: 10px;
  margin-bottom: 10px;

  border-radius: 5px;

  border: none;

  background: #1e2f4d;
  color: white;

}

textarea {

  width: 100%;
  height: 120px;

  padding: 10px;

  margin-top: 10px;
  margin-bottom: 10px;

  border-radius: 5px;

  border: none;

  background: #1e2f4d;
  color: white;

}

/* =========================================
BUTTONS
========================================= */

button {

  padding: 10px 20px;

  background: #f5b841;
  color: black;

  border: none;
  border-radius: 5px;

  font-weight: bold;

  cursor: pointer;

  transition: all 0.2s ease;

}

button:hover {

  background: #ffd066;

  transform: scale(1.03);

}

/* =========================================
DATA BLOCKS
========================================= */

pre {

  background: #08101f;

  padding: 15px;

  border-radius: 5px;

  overflow-x: auto;

  color: #9ad0ff;

}

/* =========================================
RESPONSIVE
========================================= */

@media (max-width: 800px) {

  .card {

    width: 95%;

  }

}