/* 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/items display */
.billable-card,
.item-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

/* Teal button style for Preview (Billables/Items) */
.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;
}

/* HTMX indicator visibility (CSP-safe) */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

/* Opacity utilities */
.opacity-0 { opacity: 0 !important; }
.opacity-100 { opacity: 1 !important; }

/* 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;
}

/* Slider position utilities for CSP-safe toggles */
.slider-left { transform: translateX(0%) !important; }
.slider-right { transform: translateX(100%) !important; }

/* Audio waveform bar height utilities */
.bar-h-5 { height: 5px !important; }
.bar-h-10 { height: 10px !important; }
.bar-h-15 { height: 15px !important; }
.bar-h-20 { height: 20px !important; }
.bar-h-25 { height: 25px !important; }
.bar-h-30 { height: 30px !important; }
.bar-h-35 { height: 35px !important; }
.bar-h-40 { height: 40px !important; }
.bar-h-45 { height: 45px !important; }
.bar-h-50 { height: 50px !important; }
.bar-h-55 { height: 55px !important; }
.bar-h-60 { height: 60px !important; }

/* 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,
.items-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

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

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

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

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

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

.billables-input,
.items-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,
.items-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; }
}

/* ==========================================================================
   CJK (Chinese, Japanese, Korean) Font Stacks and Wrapping Rules
   
   These rules ensure legible rendering across platforms using system fonts.
   No custom webfonts loaded - relies on system/Noto stacks for performance.
   
   Platform notes:
   - Windows: Microsoft YaHei (SC), Microsoft JhengHei (TC), Yu Gothic (JP), Malgun Gothic (KO)
   - macOS/iOS: PingFang (SC/TC), Hiragino Sans (JP), Apple SD Gothic Neo (KO)
   - Android/Linux: Noto Sans CJK variants
   ========================================================================== */

/* Chinese (Simplified) - zh, zh-CN, zh-Hans */
:lang(zh),
:lang(zh-CN),
:lang(zh-Hans) {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Noto Sans', sans-serif;
  line-break: strict;
  word-break: normal;
}

/* Chinese (Traditional) - zh-TW, zh-HK, zh-Hant */
:lang(zh-TW),
:lang(zh-HK),
:lang(zh-Hant) {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei',
    'Noto Sans', sans-serif;
  line-break: strict;
  word-break: normal;
}

/* Japanese - ja */
:lang(ja) {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    'Hiragino Sans', 'Yu Gothic', 'Yu Gothic UI', 'Meiryo',
    'Noto Sans JP', 'Noto Sans', sans-serif;
  word-break: keep-all;
}

/* Korean - ko */
:lang(ko) {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR',
    'Noto Sans', sans-serif;
  word-break: keep-all;
}

/* ==========================================================================
   RTL (Right-to-Left) Support and Mirroring Resilience
   
   These rules ensure proper rendering for RTL languages (Arabic, Hebrew, etc.)
   The dir="rtl" attribute is set on <html> via templates/base.html.
   Prefer logical CSS properties (margin-inline, padding-inline) for new rules.
   ========================================================================== */

/* Base RTL direction rules */
[dir='rtl'] {
  direction: rtl;
  text-align: right;
}

/* Ensure LTR overrides when explicitly set */
[dir='ltr'] {
  direction: ltr;
  text-align: left;
}

/* Utility class for mirroring icons/elements in RTL contexts */
[dir='rtl'] .mirror-rtl {
  transform: scaleX(-1);
}

/* Reset text alignment for specific elements that should use logical alignment */
[dir='rtl'] .text-start { text-align: right; }
[dir='rtl'] .text-end { text-align: left; }

/* Tables should inherit direction */
[dir='rtl'] table {
  direction: rtl;
}

[dir='rtl'] th,
[dir='rtl'] td {
  text-align: start;
}

/* Form inputs alignment */
[dir='rtl'] input[type="text"],
[dir='rtl'] input[type="email"],
[dir='rtl'] input[type="password"],
[dir='rtl'] input[type="number"],
[dir='rtl'] input[type="tel"],
[dir='rtl'] input[type="search"],
[dir='rtl'] textarea,
[dir='rtl'] select {
  text-align: inherit;
}

/* Numeric inputs should remain LTR even in RTL context */
[dir='rtl'] input[type="number"],
[dir='rtl'] input[type="tel"],
[dir='rtl'] .numeric-input {
  direction: ltr;
  text-align: right;
}

/* Breadcrumbs separator flip */
[dir='rtl'] .breadcrumb-separator {
  transform: scaleX(-1);
}

/* Navigation arrows should flip */
[dir='rtl'] .nav-arrow-left { transform: scaleX(-1); }
[dir='rtl'] .nav-arrow-right { transform: scaleX(-1); }

/* Dropdown positioning adjustment for RTL */
[dir='rtl'] .dropdown-end {
  --tw-translate-x: 0;
  left: auto;
  right: 0;
}