html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* 1 & 2. Menu Styling (Dark Teal Background, Light Text) */
.navbar {
  background-color: #68054c !important;
  /* Force override */
}

.navbar-brand,
.navbar-nav .nav-link {
  color: #ffffff !important;
  /* White text for contrast */
}

.navbar-nav .nav-link:hover {
  color: #d1d1d1 !important;
  /* Light grey on hover */
}

/* 3. Background Page Color */
body {
  background-color: #ebeae6;
  color: #333;
  /* Ensuring text remains readable on beige */
}

/* 4. Rounded and Striated Tables */
/* Note: To get rounded corners on a table, we must wrap it in a div or target the border-radius carefully because of border-collapse. */

.table-rounded-container {
  border-radius: 12px;
  overflow: hidden;
  /* This clips the table corners to match the border-radius */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* Optional: adds depth */
  background-color: #ffffff;
}

.table-rounded-container .table {
  margin-bottom: 0;
  /* Removes bottom margin so it fits the container */
}

/* Force striping if not using the .table-striped class, or customize the stripe color */
.table-rounded-container .table tbody tr:nth-of-type(odd) {
  background-color: rgba(2, 33, 32, 0.05);
  /* Very subtle tint of your menu color */
}

.table-rounded-container thead {
  background-color: #022120;
  color: #ffffff;
}

.table-rounded-container thead th {
  color: #ffffff;
  border-color: #1a6a04;
}

/* 5. Rounded, Pronounced Glossy Buttons */
.btn {
  border-radius: 50px;
  /* Pill shape */
  border: 1px solid rgba(0, 0, 0, 0.15);
  /* Subtle border definition */
  position: relative;

  /* Strong Gloss Gradient:
       - Starts bright white-ish at the top
       - Fades to transparent at the middle
       - Darkens slightly in the bottom half
    */
  background-image: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.1) 49%,
      rgba(0, 0, 0, 0.05) 50%,
      rgba(0, 0, 0, 0.1) 100%);

  /* Inner lighting details */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    /* Top sharp highlight (the 'rim') */
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    /* Bottom subtle lip */
    0 4px 6px rgba(0, 0, 0, 0.15);
  /* Drop shadow for 3D lift */

  /* Typography tweaks for readability over gloss */
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}

/* Hover Effect: Brightens the gloss */
.btn:hover {
  background-image: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.2) 49%,
      rgba(0, 0, 0, 0.02) 50%,
      rgba(0, 0, 0, 0.05) 100%);
  transform: translateY(-2px);
  /* Moves up slightly */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 6px 12px rgba(0, 0, 0, 0.2);
  /* Deeper shadow on hover */
  border-color: rgba(0, 0, 0, 0.2);
}

/* Active/Click Effect: "Presses" the button down */
.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    /* Inner shadow shows depth when pressed */
    0 1px 2px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.05) 100%);
}

/* --- Thematic Button Colors --- */

/* 1. Primary Button: Matches your Menu Color (#022120) */
.btn-primary {
  background-color: #022120;
  border-color: #011514;
  /* Slightly darker border */
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #033836;
  /* Slightly lighter teal on hover */
  border-color: #022120;
}

/* 2. Secondary Button: A warm grey to match your Beige background */
.btn-secondary {
  background-color: #7d7a73;
  border-color: #6c6962;
  color: #ffffff;
}

.btn-secondary:hover {
  background-color: #63605a;
  border-color: #55524d;
}

/* 3. Danger Button: Deep Crimson (High contrast for gloss) */
.btn-danger {
  background-color: #a81d1d;
  border-color: #8f1212;
}

.btn-danger:hover {
  background-color: #c92525;
}

/* 4. Success Button: Deep Forest Green */
.btn-success {
  background-color: #157347;
  border-color: #105e3a;
}

.btn-success:hover {
  background-color: #1a8f59;
}

/* 5. Warning Button: Burnt Orange (Better contrast for white gloss than yellow) */
.btn-warning {
  background-color: #d67c06;
  border-color: #bf6e04;
  color: #ffffff;
  /* White text looks better on this dark orange */
}

.btn-warning:hover {
  background-color: #e88909;
  color: #ffffff;
}

/* 6. Login Card */
.login-card {
  background-color: #ffffff;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  /* Soft, large shadow */
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  /* Center horizontally if in a flex container */
}

.login-card .card-header {
  background-color: transparent;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  color: #022120;
}