/* Bootstrap 5.1 and jQuery plugins restyled on the new layout tokens. */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  box-shadow: none !important;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn:disabled, .btn.disabled { opacity: 0.45; }
.btn-primary, .btn-success, .btn-info {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: var(--color-bg);
}
.btn-primary:active, .btn-success:active, .btn-info:active { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }
.btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary {
  background: var(--color-bg);
  border-color: var(--color-divider);
  color: var(--color-text);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-secondary:focus, .btn-light:focus, .btn-outline-primary:focus, .btn-outline-secondary:focus {
  background: var(--color-hover);
  border-color: var(--color-text);
  color: var(--color-text);
}
/* Bootstrap's disabled colours are more specific than the rules above */
.btn-primary:disabled, .btn-primary.disabled, .btn-success:disabled, .btn-success.disabled, .btn-info:disabled, .btn-info.disabled { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-secondary:disabled, .btn-secondary.disabled, .btn-light:disabled, .btn-light.disabled, .btn-outline-primary:disabled, .btn-outline-secondary:disabled { background: var(--color-bg); border-color: var(--color-divider); color: var(--color-text); }
.btn-danger:disabled, .btn-danger.disabled, .btn-outline-danger:disabled { background: var(--color-bg); border-color: var(--color-danger); color: var(--color-danger); }
.btn-warning:disabled, .btn-warning.disabled { background: var(--color-warning-100); border-color: var(--color-warning); color: var(--color-warning); }
.btn-outline-accent { background: var(--color-bg); border-color: var(--color-accent); color: var(--color-accent-700); }
.btn-outline-accent:hover { background: var(--color-accent-100); border-color: var(--color-accent); color: var(--color-accent-800); }
.btn-danger, .btn-outline-danger { background: var(--color-bg); border-color: var(--color-danger); color: var(--color-danger); }
.btn-danger:hover, .btn-outline-danger:hover, .btn-danger:focus { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-bg); }
.btn-warning { background: var(--color-warning-100); border-color: var(--color-warning); color: var(--color-warning); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-sm, .btn-small { padding: 7px 12px; font-size: 13px; }
.btn-block, .w-100.btn { width: 100%; min-height: 52px; font-size: 16px; }
.btn .fe, .btn .fa { font-size: 15px; }
.btn-close { border-radius: 0; }

/* Forms */
.form-label, .col-form-label, .requiredField, label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.asteriskField { color: var(--color-accent-700); margin-left: 2px; }
.form-control, .form-select, .textinput, .emailinput, .passwordinput, .numberinput, .dateinput, .datetimeinput, .timeinput, .urlinput, .select, .textarea {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  box-shadow: none !important;
}
textarea.form-control { min-height: 110px; padding: 12px 14px; resize: vertical; }
.form-select { padding-right: 36px; }
.form-control:hover, .form-select:hover { border-color: rgba(35, 31, 27, 0.5); }
.form-control:focus, .form-select:focus { border-color: var(--color-accent); background-color: var(--color-bg); color: var(--color-text); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--color-surface); color: var(--color-muted); }
.form-control-sm, .form-select-sm { min-height: 36px; font-size: 14px; padding: 0 10px; }
.form-select-sm { padding-right: 32px; background-position: right 10px center; }
.form-control[type="file"] { padding: 11px 14px; }
.form-text, .help-block { font-size: 12px; color: var(--color-muted); margin-top: 4px; }
.invalid-feedback, .errorlist, .text-danger.small { font-size: 12px; color: var(--color-danger); }
.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--color-danger) !important; background-image: none; }
.form-check { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; min-height: 0; }
.form-check .form-check-input { float: none; margin: 2px 0 0; }
.form-check-label { font-size: 14px; font-weight: 400; margin: 0; }
.form-check-input {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  box-shadow: none !important;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.form-check-input:focus { border-color: var(--color-accent); }
.form-switch .form-check-input { width: 40px; height: 22px; border-radius: 0; }
.input-group-text { border-radius: 0; border-color: var(--color-divider); background: var(--color-surface); font-size: 14px; }
.input-group > .form-control, .input-group > .btn { border-radius: 0 !important; }
.mb-3:has(> .form-check) { margin-bottom: var(--space-3) !important; }
form .mb-3, .form-group { margin-bottom: var(--space-3); }

/* Cards and panels */
.card {
  border: 0;
  border-top: 2px solid var(--color-text);
  border-radius: 0;
  background: var(--color-bg);
  box-shadow: none;
  margin-bottom: var(--space-6);
}
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  background: transparent;
  border-radius: 0 !important;
}
.card-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; letter-spacing: -0.015em; margin: 0; }
.card-body { padding: var(--space-4) 0; }
.card-footer { padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); background: transparent; border-radius: 0 !important; }

/* Tables */
.table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  color: var(--color-text);
  font-size: 14px;
  vertical-align: middle;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--color-hover);
}
.table > :not(:first-child) { border-top: 0; }
.table > thead > tr > th, .table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
  padding: var(--space-2);
  border-bottom: 2px solid var(--color-divider) !important;
  background: transparent;
  white-space: nowrap;
}
.table > tbody > tr > td, .table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-divider); background: transparent; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
.table-hover > tbody > tr:hover > * { background: var(--color-hover); }
.table .btn { white-space: nowrap; }
/* Positioned, so absolute children like hidden labels stay inside the scrolling box */
.table-responsive { position: relative; overflow-x: auto; }

/* Modals */
.modal-content { border: 0; border-radius: 0; box-shadow: var(--shadow-menu); }
.modal-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-divider); }
.modal-title { font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.modal-body { padding: var(--space-6); font-size: 15px; }
.modal-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-divider); gap: var(--space-2); }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: 0.5; }

/* Dropdowns */
.dropdown-menu {
  min-width: 230px;
  padding: 0;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-menu);
  font-size: 14px;
}
.dropdown-item { padding: 12px 16px; color: var(--color-text); border-bottom: 1px solid var(--color-divider-soft); }
.dropdown-item:last-child { border-bottom: 0; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--color-surface); color: var(--color-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--color-accent); color: var(--color-bg); }

.tab-content { padding-top: var(--space-6); }

/* Pagination */
.pagination { gap: 4px; flex-wrap: wrap; margin: var(--space-6) 0 0; }
.page-link {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--color-divider) !important;
  border-radius: 0 !important;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none !important;
}
.page-link:hover { color: var(--color-accent-700); background: var(--color-bg); border-color: var(--color-accent) !important; }
.page-item.active .page-link { background: var(--color-accent); border-color: var(--color-accent) !important; color: var(--color-bg); }
.page-item.disabled .page-link { color: var(--color-muted); background: var(--color-bg); }

/* Alerts and badges outside the toast stack */
.alert { border: 0; border-radius: 0; padding: 12px 16px; font-size: 14px; background: var(--color-surface); color: var(--color-text); }
.alert-success, .alert-info { background: var(--color-accent-100); color: var(--color-accent-800); }
.alert-danger { background: var(--color-danger-100); color: var(--color-danger); }
.alert-warning { background: var(--color-warning-100); color: var(--color-warning); }
.alert a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Lists and progress */
.list-group { border-radius: 0; }
.list-group-item { border-color: var(--color-divider); border-left: 0; border-right: 0; padding: var(--space-3) 0; background: transparent; }
.list-group-item.active { background: var(--color-surface); color: var(--color-accent-800); border-color: var(--color-divider); font-weight: 700; }
.progress { height: 8px; border-radius: 0; background: var(--color-surface); }
.progress-bar { background: var(--color-accent); }

/* DataTables */
.dataTables_wrapper { font-size: 14px; }
.dataTables_wrapper .row { --bs-gutter-x: 0; margin: 0; align-items: center; }
.dataTables_wrapper .row > * { padding: 0; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: var(--space-4); }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; color: var(--color-muted); margin: 0; }
.dataTables_wrapper .dataTables_filter { display: flex; justify-content: flex-end; }
/* Search field like the site ones: the "Search:" text stays as label but is hidden, the input has icon and placeholder */
div.dataTables_wrapper div.dataTables_filter label { width: min(340px, 100%); gap: 0; font-size: 0; }
div.dataTables_wrapper div.dataTables_filter input { width: 100%; min-height: 44px; margin: 0 !important; padding-left: 42px; font-size: 15px; background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f1b' stroke-opacity='0.58' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") no-repeat 14px center / 17px 17px; }
@media (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_filter { justify-content: flex-start; }
  div.dataTables_wrapper div.dataTables_filter label { width: 100%; }
}
.dataTables_wrapper .dataTables_length select { min-height: 40px; width: auto; }
.dataTables_wrapper .dataTables_info { font-size: 13px; color: var(--color-muted); padding-top: var(--space-4) !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: var(--space-2) !important; }
.dataTables_wrapper .dataTables_paginate .pagination { justify-content: flex-end; margin: 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0 !important; border: 0 !important; margin: 0 !important; background: none !important; }
table.dataTable { margin: 0 !important; border-collapse: collapse !important; }
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc { padding-right: 22px; }
table.dataTable.no-footer { border-bottom: 0; }
table.dataTable tbody tr { background: transparent; }
table.dataTable td.dataTables_empty { padding: var(--space-6) 0; color: var(--color-muted); text-align: left; }
/* Responsive extension: the columns that do not fit open under the row */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
  width: 1.1em; height: 1.1em; border: 0; border-radius: 0; box-shadow: none;
  background-color: var(--color-accent); font-family: var(--font-body); font-weight: 700; line-height: 1.1em;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before { content: "‘2"; background-color: var(--color-text); }
/* Cells wrap as in Responsive's own measurement, otherwise text-nowrap tables overflow without collapsing */
table.dataTable.dtr-inline > tbody > tr > td { white-space: normal; }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--color-divider-soft); white-space: normal; }
table.dataTable > tbody > tr.child span.dtr-title { min-width: 120px; font-weight: 600; color: var(--color-muted); }

/* Select2 */
.select2-container { width: 100% !important; font-size: 15px; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 48px;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  background: var(--color-bg);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; color: var(--color-text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 0;
  border-radius: 0;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-weight: 600;
  font-size: 13px;
  margin-top: 9px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--color-accent); }
.select2-dropdown { border: 1px solid var(--color-divider); border-radius: 0; box-shadow: var(--shadow-menu); }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--color-divider); border-radius: 0; min-height: 40px; padding: 0 10px; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--color-accent); color: var(--color-bg); }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected { background: var(--color-accent-100); color: var(--color-accent-800); }

/* CKEditor 5 */
.ck.ck-toolbar {
  border: 1px solid var(--color-divider) !important;
  border-radius: 0 !important;
  background: var(--color-bg) !important;
}
.ck.ck-editor__main > .ck-editor__editable {
  border: 1px solid var(--color-divider) !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  min-height: 180px;
}
.ck.ck-editor__main > .ck-editor__editable.ck-focused { border-color: var(--color-accent) !important; box-shadow: none !important; }
.ck.ck-button, a.ck.ck-button { border-color: var(--color-divider) !important; border-radius: 0 !important; }

/* Bootstrap-fileinput (backoffice forms) */
.btn-kv-toggleheader, .btn-kv-fullscreen, .btn-kv-borderless { display: none; }
.file-input .file-preview { border: 1px solid var(--color-divider); border-radius: 0; }
/* BS5 puts browse/remove as direct .input-group children (no .input-group-btn wrapper) */
.file-input .input-group > .btn,
.file-input .input-group .btn-file,
.file-input .input-group .fileinput-remove-button,
.file-input .input-group .fileinput-upload-button,
.file-input .input-group .fileinput-cancel-button,
.file-input .input-group .file-caption-name {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.file-input .input-group .file-caption-name { padding-top: 0; padding-bottom: 0; }

/* Flatpickr and native date inputs */
input[type="date"], input[type="time"], input[type="datetime-local"] { min-height: 48px; }


/* Classes of the previous theme still used by area templates */
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-semibold { font-weight: 600 !important; }
.font-weight-bold { font-weight: 700 !important; }
.card-item-desc { margin: 0 !important; padding: 0 !important; }
.card-item-desc h5 { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; margin: 0; }
.card-options { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bg-primary { background-color: var(--color-accent) !important; }
.text-primary, .text-success { color: var(--color-accent-700) !important; }
.text-warning { color: var(--color-warning) !important; }
.price-column { white-space: nowrap; }
.br-7, .br-100, .brround { border-radius: 0 !important; }

/* FullCalendar */
.fc { --fc-border-color: var(--color-divider-soft); --fc-button-bg-color: var(--color-bg); --fc-button-border-color: var(--color-divider); --fc-button-text-color: var(--color-text); --fc-button-hover-bg-color: var(--color-hover); --fc-button-hover-border-color: var(--color-text); --fc-button-active-bg-color: var(--color-accent); --fc-button-active-border-color: var(--color-accent); --fc-event-bg-color: var(--color-accent); --fc-event-border-color: var(--color-accent); --fc-today-bg-color: var(--color-accent-100); --fc-page-bg-color: var(--color-bg); font-family: var(--font-body); }
.fc .fc-button { border-radius: 0 !important; font-family: var(--font-heading); font-weight: 800; font-size: 13px; text-transform: none; box-shadow: none !important; }
.fc .fc-button-group { gap: var(--space-2); }
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) { margin-left: 0; }
.fc-direction-rtl .fc-button-group > .fc-button:not(:first-child) { margin-right: 0; }
.fc .fc-button-primary { background: var(--fc-button-bg-color); border-color: var(--fc-button-border-color); color: var(--fc-button-text-color); }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.fc .fc-toolbar-title { font-family: var(--font-heading); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--color-text); }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--color-text); font-weight: 600; text-decoration: none; }
.fc .fc-col-header-cell-cushion:hover, .fc .fc-daygrid-day-number:hover { color: var(--color-text); }
.fc-daygrid-day-top a, .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top a { color: var(--color-text); }
.fc .fc-event { border-radius: 0; --fc-event-text-color: var(--color-bg); }
.fc-v-event .fc-event-main, .fc-h-event .fc-event-main { color: var(--color-bg); }
#calendar .fc-event { --fc-event-text-color: var(--color-bg); }
.fc .fc-button-primary:disabled { background: var(--color-bg); border-color: var(--color-divider-soft); color: var(--color-muted); opacity: 1; }
.fc .fc-prev-button, .fc .fc-next-button { color: var(--color-text); }
/* Availability calendar: availabilities, appointments and pending requests */
.fc .ev-availability { background: var(--color-accent-200); border-color: var(--color-accent-200); border-left: 3px solid var(--color-accent); }
.fc .ev-availability .fc-event-main { color: var(--color-accent-800); }
.fc .ev-appointment { background: var(--color-text); border-color: var(--color-text); }
.fc .ev-appointment .fc-event-main { color: var(--color-bg); }
.fc .ev-request { background: var(--color-bg); border: 1px dashed var(--color-accent-700); }
.fc .ev-request .fc-event-main { color: var(--color-accent-800); }
.fc .fc-daygrid-dot-event .fc-event-title, .fc .fc-daygrid-dot-event .fc-event-time { color: var(--color-text); }
.fc .ev-appointment, .fc .ev-request { cursor: pointer; }
@media (max-width: 560px) {
  /* Seven day columns are about 30px wide on a phone */
  .fc .fc-col-header-cell-cushion { font-size: 10px; padding: 2px 0; }
  .fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { font-size: 11px; }
  .fc .fc-toolbar-title { font-size: 18px; }
}
.progress-bar.bg-red { background: var(--color-accent) !important; }
.progress-bar.bg-green { background: var(--color-surface) !important; }
.breadcrumb1 { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; font-size: 13px; }
.breadcrumb-item1 + .breadcrumb-item1::before { content: "/"; margin-right: var(--space-2); color: var(--color-muted); }
.breadcrumb-item1.active { font-weight: 600; }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-4); }
.page-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.02em; margin: 0; }

/* Old markup still in use: modal close buttons, 5.2 weight utility, availability day switches */
.close { margin-left: auto; padding: 4px 8px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--color-muted); cursor: pointer; }
.close:hover { color: var(--color-text); }
.fw-semibold { font-weight: 600 !important; }
.custom-control.form-switch { display: flex; align-items: center; gap: var(--space-2); padding-left: 0; cursor: pointer; }
.form-switch-input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent); }
.form-switch-indicator { display: none; }