/*
 * PodoClick UX polish
 * Final visual layer shared by public pages and authenticated workspaces.
 * Keep this file loaded last so legacy page styles cannot reintroduce
 * conflicting brand colors or compact unreadable controls.
 */

:root {
  --pc-shell-primary: #0f8f9b;
  --pc-shell-primary-dark: #0b6f78;
  --pc-shell-primary-soft: #e8f8f8;
  --pc-shell-primary-faint: #f4fbfb;
  --pc-shell-accent: #2aaeea;
  --pc-shell-focus: 0 0 0 4px rgba(15, 143, 155, 0.18);
  --pc-primary: #0f8f9b;
  --pc-primary-600: #0b6f78;
  --pc-primary-soft: #e8f8f8;
  --pc-primary-soft-2: #f4fbfb;
}

/* Brand-consistent, accessible primary actions. */
body.pc-app .btn-primary,
body.pc-public .btn-primary,
.pc-review-wrap .btn-primary {
  border-color: #0f8f9b !important;
  background: linear-gradient(135deg, #0f9f97, #168fc2) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(22, 143, 194, 0.16) !important;
}

body.pc-app .btn-primary:hover,
body.pc-app .btn-primary:focus-visible,
body.pc-public .btn-primary:hover,
body.pc-public .btn-primary:focus-visible,
.pc-review-wrap .btn-primary:hover,
.pc-review-wrap .btn-primary:focus-visible {
  border-color: #0b6f78 !important;
  background: linear-gradient(135deg, #0b7c84, #127ba8) !important;
  color: #fff !important;
}

body.pc-app .btn-outline-primary,
body.pc-public .btn-outline-primary,
.pc-review-wrap .btn-outline-primary {
  border-color: #9dd8dc !important;
  color: #0b7780 !important;
  background-color: #fff !important;
}

body.pc-app .btn-outline-primary:hover,
body.pc-app .btn-outline-primary:focus-visible,
body.pc-public .btn-outline-primary:hover,
body.pc-public .btn-outline-primary:focus-visible,
.pc-review-wrap .btn-outline-primary:hover,
.pc-review-wrap .btn-outline-primary:focus-visible {
  border-color: #0f8f9b !important;
  color: #0b6f78 !important;
  background: #eefbfb !important;
}

body.pc-app .btn:focus-visible,
body.pc-public .btn:focus-visible,
body.pc-public-booking button:focus-visible,
body.pc-public-booking a:focus-visible {
  outline: 3px solid rgba(42, 174, 234, 0.28) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

body.pc-app .text-primary {
  color: #0f8f9b !important;
}

body.pc-app .form-check-input:checked {
  border-color: #0f8f9b !important;
  background-color: #0f8f9b !important;
}

/* Authenticated shell: retain calm surfaces, align accents with the logo. */
.pc-avatar,
.pc-avatar--top {
  border-color: #ccebed !important;
  background: #ecfafa !important;
  color: #0b7780 !important;
  box-shadow: none !important;
}

.pc-nav__item.active {
  border-color: #d7eeee !important;
  background: #eaf8f8 !important;
  box-shadow: inset 0 0 0 1px rgba(15, 143, 155, 0.06) !important;
}

.pc-sidebar__support {
  border-color: #dcecee !important;
  background: #f7fcfc !important;
}

.pc-eyebrow {
  border-color: #ccebed !important;
  background: #e8f8f8 !important;
  color: #0b7780 !important;
}

.admin-metric-card > span i {
  color: #0f8f9b !important;
}

.pc-mobile-clinic-card {
  background: linear-gradient(135deg, #0f8f9b, #168fc2) !important;
  box-shadow: 0 16px 38px rgba(15, 143, 155, 0.18) !important;
}

.pc-mobile-bottom-nav__item.active {
  background: #e8f8f8 !important;
  color: #0b7780 !important;
}

.role-hero {
  border-color: #dcebed !important;
  background:
    radial-gradient(circle at 15% 10%, rgba(25, 207, 194, 0.11), transparent 34%),
    linear-gradient(135deg, #fff, #f4fbfd) !important;
}

.pc-user-menu__text strong {
  max-width: 270px !important;
}

/* Director dashboards still contain a legacy violet reference layer. */
.pc-ref-card-head a,
.pc-ref-appointment-row:hover strong {
  color: #0f8f9b !important;
}

.pc-ref-stat-icon.purple,
.pc-mini-avatar {
  border-color: #cdebec !important;
  background: linear-gradient(135deg, #e7f8f7, #e9f7ff) !important;
  color: #0f8f9b !important;
}

.pc-ref-progress i,
.pc-service-row span i,
.pc-progress-bar i,
.pc-chart-bars span {
  background: linear-gradient(90deg, #0f9f97, #2aaeea) !important;
}

.pc-ref-appointment-row em,
.pc-pill.primary,
.pc-pill.branch {
  background: #e8f8f8 !important;
  color: #0b7780 !important;
}

.pc-empty.compact i {
  color: #0f8f9b !important;
}

.pc-chart-bars {
  background: linear-gradient(180deg, rgba(15, 143, 155, 0.045), transparent 72%) !important;
}

@media (min-width: 1280px) {
  .pc-user-dropdown__toggle .pc-user-menu__text strong {
    max-width: 320px !important;
  }
}

/* Operator quick actions: icon, title and explanation get a stable grid. */
.quick-action-grid a {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 4px;
  align-content: start;
  min-height: 112px;
  border-color: #e1ecee !important;
  background: #fbfefe !important;
}

.quick-action-grid a:hover {
  border-color: #a9dadd !important;
  background: #f1fbfb !important;
}

.quick-action-grid i {
  grid-row: 1 / -1;
  margin: 2px 0 0 !important;
  color: #0f8f9b !important;
  text-align: center;
}

.quick-action-grid b {
  min-width: 0;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.quick-action-grid small {
  grid-column: 2;
  font-size: 0.83rem;
  line-height: 1.4;
}

/* Calendar branch selector: readable without premature ellipsis. */
.pc-branch-scope__options {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  overflow: visible !important;
  gap: 10px !important;
}

.pc-branch-chip {
  width: 100%;
  min-height: 76px !important;
  padding: 11px 12px !important;
  flex: none !important;
}

.pc-branch-chip strong {
  font-size: 0.88rem !important;
  line-height: 1.3 !important;
}

.pc-branch-chip small {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.6em;
  color: #586b7f !important;
  font-size: 0.76rem !important;
  line-height: 1.3 !important;
  text-overflow: initial !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pc-branch-scope__hint {
  margin-top: 7px !important;
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
}

.pc-calendar-title__icon {
  border-color: #ccebed !important;
  background: #e8f8f8 !important;
  color: #0f8f9b !important;
}

/* Patient table: preserve the complete action heading and action buttons. */
.pc-patient-table thead th {
  padding-right: 12px;
  padding-left: 12px;
}

.pc-patient-table tbody td {
  padding-right: 12px;
  padding-left: 12px;
}

.pc-patient-table th:last-child,
.pc-patient-table td:last-child {
  width: 100px;
  min-width: 100px;
  padding-right: 14px !important;
  padding-left: 8px !important;
  text-align: right;
}

.pc-patient-table .pc-row-actions {
  flex-wrap: nowrap !important;
  justify-content: flex-end;
}

.pc-patient-table .pc-person-cell {
  min-width: 230px;
}

.pc-action-btn--primary {
  border-color: #0f8f9b !important;
  background: #0f8f9b !important;
  color: #fff !important;
}

.pc-action-btn--primary:hover {
  border-color: #0b6f78 !important;
  background: #0b6f78 !important;
}

/* Public landing: keep the booking goal above the fold. */
body.pc-public-booking .pc-booking-hero {
  padding-top: 42px;
}

body.pc-public-booking .pc-booking-hero .pc-booking-hero-logo {
  display: none;
}

/* A clean monochrome brand lockup for the dark footer. */
.pc-footer {
  border-top: 3px solid #19cfc2;
  background:
    radial-gradient(circle at 8% 0, rgba(25, 207, 194, 0.09), transparent 30%),
    #0f2236 !important;
}

.pc-footer img {
  width: 190px !important;
  opacity: 0.96;
  filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16)) !important;
}

.pc-footer p {
  color: #b7c9d8 !important;
}

.pc-footer a {
  color: #e4eef6 !important;
  text-underline-offset: 4px;
}

.pc-footer a:hover,
.pc-footer a:focus-visible {
  color: #5ee0da !important;
  text-decoration: underline;
}

/* Authentication and registration fit the viewport more naturally. */
.pc-auth-page {
  min-height: calc(100vh - 72px) !important;
}

/* Stable, font-independent control icons. */
.pc-ui-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.pc-location-field__clear,
.booking-close,
.pc-auth-modal__close,
.pc-accordion-date-nav,
.pc-date-strip__nav,
.pc-date-calendar__nav {
  align-items: center;
  justify-content: center;
}

.pc-location-field__clear .pc-ui-icon,
.booking-close .pc-ui-icon,
.pc-auth-modal__close .pc-ui-icon {
  width: 17px;
  height: 17px;
}

.pc-photo-delete .pc-ui-icon {
  width: 15px;
  height: 15px;
}

.pc-pagination a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pc-registration-shell {
  align-items: start !important;
}

.pc-registration-brand {
  position: sticky;
  top: 96px;
  min-height: 610px !important;
  justify-content: flex-start !important;
  gap: clamp(30px, 5vh, 52px);
}

.pc-registration-brand .pc-auth-copy h1 {
  font-size: clamp(2rem, 3.2vw, 3rem);
}

.pc-registration-card {
  box-shadow: 0 18px 55px rgba(16, 36, 55, 0.075) !important;
}

@media (max-width: 960px) {
  .pc-registration-brand {
    position: static;
    min-height: auto !important;
  }

  .pc-branch-scope__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pc-auth-page {
    min-height: calc(100vh - 64px) !important;
  }

  .pc-branch-scope__options {
    grid-template-columns: 1fr;
  }

  .pc-branch-chip {
    min-height: 72px !important;
  }

  .quick-action-grid a {
    min-height: 96px;
  }

  .pc-footer img {
    width: 176px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-action-grid a,
  .pc-footer a,
  body.pc-app .btn,
  body.pc-public .btn {
    transition: none !important;
  }
}