/* =========================================================
   Kyan UI v2 — full modern redesign
   cards · buttons · labels · inputs · forms · tables
   ========================================================= */

:root {
  --k-teal: #2e6977;
  --k-teal-2: #245660;
  --k-teal-3: #1a414a;
  --k-mint: #e7f3f5;
  --k-ink: #122f36;
  --k-ink-2: #3d5c64;
  --k-mute: #7a939a;
  --k-line: #d5e4e8;
  --k-line-2: #b7cdd3;
  --k-bg: #edf3f5;
  --k-white: #ffffff;
  --k-danger: #e4572e;
  --k-ok: #0bbf86;
  --k-r: 0.9rem;
  --k-r-sm: 0.55rem;
  --k-r-xs: 0.45rem;
  --k-input-h: 38px;
  --k-input-border: 1px;
  --k-input-pad-y: 0.4rem;
  --k-input-pad-x: 0.7rem;
  --k-shadow: 0 4px 6px -1px rgba(18, 47, 54, 0.05), 0 12px 28px -4px rgba(18, 47, 54, 0.1);
  --k-shadow-lg: 0 10px 15px -3px rgba(18, 47, 54, 0.08), 0 24px 48px -8px rgba(18, 47, 54, 0.14);
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Global canvas ---------- */
body {
  background: var(--k-bg) !important;
}

#layout-wrapper,
.main-content {
  background: transparent !important;
}

.page-content {
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(46, 105, 119, 0.08), transparent 55%),
    radial-gradient(900px 420px at -10% 20%, rgba(46, 105, 119, 0.05), transparent 50%),
    var(--k-bg) !important;
  padding-top: 1.25rem !important;
}

/* ---------- CARDS — full redesign ---------- */
.card {
  --vz-card-bg: transparent;
  background: #fff !important;
  border: 1px solid rgba(46, 105, 119, 0.1) !important;
  border-radius: var(--k-r) !important;
  box-shadow: var(--k-shadow) !important;
  /* do not trap Bootstrap modals under backdrop */
  overflow: visible;
  margin-bottom: 1.15rem !important;
  transition: transform 0.28s var(--k-ease), box-shadow 0.28s var(--k-ease) !important;
}

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

a:hover > .card,
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--k-shadow-lg) !important;
}

.card-header {
  /* default brand gradient — company theme may override color via layouts.styles */
  background: var(--k-teal);
  color: #fff !important;
  border: 0 !important;
  border-bottom: 0 !important;
  padding: 1rem 1.25rem !important;
  min-height: 56px;
  display: flex !important;
  align-items: center !important;
}

.card-header .card-title,
.card-header h4,
.card-header h5,
.card-header h6,
.card-title {
  color: inherit;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  letter-spacing: -0.01em;
  margin: 0 !important;
}

.card-header .card-title,
.card-header h4 {
  color: #fff !important;
}

.card-body {
  padding: 1.35rem 1.35rem !important;
  background: transparent;
}

.card-footer {
  background: linear-gradient(180deg, #f7fbfc, #f1f7f8) !important;
  border-top: 1px solid var(--k-line) !important;
  padding: 1rem 1.35rem !important;
}

.card.card-height-100,
.card-animate {
  border-radius: var(--k-r) !important;
}

.card .table {
  margin-bottom: 0;
}

/* Stat / avatar blocks inside cards */
.avatar-title {
  border-radius: 1rem !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* ---------- BUTTONS — full redesign ---------- */
.btn {
  --bs-btn-border-radius: var(--k-r-sm);
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em;
  padding: 0.62rem 1.25rem !important;
  border-width: 1.5px !important;
  line-height: 1.25 !important;
  transition:
    transform 0.22s var(--k-ease),
    box-shadow 0.22s var(--k-ease),
    background 0.22s var(--k-ease),
    border-color 0.22s var(--k-ease),
    color 0.22s var(--k-ease),
    filter 0.22s var(--k-ease) !important;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-sm {
  border-radius: 999px !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.78rem !important;
}

.btn-lg {
  border-radius: 999px !important;
  padding: 0.8rem 1.6rem !important;
  font-size: 1rem !important;
}

.btn-primary {
  background: linear-gradient(135deg, #3a7f8e 0%, var(--k-teal) 45%, var(--k-teal-3) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(46, 105, 119, 0.32) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background: linear-gradient(135deg, #4494a4 0%, #347888 50%, var(--k-teal) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(46, 105, 119, 0.38) !important;
  filter: none !important;
}

.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 4px rgba(46, 105, 119, 0.22), 0 10px 22px rgba(46, 105, 119, 0.32) !important;
}

.btn-outline-primary {
  background: rgba(46, 105, 119, 0.06) !important;
  border-color: var(--k-teal) !important;
  color: var(--k-teal) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background: var(--k-teal) !important;
  border-color: var(--k-teal) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(46, 105, 119, 0.25) !important;
}

.btn-success {
  background: linear-gradient(135deg, #1ad6a0, #0bbf86) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(11, 191, 134, 0.28) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ff6b45, var(--k-danger)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(228, 87, 46, 0.28) !important;
}

.btn-warning {
  background: linear-gradient(135deg, #ffd056, #f0b429) !important;
  border-color: transparent !important;
  color: #4a3a00 !important;
  box-shadow: 0 10px 20px rgba(240, 180, 41, 0.28) !important;
}

.btn-info {
  background: linear-gradient(135deg, #6ed2ff, #39b7f0) !important;
  border-color: transparent !important;
  color: #06324a !important;
  box-shadow: 0 10px 20px rgba(57, 183, 240, 0.28) !important;
}

.btn-secondary,
.btn-light,
.btn-soft-secondary {
  background: #fff !important;
  border-color: var(--k-line) !important;
  color: var(--k-ink) !important;
  box-shadow: 0 4px 12px rgba(18, 47, 54, 0.06) !important;
}

.btn-light:hover,
.btn-secondary:hover {
  background: var(--k-mint) !important;
  border-color: #c5d9de !important;
  color: var(--k-teal) !important;
}

.btn-soft-primary {
  background: var(--k-mint) !important;
  color: var(--k-teal) !important;
  border-color: transparent !important;
}

.btn-soft-primary:hover {
  background: #d5ebee !important;
  color: var(--k-teal-3) !important;
}

/* White action buttons on teal headers */
.card-header .btn,
.page-title-box .btn-primary {
  border-radius: 999px !important;
}

.card-header .btn-primary,
.page-title-box .btn-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--k-teal) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

.card-header .btn-primary:hover,
.page-title-box .btn-primary:hover {
  background: #f2f8f9 !important;
  color: var(--k-teal-3) !important;
  transform: translateY(-2px);
}

.btn-group .btn {
  border-radius: 0 !important;
}

.btn-group .btn:first-child {
  border-start-start-radius: 999px !important;
  border-end-start-radius: 999px !important;
}

.btn-group .btn:last-child {
  border-start-end-radius: 999px !important;
  border-end-end-radius: 999px !important;
}

/* ---------- LABELS — compact ---------- */
label,
.form-label,
.col-form-label,
.form-group > label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.2rem;
  color: var(--k-ink) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.01em;
  margin-bottom: 0.35rem !important;
  line-height: 1.3 !important;
}

.form-label.text-primary,
label.text-primary,
.form-group label.text-primary {
  color: var(--k-teal) !important;
  background: rgba(46, 105, 119, 0.08);
  padding: 0.12rem 0.45rem;
  border-radius: 0.35rem;
  border-inline-start: 2px solid var(--k-teal);
}

.form-label .tx-danger,
label .tx-danger,
label span.tx-danger {
  color: var(--k-danger) !important;
  font-size: 0.85rem;
  font-weight: 800;
}

.form-text,
.form-group small.text-primary {
  color: var(--k-mute) !important;
  font-size: 0.72rem !important;
  font-weight: 500;
}

.form-group small.text-danger,
small.text-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding: 0.2rem 0.45rem;
  border-radius: 0.4rem;
  background: rgba(228, 87, 46, 0.08);
  color: var(--k-danger) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
}

/* ---------- INPUTS — compact, thin border ---------- */
.form-group {
  margin-bottom: 0.75rem !important;
}

.form-control,
.form-select,
select.form-control,
textarea.form-control,
input.form-control,
input[type="text"]:not(.vs__search):not(.select2-search__field),
input[type="email"]:not(.vs__search):not(.select2-search__field),
input[type="password"]:not(.vs__search):not(.select2-search__field),
input[type="number"]:not(.vs__search):not(.select2-search__field),
input[type="date"]:not(.vs__search):not(.select2-search__field),
input[type="month"]:not(.vs__search):not(.select2-search__field),
input[type="url"]:not(.vs__search):not(.select2-search__field),
input[type="search"]:not(.vs__search):not(.select2-search__field),
input[type="tel"]:not(.vs__search):not(.select2-search__field),
input[type="file"] {
  width: 100%;
  min-height: var(--k-input-h) !important;
  height: var(--k-input-h) !important;
  padding: var(--k-input-pad-y) var(--k-input-pad-x) !important;
  border: var(--k-input-border) solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  background: #fff !important;
  color: var(--k-ink) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition:
    border-color 0.2s var(--k-ease),
    box-shadow 0.2s var(--k-ease),
    background 0.2s var(--k-ease) !important;
  appearance: none;
  -webkit-appearance: none;
}

select.form-control,
.form-select,
select.select2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b858d' d='M1.4 0.6L6 5.2 10.6 0.6 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 0.7rem center !important;
  background-size: 10px 7px !important;
  padding-inline-end: 0.7rem !important;
  padding-inline-start: 1.8rem !important;
}

html[dir="ltr"] select.form-control,
html[dir="ltr"] .form-select,
html[dir="ltr"] select.select2 {
  background-position: right 0.7rem center !important;
  padding-right: 1.8rem !important;
  padding-left: 0.7rem !important;
}

.form-control::placeholder,
textarea.form-control::placeholder {
  color: #9bb0b6 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.form-control:hover,
.form-select:hover,
select.form-control:hover,
input.form-control:hover,
input[type="text"]:not(.vs__search):not(.select2-search__field):hover,
input[type="email"]:not(.vs__search):not(.select2-search__field):hover,
input[type="search"]:not(.vs__search):not(.select2-search__field):hover {
  border-color: #9fc0c8 !important;
  background: #fff !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type="text"]:not(.vs__search):not(.select2-search__field):focus,
input[type="email"]:not(.vs__search):not(.select2-search__field):focus,
input[type="password"]:not(.vs__search):not(.select2-search__field):focus,
input[type="number"]:not(.vs__search):not(.select2-search__field):focus,
input[type="date"]:not(.vs__search):not(.select2-search__field):focus,
input[type="search"]:not(.vs__search):not(.select2-search__field):focus {
  border-color: var(--k-teal) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(46, 105, 119, 0.12) !important;
  outline: none !important;
}

.form-control:disabled,
.form-control[readonly] {
  background: #eef3f4 !important;
  color: var(--k-mute) !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
textarea.is-invalid {
  border-color: var(--k-danger) !important;
  background: #fff7f4 !important;
  box-shadow: 0 0 0 3px rgba(228, 87, 46, 0.1) !important;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #0bbf86 !important;
  box-shadow: 0 0 0 3px rgba(11, 191, 134, 0.1) !important;
}

textarea.form-control {
  min-height: 88px !important;
  height: auto !important;
  line-height: 1.55 !important;
  resize: vertical;
  padding-top: 0.55rem !important;
}

.form-control-sm {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0.25rem 0.55rem !important;
  border-radius: 0.45rem !important;
  font-size: 0.78rem !important;
}

.form-control-lg {
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 0.65rem !important;
  font-size: 0.92rem !important;
}

/* Input group */
.input-group {
  width: 100%;
  gap: 0;
}

.input-group-text {
  min-height: var(--k-input-h);
  border: var(--k-input-border) solid var(--k-line) !important;
  background: #f3f8f9 !important;
  color: var(--k-teal) !important;
  font-weight: 700 !important;
  border-radius: var(--k-r-sm) !important;
  padding: var(--k-input-pad-y) 0.7rem !important;
  font-size: 0.84rem !important;
}

.input-group > .form-control,
.input-group > .form-select {
  border-radius: var(--k-r-sm) !important;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

.input-group > :not(:first-child):not(.dropdown-menu) {
  margin-inline-start: -1px;
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
}

/* Checkbox / radio */
.form-check {
  padding-top: 0.1rem;
}

.form-check-input {
  width: 1.05rem !important;
  height: 1.05rem !important;
  border: 1.5px solid #9fc0c8 !important;
  border-radius: 0.3rem !important;
  background-color: #fff !important;
  cursor: pointer;
  transition: all 0.2s var(--k-ease);
}

.form-check-input:checked {
  background-color: var(--k-teal) !important;
  border-color: var(--k-teal) !important;
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(46, 105, 119, 0.14) !important;
  border-color: var(--k-teal) !important;
}

.form-check-label {
  color: var(--k-ink-2) !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  margin-inline-start: 0.2rem;
  cursor: pointer;
}

/* File */
input[type="file"].form-control,
.form-control.form-file {
  padding: 0.35rem 0.55rem !important;
  background: #fff !important;
  height: auto !important;
}

/* Selectize — compact (elements use class .select2 but init with selectize) */
select.select2.selectized,
select.selectized {
  display: none !important;
}

.selectize-control {
  width: 100% !important;
}

.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input,
.selectize-control .selectize-input {
  display: flex !important;
  align-items: center !important;
  min-height: var(--k-input-h) !important;
  height: var(--k-input-h) !important;
  padding: 0.25rem 0.65rem !important;
  border: var(--k-input-border) solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 0.84rem !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
}

.selectize-control.single .selectize-input:after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  inset-inline-start: 0.75rem !important;
  inset-inline-end: auto !important;
  margin-top: -3px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: var(--k-mute) transparent transparent transparent !important;
  right: auto !important;
}

html[dir="ltr"] .selectize-control.single .selectize-input:after {
  inset-inline-start: auto !important;
  inset-inline-end: 0.75rem !important;
  right: 0.75rem !important;
}

.selectize-control.single .selectize-input {
  padding-inline-start: 1.7rem !important;
}

html[dir="ltr"] .selectize-control.single .selectize-input {
  padding-right: 1.7rem !important;
  padding-left: 0.65rem !important;
}

.selectize-control .selectize-input > div,
.selectize-control.single .selectize-input .item {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  color: var(--k-ink) !important;
  font-weight: 500 !important;
  font-size: 0.84rem !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selectize-control .selectize-input > input {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.84rem !important;
}

.selectize-control .selectize-input.focus,
.selectize-control .selectize-input.dropdown-active {
  border-color: var(--k-teal) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(46, 105, 119, 0.12) !important;
}

.selectize-dropdown,
.selectize-dropdown.form-control {
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  box-shadow: var(--k-shadow-lg) !important;
  overflow: hidden;
  margin-top: 4px !important;
  padding: 0.25rem !important;
  background: #fff !important;
  z-index: 2000 !important;
}

.selectize-dropdown .option {
  padding: 0.45rem 0.7rem !important;
  font-size: 0.84rem !important;
  border-radius: 0.4rem !important;
  color: var(--k-ink-2) !important;
}

.selectize-dropdown .option.active,
.selectize-dropdown .option.selected {
  background: var(--k-mint) !important;
  color: var(--k-teal-3) !important;
}

/* ---------- Select2 — normal compact design ---------- */
.select2-container {
  width: 100% !important;
  max-width: 100%;
}

.select2-container--default .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap-5 .select2-selection--multiple {
  min-height: var(--k-input-h) !important;
  height: var(--k-input-h) !important;
  border: var(--k-input-border) solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--k-input-h) - 2px) !important;
  padding-inline: 0.7rem 1.8rem !important;
  color: var(--k-ink) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: #9bb0b6 !important;
  line-height: calc(var(--k-input-h) - 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  height: calc(var(--k-input-h) - 2px) !important;
  width: 1.7rem !important;
  top: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
  margin-inline-end: 1.4rem;
  font-size: 0.95rem;
  color: var(--k-mute);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
.select2-container--bootstrap-5.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple {
  border-color: var(--k-teal) !important;
  box-shadow: 0 0 0 3px rgba(46, 105, 119, 0.12) !important;
}

.select2-dropdown,
.select2-container--bootstrap-5 .select2-dropdown {
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  box-shadow: var(--k-shadow-lg) !important;
  overflow: hidden;
  z-index: 2000 !important;
}

.select2-container--default .select2-results__option,
.select2-container--bootstrap-5 .select2-results__option {
  padding: 0.45rem 0.75rem !important;
  font-size: 0.84rem !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: var(--k-mint) !important;
  color: var(--k-teal-3) !important;
}

.select2-search--dropdown .select2-search__field {
  border: var(--k-input-border) solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0.3rem 0.55rem !important;
  font-size: 0.84rem !important;
  box-shadow: none !important;
  background: #fff !important;
}

.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap-5 .select2-selection--multiple {
  height: auto !important;
  min-height: var(--k-input-h) !important;
  padding: 0.2rem 0.35rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  border-radius: 0.4rem !important;
  background: var(--k-mint) !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-teal-3) !important;
  font-size: 0.78rem !important;
}

/* Keep native select hidden cleanly after Select2 init */
select.select2.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  min-height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ---------- Vue Select (v-select) — compact ---------- */
.v-select {
  --vs-border-color: var(--k-line);
  --vs-border-width: 1px;
  --vs-border-radius: var(--k-r-sm);
  --vs-actions-padding: 0 0.4rem;
  --vs-controls-color: var(--k-mute);
  --vs-controls-size: 0.75;
  --vs-selected-bg: transparent;
  --vs-selected-color: var(--k-ink);
  --vs-search-input-color: var(--k-ink);
  --vs-dropdown-bg: #fff;
  --vs-dropdown-box-shadow: var(--k-shadow-lg);
  --vs-dropdown-option--active-bg: var(--k-mint);
  --vs-dropdown-option--active-color: var(--k-teal-3);
  --vs-font-size: 0.84rem;
  --vs-line-height: 1.35;
  font-family: inherit;
}

.v-select .vs__dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-height: var(--k-input-h) !important;
  padding: 0.2rem 0.25rem 0.2rem 0.55rem !important;
  border: var(--k-input-border) solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.2s var(--k-ease), box-shadow 0.2s var(--k-ease) !important;
}

.v-select:hover .vs__dropdown-toggle {
  border-color: #9fc0c8 !important;
}

.v-select.vs--open .vs__dropdown-toggle,
.v-select.vs--focused .vs__dropdown-toggle {
  border-color: var(--k-teal) !important;
  box-shadow: 0 0 0 3px rgba(46, 105, 119, 0.12) !important;
}

.v-select .vs__selected-options {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.15rem;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
}

.v-select .vs__selected {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0.1rem 0.25rem !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--k-ink) !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  line-height: 1.3 !important;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-select .vs__search,
.v-select .vs__search:focus {
  margin: 0 !important;
  padding: 0.15rem 0.25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  color: var(--k-ink) !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  outline: none !important;
  line-height: 1.35 !important;
}

.v-select.vs--open .vs__search,
.v-select .vs__search:focus {
  width: auto !important;
  min-width: 3.5rem !important;
}

.v-select .vs__actions {
  display: flex !important;
  align-items: center !important;
  padding: 0 0.35rem !important;
  gap: 0.1rem;
}

.v-select .vs__clear,
.v-select .vs__open-indicator {
  fill: var(--k-mute) !important;
  transform: none !important;
  transition: fill 0.2s ease, transform 0.2s ease;
}

.v-select .vs__clear:hover,
.v-select .vs__open-indicator:hover {
  fill: var(--k-teal) !important;
}

.v-select.vs--open .vs__open-indicator {
  transform: rotate(180deg) !important;
  fill: var(--k-teal) !important;
}

.v-select .vs__dropdown-menu {
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  box-shadow: var(--k-shadow-lg) !important;
  margin-top: 4px !important;
  padding: 0.3rem !important;
  overflow: hidden;
  z-index: 1055 !important;
}

.v-select .vs__dropdown-option {
  padding: 0.45rem 0.65rem !important;
  border-radius: 0.4rem !important;
  color: var(--k-ink-2) !important;
  font-weight: 600;
  font-size: 0.84rem;
  white-space: normal !important;
  line-height: 1.35;
}

.v-select .vs__dropdown-option--highlight,
.v-select .vs__dropdown-option--selected {
  background: var(--k-mint) !important;
  color: var(--k-teal-3) !important;
}

.v-select .vs__no-options {
  padding: 0.65rem !important;
  color: var(--k-mute) !important;
  text-align: center;
}

.v-select.vs--single .vs__selected {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

.v-select.vs--single.vs--open .vs__selected,
.v-select.vs--single.vs--searching .vs__selected {
  position: absolute !important;
  opacity: 0.35;
}

/* ---------- Tables ---------- */
.table-responsive {
  border-radius: var(--k-r-sm);
  border: 1px solid var(--k-line);
  background: #fff;
}

.table {
  margin-bottom: 0 !important;
}

.table > :not(caption) > * > * {
  padding: 0.95rem 0.85rem !important;
  vertical-align: middle;
  border-bottom-color: #e7eef0 !important;
}

.table thead th,
.table > thead > tr > th {
  background: linear-gradient(180deg, #f4f9fa, #eaf3f5) !important;
  color: var(--k-teal-3) !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom: 1px solid var(--k-line) !important;
}

.table-dark th,
.table thead.table-dark th,
tr.text-center.bg-primary.text-white td {
  background: var(--k-teal) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(46, 105, 119, 0.035) !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: rgba(46, 105, 119, 0.07) !important;
}

/* Keep Bootstrap status colors on table cells (override striped/thead rules) */
.table th.bg-success,
.table td.bg-success,
.table thead th.bg-success,
.table-striped > tbody > tr > *.bg-success,
.table-striped > tbody > tr:nth-of-type(odd) > *.bg-success,
.table-striped > tbody > tr:nth-of-type(even) > *.bg-success,
.table-hover > tbody > tr:hover > *.bg-success {
  background: #0ab39c !important;
  background-color: #0ab39c !important;
  color: #fff !important;
}

.table th.bg-warning,
.table td.bg-warning,
.table thead th.bg-warning,
.table-striped > tbody > tr > *.bg-warning,
.table-striped > tbody > tr:nth-of-type(odd) > *.bg-warning,
.table-striped > tbody > tr:nth-of-type(even) > *.bg-warning,
.table-hover > tbody > tr:hover > *.bg-warning {
  background: #f7b84b !important;
  background-color: #f7b84b !important;
  color: #fff !important;
}

.table th.bg-danger,
.table td.bg-danger,
.table thead th.bg-danger,
.table-striped > tbody > tr > *.bg-danger,
.table-striped > tbody > tr:nth-of-type(odd) > *.bg-danger,
.table-striped > tbody > tr:nth-of-type(even) > *.bg-danger,
.table-hover > tbody > tr:hover > *.bg-danger {
  background: #f06548 !important;
  background-color: #f06548 !important;
  color: #fff !important;
}

.table th.bg-info,
.table td.bg-info,
.table thead th.bg-info,
.table-striped > tbody > tr > *.bg-info,
.table-striped > tbody > tr:nth-of-type(odd) > *.bg-info,
.table-striped > tbody > tr:nth-of-type(even) > *.bg-info,
.table-hover > tbody > tr:hover > *.bg-info {
  background: #299cdb !important;
  background-color: #299cdb !important;
  color: #fff !important;
}

/* ---------- Badges / alerts / page title ---------- */
.badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 0.45em 0.8em !important;
  letter-spacing: 0.02em;
}

.alert {
  border: 0 !important;
  border-radius: var(--k-r-sm) !important;
  box-shadow: var(--k-shadow);
  padding: 0.95rem 1.15rem !important;
}

.page-title-box {
  background: var(--k-teal) !important;
  border-radius: var(--k-r) !important;
  padding: 1.05rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: 0 14px 30px rgba(46, 105, 119, 0.22) !important;
  border: 0 !important;
}

.page-title-box h4,
.page-title-box .breadcrumb-item,
.page-title-box .breadcrumb-item.active,
.page-title-box .breadcrumb-item + .breadcrumb-item::before {
  color: #fff !important;
}

/* ---------- Modals / dropdowns ---------- */
.modal {
  z-index: 2000 !important;
}

.modal-backdrop {
  z-index: 1990 !important;
  background-color: rgba(18, 47, 54, 0.55) !important;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

.modal-dialog {
  z-index: 2001 !important;
  pointer-events: auto;
}

.modal-content {
  position: relative;
  z-index: 2002 !important;
  border: 0 !important;
  border-radius: 1rem !important;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(18, 47, 54, 0.28) !important;
  background: #fff !important;
}

.modal-header {
  background: var(--k-teal);
  color: #fff;
  border-bottom: 0 !important;
  padding: 0.9rem 1.15rem !important;
  position: relative;
  z-index: 2;
}

.modal-header .modal-title {
  color: #fff !important;
  font-weight: 800;
  font-size: 1rem;
}

.modal-header .btn-close {
  filter: invert(1);
  opacity: 0.85;
  box-shadow: none !important;
}

.modal-body {
  padding: 1.15rem !important;
  background: #fff;
  position: relative;
  z-index: 1;
}

.modal-footer {
  background: #f3f8f9 !important;
  border-top: 1px solid var(--k-line) !important;
  padding: 0.85rem 1.15rem !important;
}

/* Select2 inside modals must sit above modal content */
.modal .select2-container,
.modal .select2-dropdown {
  z-index: 2100 !important;
}

.modal .select2-container--open {
  z-index: 2100 !important;
}

.dropdown-menu {
  border: 1px solid var(--k-line) !important;
  border-radius: 0.9rem !important;
  box-shadow: var(--k-shadow-lg) !important;
  padding: 0.45rem !important;
  overflow: hidden;
}

.dropdown-item {
  border-radius: 0.65rem !important;
  padding: 0.6rem 0.85rem !important;
  font-weight: 600;
  color: var(--k-ink-2);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--k-mint) !important;
  color: var(--k-teal-3) !important;
}

/* ---------- Nav / pagination ---------- */
.nav-pills .nav-link {
  border-radius: 999px !important;
  font-weight: 700;
  padding: 0.55rem 1rem !important;
}

.nav-pills .nav-link.active {
  background: var(--k-teal) !important;
  box-shadow: 0 8px 18px rgba(46, 105, 119, 0.25);
}

.page-link {
  border-radius: 999px !important;
  margin: 0 0.2rem;
  border: 1.5px solid var(--k-line) !important;
  color: var(--k-teal) !important;
  font-weight: 700;
  min-width: 38px;
  text-align: center;
}

.page-item.active .page-link {
  background: var(--k-teal) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(46, 105, 119, 0.25);
}

.page-link:focus {
  box-shadow: 0 0 0 4px rgba(46, 105, 119, 0.16) !important;
}

/* ---------- Sidebar / topbar soft sync ---------- */
.navbar-header {
  box-shadow: 0 1px 0 rgba(46, 105, 119, 0.06);
}

/* ---------- Topnav company switcher ---------- */
.topbar-company-switch {
  display: inline-flex;
  align-items: center;
}

.btn-topbar-company {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem;
  min-height: 42px !important;
  height: auto !important;
  padding: 0.25rem 0.55rem !important;
  border-radius: 0.65rem !important;
  border: 1px solid var(--k-line) !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(18, 47, 54, 0.06) !important;
  color: var(--k-ink) !important;
  transform: none !important;
}

.btn-topbar-company:hover,
.btn-topbar-company:focus,
.btn-topbar-company:active,
.btn-topbar-company.show {
  background: #f5f9fa !important;
  border-color: #9fc0c8 !important;
  color: var(--k-teal) !important;
  box-shadow: 0 4px 12px rgba(18, 47, 54, 0.1) !important;
  transform: none !important;
  filter: none !important;
}

.topbar-company-logo {
  display: block !important;
  width: 56px !important;
  height: 34px !important;
  max-width: 56px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.topbar-company-caret {
  font-size: 1.05rem;
  color: var(--k-mute);
  line-height: 1;
}

.topbar-company-switch .dropdown-item img {
  object-fit: contain;
  border-radius: 0.25rem;
  background: #fff;
}

/* ---------- Accordion ---------- */
.accordion-item {
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-r-sm) !important;
  overflow: hidden;
  margin-bottom: 0.65rem;
  box-shadow: var(--k-shadow);
}

.accordion-button {
  font-weight: 700 !important;
}

.accordion-button:not(.collapsed) {
  background: var(--k-mint) !important;
  color: var(--k-teal-3) !important;
  box-shadow: none !important;
}

.accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(46, 105, 119, 0.16) !important;
}

/* =========================================================
   SIDEBAR — modern redesign + hover / active / click
   ========================================================= */

.app-menu.navbar-menu {
  background: var(--k-teal, #2e6977) !important;
  border: 0 !important;
  box-shadow: 12px 0 40px rgba(18, 47, 54, 0.18) !important;
  padding: 0 !important;
}

[data-layout=vertical][data-sidebar=dark] .navbar-menu {
  background: var(--k-teal, #2e6977);
}

.app-menu .navbar-brand-box {
  background: rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 1rem 0.75rem !important;
  margin: 0.65rem 0.75rem 0.35rem !important;
  border-radius: 1rem !important;
  backdrop-filter: blur(8px);
}

.app-menu .navbar-brand-box .logo-lg img,
.app-menu .navbar-brand-box .logo-sm img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}

.app-menu #scrollbar {
  padding: 0.35rem 0.7rem 1.25rem !important;
}

.app-menu .navbar-nav {
  gap: 0.25rem;
  padding: 0.25rem 0 1rem;
}

.app-menu .navbar-nav > .nav-item {
  margin: 0 !important;
}

/* Base menu link */
.app-menu .navbar-nav .nav-link.menu-link,
.app-menu .navbar-nav .nav-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  margin: 0.15rem 0 !important;
  padding: 0.78rem 0.95rem !important;
  border-radius: 0.85rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em;
  background: transparent !important;
  border: 1px solid transparent !important;
  overflow: hidden;
  transition:
    background 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.app-menu .navbar-nav .nav-link.menu-link i,
.app-menu .navbar-nav .nav-link i {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.22s ease, transform 0.22s ease, color 0.22s ease;
}

.app-menu .navbar-nav .nav-link.menu-link span,
.app-menu .navbar-nav .nav-link span {
  flex: 1;
  line-height: 1.35;
}

/* Chevron for collapse items */
.app-menu .navbar-nav .nav-link[data-bs-toggle=collapse]:after {
  color: rgba(255, 255, 255, 0.55) !important;
  margin-inline-start: auto;
  transition: transform 0.25s ease, color 0.22s ease !important;
}

/* HOVER */
.app-menu .navbar-nav .nav-link.menu-link:hover,
.app-menu .navbar-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  transform: translateX(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

html[dir="ltr"] .app-menu .navbar-nav .nav-link.menu-link:hover,
html[dir="ltr"] .app-menu .navbar-nav .nav-link:hover {
  transform: translateX(3px);
}

.app-menu .navbar-nav .nav-link.menu-link:hover i,
.app-menu .navbar-nav .nav-link:hover i {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  transform: scale(1.08);
}

/* CLICK / pressed */
.app-menu .navbar-nav .nav-link.menu-link:active,
.app-menu .navbar-nav .nav-link:active,
.app-menu .navbar-nav .nav-link.menu-link.is-pressed,
.app-menu .navbar-nav .nav-link.is-pressed {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(0.98) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

/* ACTIVE / current page */
.app-menu .navbar-nav .nav-link.menu-link.active,
.app-menu .navbar-nav .nav-link.active,
.app-menu .navbar-nav .nav-link.menu-link[aria-expanded=true],
.app-menu .navbar-nav .nav-link[aria-expanded=true] {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1)) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

.app-menu .navbar-nav .nav-link.menu-link.active::before,
.app-menu .navbar-nav .nav-link.active::before,
.app-menu .navbar-nav .nav-link.menu-link[aria-expanded=true]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18%;
  bottom: 18%;
  width: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}

.app-menu .navbar-nav .nav-link.menu-link.active i,
.app-menu .navbar-nav .nav-link.active i,
.app-menu .navbar-nav .nav-link[aria-expanded=true] i {
  background: #fff !important;
  color: #2e6977 !important;
  transform: scale(1.05);
}

.app-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
  color: #fff !important;
}

/* Submenu */
.app-menu .navbar-nav .nav-sm {
  margin: 0.2rem 0 0.45rem !important;
  padding: 0.35rem !important;
  border-radius: 0.85rem;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.app-menu .navbar-nav .nav-sm .nav-link {
  position: relative;
  margin: 0.12rem 0 !important;
  padding: 0.58rem 0.85rem 0.58rem 0.85rem !important;
  border-radius: 0.65rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.app-menu .navbar-nav .nav-sm .nav-link:before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.35) !important;
  margin-inline-end: 0.65rem;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.app-menu .navbar-nav .nav-sm .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(-2px);
}

html[dir="ltr"] .app-menu .navbar-nav .nav-sm .nav-link:hover {
  transform: translateX(2px);
}

.app-menu .navbar-nav .nav-sm .nav-link:hover:before {
  background: #fff !important;
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

.app-menu .navbar-nav .nav-sm .nav-link:active,
.app-menu .navbar-nav .nav-sm .nav-link.is-pressed {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  transform: scale(0.98) !important;
}

.app-menu .navbar-nav .nav-sm .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.app-menu .navbar-nav .nav-sm .nav-link.active:before {
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}

/* Scrollbar polish */
.app-menu #scrollbar::-webkit-scrollbar {
  width: 5px;
}

.app-menu #scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.app-menu #scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* Compact / hover-collapse modes keep readability */
[data-sidebar-size=sm] .app-menu .navbar-nav .nav-link.menu-link,
[data-sidebar-size=sm-hover] .app-menu .navbar-nav .nav-link.menu-link {
  justify-content: center;
}

/* ---------- Print safety ---------- */
@media print {
  .card,
  .btn,
  .form-control,
  .page-title-box,
  .modal-content {
    box-shadow: none !important;
    transform: none !important;
    backdrop-filter: none !important;
  }
}