/* OVERRIDE TOTALE PER INPUT FORM */
/* Questo file DEVE essere caricato DOPO Bootstrap e modern.css */

/* EXCLUDE form-floating from global fixes - Bootstrap manages it */
html[data-bs-theme="dark"] .form-control:not(.form-floating .form-control),
html[data-bs-theme="dark"] .form-select:not(.form-floating .form-select),
html[data-bs-theme="dark"]
  input:not([type="checkbox"]):not([type="radio"]):not(.btn-check):not(
    .form-floating input
  ),
html[data-bs-theme="dark"] select:not(.form-floating select),
html[data-bs-theme="dark"] textarea:not(.form-floating textarea),
[data-bs-theme="dark"] .form-control:not(.form-floating .form-control),
[data-bs-theme="dark"] .form-select:not(.form-floating .form-select),
[data-bs-theme="dark"]
  input:not([type="checkbox"]):not([type="radio"]):not(.btn-check):not(
    .form-floating input
  ),
[data-bs-theme="dark"] select:not(.form-floating select),
[data-bs-theme="dark"] textarea:not(.form-floating textarea),
.form-control:not(.form-floating .form-control),
.form-select:not(.form-floating .form-select),
input.form-control:not(.form-floating .form-control),
select.form-select:not(.form-floating .form-select),
textarea.form-control:not(.form-floating textarea) {
  background-color: rgb(255, 255, 255) !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
  border: 2px solid rgb(209, 213, 219) !important;
  -webkit-text-fill-color: rgb(0, 0, 0) !important;
  opacity: 1 !important;
  color-scheme: light !important;
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

html[data-bs-theme="dark"]
  .form-control:focus:not(.form-floating .form-control),
html[data-bs-theme="dark"] .form-select:focus:not(.form-floating .form-select),
html[data-bs-theme="dark"] input:focus:not(.form-floating input),
html[data-bs-theme="dark"] select:focus:not(.form-floating select),
html[data-bs-theme="dark"] textarea:focus:not(.form-floating textarea),
.form-control:focus:not(.form-floating .form-control),
.form-select:focus:not(.form-floating .form-select) {
  background-color: rgb(255, 255, 255) !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
  border-color: rgb(99, 102, 241) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3) !important;
  -webkit-text-fill-color: rgb(0, 0, 0) !important;
}

html[data-bs-theme="dark"]
  .form-control::placeholder:not(.form-floating .form-control),
.form-control::placeholder:not(.form-floating .form-control),
input::placeholder:not(.form-floating input) {
  color: rgb(156, 163, 175) !important;
  -webkit-text-fill-color: rgb(156, 163, 175) !important;
  opacity: 1 !important;
}

html[data-bs-theme="dark"] .form-select option,
.form-select option,
select option {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
}

/* Date input specifici - exclude form-floating */
input[type="date"]:not(.form-floating input),
input[type="datetime-local"]:not(.form-floating input),
input[type="time"]:not(.form-floating input),
input[type="month"]:not(.form-floating input),
input[type="week"]:not(.form-floating input) {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
  color-scheme: light !important;
  -webkit-text-fill-color: rgb(0, 0, 0) !important;
}

/* Webkit autofill override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: rgb(0, 0, 0) !important;
  background-color: rgb(255, 255, 255) !important;
}

/* Campi readonly/calcolati - mantieni stile diverso */
.calculated-field {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: rgb(239, 68, 68) !important;
  -webkit-text-fill-color: rgb(239, 68, 68) !important;
  border-color: rgb(239, 68, 68) !important;
}

/* ===== FIX FLOATING LABELS IN DARK MODE ===== */
/* Force white background for floating labels when active - improved styling */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]):not(:placeholder-shown) ~ label {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #6366f1 !important;
  padding: 0.15rem 0.6rem !important;
  max-width: fit-content !important;
  border-radius: 0.375rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* Fix Bootstrap ::after pseudo-element that creates the label background */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select:focus ~ label::after,
.form-floating
  > .form-select:not([value=""]):not(:placeholder-shown)
  ~ label::after {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 0.375rem !important;
  display: none !important;
}

/* Fix for select elements - force white background immediately */
.form-floating > .form-select ~ label,
.form-floating > .form-select ~ label::after {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Fix label positioning */
.form-floating > label {
  height: auto !important;
  line-height: 1.4 !important;
  pointer-events: none !important;
}

/* ===== CATEGORY AND STATE BUTTONS CONSISTENCY ===== */
 .categoria-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.categoria-buttons .btn-check + label,
.categoria-buttons label.btn {
    border: 1px solid currentColor !important;
    transition: all 0.2s ease-in-out !important;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.categoria-buttons .btn-check + label:hover,
.categoria-buttons label.btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  filter: brightness(1.1) !important;
}

.categoria-buttons .btn-check:checked + label {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  border-color: transparent !important;
}


/* Fix COMMERCIALISTA button - make it visible in dark mode */
.btn-outline-dark {
  color: #a78bfa !important;
  border-color: #a78bfa !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:active,
.btn-outline-dark:focus {
  background-color: #a78bfa !important;
  color: #000 !important;
}

/* Make COMMERCIALISTA purple when checked */
.btn-check:checked + .btn-outline-dark {
  background-color: #a78bfa !important;
  border-color: #a78bfa !important;
  color: #000 !important;
}

/* ===== FORM SWITCH IMPROVEMENTS ===== */
/* Override Bootstrap's dark mode form switch completely */
html[data-bs-theme="dark"] .form-switch .form-check-input,
.form-switch .form-check-input {
  width: 3rem !important;
  height: 1.5rem !important;
  cursor: pointer !important;
  background: #475569
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
    no-repeat left center !important;
  background-size: 1.5rem 1.5rem !important;
  border-color: #64748b !important;
  transition: all 0.2s ease-in-out !important;
}

/* Checked state - always green using shorthand */
html[data-bs-theme="dark"] .form-switch .form-check-input:checked,
.form-switch .form-check-input:checked {
  background: #10b981
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
    no-repeat right center !important;
  background-size: 1.5rem 1.5rem !important;
  border-color: #10b981 !important;
}

/* All checked states combined - maximum specificity */
html[data-bs-theme="dark"] .form-switch .form-check-input:checked,
html[data-bs-theme="dark"] .form-switch .form-check-input:checked:hover,
html[data-bs-theme="dark"] .form-switch .form-check-input:checked:focus,
html[data-bs-theme="dark"] .form-switch .form-check-input:checked:active,
html[data-bs-theme="dark"] .form-switch .form-check-input:checked:focus-visible,
.form-switch .form-check-input:checked,
.form-switch .form-check-input:checked:hover,
.form-switch .form-check-input:checked:focus,
.form-switch .form-check-input:checked:active,
.form-switch .form-check-input:checked:focus-visible {
  background: #10b981
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
    no-repeat right center !important;
  background-size: 1.5rem 1.5rem !important;
  border-color: #10b981 !important;
}

/* Active state when unchecked - keep gray */
html[data-bs-theme="dark"] .form-switch .form-check-input:active:not(:checked),
html[data-bs-theme="dark"]
  .form-switch
  .form-check-input:active:hover:not(:checked),
html[data-bs-theme="dark"] .form-switch .form-check-input:hover:not(:checked),
html[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:checked),
.form-switch .form-check-input:active:not(:checked),
.form-switch .form-check-input:active:hover:not(:checked),
.form-switch .form-check-input:hover:not(:checked),
.form-switch .form-check-input:focus:not(:checked) {
  background: #475569
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")
    no-repeat left center !important;
  background-size: 1.5rem 1.5rem !important;
  border-color: #64748b !important;
}

/* Focus state - green shadow */
html[data-bs-theme="dark"] .form-switch .form-check-input:focus,
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25) !important;
}

.form-switch .form-check-label {
  cursor: pointer !important;
}

/* ===== DATE INPUTS ===== */
/* Hide native calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* Date input container for custom icon - both floating and non-floating */
.date-input-wrapper {
  position: relative;
}

.date-input-wrapper input {
  padding-right: 3rem !important;
}

.date-input-wrapper .calendar-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6366f1;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s ease;
}

.date-input-wrapper .calendar-icon:hover {
  color: #4f46e5;
}

/* Fix positioning for non-floating forms with position-relative */
.date-input-wrapper.position-relative {
  position: relative !important;
}

.date-input-wrapper.position-relative .calendar-icon {
  top: 1rem !important;
  transform: none !important;
}

/* ====================================================================
   REUSABLE COMPONENT CLASSES - Clean Code / DRY / SOLID

   Usage Examples:
   1. Floating date field: <div class="form-floating date-field-float">
   2. Standard date field: <div class="date-field">
   3. Styled switch: <div class="form-switch styled-switch">
==================================================================== */

/* ===== DATE FIELD FLOATING ===== */
.date-field-float {
  position: relative;
}

.date-field-float .form-control {
  padding-right: 3rem !important;
}

.date-field-float .calendar-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6366f1;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s ease;
}

.date-field-float .calendar-icon:hover {
  color: #4f46e5;
}

/* ===== DATE FIELD STANDARD ===== */
.date-field {
  position: relative;
}

.date-field input {
  padding-right: 3rem !important;
}

.date-field .calendar-icon {
  position: absolute;
  right: 1rem;
  top: 1rem;
  color: #6366f1;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s ease;
}

.date-field .calendar-icon:hover {
  color: #4f46e5;
}

/* ===== STYLED SWITCH ===== */
.styled-switch {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  min-height: 38px;
}

.styled-switch .form-check-label {
  margin-left: 1rem;
  margin-top: 0;
  display: block;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* ===== BUTTON GROUP ===== */
.button-group-styled {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ===== SHARED FORM STRUCTURE CLASSES ===== */
/* Form card container */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  overflow: hidden;
}

/* Form header with gradient */
.form-header {
  padding: 1.5rem 2rem;
  color: white;
}

.form-header h2 {
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Form body padding */
.form-body {
  padding: 2rem;
}

/* Section divider with icons */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* Currency input - right aligned */
.currency-input {
  text-align: right;
  font-weight: 600;
  font-size: 1.1rem;
}

/* Calculated/readonly field highlighting */
.calculated-field {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  -webkit-text-fill-color: #ef4444 !important;
  font-weight: 700;
}

.calculated-field.success {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
  font-weight: 700;
}

/* Form actions buttons container */
.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}

/* Form help text */
.form-text {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* ===== SALARY PREVIEW COMPONENT ===== */
.salary-preview {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1rem;
  margin-top: 1rem;
}

.salary-preview h6 {
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.salary-preview-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border-color);
  color: var(--text-secondary);
}

.salary-preview-item:last-child {
  border-bottom: none;
  font-weight: 700;
  color: var(--primary);
}

.salary-preview-item.highlight {
  color: #f97316;
}