/*
 * Third-Party Library Overrides for Admin Dashboard
 * Global reusable styles for common third-party libraries
 *
 * Usage: Include this CSS file in templates that use third-party libraries
 * Example: <link href="{% static 'admin_dashboard/css/third-party-overrides.css' %}" rel="stylesheet" />
 */

/* ===== SELECT2 STYLING ===== */

/**
 * Select2 Container - Single Selection
 * Overrides default Select2 styling for single selection dropdowns
 *
 * Properties:
 * - height: 42px - Consistent with form input heights
 * - border: 1px solid #d1d5db - Tailwind gray-300 border
 * - border-radius: 8px - Rounded corners matching design system
 * - padding: 8px 12px - Internal spacing for content
 */
.select2-container--default .select2-selection--single {
  height: 38px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: -1px !important;
    margin-top: -4px !important;
}
/**
 * Select2 Rendered Text
 * Styles the displayed text within the Select2 dropdown
 *
 * Properties:
 * - line-height: 24px - Vertical alignment for text
 * - padding-left: 0 - Remove default left padding
 * - color: #374151 - Tailwind gray-700 text color
 * - font-size: 14px - Consistent with form inputs
 */
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 24px !important;
  padding-left: 0 !important;
  color: #374151 !important;
  font-size: 14px !important;
}

/**
 * Select2 Dropdown Arrow
 * Positions and sizes the dropdown arrow indicator
 *
 * Properties:
 * - height: 40px - Aligns with container height
 * - right: 8px - Right margin for proper positioning
 */
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 40px !important;
  right: 8px !important;
}

/**
 * Select2 Dropdown Container
 * Styles the dropdown menu that appears when Select2 is opened
 *
 * Properties:
 * - border: 1px solid #d1d5db - Consistent border styling
 * - border-radius: 8px - Rounded corners
 * - font-size: 14px - Consistent typography
 */
.select2-dropdown {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/**
 * Select2 Highlighted Option
 * Styles the highlighted option when hovering over dropdown items
 *
 * Properties:
 * - background-color: #3b82f6 - Tailwind blue-500 for active state
 */
.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #3b82f6 !important;
}

/**
 * ===== SELECT2 MULTI-SELECT STYLING =====
 * Custom styling for Select2 multi-select dropdowns to match form input design system
 * Ensures consistent appearance with standard form inputs
 */

/**
 * Select2 Container - Multiple Selection
 * Main container for multi-select dropdowns with improved layout
 *
 * Properties:
 * - min-height: 42px - Consistent with single select and form inputs
 * - border: 1px solid #d1d5db - Tailwind gray-300 border
 * - border-radius: 8px - Rounded corners matching design system
 * - padding: 4px 8px - Reduced padding to accommodate tags
 * - background-color: white - Clean background
 * - transition: all 0.2s ease-in-out - Smooth state transitions
 * - display: flex - Flexbox layout for better control
 * - flex-direction: column-reverse - Search input at bottom, tags at top
 * - gap: 4px - Consistent spacing between search and tags
 */
.select2-container--default .select2-selection--multiple {
  min-height: 42px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  background-color: white !important;
  transition: all 0.2s ease-in-out !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 4px !important;
}

/**
 * Select2 Multiple Selection - Focus State
 * Matches the focus styling of standard form inputs
 *
 * Properties:
 * - border-color: transparent - Removes border on focus
 * - outline: none - Removes default outline
 * - box-shadow: 0 0 0 2px #3b82f6 - Blue focus ring (blue-500)
 */
.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f6 !important;
}

/**
 * Select2 Choice Tags
 * Individual selected items displayed as tags
 *
 * Properties:
 * - background-color: #f3f4f6 - Tailwind gray-100 for subtle appearance
 * - border: 1px solid #e5e7eb - Tailwind gray-200 for definition
 * - border-radius: 6px - Slightly smaller radius for tags
 * - color: #374151 - Tailwind gray-700 for readability
 * - font-size: 14px - Consistent with form inputs
 * - padding: 4px 8px 4px 2px - Asymmetric padding for better remove button spacing
 * - margin: 2px - Small spacing between tags
 * - line-height: 1.4 - Proper text vertical alignment
 */
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  color: #374151 !important;
  font-size: 14px !important;
  padding: 4px 8px 4px 2px !important;
  margin: 2px !important;
  line-height: 1.4 !important;
}

/**
 * Select2 Choice Remove Button
 * X button to remove selected tags with improved positioning
 *
 * Properties:
 * - color: #6b7280 - Tailwind gray-500 for subtle appearance
 * - font-weight: bold - Makes X more visible
 * - transition: color 0.2s ease-in-out - Smooth hover effect
 * - position: relative - For precise positioning control
 * - margin-right: 2px - Spacing from tag edge
 */
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: #6b7280 !important;
  font-weight: bold !important;
  transition: color 0.2s ease-in-out !important;
  position: relative;
  margin-right: 2px;
}

/**
 * Select2 Clear All Button
 * Button to clear all selected tags at once
 *
 * Properties:
 * - top: 5px - Positioned from top of container
 * - right: 5px - Positioned from right edge
 * - margin: 0 - Remove default margins
 * - height: auto - Natural height for better alignment
 * - line-height: 1em - Compact vertical spacing
 */
.select2-container--default
  .select2-selection--multiple
  .select2-selection__clear {
  top: 5px !important;
  right: 5px !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1em;
}

/**
 * Select2 Remove and Clear Buttons - Hover State
 * Darker color on hover for both individual remove and clear all buttons
 *
 * Properties:
 * - color: #dc2626 - Tailwind red-600 for clear removal indication
 */
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__clear:hover {
  color: #dc2626 !important;
}

/**
 * Select2 Inline Search Container
 * Container for the search input field within multi-select
 *
 * Properties:
 * - display: flex - Flexbox layout for better control
 * - height: 30px - Fixed height for consistent appearance
 */
.select2-container--default .select2-search--inline {
  display: flex !important;
  height: 30px !important;
}

/**
 * Select2 Inline Search Input Field
 * The actual search input field within multi-select
 *
 * Properties:
 * - border: none - Seamless integration with container
 * - outline: none - No additional focus styling
 * - background: transparent - Inherits container background
 * - font-size: 14px - Consistent with form inputs
 * - color: #374151 - Tailwind gray-700 for readability
 * - min-width: 100px - Ensures usable search area
 * - padding: 4px 0 - Minimal padding for alignment
 */
.select2-container--default .select2-search--inline .select2-search__field {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  color: #374151 !important;
  min-width: 100px !important;
  padding: 0 !important;
  padding: 4px !important;
  margin: 0 !important;
  resize: none !important;
  height: 100% !important;
}
/**
 * Select2 Inline Search Input - Placeholder
 * Styling for placeholder text in search field
 *
 * Properties:
 * - color: #9ca3af - Tailwind gray-400 for subtle placeholder
 */
.select2-container--default
  .select2-search--inline
  .select2-search__field::placeholder {
  color: #9ca3af !important;
}

/**
 * Select2 Error State
 * Applies a solid red border to Select2 single and multiple selection elements
 * when they have the 'has-error' class, indicating a validation error.
 *
 * - border: 2px solid #ef4444 (Tailwind red-500)
 * - !important: ensures error border overrides default styles
 */
.select2-selection--multiple.has-error,
.select2-selection--single.has-error {
  border: 2px solid #ef4444 !important;
}

/**
 * ===== FILE UPLOAD ZONE STYLING =====
 *
 * Custom file upload dropzone component for drag-and-drop file selection.
 *
 * .file-upload-zone
 *   - Dashed border: visually indicates drop area
 *   - Rounded corners: matches app's input style
 *   - Smooth transition: animates border/background on interaction
 *
 * .file-upload-zone:hover
 *   - Blue border/background: highlights dropzone on hover (Tailwind blue-500/bg-slate-50)
 *
 * .file-upload-zone.drag-over
 *   - Blue border/background: active state when file is dragged over (Tailwind blue-500/bg-blue-50)
 *
 * .file-upload-zone.error
 *   - Red solid border/background: error state (Tailwind red-500/bg-red-50)
 *   - !important: ensures error styles override other states
 *
 * .file-upload-zone.error:hover
 *   - Maintains error colors on hover
 */

.file-upload-zone {
  border: 2px dashed #d1d5db; /* Tailwind gray-300 */
  border-radius: 8px; /* Rounded corners */
  transition: all 0.2s ease-in-out; /* Smooth border/background transition */
}

.file-upload-zone:hover {
  border-color: #3b82f6; /* Tailwind blue-500 */
  background-color: #f8fafc; /* Tailwind slate-50 */
}

.file-upload-zone.drag-over {
  border-color: #3b82f6; /* Tailwind blue-500 */
  background-color: #eff6ff; /* Tailwind blue-50 */
}

.file-upload-zone.error {
  border: 2px solid #ef4444 !important; /* Tailwind red-500 */
  background-color: #fef2f2 !important; /* Tailwind red-50 */
}

.file-upload-zone.error:hover {
  border-color: #ef4444 !important; /* Tailwind red-500 */
  background-color: #fef2f2 !important; /* Tailwind red-50 */
}

/* ===== TOGGLE SWITCH STYLING ===== */

/**
 * Toggle Switch Base
 * Custom toggle switch component with precise positioning and complex states
 *
 * Properties:
 * - position: relative - For absolute positioning of child elements
 * - display: inline-flex - Flexible inline container
 * - height: 1.25rem, width: 2.25rem - Standard toggle dimensions
 * - border-radius: 9999px - Fully rounded for pill shape
 * - transition: all 0.3s cubic-bezier - Smooth animation curve
 * - box-shadow: inset - Inner shadow for depth
 */
.toggle-switch {
  position: relative;
  display: inline-flex;
  height: 1.25rem;
  width: 2.25rem;
  align-items: center;
  border-radius: 9999px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/**
 * Toggle Switch - Active State
 * Green background with focus ring for enabled state
 *
 * Properties:
 * - background-color: #10b981 - Tailwind emerald-500
 * - box-shadow: inset + focus ring - Combined shadow effects
 */
.toggle-switch.active {
  background-color: #10b981;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
    0 0 0 2px rgba(16, 185, 129, 0.1);
}

/**
 * Toggle Switch - Inactive State
 * Gray background for disabled state
 *
 * Properties:
 * - background-color: #d1d5db - Tailwind gray-300
 */
.toggle-switch.inactive {
  background-color: #d1d5db;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/**
 * Toggle Switch - Hover Effect
 * Scale transform on hover for interactive feedback
 *
 * Properties:
 * - transform: scale(1.05) - Subtle enlargement on hover
 */
.toggle-switch:hover:not(:disabled) {
  transform: scale(1.05);
}

/**
 * Toggle Switch - Disabled State
 * Visual feedback for disabled state
 *
 * Properties:
 * - cursor: not-allowed - Indicates non-interactive state
 * - opacity: 0.6 - Reduced visibility for disabled state
 */
.toggle-switch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/**
 * Toggle Switch Slider
 * The circular slider that moves within the toggle
 *
 * Properties:
 * - height/width: 0.875rem - Slightly smaller than container
 * - border-radius: 50% - Perfect circle
 * - background-color: white - Contrast against background
 * - z-index: 10 - Ensures slider appears above background
 * - box-shadow: 0 2px 4px - Drop shadow for depth
 */
.toggle-switch .toggle-slider {
  display: inline-block;
  height: 0.875rem;
  width: 0.875rem;
  border-radius: 50%;
  background-color: white;
  position: relative;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/**
 * Toggle Switch Slider - Active Position
 * Moves slider to the right when toggle is active
 *
 * Properties:
 * - transform: translateX(19px) - Precise positioning for active state
 */
.toggle-switch.active .toggle-slider {
  transform: translateX(19px);
}

/**
 * Toggle Switch Slider - Inactive Position
 * Moves slider to the left when toggle is inactive
 *
 * Properties:
 * - transform: translateX(3px) - Precise positioning for inactive state
 */
.toggle-switch.inactive .toggle-slider {
  transform: translateX(3px);
}

/**
 * Toggle Switch - Loading State
 * Disables pointer events during loading
 *
 * Properties:
 * - pointer-events: none - Prevents interaction during loading
 */
.toggle-switch.loading {
  pointer-events: none;
}

/**
 * Toggle Switch Slider - Loading State
 * Changes slider appearance during loading
 *
 * Properties:
 * - background-color: #f3f4f6 - Tailwind gray-100 for loading state
 */
.toggle-switch.loading .toggle-slider {
  background-color: #f3f4f6;
}

/**
 * Toggle Switch Loading Spinner
 * Creates animated spinner using pseudo-element
 *
 * Properties:
 * - content: "" - Required for pseudo-element
 * - border: 1.5px solid transparent - Creates spinner shape
 * - border-top-color: #6b7280 - Visible spinner color
 * - animation: toggle-spin 0.8s linear infinite - Continuous rotation
 */
.toggle-switch.loading .toggle-slider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1.5px solid transparent;
  border-top-color: #6b7280;
  border-radius: 50%;
  animation: toggle-spin 0.8s linear infinite;
}

/**
 * Toggle Spin Animation
 * Keyframes for loading spinner rotation
 *
 * Animation:
 * - 0%: rotate(0deg) - Starting position
 * - 100%: rotate(360deg) - Full rotation
 */
@keyframes toggle-spin {
  0% {
    transform: rotate(0deg);
  }

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

/* Action buttons styling - using Tailwind values in regular CSS */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  outline: none;
}

.action-btn:focus {
  box-shadow: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Tooltip styling - using Tailwind values in regular CSS */
.action-tooltip {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: #1f2937;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 50;
  max-width: 250px;
}

.group:hover .action-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.tooltip-arrow {
  position: absolute;
  top: 100%;
  right: 1rem;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #1f2937;
}

/* Ensure actions column doesn't contribute to horizontal scroll */
.actions-column {
  overflow: visible;
}

/* Ensure table rows don't clip the action menu */
.job-row {
  position: relative;
}

/* ===== ACTION MENU STYLING ===== */

/**
 * Action Menu Container
 * Container for the three-dot menu and dropdown
 */
.action-menu-container {
  position: relative;
  display: inline-block;
}

/**
 * Action Menu Trigger Button
 * Three vertical dots button that opens the menu
 */
.action-menu-trigger {
  cursor: pointer;
  outline: none;
  border: none;
  background: transparent;
}

.action-menu-trigger:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/**
 * Action Menu Dropdown
 * The actual dropdown menu that appears to the left of the trigger, vertically centered
 */
.action-menu {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  margin-right: 0.5rem;
  min-width: 14rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out,
    visibility 0.2s;
}

.action-menu.active {
  opacity: 1;
  visibility: visible;
}

/* Only apply transform when not using fixed positioning (fallback) */
.action-menu.active:not([style*="position: fixed"]) {
  transform: translateY(-50%) translateX(0);
}

/**
 * Action Menu - Top Aligned
 * For rows near the top of the viewport, align menu's top with button's top
 * This prevents the menu from extending above the button and getting clipped
 */
.action-menu.align-top {
  top: 0;
  bottom: auto;
  /* Keep on the left, but align top edge instead of center */
  transform: translateY(0) translateX(-8px);
  /* Add max-height and scrolling if needed */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.action-menu.align-top.active:not([style*="position: fixed"]) {
  transform: translateY(0) translateX(0);
}

/**
 * Action Menu - Bottom Aligned
 * For rows near the bottom of the viewport, align menu's bottom with button's bottom
 * This prevents the menu from extending below the viewport and getting clipped
 */
.action-menu.align-bottom {
  top: auto;
  bottom: 0;
  /* Keep on the left, but align bottom edge instead of center */
  transform: translateY(0) translateX(-8px);
  /* Add max-height and scrolling if needed */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.action-menu.align-bottom.active:not([style*="position: fixed"]) {
  transform: translateY(0) translateX(0);
}

/**
 * Action Menu Item
 * Individual items within the dropdown menu
 */
.action-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
}

.action-menu-item:hover:not(:disabled) {
  background-color: #f9fafb;
}

.action-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.action-menu-item:focus {
  outline: none;
  background-color: #f3f4f6;
}

/* Special hover state for delete button */
.action-menu-item.delete-job-btn:hover:not(:disabled) {
  background-color: #fef2f2;
}

/**
 * Action Menu Divider
 * Visual separator between menu sections
 */
.action-menu .border-t {
  margin: 0.25rem 0;
}

/* Job title truncation and tooltip styling */
.job-title-truncated {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.job-title-tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #1f2937;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 50;
  max-width: 350px;
  line-height: 1.4;
}

/* First row tooltip positioning - show below */
.first-row .job-title-tooltip {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

.group:hover .job-title-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/* First row tooltip hover positioning - show below */
.first-row .group:hover .job-title-tooltip {
  transform: translateY(0px);
}

.job-title-tooltip .tooltip-arrow {
  position: absolute;
  top: 100%;
  left: 1rem;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #1f2937;
}

/* First row tooltip arrow - point upward */
.first-row .job-title-tooltip .tooltip-arrow {
  top: auto;
  bottom: 100%;
  border-top: none;
  border-bottom: 4px solid #1f2937;
}



/* Color classes for different interview status */

[class^="interview-status-pill"],
[class*=" interview-status-pill"] {
  /* shared look */
  --pill-bg: #dcfce7;               /* same bg you used for all statuses */
  --pill-fg: #374151;               /* default fallback text color */
  background-color: var(--pill-bg) !important;
  color: var(--pill-fg) !important;

  display: inline-flex;
  align-items: center;
  gap: 0.375rem;                    /* 6px */
  padding: 0.5rem 0.75rem;          /* 4px 8px */
  border-radius: 9999px;            /* full pill */
  font-size: 0.75rem;               /* 12px */
  font-weight: 600;                 /* semibold */
  line-height: 1;
  white-space: nowrap;
}

/* Map statuses to their text colors (group duplicates) */

.interview-status-pill-scheduled {
  --pill-bg: #dbeafe;       /* blue-100 */
  --pill-fg: #1e40af;       /* blue-800 */
  --pill-border: #bfdbfe;   /* blue-200 */
}

.interview-status-pill-not_scheduled, .interview-status-pill-slots_pending {
  --pill-bg: #f3f4f6;       /* gray-100 */
  --pill-fg: #4b5563;       /* gray-600 */
  --pill-border: #e5e7eb;   /* gray-200 */
}

.interview-status-pill-re_scheduled {
  --pill-bg: #fef3c7;       /* amber-100 */
  --pill-fg: #92400e;       /* amber-700 */
  --pill-border: #fde68a;   /* amber-200 */
}

.interview-status-pill-canceled {
  --pill-bg: #fee2e2;       /* red-100 */
  --pill-fg: #b91c1c;       /* red-700 */
  --pill-border: #fecaca;   /* red-200 */
}

.interview-status-pill-passed {
  --pill-bg: #dcfce7;       /* green-100 */
  --pill-fg: #166534;       /* green-800 */
  --pill-border: #bbf7d0;   /* green-200 */
}

.interview-status-pill-failed {
  --pill-bg: #ffe4e6;       /* rose-100 */
  --pill-fg: #9f1239;       /* rose-800 */
  --pill-border: #fecdd3;   /* rose-200 */
}

[class^="interview-status-pill"]:hover,
[class*=" interview-status-pill"]:hover {
  filter: brightness(0.97);
  transition: filter 0.15s ease;
}

/* Make the native time input feel like your text inputs */
input[type="time"] {
  font-size: 14px;
}

/* Chrome/Safari: align the clock icon & remove extra padding quirks */
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.75;
  cursor: pointer;
  margin-right: 2px;
  transition: opacity 0.15s ease-in-out;
}
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Hide spinners in some browsers that show numeric controls */
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox: ensure consistent height */
@-moz-document url-prefix() {
  input[type="time"] {
    padding-block: 0.5rem;
  }
}

td .text-xs {
  font-size: 0.8rem !important;
}

/* ===== GLOROOTS TA SELECT2 STYLING ===== */

/**
 * Gloroots TA Select2 - Compact styling for table cells
 * Reduces vertical padding to fit better in table rows
 */
.gloroots-ta-select + .select2-container .select2-selection--single {
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 8px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
}

.gloroots-ta-select + .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 22px !important;
  padding-left: 0 !important;
  font-size: 12px !important;
  color: #374151 !important;
}

.gloroots-ta-select + .select2-container .select2-selection--single .select2-selection__arrow {
  height: 26px !important;
  right: 4px !important;
}

.gloroots-ta-select + .select2-container .select2-selection--single .select2-selection__arrow b {
  margin-top: -3px !important;
}