/**
 * App-wide UI overrides for consistent cards, breadcrumbs, alerts and buttons.
 * Use these classes in Blade views instead of inline styles.
 */

/* Portal admin create/edit: Tabler-aligned horizontal labels + breathing room */
.portal-admin-form .col-form-label {
  font-weight: 500;
  color: var(--tblr-secondary);
  padding-top: 0.5rem;
}
@media (max-width: 767.98px) {
  .portal-admin-form .col-form-label {
    padding-bottom: 0.25rem;
  }
}

/* Portal admin edit: tabular rows (label column vs field column) */
.portal-admin-detail-table.table {
  margin-bottom: 0;
}
.portal-admin-detail-table thead {
  display: none;
}
.portal-admin-detail-table th.portal-admin-detail-label {
  width: 28%;
  min-width: 11rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  vertical-align: middle;
  padding: 0.85rem 1rem;
  background-color: var(--tblr-bg-surface-secondary, #f4f6f8);
  border-right: 1px solid var(--tblr-border-color-translucent, rgba(4, 32, 69, 0.14));
}
.portal-admin-detail-table td {
  vertical-align: middle;
  padding: 0.85rem 1rem;
}
.portal-admin-detail-table tbody tr:last-child td,
.portal-admin-detail-table tbody tr:last-child th {
  border-bottom-width: 1px;
}
.portal-admin-password-field:disabled {
  background-color: var(--tblr-bg-surface-secondary, #f4f6f8);
  opacity: 1;
  cursor: not-allowed;
}

/* --- Brand color: TEMPes logo blue #167cc4 (reusable across the app) --- */
.bg-brand {
  background-color: #167cc4;
}
.text-brand {
  color: #167cc4;
}
.btn-brand {
  background-color: #167cc4;
  border-color: #167cc4;
  color: #fff;
}
.btn-brand:hover {
  background-color: #1367a3;
  border-color: #1367a3;
  color: #fff;
}
.badge.bg-brand {
  background-color: #167cc4;
}

/*
 * Legacy Bootstrap 3/4 used .btn-xs — not in Bootstrap 5 / Tabler.
 * Map to compact padding so bestaande Blade-classes blijven werken.
 */
.btn-xs {
  --bs-btn-padding-y: 0.1875rem;
  --bs-btn-padding-x: 0.4375rem;
  --bs-btn-font-size: 0.75rem;
  border-radius: var(--bs-border-radius-sm);
}

/*
 * Rij-acties (datatables + contactpersoon/indication): inline-flex met gap.
 * Moet direct meerdere knoppen als flex-kinderen hebben (bv. alleen een <form> als
 * wrapper faalde: gap werkte toen niet tussen edit en delete).
 */
.table-row-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.table-row-actions .fas {
  line-height: 1;
}

/*
 * Company create/edit: lucht tussen .form-group-rijen; zelfde volle breedte in col-md-6.
 */
#createCompanyForm > .form-group,
#editCompanyForm > .form-group {
  margin-bottom: 1rem;
}
#createCompanyForm .col-md-6 .form-control,
#createCompanyForm .col-md-6 .form-select,
#editCompanyForm .col-md-6 .form-control,
#editCompanyForm .col-md-6 .form-select {
  width: 100%;
  max-width: 100%;
}

/* --- Client profile page: tabs — only active pane visible, nav clearly separated --- */
.client-profile-card .nav-tabs {
  flex-wrap: nowrap;
}
.client-profile-card .nav-tabs .nav-link {
  color: #6c757d;
  border-bottom: 2px solid transparent;
}
.client-profile-card .nav-tabs .nav-link:hover {
  color: #167cc4;
}
.client-profile-card .nav-tabs .nav-link.active {
  color: #167cc4;
  border-bottom: 2px solid #167cc4;
  font-weight: 600;
  background-color: transparent;
}
/* Ensure only the active tab pane is visible — client + caregiver both use .client-profile-card */
.client-profile-card .tab-content > .tab-pane {
  display: none !important;
}
.client-profile-card .tab-content > .tab-pane.active.show {
  display: block !important;
}

/* --- Breadcrumb: align with top bar (use on nav[aria-label="breadcrumb"]) --- */
.page-breadcrumb {
  margin-top: -2.8125rem; /* -45px equivalent in rem */
}
@media (max-width: 768px) {
  .page-breadcrumb {
    margin-top: 0 !important;
  }
}

/* --- Card header row: dotted border under page title row --- */
.card-header-row {
  border-bottom: 1px dotted #687DDB;
  padding-bottom: 0.15rem;
}
.card-header-row-border-top {
  border-top: 1px dotted #687DDB;
  border-bottom: 1px dotted #687DDB;
  padding-bottom: 0.5rem;
}

/* --- Flash/success alert position (dismissible alerts above content) --- */
.alert-flash {
  position: relative;
  top: -1.6875rem; /* -27px */
}
.alert-flash.alert-flash-24 {
  top: -1.5rem; /* -24px */
}

/* --- Button with icon: consistent spacing (use .btn .btn-icon on icon) --- */
.btn .btn-icon {
  color: #fff;
  margin: 0 0.1875rem; /* 3px */
}
.btn-outline-secondary .btn-icon,
.btn-outline-dark .btn-icon {
  color: inherit;
}

/* --- Client details Info tab: structure, hierarchy, controlled width --- */
/* Content header: clear separation between title and form */
.client-details-info__header {
  border-bottom-color: #dee2e6 !important;
}
/* Constrain content width for easier scanning; center on large screens */
.client-details-info__content {
  max-width: 1280px;
}
/* Row groups: extra spacing between logical rows for clearer separation */
.client-details-info__content > .row.g-4 {
  margin-bottom: 0.5rem;
}
.client-details-info__content > .row.g-4:last-child {
  margin-bottom: 0;
}

/* --- Client details Info tab: card form (Bootstrap 5–like spacing and inputs) --- */
.client-details-info #formInputsContainer .card,
#contact-persons #formInputsContainer .card {
  border-radius: 0.375rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.client-details-info #formInputsContainer .card-header,
#contact-persons #formInputsContainer .card-header {
  border-radius: 0.375rem 0.375rem 0 0;
  font-weight: 600;
}
/* Form rows: consistent vertical spacing; labels and inputs align like form-group */
.client-details-info #formInputsContainer .card-body > .row {
  margin-bottom: 1rem;
  align-items: center;
}
.client-details-info #formInputsContainer .card-body .input-title {
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 0;
}
.client-details-info #formInputsContainer .card-body .input-fields,
.client-details-info #formInputsContainer .card-body .dropdown-box-shadow .input-fields {
  min-height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  font-size: 1rem;
}
.client-details-info #formInputsContainer .card-body .dropdown-box-shadow {
  border-radius: 0.25rem;
  padding: 0;
}
.client-details-info #formInputsContainer .error-message {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* --- Planner “Add task” (#createTask): scroll inside modal so Save stays reachable --- */
/* Bootstrap’s modal-dialog-scrollable often fails when <form> wraps body+footer or with modal-dialog-centered. */
#createTask.modal .modal-dialog.modal-dialog-scrollable.modal-lg {
  max-height: calc(100vh - 1rem);
  margin-left: auto;
  margin-right: auto;
}

#createTask.modal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}

/* Client / caregiver planner: header, then form containing body + footer */
#createTask.modal .modal-content > form#createTaskForm {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#createTask.modal .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(75vh, calc(100vh - 11rem));
}

#createTask.modal .modal-footer {
  flex-shrink: 0;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Admin planner: submit row sits after .modal-body */
#createTask.modal .modal-content > .d-flex.justify-content-end {
  flex-shrink: 0;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Prefer top alignment when dialog is taller than viewport (avoids clipped bottom) */
#createTask.modal .modal-dialog.modal-dialog-scrollable {
  align-items: flex-start;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}