/**
 * Apple-inspired design system for Delfin Wellness UI
 * Compact typography for more calendar space
 */

/* ========== Global font scale (more space for Termin/calendar) ========== */
html {
  font-size: 87.5%; /* 16px → 14px base */
}

/* ========== Design tokens ========== */
:root {
  --apple-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --apple-bg: #f5f5f7;
  --apple-bg-elevated: #ffffff;
  --apple-border: rgba(0, 0, 0, 0.06);
  --apple-border-strong: rgba(0, 0, 0, 0.12);
  --apple-text: #1d1d1f;
  --apple-text-secondary: #6e6e73;
  --apple-sidebar-bg: #1d1d1f;
  --apple-button-hover: #424245;
  --apple-primary: #0071e3;
  --apple-primary-hover: #0077ed;
  --apple-radius-sm: 8px;
  --apple-radius-md: 12px;
  --apple-radius-lg: 16px;
  --apple-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --apple-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06);
  --apple-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --apple-hover-bg: rgba(0, 0, 0, 0.04);
  --apple-hover-bg-strong: rgba(0, 0, 0, 0.06);
  --apple-highlight-free: #e6ffe6;
  --apple-fs-2xs: 0.6875rem;
  --apple-fs-xs: 0.75rem;
  --apple-fs-sm: 0.8125rem;
  --apple-fs-base: 0.875rem;
  --apple-fs-md: 0.9375rem;
  --apple-fs-lg: 1rem;
  --apple-fs-xl: 1.0625rem;
  --apple-fs-2xl: 1.25rem;
  /* Spacing (margins, paddings, gaps) – 4px base scale */
  --apple-space-3xs: 0.15rem;   /* ~2px */
  --apple-space-2xs: 0.25rem;   /* 4px */
  --apple-space-xs: 0.375rem;   /* 6px */
  --apple-space-sm: 0.5rem;     /* 8px */
  --apple-space-md: 0.625rem;   /* 10px */
  --apple-space-lg: 0.75rem;    /* 12px */
  --apple-space-xl: 0.875rem;   /* 14px */
  --apple-space-2xl: 1rem;      /* 16px */
  --apple-space-3xl: 1.25rem;  /* 20px */
  --apple-space-4xl: 1.5rem;    /* 24px */
  --apple-topbar-height: 56px;
  --apple-sidebar-width: 56px;
  --apple-content-padding: var(--apple-space-lg);
}

body.main-body,
.p-component {
  font-family: var(--apple-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--apple-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--apple-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--apple-text) !important;
}

/* ========== Background ========== */
body.main-body {
  background: var(--apple-bg) !important;
}

/* ========== Topbar – frosted glass ========== */
.layout-topbar-light .layout-topbar {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--apple-border) !important;
  height: var(--apple-topbar-height) !important;
  box-shadow: none !important;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-left {
  padding-left: var(--apple-space-3xl) !important;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-left .menu-button,
.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .menu-button {
  color: var(--apple-text) !important;
  transition: background-color 0.2s ease;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-left .menu-button:hover,
.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .menu-button:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Topbar profile: name + email */
.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li.user-profile > a.profile-trigger {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: var(--apple-space-xs) var(--apple-space-md) var(--apple-space-xs) var(--apple-space-sm) !important;
  margin: 0 var(--apple-space-2xs) !important;
  border-radius: var(--apple-radius-sm) !important;
  text-decoration: none !important;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li.user-profile > a.profile-trigger:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li.user-profile > a .profile-image {
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li.user-profile > a .profile-info {
  min-width: 0 !important;
  margin-left: var(--apple-space-md) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 1px !important;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li.user-profile > a .profile-name {
  font-size: var(--apple-fs-base) !important;
  font-weight: 600 !important;
  color: var(--apple-text) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li.user-profile > a .profile-email {
  font-size: var(--apple-fs-xs) !important;
  font-weight: 400 !important;
  color: var(--apple-text-secondary) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
}

.layout-topbar-light .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > ul {
  border-radius: var(--apple-radius-md) !important;
  box-shadow: var(--apple-shadow-lg) !important;
  border: 1px solid var(--apple-border) !important;
  padding: var(--apple-space-sm) 0 !important;
}

/* ========== Sidebar / Menu – icon-only, compact ========== */
@media (min-width: 992px) {
  .menu-wrapper {
    width: var(--apple-sidebar-width) !important;
    min-width: var(--apple-sidebar-width) !important;
  }

  .layout-wrapper.layout-static.layout-static-active .layout-main {
    margin-left: var(--apple-sidebar-width) !important;
  }
}

@media (max-width: 991px) {
  .menu-wrapper {
    width: 240px !important;
    min-width: 240px !important;
  }
}

@media (min-width: 992px) {
  .layout-wrapper.layout-rtl.layout-static.layout-static-active .layout-main {
    margin-left: 0 !important;
    margin-right: var(--apple-sidebar-width) !important;
  }
}

.layout-menu-dim .menu-wrapper {
  background-color: var(--apple-sidebar-bg) !important;
  box-shadow: none !important;
}

.layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu li > a .layout-menuitem-icon {
  font-size: 1.125rem !important;
}

/* Icon-only (desktop): hide text, center icons */
@media (min-width: 992px) {
  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li > div {
    display: none !important;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li a .layout-menuitem-text {
    display: none !important;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li a .layout-submenu-toggler {
    display: none !important;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li a {
    justify-content: center !important;
    padding: var(--apple-space-md) !important;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li a .layout-menuitem-icon {
    margin: 0 !important;
    font-size: 1.25rem !important;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li > ul {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li > ul li a {
    justify-content: center !important;
    padding: var(--apple-space-md) !important;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li > ul li a .layout-menuitem-icon {
    margin: 0 !important;
    font-size: 1.25rem !important;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu li .layout-menu-tooltip {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: fixed !important;
    left: var(--apple-sidebar-width) !important;
    z-index: 9999;
    transition: opacity 0.2s, visibility 0.2s;
    white-space: nowrap;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu li > a:hover + .layout-menu-tooltip {
    opacity: 1;
    visibility: visible;
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu li .layout-menu-tooltip .layout-menu-tooltip-text {
    background: var(--apple-sidebar-bg);
    color: #fff;
    padding: var(--apple-space-xs) var(--apple-space-lg);
    border-radius: var(--apple-radius-sm);
    font-size: var(--apple-fs-xs);
    font-weight: 500;
    box-shadow: var(--apple-shadow-lg);
  }

  .layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu li .layout-menu-tooltip .layout-menu-tooltip-arrow {
    display: none;
  }
}

/* Menu item base styles */
.layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--apple-radius-sm) !important;
  margin: 0 var(--apple-space-sm) !important;
  padding: var(--apple-space-md) var(--apple-space-lg) !important;
  transition: background-color 0.2s ease;
}

.layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li.active-menuitem > a {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li > ul li a {
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--apple-radius-sm) !important;
}

.layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li > ul li a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li > ul li.active-menuitem > a {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.layout-menu-dim .menu-wrapper .layout-menu-container .layout-menu > li > ul > li.layout-root-menuitem.active-menuitem {
  background-color: transparent !important;
}

/* ========== Main content ========== */
.layout-wrapper .layout-main {
  padding-top: var(--apple-topbar-height) !important;
}

.layout-wrapper .menu-wrapper {
  top: var(--apple-topbar-height) !important;
  height: calc(100% - var(--apple-topbar-height)) !important;
}

.layout-wrapper .layout-main .layout-content {
  padding: var(--apple-content-padding) !important;
}

/* ========== Cards ========== */
.card {
  border-radius: var(--apple-radius-md) !important;
  background: var(--apple-bg-elevated) !important;
  box-shadow: var(--apple-shadow-md) !important;
  border: 1px solid var(--apple-border) !important;
  padding: var(--apple-content-padding) !important;
  margin-bottom: var(--apple-content-padding) !important;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--apple-shadow-lg) !important;
}

/* Termine section: card wrapping calendar – no extra border */
.card:has(app-weekly-calendar) {
  border: none !important;
  box-shadow: none !important;
}

.card .card-header {
  padding: var(--apple-space-xl) 0 var(--apple-content-padding) !important;
  margin-bottom: 0 !important;
}

.card .card-content {
  padding: var(--apple-space-sm) 0 0 !important;
}

.card .card-content:first-of-type {
  padding-top: 0 !important;
}

.card .card-header h6,
.card .card-header h5 {
  font-weight: 600 !important;
  font-size: var(--apple-fs-xl) !important;
}

/* ========== Buttons ========== */
.p-button {
  font-family: var(--apple-font) !important;
  font-weight: 500 !important;
  border-radius: var(--apple-radius-sm) !important;
  min-height: 36px !important;
  padding: 0 var(--apple-space-2xl) !important;
  transition: background-color 0.2s ease, transform 0.1s ease !important;
}

.p-button:not(.p-button-text):not(.p-button-outlined):enabled:hover {
  transform: translateY(-0.5px);
}

.p-button-add,
.p-button.p-button-secondary,
.p-button:not(.p-button-danger):not(.p-button-text):not(.p-button-outlined) {
  background: var(--apple-text) !important;
  border-color: var(--apple-text) !important;
  color: #ffffff !important;
}

.p-button-add .pi,
.p-button.p-button-secondary .pi,
.p-button:not(.p-button-danger):not(.p-button-text):not(.p-button-outlined) .pi,
.p-button-add span,
.p-button.p-button-secondary span,
.p-button:not(.p-button-danger):not(.p-button-text):not(.p-button-outlined) span {
  color: inherit !important;
}

.p-button-add:enabled:hover,
.p-button.p-button-secondary:enabled:hover {
  background: var(--apple-button-hover) !important;
  border-color: var(--apple-button-hover) !important;
  color: #ffffff !important;
}

.p-button.p-button-danger,
.p-buttonset.p-button-danger > .p-button,
.p-splitbutton.p-button-danger > .p-button {
  background: transparent !important;
  color: var(--apple-text) !important;
  border: 1px solid var(--apple-border-strong) !important;
}

.p-button.p-button-danger:enabled:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ========== Inputs ========== */
.p-inputtext {
  font-family: var(--apple-font) !important;
  border-radius: var(--apple-radius-sm) !important;
  border: 1px solid var(--apple-border-strong) !important;
  color: var(--apple-text) !important;
  padding: var(--apple-space-md) var(--apple-space-xl) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.p-inputtext:enabled:focus {
  outline: 0 !important;
  border-color: var(--apple-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important;
}

.p-autocomplete .p-inputtext {
  background: var(--apple-bg-elevated) !important;
}

.p-dropdown {
  border-radius: var(--apple-radius-sm) !important;
  border: 1px solid var(--apple-border-strong) !important;
}

/* ========== Tables ========== */
.p-datatable .p-datatable-thead > tr > th {
  font-weight: 600 !important;
  font-size: var(--apple-fs-sm) !important;
  color: var(--apple-text-secondary) !important;
  border: 0 !important;
  background: var(--apple-bg) !important;
  padding: var(--apple-space-lg) var(--apple-space-2xl) !important;
}

.p-datatable .p-datatable-tbody > tr > td {
  padding: var(--apple-space-xl) var(--apple-space-2xl) !important;
  border: 0 !important;
  font-size: var(--apple-fs-md) !important;
}

.p-datatable .p-datatable-tbody > tr:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

.p-datatable .p-datatable-tbody > tr > td a {
  color: var(--apple-primary) !important;
  text-decoration: none;
  font-weight: 500;
}

.p-datatable .p-datatable-tbody > tr > td a:hover {
  text-decoration: underline;
}

.p-datatable .p-datatable-table {
  border-radius: var(--apple-radius-md) !important;
  overflow: hidden !important;
}

/* ========== Breadcrumb ========== */
.layout-breadcrumb .breadcrumb .route-bar-breadcrumb {
  font-size: var(--apple-fs-sm) !important;
  color: var(--apple-text-secondary) !important;
}

.layout-breadcrumb .breadcrumb .route-bar-breadcrumb a {
  color: var(--apple-primary) !important;
}

/* ========== Tabs (Termine section) ========== */
.p-tabview .p-tabview-nav {
  border-radius: var(--apple-radius-sm) var(--apple-radius-sm) 0 0 !important;
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link {
  padding: var(--apple-space-lg) var(--apple-space-3xl) !important;
  font-size: var(--apple-fs-lg) !important;
  border-radius: var(--apple-radius-sm) var(--apple-radius-sm) 0 0 !important;
}

.p-tabview .p-tabview-panels {
  padding: var(--apple-content-padding) !important;
  border-radius: 0 0 var(--apple-radius-sm) var(--apple-radius-sm) !important;
}

.p-tabview .p-tabview-panels .card:last-child {
  margin-bottom: 0 !important;
}

.appointment-request-container .p-grid.p-formgrid {
  margin-bottom: var(--apple-content-padding) !important;
}

.appointment-request-container .p-tabview {
  margin-top: 0 !important;
}

.appointment-request-container br {
  display: none !important;
}

/* ========== Kundendaten compact (horizontal) ========== */
.kundendaten-compact {
  width: 100%;
  padding: var(--apple-content-padding) !important;
}

.kundendaten-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--apple-space-4xl);
}

.kundendaten-col {
  flex: 1;
  min-width: 160px;
}

.kundendaten-col label {
  display: block;
  font-size: var(--apple-fs-md) !important;
  font-weight: 600;
  color: var(--apple-text-secondary);
  margin-bottom: var(--apple-space-xs);
}

.kundendaten-col .kundendaten-text,
.kundendaten-col textarea.p-inputtextarea {
  width: 100% !important;
  resize: none !important;
  font-size: var(--apple-fs-md) !important;
  line-height: 1.4 !important;
  padding: var(--apple-space-sm) var(--apple-space-md) !important;
  min-height: auto !important;
  border-radius: var(--apple-radius-sm) !important;
  border: 1px solid var(--apple-border-strong) !important;
  font-family: var(--apple-font) !important;
}

/* ========== Dashboard / Layout ========== */
.layout-dashboard {
  padding-top: 0 !important;
}

.layout-dashboard > br:first-child {
  display: none !important;
}

.layout-dashboard .grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--apple-content-padding) !important;
  margin: 0 !important;
}

.layout-dashboard h5 {
  font-size: var(--apple-fs-2xl) !important;
  font-weight: 600 !important;
  margin-bottom: var(--apple-space-xs) !important;
}


.layout-footer {
  background: transparent !important;
}

.layout-footer a {
  color: var(--apple-text-secondary) !important;
  font-size: var(--apple-fs-xs) !important;
}

/* ========== Dropdowns & overlays ========== */
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  background: rgba(0, 113, 227, 0.1) !important;
  color: var(--apple-primary) !important;
}

.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--apple-text) !important;
}

.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ========== Datepicker ========== */
.p-datepicker table td > span.p-highlight {
  background: var(--apple-primary) !important;
}

.p-datepicker table td > span:not(.p-disabled):not(.p-highlight):hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* ========== Badge ========== */
.p-badge {
  background: var(--apple-text) !important;
  font-weight: 500 !important;
}

/* ========== Calendar (FullCalendar) ========== */
.fc .fc-daygrid-day.fc-day-today {
  background-color: rgba(0, 113, 227, 0.06) !important;
}

.fc.fc-theme-standard .fc-highlight {
  background-color: rgba(0, 113, 227, 0.1) !important;
}

.fc.fc-theme-standard .fc-toolbar .fc-button {
  color: var(--apple-text) !important;
}

/* ========== Overview box (customer list card) ========== */
.overview-box.blue .card-header,
.overview-box.blue .overview-footer.blue {
  background: transparent !important;
}

.overview-box .card-header h6 {
  color: var(--apple-text) !important;
}

.card .card-header .header-buttons {
  display: none !important;
}

/* ========== Paginator ========== */
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
  background: var(--apple-text) !important;
  border-color: var(--apple-text) !important;
}