/* Input fields */
.input-field {
  @apply rounded-xl border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500;
}

.input-field-sm {
  @apply rounded-lg border border-gray-300 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500;
}

/* Buttons */
.btn-primary {
  @apply rounded-xl px-4 py-2 bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition;
}

.btn-secondary {
  @apply rounded-xl px-4 py-2 border border-gray-300 bg-white hover:bg-gray-50 transition;
}

.btn-dark {
  @apply rounded-xl px-4 py-2 bg-gray-800 text-white font-medium hover:bg-gray-900 transition;
}

.btn-green {
  @apply rounded-lg px-3 py-1.5 bg-emerald-600 text-white text-sm hover:bg-emerald-700 transition;
}

.btn-sky {
  @apply rounded-lg px-3 py-1.5 bg-sky-600 text-white text-sm hover:bg-sky-700 transition;
}

.btn-red {
  @apply rounded-lg px-3 py-1.5 bg-rose-600 text-white text-sm hover:bg-rose-700 transition;
}

.btn-sky-sm {
  @apply rounded px-2.5 py-1 bg-sky-600 text-white text-xs hover:bg-sky-700 transition;
}

.btn-red-sm {
  @apply rounded px-2.5 py-1 bg-rose-600 text-white text-xs hover:bg-rose-700 transition;
}

/* Account item */
.account-item {
  @apply flex items-center bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 hover:bg-gray-100 transition;
}

.account-item .accountName {
  @apply text-gray-800;
}

/* User card */
.user-card {
  transition: box-shadow 0.3s ease;
}
.user-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}/* Day boxes default style */
.day-box {
  width: 18px;
  height: 18px;
  border: 1px solid #cbd5e1; /* slate-300 */
  border-radius: 4px;
  background-color: #f8fafc; /* slate-50 */
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;

}

/* Hover background only applies when NOT green */
.day-box:not(.bg-green-500):not(.bg-yellow-400):not(.bg-orange-400):not(.bg-red-500):hover {
  background-color: #e0e7ff; /* indigo-100 */
}

/* Hover zoom applies to ALL boxes */
.day-box:hover {
  transform: scale(1.1);
}

/* Active selection (purple) */
.day-box.active {
  background-color: #6366f1; /* indigo-500 */
  border-color: #6366f1;
}

/* Green state */
.day-box.bg-green-500 {
  background-color: #22c55e !important; /* Tailwind green-500 */
  border-color: #22c55e !important;
}

.day-box[data-tooltip] {
  position: relative;
}

.day-box.bg-orange-400:hover {
  background-color: #fb923c !important; /* same orange */
}

.day-box.bg-red-500:hover {
  background-color: #ef4444 !important; /* same red */
}
.day-box.bg-gray-300:hover,
.day-box.bg-gray-300:active,
.day-box.bg-gray-300:focus {
  background-color: #d1d5db !important; /* same light grey */
  outline: none !important;
  box-shadow: none !important; /* remove highlight glow */
}
/* Tooltip box */
.day-box[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: -35%; /* Push tooltip to the right of the box */
  top: -105%;
  transform: translateY(-50%);
  background: #333; /* dark background */
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
#checkSessionBtn {
    width: 112px;
}
/* Show on hover */
.day-box[data-tooltip]:hover::after {
  opacity: 1;
}
.dollar-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%; /* Adjust as needed */
}

.dollar-symbol {
  position: absolute;
  left: 8px;
  top: 54%;
  transform: translateY(-50%);
  color: #555;
  font-size: 14px;
  pointer-events: none; /* Prevent blocking the input */
}

.dollar-input-wrapper input {
  padding-left: 20px; /* Creates space for the $ */
  width: 100%;
  box-sizing: border-box;
}

.account-info-box {
  position: fixed; /* absolute works now since it's in <body> */
  z-index: 99999 !important;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-height: 300px;
  overflow-y: auto;
  width: fit-content !important;
  display: none;
  font-size:14px;
}

.account-info-box table {
  width: 100%;
  border-collapse: collapse;
}
.ring-2 {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 1);
}
.ring-blue-500 {
  border-color: #3b82f6;
}
.rounded-full {
  border-radius: 9999px;
}

.account-info-box th,
.account-info-box td {
  border: 1px solid #e5e7eb; /* Tailwind gray-200 */
  padding: 6px;
  font-size: 14px;
}

.account-info-box thead th {
  background-color: #f9fafb; /* Tailwind gray-50 */
  font-weight: 600;
}

.account-info-box tbody tr:hover {
  background-color: #f3f4f6; /* Tailwind gray-100 */
}
section,
.user-card,
.accounts {
  z-index: auto !important; /* Reset any stacking context */
}

.user-card, 
.accounts {
  overflow: hidden; /* or simply remove the rule entirely */
}
.account-info-box.show {
  display: block;
}
.account-item {
  position: relative; /* Anchor for info box */
}
.user-clock {
  font-family: monospace;
  font-size: 0.875rem; /* text-sm */
  color: #374151; /* Tailwind gray-700 */
  min-width: 45px;
  text-align: center;
  border: 1px solid #ddd;
  padding-left: 5px;
  padding-right: 5px;
  cursor: default;
}
.userName, .accountsCount {
    width:100px;
    font-size:16px !important;
    cursor:pointer;
}
#searchBox{
    text-align: right;
}
.loader {
  border: 3px solid #f3f3f3; /* Light grey */
  border-top: 3px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
}

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

/* Smooth highlight flash */
@keyframes refreshFlash {
  0% { transform: scale(1); box-shadow: 0 0 0px rgba(0, 0, 0, 0); }
  30% { transform: scale(1.2); box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); }
  60% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 0px rgba(0, 0, 0, 0); }
}

.refresh-animate {
  animation: refreshFlash 0.8s ease;
}
#weekSelectorBtn {
  min-width: 120px;
  text-align: center;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .account-item {
    @apply flex-col items-start gap-2;
  }
}
