/* --- GLOBAL DASHBOARD STYLING --- */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f7f6;
  margin: 0;
  padding: 20px;
  color: #333;
}

.dashboard-container {
  max-width: 1400px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dashboard-title {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 600;
  border-bottom: 2px solid #b4c6e7;
  padding-bottom: 10px;
}

/* --- DATA ENTRY WIDGET --- */
.add-record-panel {
  background: #fdfdfd;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.add-record-panel h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #555;
}

.add-record-panel h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 15px;
  color: #555;
}

.form-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 150px;
  margin-bottom: 4px;
}

.form-group label {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #444;
}

.form-group input {
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  height: 34px;
}

.form-group input:focus {
  border-color: #e4ebe4;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
}

.form-group.action-group {
  flex: 0 0 auto;
}

.btn-submit {
  background-color: #d1d7d3af;
  color: #03190c;
  border: none;
  padding: 2px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-submit:hover {
  background-color: #d1dad1;
}

/* --- EXPORT OPTION: ACTION ROW BUTTONS --- */
/* Keeping the row vertically centered matters once one button (Download)
   is hidden/shown dynamically via JS - without this, a flex item that
   toggles visibility can nudge the row's baseline alignment. */
.action-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

/* Single shared rule for all three buttons: covers both sizing AND visual
   style (background/border/radius), so Convert, Cancel and Download look
   identical instead of falling back to the browser's native button style,
   which is what caused Download to look bigger and differently bordered
   even after only sizing it individually. */
.action-row .action-btn {
  width: 110px;
  height: 38px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.action-row .action-btn:hover {
  background-color: #eaeaea;
  border-color: #bbb;
}

.action-row .btn-download {
  background-color: #e8f0fe;
  border-color: #a9c6f5;
}

.action-row .btn-download:hover {
  background-color: #d9e6fc;
  
}