/*
 * Shape V2
 * Applies the rounded visual language inspired by the Laravel Theme V2
 * while preserving the existing SAS colors, typography and component behavior.
 */
:root {
  --sas-radius-xs: 8px;
  --sas-radius-sm: 10px;
  --sas-radius-md: 12px;
  --sas-radius-lg: 16px;
  --sas-radius-xl: 20px;
  --sas-radius-card: 20px;
}

/* Form controls */
.form-control,
.form-select,
.input-group-text,
textarea.form-control {
  border-radius: var(--sas-radius-md);
}

/* Keep joined controls visually connected. */
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form-floating > .form-control,
.form-floating > .form-select {
  border-radius: var(--sas-radius-md);
}

/* Buttons */
.btn {
  border-radius: var(--sas-radius-md);
}

.btn-sm {
  border-radius: var(--sas-radius-sm);
}

.btn-lg {
  border-radius: 14px;
}

/* Cards / panels */
.card {
  border-radius: var(--sas-radius-card);
}

.card-header:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.card-footer:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Overlays */
.modal-content {
  border-radius: 22px;
  overflow: hidden;
}

/* Theme V2 modal sections use a clean, borderless separation. */
.modal-content .modal-header {
  border-bottom: none !important;
}

.modal-content .modal-footer {
  border-top: none !important;
}

@media (max-width: 575.98px) {
  .modal-content {
    border-radius: 18px;
  }
}

.dropdown-menu {
  border-radius: var(--sas-radius-lg);
}

.popover,
.tooltip-inner {
  border-radius: var(--sas-radius-md);
}

/* Common Bootstrap surfaces */
.alert {
  border-radius: var(--sas-radius-md);
}

.accordion-item {
  border-radius: var(--sas-radius-md);
  overflow: hidden;
}

.accordion-item:first-of-type,
.accordion-item:first-of-type > .accordion-header .accordion-button,
.accordion-item:last-of-type,
.accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
  border-radius: var(--sas-radius-md);
}

.list-group {
  border-radius: var(--sas-radius-md);
  overflow: hidden;
}

.page-link {
  border-radius: var(--sas-radius-sm);
}

.pagination {
  gap: 4px;
}

/* Select2, used by several system screens. */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  border-radius: var(--sas-radius-md) !important;
}

.select2-dropdown {
  border-radius: var(--sas-radius-md) !important;
  overflow: hidden;
}

/* Flatpickr/date picker surface. */
.flatpickr-calendar {
  border-radius: var(--sas-radius-lg);
  overflow: hidden;
}

/* File upload and generic bordered utility surfaces should stay coherent. */
.upload-file-multiple,
.upload-file-single,
.border.rounded,
.border.radius-8 {
  border-radius: var(--sas-radius-md) !important;
}

/* Preserve explicit shape utilities and semantic shapes. */
.rounded-0 {
  border-radius: 0 !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

/* Pagination: Theme V2 uses softly rounded squares, not circular page buttons. */
.pagination {
  --bs-pagination-border-radius: var(--sas-radius-sm);
}

.pagination .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  border-radius: var(--sas-radius-sm) !important;
}

/* DataTables renders its own pagination buttons instead of Bootstrap .page-link. */
div.dt-container .dt-paging .dt-paging-button,
div.dt-container .dt-paging .dt-paging-button:not(.first, .previous, .next, .last),
div.dt-container .dt-paging .dt-paging-button.first,
div.dt-container .dt-paging .dt-paging-button.previous,
div.dt-container .dt-paging .dt-paging-button.next,
div.dt-container .dt-paging .dt-paging-button.last {
  border-radius: var(--sas-radius-sm) !important;
  -webkit-border-radius: var(--sas-radius-sm) !important;
  -moz-border-radius: var(--sas-radius-sm) !important;
  -ms-border-radius: var(--sas-radius-sm) !important;
  -o-border-radius: var(--sas-radius-sm) !important;
}

/* Sidebar: Theme V2-style soft hover surface. */
.sidebar .sidebar-menu li > a:hover {
  background-color: var(--button-secondary) !important;
  color: var(--primary-600);
}

/* Keep selected/open menu items visually primary while hovering. */
.sidebar .sidebar-menu li > a.active-page:hover,
.sidebar .sidebar-menu li.dropdown.open > a:hover,
.sidebar .sidebar-menu li.dropdown.dropdown-open > a:hover {
  background-color: var(--primary-600) !important;
  color: #fff;
}

/* Information tiles: use the same rounded language as cards. */
.info-item {
  border-radius: var(--sas-radius-card) !important;
}

/* Theme V2 modal header proportions/typography (keeps the borderless treatment above). */
.modal-content .modal-header {
  align-items: center;
  background: var(--white, #fff);
  min-height: 62px;
  padding: 1rem 1.25rem;
}

.modal-content .modal-title {
  align-items: center;
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  gap: .45rem;
  line-height: 1.35;
  margin: 0;
}

.modal-content .modal-title iconify-icon {
  flex: 0 0 auto;
  font-size: 1.2rem;
}

/* Select2 dropdown search input follows Theme V2's 10px control radius. */
.select2-search--dropdown .select2-search__field,
.select2-container--bootstrap4 .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: var(--sas-radius-sm) !important;
}


/* Header action buttons: Theme V2 soft-square controls instead of circles. */
.navbar-header .row.align-items-center.justify-content-between .d-flex.flex-wrap.align-items-center.gap-3 > button,
.navbar-header .row.align-items-center.justify-content-between .d-flex.flex-wrap.align-items-center.gap-3 > .dropdown > button,
.navbar-header .row.align-items-center.justify-content-between .d-flex.flex-wrap.align-items-center.gap-3 > .dropdown > button > div {
  border-radius: var(--sas-radius-sm) !important;
}

/* Summernote toolbar header should blend into the editor surface. */
.note-toolbar.card-header,
.note-toolbar .card-header {
  background: none !important;
}

/* Input groups follow the same outlined, rounded control language as form inputs. */
.input-group {
  border: 1px solid var(--input-form-light) !important;
  border-radius: var(--sas-radius-md) !important;
  overflow: hidden;
  background: var(--white, #fff);
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text,
.input-group > .btn {
  border: 0 !important;
  border-radius: 0 !important;
}

.input-group-text {
  background: none !important;
}

.input-group:focus-within {
  border-color: var(--primary-600) !important;
}