:root {
  --x01-primary50: #e8f5e9;
  --x01-primary200: #81c784;
  --x01-primary500: #2e7d32;
  --x01-primary600: #256e29;
  --x-600: #1b5e20;
  --forest-green-deep: #228B22;
  --forest-green-light: #32CD32;
  --forest-green-teal: #2E8B57;
}

#app[inert]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.add-new-btn {
  @apply inline-flex items-center px-4 py-3 bg-x01-primary500 text-white font-semibold text-sm rounded-md hover:bg-x01-primary600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-x01-primary500;
}

.search-bar {
  @apply w-full h-10 pl-4 pr-10 py-2 border border-x01-primary500 rounded-full text-[14px] text-gray-500 focus:outline-none focus:ring-2 focus:ring-x01-primary200;
}

.show-details-value {
  @apply flex items-center space-x-3 px-2 py-2 bg-gray-100 border border-black/15 rounded-md;
}

.input-group {
  @apply flex items-center space-x-3 px-2 py-1 bg-white border border-black/15 rounded-md;
}

.custom-checkbox {
  @apply appearance-none w-5 h-5 border-2 border-[#979797] rounded focus:ring-green-500;
}

/* Hide native number input spinner completely */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: none;
}

/* Custom horizontal scrollbar */
.custom-scroll::-webkit-scrollbar {
  height: 4px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  border-radius: 3px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #909090;
}

/* For Firefox */
.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: #b0b0b0 #f0f0f0;
}
/* Professional Animated Forest Green Gradient for Header */
.forest-gradient {
  background: linear-gradient(
    -45deg,
    #1e4a1e, /* Deep forest green */
    #228B22, /* Forest green base */
    #2d7a2d, /* Medium forest green */
    #3a8b3a, /* Lighter forest green */
    #228B22, /* Back to base */
    #1e4a1e  /* Deep again */
  );
  background-size: 300% 300%;
  animation: gradientFlow 8s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
}

/* Alternative: Subtle horizontal flow (commented out) */
/*
.forest-gradient {
  background: linear-gradient(
    90deg,
    var(--forest-green-deep),
    var(--forest-green-teal),
    var(--forest-green-light),
    var(--forest-green-teal),
    var(--forest-green-deep)
  );
  background-size: 200% 100%;
  animation: subtleFlow 8s ease-in-out infinite;
}

@keyframes subtleFlow {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
}
*/

/* Add this to the end of application.css */
input[type="checkbox"].green-checkbox {
  accent-color: #22c55e !important;
  background-color: #dcfce7 !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #22c55e !important;
  border-radius: 4px !important;
}

input[type="checkbox"].green-checkbox:checked {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}

/* Address Book Expandable Rows */
.expanded-row {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.expanded-row.opacity-100 {
  opacity: 1;
  max-height: 1000px;
  overflow: visible;
}

/* Enhanced hover states for expandable rows */
tr[data-controller="address-book-expandable"]:hover {
  background-color: #f9fafb;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

tr[data-controller="address-book-expandable"].expanded {
  background-color: #f3f4f6;
}

/* Chevron animation */
tr[data-controller="address-book-expandable"] [data-address-book-expandable-target="chevron"] {
  transition: transform 0.3s ease-in-out;
}

/* Focus states for accessibility */
tr[data-controller="address-book-expandable"]:focus {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  background-color: #eff6ff;
}

/* Ensure action buttons don't trigger hover on parent */
tr[data-controller="address-book-expandable"] .action-button {
  position: relative;
  z-index: 10;
}

/* Blinking animation for blocked carrier indicator */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.animate-pulse-subtle {
  animation: blink 1s ease-in-out infinite;
}

/* Prevent Leaflet's internal z-indices (200-800) from bleeding above the sticky navbar */
[data-controller~="location-preview-map"],
[data-controller~="region-map-editor"],
[data-controller~="rate-schedule-map"],
[data-controller~="grouping-points-map"],
[data-controller~="rate-card-map"] {
  isolation: isolate;
}
/* TER-260: the shared hours grid (shared/locations/_hours_grid) splits weekdays
   and weekends into two columns at Tailwind's `md:` breakpoint — which measures
   the VIEWPORT. In the address book it lives in a wide modal and that's right;
   on the shipment form it sits inside an endpoint card roughly 640px wide, so
   on a desktop viewport it still split into two ~290px columns while each day
   row needs ~486px, and the day labels collided with the time inputs.
   Scoped to the shipment form's panel so the address book keeps its two
   columns. Attribute selector outranks the .md\:grid-cols-2 utility. */
.hours-panel-scoped [data-schedule-hours-target="weeklySchedule"] {
  grid-template-columns: minmax(0, 1fr);
}