input,
textarea {
  -webkit-user-modify: read-write-plaintext-only;
}

.body {
  font-family: Inter, Roboto, Arial, Helvetica, sans-serif !important;
}

.ant-btn,
.ant-input,
.ant-select-selector,
.ant-typography {
  font-family: "Roboto", sans-serif;
}

.frKClJ {
  top: 17px !important;
}

:root {
  --hks-color-1: rgb(115, 103, 240);
  --bottom-nav-height: 60px;
}

.ant-input-div:not(:disabled),
.ant-input:not(:disabled),
.ant-input-outlined:not(:disabled),
.ant-picker:not(.ant-picker-disabled):not(:disabled),
.ant-picker-outlined:not(.ant-picker-disabled):not(:disabled),
.ant-input:hover:not(:disabled),
.ant-input-outlined:hover:not(:disabled),
.ant-picker:not(.ant-picker-disabled):hover:not(:disabled),
.ant-picker-outlined:not(.ant-picker-disabled):hover:not(:disabled),
.ant-input.ant-input-outlined:hover:not(:disabled),
.ant-input:focus:not(:disabled),
.ant-input-outlined:focus:not(:disabled),
.ant-picker:not(.ant-picker-disabled):focus:not(:disabled),
.ant-picker-outlined:not(.ant-picker-disabled):focus:not(:disabled),
.ant-input.ant-input-outlined:focus:not(:disabled),
.ant-input:-webkit-autofill:not(:disabled),
.ant-input-outlined:-webkit-autofill:not(:disabled),
.ant-input.ant-input-outlined:-webkit-autofill:not(:disabled) {
  font-size: 17px !important;
  font-weight: 700 !important;
  /* Varsayılan krem rengi: kullanıcı değiştirmezse #f6f1de, değiştirirse --hks-input-krem-bg kullanılır */
  background-color: var(--hks-input-krem-bg, #f6f1de) !important;
  background: var(--hks-input-krem-bg, #f6f1de) !important;
  -webkit-box-shadow: none !important;
  box-shadow: 0 0 0px 1000px var(--hks-input-krem-bg, #f6f1de) inset !important;
  -webkit-text-fill-color: var(--hks-input-krem-text, #000000) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Global placeholder: tüm input ve combobox'larda gri (#8c8c8c) + bold (patron talebi 0306).
   Yukarıdaki .ant-input kuralı -webkit-text-fill-color'ı siyaha zorladığı için placeholder'lar
   koyu görünüyordu; aşağıdaki kurallar placeholder'ı (yalnızca placeholder göründüğünde) gri yapar.
   Kullanıcı yazmaya başlayınca (:placeholder-shown eşleşmez) metin yine koyu kalır. */
.ant-input::placeholder,
textarea.ant-input::placeholder,
.ant-input-affix-wrapper input::placeholder,
.ant-picker-input > input::placeholder {
  color: #8c8c8c !important;
  -webkit-text-fill-color: #8c8c8c !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.ant-input:placeholder-shown:not(:disabled),
.ant-input-outlined:placeholder-shown:not(:disabled) {
  -webkit-text-fill-color: #8c8c8c !important;
  font-weight: 700 !important;
}
.ant-select-selection-placeholder {
  color: #8c8c8c !important;
  -webkit-text-fill-color: #8c8c8c !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.ant-input-div-transparent:not(:disabled),
.ant-input.ant-input-div-transparent:not(:disabled),
.ant-input-outlined.ant-input-div-transparent:not(:disabled),
.ant-input-div-transparent:hover:not(:disabled),
.ant-input.ant-input-div-transparent:hover:not(:disabled),
.ant-input-outlined.ant-input-div-transparent:hover:not(:disabled),
.ant-input-div-transparent:focus:not(:disabled),
.ant-input.ant-input-div-transparent:focus:not(:disabled),
.ant-input-outlined.ant-input-div-transparent:focus:not(:disabled),
.ant-input-div-transparent:-webkit-autofill,
.ant-input.ant-input-div-transparent:-webkit-autofill,
.ant-input-outlined.ant-input-div-transparent:-webkit-autofill {
  font-size: 17px;
  font-weight: 700;
  border-radius: 10px;
  background-color: transparent !important;
  color: #666;
  border-color: #d8d8d8;
  border-width: 2px;
  height: 45px !important;
  -webkit-box-shadow: none !important;
  -webkit-text-fill-color: #9b9a9a !important;
  padding-top: 0px !important;
  transition: background-color 5000s ease-in-out 0s;
}

.ant-input-div-green:not(:disabled),
.ant-input.ant-input-div-green:not(:disabled),
.ant-input-outlined.ant-input-div-green:not(:disabled),
.ant-input-div-green:hover:not(:disabled),
.ant-input.ant-input-div-green:hover:not(:disabled),
.ant-input-outlined.ant-input-div-green:hover:not(:disabled),
.ant-input-div-green:focus:not(:disabled),
.ant-input.ant-input-div-green:focus:not(:disabled),
.ant-input-outlined.ant-input-div-green:focus:not(:disabled),
.ant-input-div-green:-webkit-autofill,
.ant-input.ant-input-div-green:-webkit-autofill,
.ant-input-outlined.ant-input-div-green:-webkit-autofill {
  font-size: 17px;
  font-weight: 700;
  /* Yeşil varyant: varsayılan rgb(23,182,84), kullanıcı değiştirebilirse --hks-input-yesil-bg */
  background-color: var(--hks-input-yesil-bg, rgb(23, 182, 84)) !important;
  background: var(--hks-input-yesil-bg, rgb(23, 182, 84)) !important;
  -webkit-box-shadow: none !important;
  box-shadow: 0 0 0px 1000px var(--hks-input-yesil-bg, rgb(23, 182, 84)) inset !important;
  -webkit-text-fill-color: var(--hks-input-yesil-text, #ffffff) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.ant-input-div-xgreen,
.ant-input.ant-input-div-xgreen,
.ant-input-outlined.ant-input-div-xgreen,
.ant-input-div-xgreen:hover,
.ant-input.ant-input-div-xgreen:hover,
.ant-input-outlined.ant-input-div-xgreen:hover,
.ant-input-div-xgreen:focus,
.ant-input.ant-input-div-xgreen:focus,
.ant-input-outlined.ant-input-div-xgreen:focus,
.ant-input-div-xgreen:-webkit-autofill,
.ant-input.ant-input-div-xgreen:-webkit-autofill,
.ant-input-outlined.ant-input-div-xgreen:-webkit-autofill {
  font-size: 17px;
  font-weight: 700;
  /* Alternatif yeşil varyant (xgreen) için de aynı değişkenleri kullan */
  background-color: var(--hks-input-yesil-bg, rgb(23, 182, 84)) !important;
  background: var(--hks-input-yesil-bg, rgb(23, 182, 84)) !important;
  -webkit-box-shadow: none !important;
  box-shadow: 0 0 0px 1000px var(--hks-input-yesil-bg, rgb(23, 182, 84)) inset !important;
  -webkit-text-fill-color: var(--hks-input-yesil-text, #ffffff) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.ant-input-div-xbrown,
.ant-input.ant-input-div-xbrown,
.ant-input-outlined.ant-input-div-xbrown,
.ant-input-div-xbrown:hover,
.ant-input.ant-input-div-xbrown:hover,
.ant-input-outlined.ant-input-div-xbrown:hover,
.ant-input-div-xbrown:focus,
.ant-input.ant-input-div-xbrown:focus,
.ant-input-outlined.ant-input-div-xbrown:focus,
.ant-input-div-xbrown:-webkit-autofill,
.ant-input.ant-input-div-xbrown:-webkit-autofill,
.ant-input-outlined.ant-input-div-xbrown:-webkit-autofill {
  font-size: 17px;
  font-weight: 700;
  background-color: rgb(138, 114, 59) !important;
  background: rgb(138, 114, 59) !important;
  -webkit-box-shadow: none !important;
  box-shadow: 0 0 0px 1000px rgb(138, 114, 59) inset !important;
  -webkit-text-fill-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}

.ant-select,
.ant-input.ant-select,
.ant-input-outlined.ant-select,
.ant-select:focus,
.ant-input.ant-select:focus,
.ant-input-outlined.ant-select:focus {
  background-color: #eaeaea !important;
  background: #eaeaea !important;
  color: black !important;
}

.ant-select-dropdown,
.ant-input.ant-select-dropdown,
.ant-input-outlined.ant-select-dropdown,
.ant-select-dropdown:hover:not(:disabled),
.ant-input.ant-select-dropdown:hover:not(:disabled),
.ant-input-outlined.ant-select-dropdown:hover:not(:disabled),
.ant-select-dropdown:focus,
.ant-input.ant-select-dropdown:focus,
.ant-input-outlined.ant-select-dropdown:focus {
  background-color: #eaeaea !important;
  background: #eaeaea !important;
  color: black !important;
}

.ant-checkbox,
.ant-input.ant-checkbox,
.ant-input-outlined.ant-checkbox,
.ant-checkbox:hover:not(:disabled),
.ant-input.ant-checkbox:hover:not(:disabled),
.ant-input-outlined.ant-checkbox:hover:not(:disabled),
.ant-checkbox:focus,
.ant-input.ant-checkbox:focus,
.ant-input-outlined.ant-checkbox:focus {
  background-color: #eaeaea !important;
  background: #eaeaea !important;
  color: black !important;
}

.ant-checkbox-div {
  background-color: #eaeaea !important;
  background: #eaeaea !important;
  color: black !important;
}

.ant-checkbox-wrapper,
.ant-input.ant-checkbox-wrapper,
.ant-input-outlined.ant-checkbox-wrapper,
.ant-checkbox-wrapper:hover:not(:disabled),
.ant-input.ant-checkbox-wrapper:hover:not(:disabled),
.ant-input-outlined.ant-checkbox-wrapper:hover:not(:disabled),
.ant-checkbox-wrapper:focus,
.ant-input.ant-checkbox-wrapper:focus,
.ant-input-outlined.ant-checkbox-wrapper:focus {
  color: black !important;
}

.ant-select-single .ant-select-selection-wrap {
  margin-top: 15px;
}

.ant-select-selection-search-input {
  padding-top: 17px !important;
  padding-bottom: 5px !important;
}

.ant-select-selection-item {
  font-weight: 700 !important;
  font-size: 17px !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  align-items: center;
}

.ant-select-clear {
  background: transparent;
  background-color: transparent;
  transform: translateY(-50%);
  right: 40px;

  svg {
    font-size: 24px;
  }
}

.ant-select-selector {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

.ant-checkbox-wrapper {
  align-items: center;
  height: 30px !important;
  padding-left: 5px;
}

.ant-checkbox-wrapper+.formTitle {
  padding-left: 20px;
}

.ant-select-multiple {
  padding-top: 18px;

}

.ant-radio-group {
  padding-block: 18px;
  padding-left: 10px;
  background-color: #eaeaea !important;
}

.ant-select-multiple .ant-select-selection-item {
  height: 25px !important;
  line-height: inherit !important;
  background: #fff !important;
  background-color: #fff !important;
  font-weight: 700 !important;
}

.ant-select-selection-overflow-item {
  position: relative;
  top: -5px;
}

.ant-select-selection-search-input {
  color: black !important;
}

.ant-picker-input input::placeholder,
input::placeholder {
  font-weight: bold;
  color: #6f6b7d;
}

.ant-picker-input input,
.ant-input-number-input {
  padding-top: 17px !important;
  padding-bottom: 5px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}


.ant-picker.ant-picker-disabled .ant-picker-input .ant-picker-suffix {
  display: none !important;
}

.ant-input-number input.ant-input-number-input {
  height: 100% !important;
}

.ant-input-number {
  width: 100%;
  height: 58px !important;
}

.ant-input-number .ant-input-number-sm,
.ant-input-number .ant-input-number-input-wrap {
  height: 100% !important;
}

.ant-radio-label,
.ant-checkbox-label {
  font-size: 14px !important;
  font-weight: 400 !important;
}

.ant-picker-clear {
  position: relative;
}

.ant-select-suffix,
.ant-picker-suffix {
  color: #6f6b7d !important;
}

.formTitle {
  top: 15px !important;
  font-size: 15px !important;
  color: #7367f0 !important;
  line-height: 1;
}

.radioTitleFormInput {
  top: 0px !important;
  left: -5px !important;
}

.DateArrayTitle {
  left: 20px;
  margin-top: -30px;
}

.ant-form-item-has-error {
  border-color: #ff4d4f;

  .ant-picker {
    border-color: #ff4d4f;
  }
}

.react-international-phone-input-container .react-international-phone-input {
  height: 58px !important;
  font-size: 17px !important;
  width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  font-weight: 700 !important;
  padding-top: 17px !important;
  padding-bottom: 5px !important;
  padding-left: 7px !important;
  background-color: #f6f1de !important;
  background: #f6f1de !important;
  -webkit-box-shadow: none !important;
  box-shadow: 0 0 0px 1000px #f6f1de inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.react-international-phone-country-selector {
  background-color: #f6f1de !important;
}

.react-international-phone-country-selector-button {
  background-color: #f6f1de !important;
  padding-top: 17px !important;
  padding-bottom: 5px !important;
  height: 58px !important;
  padding-left: 7px !important;
}

.ant-picker,
.ant-select-single {
  height: 58px !important;
}

.react-international-phone-country-selector-button {
  border: none !important;
}

.ant-select-disabled {
  color: white !important;
}

.ant-select-sm {
  height: 14px !important;
}

.ant-select-sm .ant-select-selection-item {
  font-size: 14px !important;
  color: black !important;
  font-weight: 400 !important;
  padding-top: 0 !important;
}

.ant-input-disabled-div+div,
.ant-input-disabled-div+label,
.ant-input-disabled-div>.ant-input-disabled {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.ant-input {
  padding-top: 17px !important;
}

.ant-input-div-transparent {
  background-color: transparent;
}

.ant-input-div-green~.formTitle {
  color: white !important;
}

.sos-icon {
  height: 40px;
  width: 360px;
}

.ant-pagination-options {

  & .ant-select,
  & .ant-select * {
    background-color: white !important;
  }

  & .ant-select-dropdown,
  & .ant-select-dropdown * {
    background-color: white !important;
  }

  & .ant-select:hover:not(:disabled),
  & .ant-select:focus {
    background-color: white !important;
  }

  & .ant-select-item:hover:not(:disabled) {
    background-color: white !important;
  }
}

.row-error-bg {
  background-color: #ffbdb7 !important;
  opacity: 0.8;
}

.ant-btn {
  font-weight: 600 !important;
  height: 40px;
}

.ant-radio-button-checked {
  background: rgb(115, 103, 240);
}

.ant-input-disabled,
.ant-input-number-disabled,
.ant-picker-disabled,
.ant-select-disabled {
  font-size: 17px !important;
  font-weight: 700 !important;
  background-color: #759ceb !important;
  background: #759ceb !important;
  color: #fff !important;

  input,
  .ant-picker-input input {
    background-color: #759ceb !important;
    background: #759ceb !important;
    color: #fff !important;
  }

  .ant-select-selection-item {
    color: #fff !important;
  }

  +div,
  +label {
    color: #fff !important;
  }
}

.isDisabled {
  font-size: 17px !important;
  font-weight: 700 !important;
  pointer-events: none;
  background-color: #759ceb !important;
  background: #759ceb !important;
  color: #fff !important;
  cursor: not-allowed;

  +div {
    color: #fff !important;
  }
}

.error-text {
  position: absolute;
  bottom: -20px;
  color: red;
}

.ant-radio {
  top: 2px;
}

.option-image {
  width: 100%;
  height: 90%;
  object-fit: cover;
}

.button-group {
  width: 100%;
  justify-content: center;
  padding: 25px;
  display: flex;
  gap: 20px;
}

.button-group .ant-btn {
  font-size: 18px;
  padding: 12px 24px;
  min-width: 160px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.step-container {
  margin-bottom: 20px;
}

.ant-steps-item-finish {
  .ant-steps-item-icon {
    background: rgb(115, 103, 240) !important;
  }

  .ant-steps-item-title {
    color: rgb(115, 103, 240) !important;
  }

  .ant-steps-finish-icon {
    color: white !important;
  }
}

.ant-steps-item-active {
  .ant-steps-item-icon {
    background: rgb(115, 103, 240) !important;
  }

  .ant-steps-item-title {
    color: rgb(115, 103, 240) !important;
  }
}

.ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title::after {
  background: rgb(115, 103, 240) !important;
}

/* Genel menu selected - mor tema (üst nav, dropdown menüleri için).
   Sidebar (sider-menu-container) için hariç tutuluyor; aşağıdaki yeşil rule
   sidebar'a özgü davranıyor. */
.ant-menu-submenu-open:not(.sider-menu-container *):not(.sider-menu-container),
.ant-menu-submenu-selected:not(.sider-menu-container *):not(.sider-menu-container),
.ant-menu-item-selected:not(.sider-menu-container *):not(.sider-menu-container) {
  color: rgb(115, 103, 240) !important;

  .ant-menu-submenu-title {
    color: rgb(115, 103, 240) !important;
  }
}

.ant-menu-vertical>.ant-menu-item-selected {
  background: white !important;
  color: rgb(115, 103, 240) !important;
  font-weight: 500;
}

.ant-menu-vertical>.ant-menu-item:hover {
  color: rgb(115, 103, 240) !important;
  background: rgb(115, 103, 240, 0.1) !important;
}

.ant-menu-submenu:active::after,
.ant-menu-submenu-open::after,
.ant-menu-item:hover::after,
.ant-menu-submenu:hover::after,
.ant-menu-item-selected::after,
.ant-menu-submenu-selected::after {
  border-bottom-color: rgb(115, 103, 240) !important;
}

.ant-btn-primary:not(:disabled) {
  background: rgb(115, 103, 240) !important;
}

.ant-checkbox .ant-checkbox-inner {
  width: 20px;
  height: 20px;
}

.ant-checkbox-checked .ant-checkbox-inner {
  background: rgb(115, 103, 240) !important;
  border-color: rgb(115, 103, 240) !important;
  width: 20px;
  height: 20px;
}

.ant-btn-icon>svg {
  margin-right: 5px;
}

/* Scoped Green Selection for Side Menu (Drawer) - Sub-items only.
   NOT: Sidebar container'ımız antd <Sider> değil, custom styled.div. Bu yüzden
   `.ant-layout-sider` selector'una `.sider-menu-container` (SiderMenu.jsx'te
   MenuContainer'a verilmiş class) alternatifi eklendi — yoksa rule eşleşmiyor
   ve yukarıdaki genel mor (rgb(115, 103, 240)) rule'u kazanıyor. */
.ant-layout-sider .ant-menu-sub .ant-menu-item-selected,
.ant-layout-sider .ant-menu-sub .ant-menu-item-selected a,
.ant-layout-sider .ant-menu-sub .ant-menu-item-selected span,
.ant-layout-sider .ant-menu-sub .ant-menu-item-selected .ant-menu-title-content,
.ant-layout-sider .ant-menu-sub .ant-menu-item-selected .ant-menu-title-content span,
.sider-menu-container.ant-menu .ant-menu-item-selected,
.sider-menu-container.ant-menu .ant-menu-item-selected a,
.sider-menu-container.ant-menu .ant-menu-item-selected span,
.sider-menu-container.ant-menu .ant-menu-item-selected .ant-menu-title-content,
.sider-menu-container.ant-menu .ant-menu-item-selected .ant-menu-title-content span {
  background-color: #d4edda !important;
  color: #155724 !important;
  font-weight: 700 !important;
  border-left: 3px solid #28a745 !important;
}

.ant-layout-sider .ant-menu-sub .ant-menu-submenu-selected>.ant-menu-submenu-title,
.ant-layout-sider .ant-menu-sub .ant-menu-submenu-selected>.ant-menu-submenu-title span,
.sider-menu-container.ant-menu .ant-menu-submenu-selected>.ant-menu-submenu-title,
.sider-menu-container.ant-menu .ant-menu-submenu-selected>.ant-menu-submenu-title span {
  background-color: #f1f9f3 !important;
  color: #1f6f3a !important;
}

/* L2 — orta derinlik, biraz daha koyu */
.sider-menu-container.ant-menu .ant-menu-submenu-selected
  .ant-menu-submenu-selected>.ant-menu-submenu-title {
  background-color: #e3f3e7 !important;
}

/* L3 — en derin, en koyu */
.sider-menu-container.ant-menu .ant-menu-submenu-selected
  .ant-menu-submenu-selected
  .ant-menu-submenu-selected>.ant-menu-submenu-title {
  background-color: #d4edda !important;
}

a:hover {
  color: rgb(115, 103, 240) !important;
}

.react-international-phone-country-selector-dropdown {
  z-index: 999 !important;
}

.policies-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.policies-list li {
  width: 50%;
}

.policies-list li a {
  padding-top: 10px !important;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
}

/* Desktop */
@media (min-width: 1024px) {
  .policies-list li {
    padding-right: 40px;
    width: auto;
  }
}

.menu-module-label-blue {
  color: rgb(115, 103, 240) !important;
}

@keyframes labelPulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.menu-module-label-maroon {
  color: #c00000 !important;
  display: inline-block;
  animation: labelPulse 1s infinite ease-in-out;
}

/* Drawer header hard overrides (core side menu) */
.sider-menu-container .drawer-section-count-wrap {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  font-family: "Roboto", sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

.sider-menu-container .drawer-section-heading {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding-right: 34px !important;
}

.sider-menu-container .drawer-section-dash,
.sider-menu-container .drawer-section-count-number {
  /* Patron 2026-06-25: sayılar "v" (açılır oku) ile çakışıyordu → 1 punto küçült */
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Patron 2026-06-25: dikey menüde TÜM metin bold olsun — üst başlıklar
   (Tüm Yazılımlar / Abone Olduğum Yazılımlar), grup adları VE modül adları.
   (Önceki B.4b'de modüller normal yapılmıştı; patron hepsinin bold olmasını
   istedi: "ben sadece modül isimlerini bold yapalım demiştim".) Sayaç kendi
   700'ünü zaten taşıyor. */
.sider-menu-container.ant-menu .ant-menu-title-content,
.sider-menu-container.ant-menu .drawer-section-title {
  font-weight: 700 !important;
}

/* Patron 2026-06-25: sayaç (16/8) açılır okuyla (v/^) üst üste biniyordu.
   Sayıyı okun soluna kaydır (sağ kenardan ~26px içeri) ki çakışmasın. */
.sider-menu-container .drawer-section-count-wrap-custom {
  right: 26px !important;
}

.sider-menu-container.ant-menu-inline > li.ant-menu-submenu:has(.drawer-section-heading-tall) > .ant-menu-submenu-title {
  min-height: 56px !important;
  height: 56px !important;
  line-height: 1.1 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  align-items: center !important;
}

.sider-menu-container.ant-menu-inline > li[data-menu-id*="subscribed-modules"] > .ant-menu-submenu-title,
.sider-menu-container.ant-menu-inline > li.subscribed-section-menu > .ant-menu-submenu-title {
  min-height: 56px !important;
  height: 56px !important;
  line-height: 1.1 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  align-items: center !important;
}

.sider-menu-container.ant-menu-inline > li.ant-menu-item.subscribed-section-empty-item {
  min-height: 56px !important;
  height: 56px !important;
  line-height: 1.1 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
}

.sider-menu-container.ant-menu-inline > li.ant-menu-item.subscribed-section-empty-item .ant-menu-title-content {
  display: block !important;
  width: calc(100% - 10px) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.menu-module-label-maroon-static {
  color: #c00000 !important;
  display: inline-block;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--bottom-nav-height);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 80%, rgb(186 207 245 / 98%) 100%);
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Inter, "Poppins", sans-serif;
  font-size: 12px;
  color: #666;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;

  position: relative;
}

.nav-btn span {
  margin-top: 4px;
}

.nav-btn svg {
  font-size: 23px;
}

.nav-btn:hover {
  color: #8a64e8;
}

.nav-btn:active {
  color: #6b48c5;
}

.app-content {
  padding-bottom: 0;
  margin: 24px 16px 0;
}

.app-content>div {
  padding: 24px 24px calc(var(--bottom-nav-height) + 24px) 24px !important;
}

@media (min-width: 992px) {

  /* When the desktop layout doesn't render the bottom nav, remove the reserved space */
  .hks-content {
    height: 100vh;
  }

  .app-content>div {
    padding-bottom: 24px !important;
  }
}

/*
.popover-container {
  position: absolute;
  right: 12px;
  top: 0;
  cursor: pointer;
}
  */
.bottom-nav-modul-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 104px;

  background-color: white;
}

.header-container {
  position: sticky;
  box-shadow: rgba(165, 163, 174, 0.3) 0px 0.125rem 0.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  position: sticky;
  top: 0;
  width: 100%;
  max-width: 100%;
  z-index: 9;
  padding-left: 0;
  height: auto;
}

.ant-btn-color-default svg {
  color: #909090;
}

.hks-content {
  height: calc(100vh - var(--bottom-nav-height));
  position: relative;
  overflow-y: auto;
}

.header-menu-container {
  display: flex;
  justify-content: left;
  border: none !important;
  min-width: 0;
  flex: 1;
}

.header-menu-container li {
  font-size: 17px;
  font-weight: 700;
  font-family: Inter, "Roboto", sans-serif;
  color: #6f6b7d;
  padding: 12px !important;
}

.module-select-down-svg svg {
  font-size: 12px;
}

.bottom-nav-module-name {
  color: #8a64e8;
  font-weight: 600;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f8f9fa;
}

.gradient-text {
  font-size: 25px;
  font-weight: 700;
  background: linear-gradient(90deg, #8268e0, #8fcfbc, #8268e0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 2s linear infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

.ant-btn .ant-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-page-title {
  font-size: 20px !important;
  margin-bottom: 0px !important;
}

.hks-hr {
  border-bottom: 1px solid #f4ebeb;
  padding-bottom: 10px;
}

.hks-module-action-drawer-title-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.ant-drawer-header .ant-drawer-title {
  font-size: 18px !important;
}

.hks-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(204 199 255) !important;
  color: rgb(123 111 247) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  user-select: none;
}

.phone-book-fullname {
  font-weight: 600;
  font-size: 14px;
}

.phone-book-number {
  color: #ccc;
  font-size: 14px;
}

.phone-book-mobile-error {
  border-left: 4px solid red;
  border-radius: 0px;
}

.auth-container {
  overflow: hidden;
}

/* Minimal Modal - Tasarımsız Modal Stilleri */
.minimal-modal .ant-modal-content {
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.minimal-modal .ant-modal-header {
  display: none !important;
  padding: 0 !important;
  border: none !important;
}

.minimal-modal .ant-modal-footer {
  display: none !important;
  padding: 0 !important;
  border: none !important;
}

.minimal-modal .ant-modal-body {
  padding: 0 !important;
}

.minimal-modal .ant-modal-close {
  display: none !important;
}

/* Arka plan maskesini hafif yap */
.minimal-modal+.ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

/* Sprint 4 — PackageTypeSelector başlığı (SMultiSelect title)
   Desktop: sağa yaslı (orijinal), Mobile: ortalı ve kompakt */
.package-type-selector-title {
  text-align: right;
}
.package-type-selector-title-line-1 {
  line-height: 1.4;
}
.package-type-selector-title-line-2 {
  font-size: 14px;
  margin-top: 12px;
  line-height: 1.4;
}

/* =========================================================================
   Sprint 0 — Foundation: Mobile touch target uyumu (WCAG 2.1 AA, 44x44 min).
   Sadece <768px ekranlarda aktif. Desktop tasarım etkilenmez.
   ========================================================================= */
@media (max-width: 767px) {
  /* AntD icon-only butonlar (table actions, header ikonlar) */
  .ant-btn-icon-only,
  .ant-btn-sm.ant-btn-icon-only {
    min-width: 44px;
    min-height: 44px;
  }
  /* Bottom nav düğmeleri */
  .nav-btn {
    min-height: 44px;
  }
  /* Tooltip/Popover içindeki ikon butonlar — aynı kural */
  .ant-tooltip-inner .ant-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Sprint 4 — SRadio mobile dikey dizilim (sipariş türü, abonelik tipi vs).
     FormLabel absolute position — ilk radio ile çakışmasın diye padding-top ekle.
     NOT: `inline-radio-field` (Cinsiyet gibi text input içinde tek satır
     kalması gereken radio gruplar) bu kuralın dışında — kendi container'ı
     içinde yan yana akmalı. */
  .s-radio-group:not(.inline-radio-field) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 20px !important;
  }
  .s-radio-group:not(.inline-radio-field) > .ant-radio-wrapper {
    margin-right: 0 !important;
    margin-bottom: 2px;
  }
  .s-radio-group.inline-radio-field {
    flex-direction: row !important;
    gap: 16px !important;
    padding-top: 18px !important;
  }
  .s-radio-group.inline-radio-field > .ant-radio-wrapper {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Mobilde label + radio için yeterli dikey alan */
  .inline-radio-container {
    height: auto !important;
    min-height: 64px !important;
    padding-top: 6px !important;
  }

  /* Sprint 4 — SummaryCard "Seçilen Yazılım Paketleri" başlığının alt bilgisi
     mobilde yeni satıra insin, paddingLeft: 40 kaldırılır */
  .summary-packages-subtitle {
    display: block !important;
    padding-left: 0 !important;
    margin-top: 6px;
  }

  /* Sprint 4 — Bottom nav yüzünden sayfa altındaki son içeriğin kesilmesini önle.
     Root app'te --bottom-nav-height = 60px; .app-content > div zaten padding ayarlıyor
     ama tüm sayfalar bu yapıda değil. Genel güvenlik payı ekleyelim. */
  main.app-content,
  .ant-layout-content.app-content {
    padding-bottom: calc(var(--bottom-nav-height, 60px) + 16px);
  }

  /* Sprint 4 — PackageTypeSelector başlığı mobile override:
     ortalı, kompakt font, daha az yer kaplasın ki paketler hızlı göze çarpsın. */
  .package-type-selector-title {
    text-align: center !important;
  }
  .package-type-selector-title-line-1 {
    font-size: 13px;
    line-height: 1.3;
  }
  .package-type-selector-title-line-2 {
    font-size: 11px !important;
    margin-top: 4px !important;
    line-height: 1.25;
    color: #4b5563;
  }

  /* FormLabel (absolute) mobile: transform:translateY(-50%) + çok satırlı içerik üstten
     taşıyordu. Transform'u kaldır, üstten akıt; dropdown'a yeterli min-height ver. */
  .package-type-selector + .formTitle {
    top: 8px !important;
    right: 32px !important;
    left: 6px !important;
    padding: 0 2px !important;
    transform: none !important;
  }

  /* Dropdown select gövdesi mobilde otomatik büyüsün ki label tamamen içeride kalsın.
     Label ~70px: 2 satır line-1 (13×1.3×2=34) + 3 satır line-2 (11×1.25×3=41) + margin 4 ≈ 79 */
  .package-type-selector .ant-select .ant-select-selector {
    min-height: 96px !important;
    height: auto !important;
  }
  .package-type-selector .ant-select {
    height: auto !important;
  }

  /* Sprint 4 — "📚 Seçilen Yazılım Paketleri (N paket)" başlığı mobilde tek satırda
     kalsın; font + horizontal padding küçült. */
  .summary-packages-title {
    font-size: 13px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: 1.3 !important;
  }
  .summary-packages-title .summary-packages-subtitle {
    padding-left: 0 !important;
    font-size: 12px !important;
  }

  /* Sprint 8 — MainPage (Dashboard) başlık/subtitle mobilde daha kompakt */
  .main-page-grid-title {
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }
  .main-page-grid-subtitle {
    font-size: 14px !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
  }

  /* Sprint 8 — Imdat: Leaflet haritasında topright buton kümesi mobilde daha küçük
     (harita zaten tüm ekranı kapsar — butonlar haritayı çok gölgelemesin) */
  .imdat-button-grid {
    max-width: 48vw;
  }
  .imdat-action-btn {
    width: 100% !important;
  }

  /* Sprint 7 — Request Forms: Başlık mobilde stack */
  .request-forms-list-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .request-forms-list-header .request-forms-primary-btn {
    width: 100%;
  }

  /* Sprint 7 — Request Forms: Mobilde table gizli, card liste görünür */
  .request-forms-table {
    display: none !important;
  }
  .request-forms-card-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }
  /* Responses page mobilde sütunlar alt alta */
  .request-forms-responses-body {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .request-forms-responses-sidebar {
    width: 100% !important;
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
  }
}

/* Sprint 7 — Request Forms ortak stiller (her breakpointte) */
.request-forms-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.request-forms-primary-btn {
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 6px;
  border: none;
  background: #4f46e5;
  color: white;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.request-forms-secondary-btn {
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 13px;
  cursor: pointer;
}
.request-forms-link-btn {
  color: #2563eb;
  font-size: 13px;
  padding: 8px 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.request-forms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.request-forms-card-list {
  display: none;
}
.request-forms-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.request-forms-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #111827;
}
.request-forms-card-desc {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}
.request-forms-card-meta {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 10px;
}
.request-forms-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* Yukarıdaki .ant-input:not(:disabled) bloğu -webkit-text-fill-color: #000 ile placeholder'ı da siyaha zorluyor (WebKit). Boşken gri dolsun. */
.ant-input:placeholder-shown:not(:disabled),
textarea.ant-input:placeholder-shown:not(:disabled) {
  -webkit-text-fill-color: #8c8c8c !important;
  color: #8c8c8c !important;
}

/* HKS dark theme: CSS-only shell theme. React render tree is untouched. */
html.hks-dark {
  --hks-dark-bg: #141824;
  --hks-dark-surface: #202638;
  --hks-dark-surface-soft: #273047;
  --hks-dark-border: #3a455f;
  --hks-dark-text: #eef3ff;
  --hks-dark-muted: #b8c2d8;
  --hks-dark-link: #a9b5ff;
  --hks-input-krem-bg: #283149;
  --hks-input-krem-text: #f5f7ff;
  color-scheme: dark;
}

html.hks-dark,
html.hks-dark body,
html.hks-dark #root {
  background: var(--hks-dark-bg) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container,
html.hks-dark .auth-container .hks-content,
html.hks-dark .auth-container .app-content,
html.hks-dark .auth-container .app-content > div {
  background: var(--hks-dark-bg) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .header-container,
html.hks-dark .auth-container .ant-layout-header {
  background: var(--hks-dark-surface) !important;
  border-bottom: 1px solid var(--hks-dark-border) !important;
  box-shadow: none !important;
}

html.hks-dark .auth-container .ant-layout,
html.hks-dark .auth-container .ant-layout-content {
  background: var(--hks-dark-bg) !important;
}

html.hks-dark .auth-container .ant-layout-sider,
html.hks-dark .sider-menu-container,
html.hks-dark .sider-menu-container .ant-menu,
html.hks-dark .sider-menu-container .ant-menu-sub {
  background: var(--hks-dark-surface) !important;
  border-color: var(--hks-dark-border) !important;
}

html.hks-dark .auth-container,
html.hks-dark .auth-container .page-title,
html.hks-dark .auth-container .ant-typography,
html.hks-dark .auth-container label,
html.hks-dark .auth-container p,
html.hks-dark .auth-container strong,
html.hks-dark .header-menu-container li,
html.hks-dark .header-menu-container .ant-menu-title-content,
html.hks-dark .sider-menu-container .ant-menu-title-content,
html.hks-dark .sider-left-logo,
html.hks-dark .sider-left-logo * {
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .text-dark,
html.hks-dark .auth-container .text-black,
html.hks-dark .auth-container [style*="color: black"],
html.hks-dark .auth-container [style*="color:#000"],
html.hks-dark .auth-container [style*="color: #000"],
html.hks-dark .auth-container [style*="color: rgb(0, 0, 0)"] {
  color: var(--hks-dark-text) !important;
  -webkit-text-fill-color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .text-muted,
html.hks-dark .auth-container .ant-breadcrumb,
html.hks-dark .auth-container .ant-breadcrumb li,
html.hks-dark .auth-container .ant-breadcrumb-link,
html.hks-dark .auth-container .ant-empty-description {
  color: var(--hks-dark-muted) !important;
}

html.hks-dark .auth-container a {
  color: var(--hks-dark-link);
}

html.hks-dark .auth-container .bg-white,
html.hks-dark .auth-container .ant-card,
html.hks-dark .auth-container .ant-modal-content,
html.hks-dark .auth-container .ant-drawer-content,
html.hks-dark .auth-container .ant-popover-inner,
html.hks-dark .auth-container .ant-dropdown-menu {
  background: var(--hks-dark-surface) !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .bg-light,
html.hks-dark .auth-container .ant-tabs-nav {
  background: var(--hks-dark-surface-soft) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .border,
html.hks-dark .auth-container .border-top,
html.hks-dark .auth-container .border-bottom,
html.hks-dark .auth-container .hks-hr {
  border-color: var(--hks-dark-border) !important;
}

html.hks-dark .auth-container .ant-table,
html.hks-dark .auth-container .ant-table-container,
html.hks-dark .auth-container .ant-table-content,
html.hks-dark .auth-container .ant-table-body {
  background: var(--hks-dark-surface) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .ant-table-thead > tr > th {
  background: var(--hks-dark-surface-soft) !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .ant-table-tbody > tr > td,
html.hks-dark .auth-container .ant-table-cell {
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .ant-table-tbody > tr:nth-child(odd) > td,
html.hks-dark .auth-container .ant-table-tbody > tr:nth-child(odd) td.ant-table-cell-fix-left,
html.hks-dark .auth-container .ant-table-tbody > tr:nth-child(odd) td.ant-table-cell-fix-right {
  background: var(--hks-dark-surface) !important;
}

html.hks-dark .auth-container .ant-table-tbody > tr:nth-child(even) > td,
html.hks-dark .auth-container .ant-table-tbody > tr:nth-child(even) td.ant-table-cell-fix-left,
html.hks-dark .auth-container .ant-table-tbody > tr:nth-child(even) td.ant-table-cell-fix-right {
  background: #21304a !important;
}

html.hks-dark .auth-container .ant-table-tbody > tr:hover > td,
html.hks-dark .auth-container .ant-table-tbody > tr:hover td.ant-table-cell-fix-left,
html.hks-dark .auth-container .ant-table-tbody > tr:hover td.ant-table-cell-fix-right {
  background: #32415f !important;
}

html.hks-dark .auth-container .ant-input,
html.hks-dark .auth-container textarea.ant-input,
html.hks-dark .auth-container .ant-input-affix-wrapper,
html.hks-dark .auth-container .ant-select-selector,
html.hks-dark .auth-container .ant-picker {
  background: #283149 !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
  -webkit-text-fill-color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .ant-input:placeholder-shown:not(:disabled),
html.hks-dark .auth-container textarea.ant-input:placeholder-shown:not(:disabled),
html.hks-dark .auth-container .ant-input::placeholder,
html.hks-dark .auth-container .ant-select-selection-placeholder {
  color: var(--hks-dark-muted) !important;
  -webkit-text-fill-color: var(--hks-dark-muted) !important;
}

html.hks-dark .popover-container .ant-popover-inner-content a,
html.hks-dark .popover-container .ant-popover-inner-content span,
html.hks-dark .popover-container ul a {
  color: var(--hks-dark-text) !important;
}

/* Header menu has its own AntD surfaces over the header container. */
html.hks-dark .header-container .ant-menu,
html.hks-dark .header-container .ant-menu-overflow,
html.hks-dark .header-container .ant-menu-horizontal,
html.hks-dark .header-menu-container {
  background: var(--hks-dark-surface) !important;
  border-color: var(--hks-dark-border) !important;
}

html.hks-dark .header-container .ant-menu-item,
html.hks-dark .header-container .ant-menu-submenu,
html.hks-dark .header-container .ant-menu-submenu-title,
html.hks-dark .header-container .ant-menu-title-content {
  background: transparent !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .header-container .ant-menu-item-selected,
html.hks-dark .header-container .ant-menu-submenu-selected,
html.hks-dark .header-container .ant-menu-item-active,
html.hks-dark .header-container .ant-menu-submenu-active {
  color: var(--hks-dark-link) !important;
}

/* AntD portals render under body, not inside .auth-container. */
html.hks-dark .ant-drawer,
html.hks-dark .ant-drawer-content-wrapper,
html.hks-dark .ant-drawer-content,
html.hks-dark .ant-drawer-wrapper-body,
html.hks-dark .ant-drawer-body,
html.hks-dark .ant-drawer-header,
html.hks-dark .ant-drawer-footer,
html.hks-dark .ant-modal-content,
html.hks-dark .ant-modal-header,
html.hks-dark .ant-modal-body,
html.hks-dark .ant-modal-footer,
html.hks-dark .ant-popover-inner,
html.hks-dark .ant-popover-inner-content,
html.hks-dark .ant-dropdown-menu,
html.hks-dark .ant-select-dropdown,
html.hks-dark .ant-picker-dropdown .ant-picker-panel-container {
  background: var(--hks-dark-surface) !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-drawer-title,
html.hks-dark .ant-drawer-close,
html.hks-dark .ant-modal-title,
html.hks-dark .ant-modal-close,
html.hks-dark .ant-select-dropdown,
html.hks-dark .ant-select-item,
html.hks-dark .ant-select-item-option-content,
html.hks-dark .ant-empty,
html.hks-dark .ant-empty-description,
html.hks-dark .ant-dropdown-menu-item,
html.hks-dark .ant-dropdown-menu-submenu-title,
html.hks-dark .ant-picker-dropdown,
html.hks-dark .ant-picker-cell,
html.hks-dark .ant-picker-header,
html.hks-dark .ant-picker-header button {
  color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-select-item-option-active,
html.hks-dark .ant-select-item-option-selected,
html.hks-dark .ant-dropdown-menu-item:hover,
html.hks-dark .ant-dropdown-menu-submenu-title:hover,
html.hks-dark .ant-picker-cell-in-view:hover .ant-picker-cell-inner {
  background: var(--hks-dark-surface-soft) !important;
}

html.hks-dark .ant-tabs-nav,
html.hks-dark .ant-tabs-content-holder,
html.hks-dark .ant-tabs-tabpane,
html.hks-dark .ant-collapse,
html.hks-dark .ant-collapse-item,
html.hks-dark .ant-collapse-content,
html.hks-dark .ant-collapse-header {
  background: var(--hks-dark-surface) !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-tabs-tab,
html.hks-dark .ant-tabs-tab-btn {
  color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--hks-dark-link) !important;
}

html.hks-dark .ant-drawer .ant-row,
html.hks-dark .ant-drawer .ant-col,
html.hks-dark .ant-drawer .ant-typography,
html.hks-dark .ant-drawer label,
html.hks-dark .ant-drawer p,
html.hks-dark .ant-drawer strong,
html.hks-dark .ant-modal .ant-row,
html.hks-dark .ant-modal .ant-col,
html.hks-dark .ant-modal .ant-typography,
html.hks-dark .ant-modal label,
html.hks-dark .ant-modal p,
html.hks-dark .ant-modal strong {
  color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-drawer [style*="background: #fff"],
html.hks-dark .ant-drawer [style*="background:#fff"],
html.hks-dark .ant-drawer [style*="background: white"],
html.hks-dark .ant-drawer [style*="background-color: #fff"],
html.hks-dark .ant-drawer [style*="background-color:#fff"],
html.hks-dark .ant-drawer [style*="background-color: white"],
html.hks-dark .ant-modal [style*="background: #fff"],
html.hks-dark .ant-modal [style*="background:#fff"],
html.hks-dark .ant-modal [style*="background: white"],
html.hks-dark .ant-modal [style*="background-color: #fff"],
html.hks-dark .ant-modal [style*="background-color:#fff"],
html.hks-dark .ant-modal [style*="background-color: white"] {
  background: var(--hks-dark-surface) !important;
}

html.hks-dark .ant-drawer [style*="color: black"],
html.hks-dark .ant-drawer [style*="color:#000"],
html.hks-dark .ant-drawer [style*="color: #000"],
html.hks-dark .ant-drawer [style*="color: rgb(0, 0, 0)"],
html.hks-dark .ant-modal [style*="color: black"],
html.hks-dark .ant-modal [style*="color:#000"],
html.hks-dark .ant-modal [style*="color: #000"],
html.hks-dark .ant-modal [style*="color: rgb(0, 0, 0)"] {
  color: var(--hks-dark-text) !important;
  -webkit-text-fill-color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-drawer .ant-input,
html.hks-dark .ant-drawer textarea.ant-input,
html.hks-dark .ant-drawer .ant-input-affix-wrapper,
html.hks-dark .ant-drawer .ant-select-selector,
html.hks-dark .ant-drawer .ant-picker,
html.hks-dark .ant-modal .ant-input,
html.hks-dark .ant-modal textarea.ant-input,
html.hks-dark .ant-modal .ant-input-affix-wrapper,
html.hks-dark .ant-modal .ant-select-selector,
html.hks-dark .ant-modal .ant-picker {
  background: #283149 !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
  -webkit-text-fill-color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-input-disabled,
html.hks-dark .ant-picker-disabled,
html.hks-dark .ant-select-disabled .ant-select-selector,
html.hks-dark .ant-btn[disabled],
html.hks-dark .ant-btn:disabled {
  background: #2a2f3f !important;
  border-color: var(--hks-dark-border) !important;
  color: #8f98ad !important;
  -webkit-text-fill-color: #8f98ad !important;
}

html.hks-dark .request-forms-card,
html.hks-dark .request-forms-secondary-btn,
html.hks-dark .request-forms-table,
html.hks-dark .request-forms-list-header {
  background: var(--hks-dark-surface) !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .request-forms-card-title,
html.hks-dark .request-forms-card-desc,
html.hks-dark .request-forms-card-meta {
  color: var(--hks-dark-text) !important;
}

/* Softer overlay: keep the left side readable while editing in drawers. */
html.hks-dark .ant-drawer-mask {
  background: rgba(4, 7, 13, 0.2) !important;
  backdrop-filter: none !important;
}

/* Inline light panels across campaign/order/module screens. React serializes
   some colors as hex and some as rgb(), so both forms are covered here. */
html.hks-dark .auth-container [style*="background: #fff"],
html.hks-dark .auth-container [style*="background:#fff"],
html.hks-dark .auth-container [style*="background-color: #fff"],
html.hks-dark .auth-container [style*="background-color:#fff"],
html.hks-dark .auth-container [style*="background: white"],
html.hks-dark .auth-container [style*="background-color: white"],
html.hks-dark .auth-container [style*="background: rgb(255, 255, 255)"],
html.hks-dark .auth-container [style*="background-color: rgb(255, 255, 255)"],
html.hks-dark .auth-container [style*="background: #fafafa"],
html.hks-dark .auth-container [style*="background-color: #fafafa"],
html.hks-dark .auth-container [style*="background: rgb(250, 250, 250)"],
html.hks-dark .auth-container [style*="background-color: rgb(250, 250, 250)"],
html.hks-dark .auth-container [style*="background: #f9f9f9"],
html.hks-dark .auth-container [style*="background-color: #f9f9f9"],
html.hks-dark .auth-container [style*="background: #f9fafb"],
html.hks-dark .auth-container [style*="background-color: #f9fafb"],
html.hks-dark .auth-container [style*="background: rgb(249, 250, 251)"],
html.hks-dark .auth-container [style*="background-color: rgb(249, 250, 251)"],
html.hks-dark .auth-container [style*="background: #f8f9fa"],
html.hks-dark .auth-container [style*="background-color: #f8f9fa"],
html.hks-dark .auth-container [style*="background: rgb(248, 249, 250)"],
html.hks-dark .auth-container [style*="background-color: rgb(248, 249, 250)"],
html.hks-dark .auth-container [style*="background: #f5f5f5"],
html.hks-dark .auth-container [style*="background-color: #f5f5f5"],
html.hks-dark .auth-container [style*="background: rgb(245, 245, 245)"],
html.hks-dark .auth-container [style*="background-color: rgb(245, 245, 245)"],
html.hks-dark .auth-container [style*="background: #f0f0f0"],
html.hks-dark .auth-container [style*="background-color: #f0f0f0"],
html.hks-dark .auth-container [style*="background: rgb(240, 240, 240)"],
html.hks-dark .auth-container [style*="background-color: rgb(240, 240, 240)"],
html.hks-dark .auth-container [style*="background: #eaeaea"],
html.hks-dark .auth-container [style*="background-color: #eaeaea"],
html.hks-dark .auth-container [style*="background: rgb(234, 234, 234)"],
html.hks-dark .auth-container [style*="background-color: rgb(234, 234, 234)"],
html.hks-dark .auth-container [style*="background: #e6f7ff"],
html.hks-dark .auth-container [style*="background-color: #e6f7ff"],
html.hks-dark .auth-container [style*="background: rgb(230, 247, 255)"],
html.hks-dark .auth-container [style*="background-color: rgb(230, 247, 255)"],
html.hks-dark .auth-container [style*="background: #e3f2fd"],
html.hks-dark .auth-container [style*="background-color: #e3f2fd"],
html.hks-dark .auth-container [style*="background: rgb(227, 242, 253)"],
html.hks-dark .auth-container [style*="background-color: rgb(227, 242, 253)"],
html.hks-dark .auth-container [style*="background: #eef"],
html.hks-dark .auth-container [style*="background-color: #eef"],
html.hks-dark .auth-container [style*="background: #eefaf1"],
html.hks-dark .auth-container [style*="background-color: #eefaf1"],
html.hks-dark .auth-container [style*="background: linear-gradient(120deg, #e3f2fd"],
html.hks-dark .auth-container [style*="background: linear-gradient(135deg, #e3f2fd"] {
  background: var(--hks-dark-surface) !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container [style*="background: #fffbe6"],
html.hks-dark .auth-container [style*="background-color: #fffbe6"],
html.hks-dark .auth-container [style*="background: #fff7e6"],
html.hks-dark .auth-container [style*="background-color: #fff7e6"],
html.hks-dark .auth-container [style*="background: #f6f1de"],
html.hks-dark .auth-container [style*="background-color: #f6f1de"],
html.hks-dark .auth-container [style*="background: rgb(246, 241, 222)"],
html.hks-dark .auth-container [style*="background-color: rgb(246, 241, 222)"] {
  background: #303248 !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container [style*="color: #111"],
html.hks-dark .auth-container [style*="color:#111"],
html.hks-dark .auth-container [style*="color: #222"],
html.hks-dark .auth-container [style*="color:#222"],
html.hks-dark .auth-container [style*="color: #333"],
html.hks-dark .auth-container [style*="color:#333"],
html.hks-dark .auth-container [style*="color: #555"],
html.hks-dark .auth-container [style*="color:#555"],
html.hks-dark .auth-container [style*="color: #666"],
html.hks-dark .auth-container [style*="color:#666"],
html.hks-dark .auth-container [style*="color: rgb(17, 24, 39)"],
html.hks-dark .auth-container [style*="color: rgb(31, 41, 55)"] {
  color: var(--hks-dark-text) !important;
  -webkit-text-fill-color: var(--hks-dark-text) !important;
}

/* Select portals and compact pagination size dropdowns. */
html.hks-dark .ant-select-dropdown,
html.hks-dark .ant-select-dropdown .rc-virtual-list,
html.hks-dark .ant-select-dropdown .rc-virtual-list-holder,
html.hks-dark .ant-select-dropdown .rc-virtual-list-holder-inner,
html.hks-dark .ant-select-dropdown .ant-select-item,
html.hks-dark .ant-select-dropdown .ant-select-item-empty {
  background: var(--hks-dark-surface) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-select-dropdown .ant-select-item-option-selected,
html.hks-dark .ant-select-dropdown .ant-select-item-option-active {
  background: var(--hks-dark-surface-soft) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .ant-select-dropdown .ant-select-item-option-disabled {
  color: #8f98ad !important;
}

/* Bootstrap-ish form strips and module form custom field wrappers. */
html.hks-dark .auth-container .form-control,
html.hks-dark .auth-container .form-select,
html.hks-dark .auth-container .input-group-text,
html.hks-dark .ant-drawer .form-control,
html.hks-dark .ant-drawer .form-select,
html.hks-dark .ant-drawer .input-group-text {
  background: #283149 !important;
  border-color: var(--hks-dark-border) !important;
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .ant-radio-wrapper,
html.hks-dark .auth-container .ant-checkbox-wrapper,
html.hks-dark .ant-drawer .ant-radio-wrapper,
html.hks-dark .ant-drawer .ant-checkbox-wrapper {
  color: var(--hks-dark-text) !important;
}

html.hks-dark .auth-container .ant-radio-inner,
html.hks-dark .auth-container .ant-checkbox-inner,
html.hks-dark .ant-drawer .ant-radio-inner,
html.hks-dark .ant-drawer .ant-checkbox-inner {
  background: #283149 !important;
  border-color: var(--hks-dark-border) !important;
}