/* ============================================ */
/* Irisa DatePicker Component Styles           */
/* ============================================ */
/* These styles override MudBlazor's default   */
/* DatePicker styling to match the ERP app.    */
/* ============================================ */

/* ============================================ */
/* CSS Variable Override for DatePicker        */
/* ============================================ */
/* Override MudBlazor's default border-radius  */
/* at the component level using CSS variables. */
/* This is the CLEANEST approach that avoids   */
/* specificity wars with MudBlazor.            */
/* ============================================ */

.irisa-datepicker-wrapper,
.irisa-datepicker,
.irisa-datepicker-wrapper *,
.irisa-datepicker * {
  --mud-default-borderradius: 8px;
}

/* ============================================ */
/* Calendar Popup Styles                       */
/* (Render in portal outside components)       */
/* ============================================ */

/* Month/Year button styling in calendar */
.mud-button-date {
  font-size: 20px !important;
  font-weight: 600 !important;
}

/* Day labels (weekday headers) */
.mud-day-label {
  color: black !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* RTL support - flip navigation arrows */
html[dir="rtl"] .mud-picker-nav-button-next .mud-icon-button-label .mud-icon-root {
  transform: scaleX(-1);
}

html[dir="rtl"] .mud-picker-nav-button-prev .mud-icon-button-label .mud-icon-root {
  transform: scaleX(-1);
}

/* ============================================ */
/* DatePicker Input Field Styles               */
/* ============================================ */

/* Wrapper for the datepicker with external label */
.irisa-datepicker-wrapper {
  width: 100%;
}

/* Label above the input - external label style */
.irisa-datepicker-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: #171E2B;
}

/* 
 * MudBlazor applies the Class parameter to mud-input-input-control
 * We need higher specificity selectors to override MudBlazor defaults
 */

/* Remove margin from input control */
.irisa-datepicker.mud-input-input-control .mud-input-control,
.mud-picker .irisa-datepicker .mud-input-control {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Hide the floating label since we have external label */
.irisa-datepicker.mud-input-input-control .mud-input-label,
.mud-picker .irisa-datepicker .mud-input-label {
  display: none !important;
}

/* Hide the fieldset legend (part of outlined floating label) */
.irisa-datepicker.mud-input-input-control .mud-input-outlined-border legend,
.mud-picker .irisa-datepicker .mud-input-outlined-border legend,
fieldset.mud-input-outlined-border legend {
  display: none !important;
}

/* Main input container - match the ERP styling */
/* Height: 36px, Content: 20px, Padding: 8px top/bottom, 12px start */
.irisa-datepicker.mud-input-input-control .mud-input.mud-input-outlined,
.mud-picker .irisa-datepicker .mud-input.mud-input-outlined {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  font-family: IRANYekanX, IRANYekan, Inter, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #212834 !important;
  letter-spacing: 0.14px !important;
  line-height: 20px !important;
  direction: rtl !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

.mud-input>input.mud-input-root,
div.mud-input-slot.mud-input-root {
  height: 20px !important;
  line-height: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #212834 !important;
  padding: 8px 12px !important;
}

/* DatePicker placeholder styling */
.mud-input>input.mud-input-root::placeholder,
div.mud-input-slot.mud-input-root::placeholder {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #D8DADD !important;
}

/* Input slot styling */
.irisa-datepicker.mud-input-input-control .mud-input-slot.mud-input-root,
.mud-picker .irisa-datepicker .mud-input-slot.mud-input-root {
  height: 20px !important;
  line-height: 20px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #212834 !important;
  padding: 8px 12px !important;
}

/* DatePicker input slot placeholder */
.irisa-datepicker.mud-input-input-control .mud-input-slot.mud-input-root::placeholder,
.mud-picker .irisa-datepicker .mud-input-slot.mud-input-root::placeholder {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #D8DADD !important;
}

/* Outlined border styling - use CSS variable + direct value for reliability */
/* Multiple selectors for different DOM structures MudBlazor might use */
.irisa-datepicker .mud-input-outlined-border,
.irisa-datepicker-wrapper .mud-input-outlined-border,
.irisa-datepicker.mud-picker-inline .mud-input-outlined-border,
.irisa-datepicker ~ .mud-input-control .mud-input-outlined-border,
div.irisa-datepicker-wrapper .mud-picker .mud-input-outlined-border,
.mud-picker.irisa-datepicker .mud-input-outlined-border,
.irisa-datepicker > .mud-input-control .mud-input-outlined-border {
  border-width: 0.8px !important;
  border-style: solid !important;
  border-color: rgb(189, 189, 189) !important;
  border-radius: 8px !important;
  transition: border-width 0s, border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fallback: Target ALL fieldsets within the wrapper with the outline border class */
.irisa-datepicker-wrapper fieldset.mud-input-outlined-border {
  border-radius: 8px !important;
}

/* ============================================ */
/* Hover & Focus States                        */
/* ============================================ */

/* Hover state */
.irisa-datepicker.mud-input-input-control .mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.mud-picker .irisa-datepicker .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
  border-color: rgb(100, 100, 100) !important;
}

/* Focus state */
.irisa-datepicker.mud-input-input-control .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.irisa-datepicker.mud-input-input-control .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border,
.mud-picker .irisa-datepicker .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.mud-picker .irisa-datepicker .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color: var(--mud-palette-primary, #1976d2) !important;
  border-width: 2px !important;
}

/* ============================================ */
/* Adornment & Button Styling                  */
/* ============================================ */

/* Adornment icons */
.irisa-datepicker.mud-input-input-control .mud-input-adornment-end,
.mud-picker .irisa-datepicker .mud-input-adornment-end {
  margin-right: 8px !important;
}

.irisa-datepicker.mud-input-input-control .mud-input-adornment .mud-icon-button,
.mud-picker .irisa-datepicker .mud-input-adornment .mud-icon-button {
  padding: 8px !important;
}

/* Clear button */
.irisa-datepicker.mud-input-input-control .mud-input-clear-button,
.mud-picker .irisa-datepicker .mud-input-clear-button {
  padding: 8px !important;
}

/* ============================================ */
/* State Variations                            */
/* ============================================ */

/* Error state */
.irisa-datepicker.mud-input-input-control .mud-input-error .mud-input-outlined-border,
.mud-picker .irisa-datepicker .mud-input-error .mud-input-outlined-border {
  border-color: var(--mud-palette-error, #d32f2f) !important;
}

/* Disabled state */
.irisa-datepicker.mud-input-input-control .mud-input.mud-disabled .mud-input-outlined-border,
.mud-picker .irisa-datepicker .mud-input.mud-disabled .mud-input-outlined-border {
  border-color: rgba(189, 189, 189, 0.5) !important;
}

.irisa-datepicker.mud-input-input-control .mud-input.mud-disabled .mud-input-slot,
.mud-picker .irisa-datepicker .mud-input.mud-disabled .mud-input-slot {
  color: rgba(15, 23, 42, 0.5) !important;
}

.mud-icon-root{
  width: 16px !important;
  height: 18px !important;
}