/* --- 1. DEFINE THE COLOR PALETTE & FONT --- */
:root {
  --brand-primary-light: #00AEEF;
  --brand-primary-dark: #0072CE;
  --background-color: #F8F9FA;  /* A very light gray, easier on the eyes than pure white */
  --card-background: #FFFFFF;
  --text-primary: #212529;      /* Bootstrap's default dark text */
  --text-secondary: #6c757d;    /* Bootstrap's default muted text */
  --border-color: #dee2e6;      /* Bootstrap's default border color */
}

/* --- 2. GENERAL BODY & TYPOGRAPHY --- */
body {
  background-color: var(--background-color);
  color: var(--text-primary);
  font-family: 'Poppins', sans-serif; /* Our new modern font */
}

/* --- 3. BRANDED NAVBAR --- */
.navbar-branded {
  /* The core gradient from the logo */
  background: linear-gradient(to right, var(--brand-primary-dark), var(--brand-primary-light));
  padding: 0.5rem 1rem;
  box-shadow: 0 4px 12px rgba(0, 114, 206, 0.25); /* A soft blue shadow */
}

.navbar-logo {
  height: 50px; /* Adjust as needed */
}

.navbar-text {
  color: rgba(255, 255, 255, 0.9); /* Slightly transparent white for a softer look */
}

/* --- 4. FLOATING CARDS --- */
.card {
  border: 1px solid var(--border-color);
  border-radius: 12px; /* Softer, more modern corners */
  /* This shadow makes the card "float" above the background */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #FDFDFD; /* A very subtle off-white */
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* --- 5. THE GLOSSY BUTTONS (The Main Effect!) --- */
.btn-primary, .btn-success {
  color: white;
  font-weight: 500;
  /* The vertical gradient that forms the base of the button */
  background: linear-gradient(to bottom, var(--brand-primary-light), var(--brand-primary-dark));
  border: 1px solid var(--brand-primary-dark);
  border-radius: 6px;

  /* A subtle shadow on the text to make it pop */
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);

  /*
     THIS IS THE GLOSSY REFLECTION!
     An inset (inner) shadow, positioned at the top (1px), that is semi-transparent white.
     This simulates a light source shining on the button from above.
  */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0,0,0,0.2);

  transition: all 0.15s ease-out;
}
.btn-success { /* Make Add buttons also use the brand color */
  background: linear-gradient(to bottom, #34d399, #059669); /* Example green gradient */
  border-color: #047857;
}

/* Hover state: make it brighter and lift it */
.btn-primary:hover, .btn-success:hover {
  color: white;
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Active state: make it look "pressed in" */
.btn-primary:active, .btn-success:active {
  color: white;
  transform: translateY(1px);
  /* Inset shadow on all sides and darker */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  text-shadow: none;
  filter: brightness(0.95);
}

/* --- 6. FORMS & MODALS --- */
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.modal-header {
  /* Use the brand gradient for modal headers */
  background: linear-gradient(to right, var(--brand-primary-dark), var(--brand-primary-light));
  color: white;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%); /* White 'X' button */
}

/* Focus state for inputs uses brand color */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary-light);
  box-shadow: 0 0 0 0.25rem rgba(0, 174, 239, 0.25);
}


/* style.css */

/* --- 8. LOGIN PAGE SPECIFIC STYLES --- */
.login-logo {
  max-height: 100px; /* Control the size of the logo */
}

.login-header {
  color: var(--text-secondary); /* Use the muted text color */
  font-weight: 400; /* A lighter font weight for the subtitle */
}