/* ============================================================
   DentalClinic — Shared Components (components.css)
   Unified field classes used across ALL pages
   ============================================================ */

/* ═══ Field Group — Wrapper ═══ */
.field-group {
  position: relative;
  margin-bottom: var(--field-gap);
}

/* ═══ Field Label ═══ */
.field-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-label);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
  transition: color var(--transition-fast);
}

.field-label .req {
  color: inherit;
}


/* ═══ Field Input ═══ */
.field-input {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--field-padding-y) var(--field-padding-x);
  font-size: var(--font-size-base);
  font-family: inherit;
  background: var(--color-bg-input);
  color: var(--color-text);
  transition: all var(--transition-smooth);
  min-height: var(--field-min-height);
  box-sizing: border-box;
  outline: none;
}

.field-input::placeholder {
  color: var(--color-placeholder);
  font-weight: 400;
}

.field-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  background: var(--color-bg-input-focus);
  transform: translateY(-1px);
}

/* ═══ Validation ═══ */
.field-input:user-invalid:not(:focus) {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger-light);
}

.was-validated .field-input:invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px var(--color-danger-light) !important;
}

.field-input.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px var(--color-danger-light) !important;
}

/* ═══ Field Icon ═══ */
.field-group .field-icon {
  position: absolute;
  inset-inline-start: var(--field-icon-offset);
  bottom: 0;
  height: var(--field-min-height);
  display: flex;
  align-items: center;
  color: var(--color-label);
  font-size: var(--field-icon-size);
  pointer-events: none;
  transition: color var(--transition-fast);
  z-index: 1;
}

.field-group:focus-within .field-icon {
  color: var(--color-primary);
}

.field-group.has-icon .field-input {
  padding-inline-start: var(--field-icon-padding);
}

/* LTR inputs in RTL: icon stays on the right, padding must be physical-right */
html[dir="rtl"] .field-group.has-icon .field-input[dir="ltr"] {
  padding-inline-start: var(--field-padding-x);
  padding-right: var(--field-icon-padding);
}

/* ═══ Select ═══ */
.field-input[is="select"],
select.field-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 0.85rem) center;
  background-size: 16px;
}

html[dir="rtl"] select.field-input {
  background-position: 0.85rem center;
}

select.field-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230096D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

select.field-input option {
  background: var(--color-bg-card);
  color: var(--color-text);
  padding: 0.5rem;
}

/* ═══ Number input — hide spinners ═══ */
.field-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.field-input[type="number"]::-webkit-outer-spin-button,
.field-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ═══ LTR text in inputs ═══ */
.field-input.input-ltr {
  text-align: left;
  unicode-bidi: plaintext;
}

/* ═══ Date Input — RTL calendar icon fix ═══ */
html[dir="rtl"] input[type="date"].field-input,
html[dir="rtl"] input[type="date"].form-control,
html[dir="rtl"] input[type="date"].date-input {
  position: relative;
}

html[dir="rtl"] input[type="date"].field-input::-webkit-calendar-picker-indicator,
html[dir="rtl"] input[type="date"].form-control::-webkit-calendar-picker-indicator,
html[dir="rtl"] input[type="date"].date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0.5rem;
  right: auto;
  cursor: pointer;
}


/* ═══ Row Layout (2 cols) ═══ */
.field-row {
  display: flex;
  gap: 0.75rem;
}

.field-row .field-group {
  flex: 1;
}

.field-row .field-group.field-sm {
  flex: 0 0 35%;
  max-width: 35%;
}

/* ═══ Section Card ═══ */
.section-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.section-card-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
}

.section-card-header i {
  color: var(--color-primary);
  font-size: 20px;
}

.section-card-body {
  padding: 22px;
}

/* ═══ Save Button ═══ */
.btn-save {
  background: linear-gradient(135deg, var(--color-primary), #00b4d8);
  border: none;
  color: #fff;
  padding: 10px 28px;
  border-radius: var(--radius-input);
  font-weight: 500;
  font-size: var(--font-size-base);
  transition: all var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--color-primary-shadow);
  color: #fff;
}

.btn-save:active {
  transform: translateY(0);
}

.btn-save.saving {
  opacity: 0.7;
  pointer-events: none;
}

/* ═══ Gender Selector ═══ */
.gender-pills {
  display: flex;
  gap: 10px;
}

.gender-pill {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--field-padding-y);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-bg-input);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.gender-pill:hover {
  border-color: #cbd5e1;
}

.gender-pill input {
  display: none;
}

.gender-pill:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 150, 214, 0.08);
}

/* ═══ Field Select (with icon) ═══ */
.field-select {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: var(--field-padding-y) 36px var(--field-padding-y) var(--field-padding-x);
  font-size: var(--font-size-base);
  background: var(--color-bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z'/%3E%3C/svg%3E") no-repeat;
  background-position: left 12px center;
  cursor: pointer;
  color: var(--color-text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

[dir="ltr"] .field-select,
:root:not([dir="rtl"]) .field-select {
  padding: var(--field-padding-y) var(--field-padding-x) var(--field-padding-y) 36px;
  background-position: right 12px center;
}

.field-select:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}

/* ═══ Mobile Responsive ═══ */
@media (max-width: 575.98px) {
  .section-card:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .section-card-body {
    padding: 16px 14px;
  }

  .section-card-header {
    padding: 12px 14px;
    font-size: 0.88rem;
  }

  .btn-save {
    width: 100%;
    justify-content: center;
  }

  /* ─── Compact Toasts on Mobile ─── */
  #toast-container {
    top: 10px;
    width: 90%;
    max-width: 90vw;
  }

  .custom-toast {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.82rem;
    gap: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  .custom-toast i {
    font-size: 0.95rem;
  }

  #toast-container>div {
    border-radius: 10px !important;
    padding: 10px 32px 10px 14px !important;
    font-size: 0.82rem !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    min-width: 150px !important;
    max-width: 85vw !important;
  }

  html[dir="rtl"] #toast-container>div {
    padding: 10px 14px 10px 32px !important;
  }

  #toast-container>div .toast-message {
    font-size: 0.75rem !important;
  }

  #toast-container .toast-close-button {
    top: 6px !important;
    right: 8px !important;
    font-size: 1rem !important;
  }

  html[dir="rtl"] #toast-container .toast-close-button {
    right: auto !important;
    left: 8px !important;
  }
}

/* ═══════════════════════════════════════════════
   Unified Modal Footer
   Save → inline-end, Cancel → inline-start
   ═══════════════════════════════════════════════ */

.modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  flex-direction: row-reverse !important;
  gap: 0.5rem;
  padding: 0.75rem 1rem !important;
}

.modal-footer .btn {
  min-width: 90px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 1rem;
  transition: all 0.2s ease;
}

.modal-footer .btn-light {
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.modal-footer .btn-light:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════
   Unified Toast Notifications
   Works with both showToast() and toastr.js
   ═══════════════════════════════════════════════ */

/* ─── Custom Toast (showToast function) ─── */
#toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.custom-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  transform: translateY(-40px);
  opacity: 0;
  pointer-events: auto;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease;
  max-width: min(90vw, 480px);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .custom-toast {
    padding: 12px 20px;
    font-size: 0.85rem;
    border-radius: 12px;
  }
}

[dir="rtl"] .custom-toast {
  transform: translateY(-40px);
}

.custom-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.custom-toast i {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ─── Shared Color Palette (custom-toast + toastr) ─── */
.toast-success,
#toast-container>.toast-success {
  background: linear-gradient(135deg, #059669, #10B981) !important;
  color: #fff !important;
  border: none !important;
}

.toast-error,
#toast-container>.toast-error {
  background: linear-gradient(135deg, #DC2626, #EF4444) !important;
  color: #fff !important;
  border: none !important;
}

.toast-warning,
#toast-container>.toast-warning {
  background: linear-gradient(135deg, #D97706, #F59E0B) !important;
  color: #fff !important;
  border: none !important;
}

.toast-info,
#toast-container>.toast-info {
  background: linear-gradient(135deg, #0077B6, #0096D6) !important;
  color: #fff !important;
  border: none !important;
}

/* ─── RTL Gradient Mirror ─── */
[dir="rtl"] .toast-success,
html[dir="rtl"] #toast-container>.toast-success {
  background: linear-gradient(225deg, #059669, #10B981) !important;
}

[dir="rtl"] .toast-error,
html[dir="rtl"] #toast-container>.toast-error {
  background: linear-gradient(225deg, #DC2626, #EF4444) !important;
}

[dir="rtl"] .toast-warning,
html[dir="rtl"] #toast-container>.toast-warning {
  background: linear-gradient(225deg, #D97706, #F59E0B) !important;
}

[dir="rtl"] .toast-info,
html[dir="rtl"] #toast-container>.toast-info {
  background: linear-gradient(225deg, #0077B6, #0096D6) !important;
}

/* ─── Toastr.js Library Overrides ─── */
#toast-container>div {
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  padding: 14px 40px 14px 20px !important;
  opacity: 1 !important;
  font-family: 'Tajawal', 'IBM Plex Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  border: none !important;
  backdrop-filter: blur(8px);
  background-image: none !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: min(90vw, 480px) !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.5 !important;
  position: relative !important;
}

@media (max-width: 480px) {
  #toast-container>div {
    padding: 12px 20px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    min-width: unset !important;
  }
}

/* Center toastr container */
.toast-top-right,
.toast-top-left,
.toast-top-center {
  top: 20px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* Toastr entrance animation — slide from top */
#toast-container>div.toast {
  animation: toastCenterIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Toastr exit animation */
#toast-container>div.toast-hidden {
  animation: toastCenterOut 0.35s ease forwards;
}

@keyframes toastCenterIn {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toastCenterOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-40px);
    opacity: 0;
  }
}

/* RTL — same centered animation */
html[dir="rtl"] #toast-container>div.toast {
  animation-name: toastCenterIn;
}

html[dir="rtl"] #toast-container>div.toast-hidden {
  animation-name: toastCenterOut;
}

#toast-container>div .toast-title {
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  margin-bottom: 4px !important;
}

#toast-container>div .toast-message {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

#toast-container .toast-close-button {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 400 !important;
  font-size: 1.2rem !important;
  text-shadow: none !important;
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
}

#toast-container .toast-close-button:hover {
  color: #fff !important;
}

#toast-container .toast-progress {
  background: rgba(255, 255, 255, 0.35) !important;
  height: 3px !important;
  border-radius: 0 0 14px 14px !important;
}

/* ─── Toastr RTL ─── */
html[dir="rtl"] #toast-container>div {
  padding: 14px 20px 14px 40px !important;
  direction: rtl;
}

html[dir="rtl"] #toast-container .toast-close-button {
  right: auto !important;
  left: 12px !important;
}

/* ═══════════════════════════════════════════════
   Select2 — Unified Design System
   Shared across ALL pages
   ═══════════════════════════════════════════════ */

.select2-container {
  width: 100% !important;
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
  height: var(--field-min-height) !important;
  min-height: var(--field-min-height) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-input) !important;
  background-color: var(--color-bg-input) !important;
  padding: 0 50px 0 10px !important;
  font-size: var(--font-size-base) !important;
  transition: all 0.2s ease;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-family: inherit;
  padding: 0;
  line-height: normal;
  flex: 1;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94A3B8 !important;
}

/* Arrow — force to left side (for RTL) */
.select2-container .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
  position: absolute !important;
  height: 100% !important;
  top: 0 !important;
  right: 8px !important;
  left: auto !important;
  width: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Arrow chevron — hide default triangle, use pseudo-element */
.select2-container .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

.select2-container .select2-selection--single .select2-selection__arrow::after,
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid var(--color-text-muted) !important;
  border-bottom: 2px solid var(--color-text-muted) !important;
  transform: rotate(45deg) !important;
  margin-top: -3px !important;
}

/* Clear (×) — big, red, next to arrow */
.select2-container .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute !important;
  top: 45% !important;
  transform: translateY(-50%) !important;
  right: 30px !important;
  left: auto !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #dc3545 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 4px !important;
  z-index: 2 !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: #b91c1c !important;
  transform: translateY(-50%) scale(1.2) !important;
}

/* Focus — same as .field-input:focus */
.select2-container--open .select2-selection--single {
  border-color: var(--color-border-focus) !important;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
  background: var(--color-bg-input-focus) !important;
  transform: translateY(-1px) !important;
}

/* Validation — red border */
.select2-invalid .select2-selection--single {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15) !important;
}

/* Dropdown */
.select2-dropdown {
  border: 1.5px solid var(--color-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
  z-index: 1060;
  background: var(--color-bg-dropdown);
}

.select2-search--dropdown {
  padding: 8px !important;
}

.select2-search--dropdown .select2-search__field {
  width: 100% !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 0.95rem !important;
  font-family: inherit !important;
  outline: none !important;
  background: var(--color-bg-input) !important;
  color: var(--color-text) !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: #5B8FB9 !important;
  box-shadow: 0 0 0 3px rgba(91, 143, 185, 0.15) !important;
}

/* Limit dropdown height — show fewer items */
.select2-results__options {
  max-height: 200px !important;
  overflow-y: auto !important;
}

.select2-results__option {
  padding: 8px 12px !important;
  font-size: 0.95rem !important;
  transition: background 0.15s;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: #5B8FB9 !important;
}

.select2-results__option[aria-selected="true"] {
  background-color: rgba(91, 143, 185, 0.1) !important;
  color: #5B8FB9 !important;
}

/* ─── Select2 RTL Overrides ─── */
html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow,
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
  right: auto !important;
  left: 8px !important;
}

html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__clear,
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__clear {
  right: auto !important;
  left: 30px !important;
}

html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered,
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 12px !important;
  padding-left: 60px !important;
  text-align: right !important;
}

html[dir="rtl"] .select2-container .select2-selection--single,
html[dir="rtl"] .select2-container--default .select2-selection--single {
  padding: 0 10px 0 50px !important;
}

html[dir="rtl"] .select2-search--dropdown .select2-search__field {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .select2-results__option {
  text-align: right !important;
}

/* --- Dark Mode: Save Button --- */
[data-theme="dark"] .btn-save {
  background: linear-gradient(135deg, #0E7490, #0891B2);
}

[data-theme="dark"] .btn-save:hover {
  box-shadow: 0 4px 16px rgba(14, 116, 144, 0.4);
}