@import "tailwindcss";

@theme {
  /* ─── Brand Colors ─── */
  --color-brand-primary: #3792DE;
  --color-brand-deep: #2273D9;
  --color-brand-light: #9FEAFF;
  --color-brand-mid: #80D0FF;
  --color-brand-surface: #DFF9FF;
  --color-brand-credits: #DEF0FF;

  /* ─── Neutrals / Text ─── */
  --color-text-primary: #0E172B;
  --color-text-heading: #191C1E;
  --color-text-muted: #414755;

  /* ─── Borders ─── */
  --color-border-subtle: #C1C6D7;
  --color-border-card: rgba(193, 198, 215, 0.1);
  --color-border-field-admin: #DCB4B4;
  --color-border-danger: #E24B4A;

  /* ─── Surfaces ─── */
  --color-surface-overlay: #F0F8FF;
  --color-surface-raised: #FCFCFF;
  --color-surface-base: #FFFFFF;

  /* ─── Status Colors ─── */
  --color-status-active: #80D0FF;
  --color-status-active-text: #003A52;
  --color-status-paused: #DFF9FF;
  --color-status-success: #EAF3DE;
  --color-status-warning: #FAEEDA;
  --color-status-error: #FCEBEB;
  --color-status-error-text: #F09595;
  --color-status-scheduled: #EDE9FE;

  /* ─── Admin Theme ─── */
  --color-admin-bg: #FCEBEB;
  --color-admin-border: #BC64644D;
  --color-admin-accent: #791F1F;

  /* ─── Typography ─── */
  --font-sans: "Outfit", sans-serif;
  --font-data: "Archivo", sans-serif;

  /* ─── Border Radius ─── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-card: 16px;
  --radius-lg: 15px;
  --radius-xl: 22px;
  --radius-pill: 9999px;

  /* ─── Shadows ─── */
  --shadow-card: 0px 4px 20px 0px #00305214;
  --shadow-card-soft: 0px 3.5px 2.75px 0px rgba(0, 0, 0, 0.02);
  --shadow-sidebar: 2px 0px 10px 0px rgba(0, 0, 0, 0.05);
  --shadow-topbar: 0px 2px 6px 0px rgba(0, 0, 0, 0.04);
  --shadow-button: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  --shadow-field: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.04);

  /* ─── Gradients ─── */
  --background-image-brand-gradient: linear-gradient(90deg, #3792DE -5.85%, #4EC7F2 108.51%);
  --background-image-avatar-gradient: linear-gradient(90deg, #4EC7F2 0%, #9FEAFF 100%);
}

 /* ─── Shadows ─── */
.Toastify__toast {
  min-height: 50px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

.Toastify__toast-body {
  padding: 0 !important;
  margin: 0 !important;
}

.Toastify__toast-icon {
  width: 18px !important;
  margin-inline-end: 8px !important;
}

.Toastify__close-button {
  align-self: center !important;
}

 /* ─── International Input ─── */
.phone-field .iti {
  display: flex !important;
  align-items: center;
  width: 100%;
}

.phone-field .iti__tel-input {
  flex: 1;
  width: 100% !important;
  border: 0 !important;
  padding: 0 0 0 4px !important;
  height: auto !important;
  line-height: 1.4 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text-primary) !important;
}

.phone-field .iti__selected-dial-code {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-primary);
}

.phone-field .iti__country-container {
  position: static !important;
  height: auto !important;
  display: flex;
  align-items: center;
}

.phone-field .iti__selected-country,
.phone-field .iti__selected-country-primary {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
}

.phone-field .iti__selected-dial-code {
  padding-inline: 2px;
}

.iti__dropdown-content {
  z-index: 9999 !important;
}

.iti__search-input,
input.iti__search-input {
  padding: 8px 30px 8px 36px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.iti__country {
  font-family: var(--font-sans);
  font-size: 13px;
}

 /* ─── React Calendar (Edit Preferences modal) ─── */
.edit-prefs-calendar .react-calendar {
  width: 100%;
  border: 0;
  font-family: var(--font-sans);
  background: white;
}
.edit-prefs-calendar .react-calendar__navigation {
  background: var(--color-surface-overlay);
  height: 44px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.edit-prefs-calendar .react-calendar__navigation button {
  min-width: 28px;
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-heading);
}
.edit-prefs-calendar .react-calendar__navigation__arrow {
  background: var(--color-surface-overlay) !important;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.edit-prefs-calendar .react-calendar__navigation__arrow:hover {
  background: white !important;
}
.edit-prefs-calendar .react-calendar__month-view__weekdays {
  padding: 10px 10px 4px;
}
.edit-prefs-calendar .react-calendar__month-view__weekdays__weekday {
  font-weight: 600;
  font-size: 11px;
  color: #788296;
  text-transform: none;
}
.edit-prefs-calendar .react-calendar__month-view__weekdays__weekday abbr {
  text-decoration: none;
}
.edit-prefs-calendar .react-calendar__month-view__days {
  padding: 4px 6px 8px;
}
.edit-prefs-calendar .react-calendar__tile {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-text-primary);
  height: 36px;
  background: transparent;
  border-radius: 14px;
  position: relative;
}
.edit-prefs-calendar .react-calendar__tile abbr {
  position: relative;
  z-index: 1;
}
.edit-prefs-calendar .react-calendar__tile:hover {
  background: var(--color-surface-overlay);
}
.edit-prefs-calendar .react-calendar__tile--active {
  background: transparent !important;
  color: white;
  font-weight: 700;
}
.edit-prefs-calendar .react-calendar__tile--active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #3792DE 0%, #4EC7F2 100%);
  transform: translate(-50%, -50%);
}
.edit-prefs-calendar .react-calendar__tile--now {
  background: rgba(55, 146, 222, 0.1);
}
.edit-prefs-calendar .react-calendar__tile:disabled {
  opacity: 0.4;
}

 /* ─── Print Preview ─── */
@media print {
  body {
    background: white !important;
  }

  [data-print-hide] {
    display: none !important;
  }

  [data-print-root] {
    height: auto !important;
    overflow: visible !important;
  }

  [data-print-root] main {
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
  }

  [data-print-invoice] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    position: static !important;
  }

  [data-print-scroll] {
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
  }

  [data-print-grid] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  [data-print-row] {
    flex-direction: row !important;
  }

  [data-print-row] > * {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    max-width: 50% !important;
  }

  @page {
    size: A4;
    margin: 10mm;
  }
}