/* ========================================
   Load Inter via Google Fonts (optional)
   If not already in your <head>, you can import:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
======================================== */

/* ========================================
   Global Resets & Base Styles
======================================== */

/* Apply a universal box-sizing rule */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Global body styles */
body {
  background-color: #F9FAFB;
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 20px;
  line-height: 1.4;
}

/* ========================================
   Unified Input Styles (Subtle Outset)
======================================== */

/* For elements with the .input-field class and <select> elements */
.input-field,
select {
  width: 100%;
  
  /* Border & rounding */
  border: 2px solid #D0D5DD;
  border-radius: 9px;
  
  /* Font & text appearance */
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  background-color: #FFFFFF;

  /* **Subtle** shadow: (horizontal offset=0, vertical=3, blur=4, spread=0)
     color=rgba(16,24,40,0.15) for a gentle effect similar to Figure 1 */
  box-shadow: 0 3px 4px 0 rgba(187, 187, 188, 0.15);

  /* Spacing & transitions */
  padding: 0.5rem;
  letter-spacing: 0;
  word-spacing: 0;
  transition: box-shadow 0.2s ease-in-out;
  box-sizing: border-box;
}

/* Placeholder color matches text color */
.input-field::placeholder,
select::placeholder {
  color: #9CA3AF; 
}

/* Focus state: keep the subtle shadow + add a thin blue ring */
.input-field:focus,
select:focus {
  outline: none;
  box-shadow:
    0 3px 4px 0 rgba(16, 24, 40, 0.15),
    0 0 0 2px rgba(59,130,246,0.5);
}

/* ========================================
   Form & Bootstrap Overrides (Optional)
======================================== */
.form-control,
.form-select {
  min-height: 20px;
  border-radius: 6px !important;
}

textarea.form-control {
  min-height: 40px;
  border-radius: 6px !important;
}

form .form-control,
form .form-select,
form textarea {
  margin-bottom: 15px;
}

/* ========================================
   Button Styles
======================================== */

/* Primary button: Blue background, white text */
.btn, button {
  background-color: #007BFF;
  color: #ffffff !important;
  border-radius: 6px;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.btn:hover, button:hover {
  opacity: 0.9;
}

/* Outline button variant: White background, blue outline & text */
.btn-outline-primary {
  background-color: #ffffff !important;
  color: #007BFF !important;
  border: 1px solid #007BFF !important;
}

/* ========================================
   Button Row Layout
======================================== */

.button-row {
  display: flex;
  gap: 1rem;
}

.button-row > a,
.button-row > button {
  flex: 1;
  text-align: center;
}

/* ========================================
   Card Styles
======================================== */

.card {
  background-color: #ffffff;
  border: 1px solid #e3e6e8;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
}

/* ========================================
   Table Styles
======================================== */

.table {
  background-color: #ffffff;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

.table thead th {
  background-color: #f7f7f7;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ========================================
   Heading & Label Styles
======================================== */

h1, h2, h3 {
  margin-top: 0;
}

label.form-label {
  display: block;
}

/* ========================================
   Additional Styles (Optional)
======================================== */

/* Add custom classes or overrides here */