:root {
  --sit-blue: #0054a6;
  --sit-dark-blue: #003d7a;
  --sit-yellow: #f0ab00;
  --sit-gray-bg: #f4f6f9;
  --text-primary: #333333;
  --text-secondary: #6c757d;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  --transition-speed: 0.3s;
}

body {
  background-color: var(--sit-gray-bg);
  color: var(--text-primary);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}

/* Navbar Customization */
.navbar-custom {
  background: linear-gradient(
    135deg,
    var(--sit-blue) 0%,
    var(--sit-dark-blue) 100%
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  padding: 1rem 0;
  position: relative;
  margin-bottom: 20px;
}

.navbar-brand {
  color: white !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1.5rem;
}

.navbar-brand i {
  color: var(--sit-yellow);
}

/* Cards Styling */
.card {
  border: none;
  border-radius: 12px;
  background-color: white;
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--transition-speed);
  margin-bottom: 24px;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--card-hover-shadow);
}

.card-header-sit {
  background: linear-gradient(
    135deg,
    var(--sit-blue) 0%,
    var(--sit-dark-blue) 100%
  );
  color: white;
  padding: 1rem;
  border-bottom: none;
}

/* Table Styles */
.table th {
  background-color: var(--sit-blue) !important;
  color: white !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  border: none;
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: #f2f2f2;
}

/* Buttons */
.btn-primary {
  background-color: var(--sit-blue);
  border-color: var(--sit-blue);
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  border-radius: 8px;
  transition: background-color var(--transition-speed);
}
.btn-primary:hover {
  background-color: var(--sit-dark-blue);
  border-color: var(--sit-dark-blue);
  box-shadow: 0 4px 8px rgba(0, 84, 166, 0.2);
}
.btn-outline-primary {
  color: var(--sit-blue);
  border-color: var(--sit-blue);
  border-radius: 6px;
}
.btn-outline-primary:hover {
  background-color: var(--sit-blue);
  border-color: var(--sit-blue);
  color: white;
}

/* Sync Overlay */
#sync-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(5px);
  z-index: 9999;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#sync-overlay.active {
  display: flex;
  opacity: 1;
}

.sync-message-container {
  text-align: center;
  padding: 2rem;
  max-width: 400px;
}

/* ----------------------------------------------------
   JC Zimmerman ("jczimm") Style Button Loader Implementation
   Replicating the interaction of: https://codepen.io/jczimm/pen/vEBpoL
   ---------------------------------------------------- */
.process-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 70px;
  background-color: var(--sit-blue); /* Default Blue */
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 40px;
  cursor: default;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 84, 166, 0.3);
}

.process-btn .btn-text {
  transition: opacity 0.3s;
}

/* Loading State: Shrink to circle but KEEP BLUE BACKGROUND for contrast if needed, 
   BUT standard material loaders are usually on white. 
   User asked for "mostly blue" and "underneath it works spinning colors".
   Let's keep the button background blue, but if the spinner cycles colors, they might clash with blue bg.
   
   ADJUSTMENT: To match the CodePen style (which usually is on white), I will make the button background WHITE when loading,
   so the COLORFUL spinner is clearly visible. This matches "underneath it is working with matching colors".
*/
.process-btn.loading {
  width: 70px;
  background-color: #ffffff; /* White background to show off the colors */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  cursor: wait;
  border: 2px solid #f0f0f0; /* Subtle border */
}

.process-btn.loading .btn-text {
  opacity: 0;
  display: none;
}

/* Spinner (SVG ring) - Material Design Style matches CodePen VYZzaR */
.process-btn .spinner {
  position: absolute;
  width: 50px; /* Slightly larger */
  height: 50px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* The container rotates */
  animation: rotate 2s linear infinite;
}

.process-btn.loading .spinner {
  opacity: 1;
  transform: scale(1);
  /* Animation definition moved to class to avoid override issues */
}

/* The inner circle path */
.spinner circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  /* initial state */
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  /* Two animations: 1. DASH (grow/shrink) 2. COLOR (cycle colors) */
  animation:
    dash 1.5s ease-in-out infinite,
    color-cycle 6s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

/* ADAPTING TO SITE COLORS: Blue, Yellow, Dark Blue */
@keyframes color-cycle {
  100%,
  0% {
    stroke: var(--sit-blue);
  } /* SIT Blue */
  40% {
    stroke: var(--sit-yellow);
  } /* SIT Yellow */
  66% {
    stroke: var(--sit-dark-blue);
  } /* SIT Dark Blue */
  80%,
  90% {
    stroke: var(--sit-blue);
  } /* Back to Blue */
}

/* Success State */
.process-btn.success {
  width: 70px; /* Keep circle or expand? jczimm usually stays circle or expands slightly */
  background-color: #28a745;
  box-shadow: 0 10px 25px rgba(40, 167, 69, 0.4);
}

.process-btn.success .btn-text,
.process-btn.success .spinner {
  display: none;
  opacity: 0;
}

/* Checkmark Animation */
.check-box {
  position: absolute;
  width: 30px;
  height: 30px;
  opacity: 0;
  transform: scale(0.5);
}

.process-btn.success .check-box {
  opacity: 1;
  transform: scale(1);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.check-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: white;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}

.process-btn.success .check-icon {
  animation: draw-check 0.5s ease forwards 0.2s;
}

@keyframes draw-check {
  to {
    stroke-dashoffset: 0;
  }
}

/* Error State */
.process-btn.error {
  width: 280px; /* Expand back to show error text */
  background-color: #dc3545;
  box-shadow: 0 10px 25px rgba(220, 53, 69, 0.4);
}
.process-btn.error .btn-text {
  opacity: 1;
  display: block;
  content: "ERRORE"; /* Can be handled via JS text replacement */
}

/* Responsive Table */
@media (max-width: 991px) {
  /* Keeping table responsive behavior for MD and smaller if needed, 
       but fixing the layout issue is priority */
  .table td {
    white-space: nowrap;
  }
}

/* Layout Utilities */
.text-sit-blue {
  color: var(--sit-blue);
}

/* Login Page Styles */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--sit-gray-bg);
}

.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: none;
  overflow: hidden;
  background: white;
}

.login-header {
  background: linear-gradient(
    135deg,
    var(--sit-blue) 0%,
    var(--sit-dark-blue) 100%
  );
  padding: 2rem;
  text-align: center;
  color: white;
}

.login-footer {
  background-color: #f8f9fa;
  padding: 1rem;
  text-align: center;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: var(--text-secondary);
}