/* Tom-select styles - included via CDN for now */
/* @import 'tom-select/dist/css/tom-select.css'; */

/* Custom styles for WorkCraft that can't be achieved with Tailwind utilities */

/* Global scroll behavior - disable smooth scrolling for table updates */
html {
  scroll-behavior: auto;
}

/* Fix for responsive tables on mobile */
.responsive-table-container {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Allow tooltips to extend beyond table bounds when needed */
.responsive-table-container.allow-overflow {
  overflow: visible;
}

/* For the fixed bottom action bar on job form */
.fixed-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 40;
}

@media (min-width: 768px) {
  .fixed-bottom-bar {
    position: static;
    background-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: 1rem 0;
  }
}

/* Card styles for the unknown billables display */
.billable-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

/* Teal button style for Preview Billables */
.btn-teal:not(.btn-disabled) {
  background-color: #00fffa;
  color: black;
}

.btn-teal:hover:not(.btn-disabled) {
  background-color: #00e6e2;
}

/* Enhanced primary button for better text visibility */
.btn-primary {
  color: #FFFFFF !important; /* Pure white text */
  font-weight: 600 !important; /* Semi-bold text */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; /* Text shadow for better contrast */
  letter-spacing: 0.01em !important; /* Slightly increased letter spacing */
}

.btn-primary:hover {
  color: #FFFFFF !important; /* Keep white text on hover */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; /* Enhanced text shadow on hover */
}

/* Display utilities commonly used in JS */
.display-none {
  display: none;
}

.display-block {
  display: block;
}

.display-inline {
  display: inline;
}

/* Transform utilities used in JS */
.transform-none {
  transform: translateX(0);
}

.transform-full {
  transform: translateX(100%);
}

.transform-scale-normal {
  transform: scale(1);
  opacity: 1;
}

.transform-scale-large {
  transform: scale(1.3);
  opacity: 1;
}

.transform-scale-dim {
  transform: scale(1);
  opacity: 0.7;
}

/* Transition effects for recording indicator */
.recording-indicator-transition {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Table styles from jobFormHelpers.js and jobFormInputHelpers.js */
.billables-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.billables-table thead tr {
  background: #f8f9fa;
}

.billables-table th, .billables-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.billables-table th.text-right, .billables-table td.text-right {
  text-align: right;
}

.billables-table th.text-center, .billables-table td.text-center {
  text-align: center;
}

.billables-table tr.total-row {
  font-weight: bold;
  background: #f1f1f1;
}

.billables-input {
  width: 60px;
  text-align: right;
  padding: 3px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* Buttons for tables */
.update-table-btn {
  background: #38a169;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.text-right {
  text-align: right;
}

/* Audio visualization bars */
.audio-viz-bar {
  width: 8px;
  margin-left: 2px;
  margin-right: 2px;
  background-color: #007bff;
  height: 5px;
  transition: height 0.1s ease;
}

/* Container for update table button */
.table-button-container {
  text-align: right;
  margin-top: 15px;
}

/* Job Form button styles */
.btn-green {
  background-color: #00E676;
  color: black;
}

.btn-green:hover {
  background-color: #00c853;
}

.btn-teal-alt {
  background-color: #00fffa;
  color: black;
}

.btn-teal-alt:hover {
  background-color: #00e6e2;
}

/* Save button styles */
.save-btn {
  background: #00E676;
  color: black;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

/* Language toggle active state */
.language-toggle.active-language,
.language-toggle-preview.active-language {
  background: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

.save-btn:hover {
  background-color: #00c853;
}

/* Translation Status Filter Button Styles */
.active-filter {
  background-color: #4A90E2 !important;
  color: white !important;
  border-color: #4A90E2 !important;
}

.active-filter:hover {
  background-color: #357ABD !important;
  color: white !important;
}

/* Translation tab styles */
.translation-tab-content {
  transition: opacity 0.2s ease-in-out;
}

.translation-tab-content.hidden {
  display: none;
}

.translation-tab-content.active {
  display: block;
}

/* Tom-select customizations for DaisyUI theme */
.ts-control {
  border: 1px solid hsl(var(--bc) / 0.2);
  border-radius: 0.5rem;
  background-color: hsl(var(--b1));
  color: hsl(var(--bc));
  min-height: 3rem;
  padding: 0.5rem;
  font-size: 0.875rem;
}

.ts-control:focus,
.ts-control.focus {
  border-color: hsl(var(--p));
  box-shadow: 0 0 0 2px hsl(var(--p) / 0.2);
  outline: none;
}

.ts-control.multi .ts-control-input {
  margin: 0.125rem 0;
}

.ts-control.multi .ts-control-input input {
  font-size: 0.875rem;
}

.ts-control .item {
  background-color: hsl(var(--p));
  color: hsl(var(--pc));
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  margin: 0.125rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.ts-control .item .remove {
  color: hsl(var(--pc) / 0.7);
  margin-left: 0.25rem;
  cursor: pointer;
}

.ts-control .item .remove:hover {
  color: hsl(var(--pc));
}

.ts-dropdown {
  border: 1px solid hsl(var(--bc) / 0.2);
  border-radius: 0.5rem;
  background-color: hsl(var(--b1));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 1000;
}

.ts-dropdown .option {
  padding: 0.5rem;
  color: hsl(var(--bc));
  border-bottom: 1px solid hsl(var(--bc) / 0.1);
}

.ts-dropdown .option:last-child {
  border-bottom: none;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: hsl(var(--b2));
  color: hsl(var(--bc));
}

.ts-dropdown .option.selected {
  background-color: hsl(var(--p) / 0.1);
  color: hsl(var(--p));
}

/* Error state styling */
.ts-control.border-red-500 {
  border-color: #ef4444 !important;
}

.ts-control.border-2 {
  border-width: 2px !important;
}

/* Pricing strategy indicator styles */
.price-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: help;
}

.price-indicator.manual {
  background-color: #f59e0b;
  color: white;
}

.price-indicator.auto {
  background-color: #10b981;
  color: white;
}

.price-cell.manual-price {
  background-color: rgba(245, 158, 11, 0.05);
}

.price-cell.auto-price {
  background-color: rgba(16, 185, 129, 0.05);
}

/* Pricing table enhancements */
.price-amount {
  font-weight: 500;
}

.billables-table .price-cell {
  font-family: 'Courier New', monospace;
}

/* Missing translation indicators (UI spec) */
.wc-missing {
  --wc-missing-bg: #f8d7da;
  --wc-missing-fg: #721c24;
  --wc-missing-border: #f5c6cb;
  --wc-missing-radius: 0.25rem;
  --wc-missing-pad-block: 0.125rem;
  --wc-missing-pad-inline: 0.25rem;
  --wc-missing-font-size: 0.875rem;
}

.wc-missing--inline {
  color: var(--wc-missing-fg);
  background: transparent;
  font-size: var(--wc-missing-font-size);
  padding: 0;
}

.wc-missing--badge {
  background: var(--wc-missing-bg);
  color: var(--wc-missing-fg);
  border: 1px solid var(--wc-missing-border);
  border-radius: var(--wc-missing-radius);
  padding: var(--wc-missing-pad-block) var(--wc-missing-pad-inline);
  font-size: var(--wc-missing-font-size);
}

@media print {
  .wc-missing { display: none; }
}