:root {
  --white-color: #ffffff;
  --green-bg: #1b8354;
  --green-hover-bg: #166a45;
  --dark-color: #161616;
  --gray-bg: #f3f4f6;
  --dark-bg: #0d121c;
  --dark-bg-hover: #1f2a37;
  --gray-color: #384250;
  --light-color: #9da4ae;
  --border-color: #9da4ae;
  --sec-border-color: #d2d6db;
  --input-border: #384250;
  --input-color: #6c737f;
  --bg-light-gray: #f7f8fa;
  --color-highlight: #c40bac;
  --red-color: #dc2626;
  --red-hover-color: #991b1b;
  --emerald-green: #16a34a;
  --deep-emerald: #15803d;
  --bright-blue: #2563eb;
  --deep-blue: #1e40af;
  --vivid-purple: #7c3aed;
  --royal-purple: #5b21b6;
  --mint-green: #10b981;
  --forest-green: #047857;
  --amber-gold: #f59e0b;
  --burnt-orange: #b45309;
  --sky-blue-light: #2196f345;
  --sky-blue: #2196f3;
  --soft-gray: #eaeaea;
  --danger-red: #d32f2f;
  --slate-blue-dark: #1e293b;
  --fresh-green: #22a574;
  --alert-red: #ef4444;
  --deep-crimson: #b91c1c;
  --primary-blue: #3498db;
  --blue-dark: #2980b9;
  --pink-light: #f8e6f8;
  --pink-dark: #f2d1f2;
  --brand-red: #991b1b;
  --brand-blue: #1e3a8a;
}

@font-face {
  font-family: "IBM-Plex";
  src: url("../css/fonts/IBMPlexArabic-Text.ttf");
}

body {
  background-color: var(--gray-bg) !important;
  font-family: "IBM-Plex" !important;
}

[dir="rtl"] input,
select {
  font-family: "IBM-Plex" !important;
}

/* start header  */
.header-table {
  font-family: "IBM-Plex" !important;
}

md-toolbar.md-hue-2:not(.md-menu-toolbar) {
  background-color: var(--white-color) !important;
}

md-toolbar,
md-toolbar.md-hue-2:not(.md-menu-toolbar) md-icon {
  color: var(--dark-color) !important;
}

.md-toolbar-tools {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.notiAria {
  display: flex;
  justify-content: center;
  align-items: center;
}

.notiAria img {
  width: 24px !important;
  height: 24px !important;
}

.header-actions button,
.header-actions .notiAria,
.header-actions .reset {
  margin: 0 !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  margin-inline: 8px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-actions button:hover img,
.header-actions .notiAria:hover img,
.header-actions .reset:hover md-icon {
  transition: all 0.2s ease-in-out;
}

.header-actions button:hover img,
.header-actions .notiAria:hover img,
.header-actions .reset:hover md-icon {
  transform: scale(1.2);
}

.header-actions.home img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(5%) saturate(233%) hue-rotate(169deg) brightness(95%) contrast(86%);
}

.header-actions.reset md-icon {
  filter: brightness(0) saturate(100%) invert(29%) sepia(87%) saturate(393%) hue-rotate(92deg) brightness(94%) contrast(87%);
}

.header-actions.noti img {
  filter: brightness(0) saturate(100%) invert(73%) sepia(91%) saturate(567%) hue-rotate(2deg) brightness(103%) contrast(105%);
}

.header-actions.logout img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(97%) saturate(7485%) hue-rotate(3deg) brightness(98%) contrast(108%);
}

/* .header-actions .reset,
.header-actions .noti,
.header-actions .logout {
  cursor: pointer !important;
} */

/* end header  */
/* start breadcrum  */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.breadcrumb a {
  color: var(--gray-color);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}

.breadcrumb span {
  color: var(--light-color);
}

.breadcrumb span:hover {
  color: var(--gray-color);
}

/* end breadcrum  */
/* start button  */
.general-actions-button {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;

  .cancle-and-new {
    display: flex;
    gap: 8px;

    button {
      margin: 0;
      border-radius: 8px !important;
      min-height: 40px;
    }
  }
}

.search-button,
.add-button,
.new-button,
.delete-btn,
.payment-button,
.download-button,
.temp-name-button,
.action-button,
.print-button,
.edit-button,
.favorite-button,
.reload-btn,
.move-btn {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  width: fit-content !important;
  font-size: 16px !important;
  line-height: unset !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
}

.search-button {
  background-color: var(--green-bg);
  color: var(--white-color);
  min-height: 48px;
  min-width: 120px;
  font-weight: 700;
  gap: 10px;
}

.print-button,
.action-button {
  min-height: 48px;
  min-width: 120px;
  font-weight: 700;
  gap: 10px;
}

.search-button img {
  width: 20px;
  height: 20px;
}

.search-button:hover {
  background-color: var(--green-hover-bg) !important;
}

.favorite-button {
  background-color: var(--pink-light) !important;
  color: var(--color-highlight) !important;
}

.favorite-button:hover {
  background-color: var(--pink-dark) !important;
}

.add-button,
.top-search .new-button {
  background-color: var(--green-bg);
  color: var(--white-color);
}

.add-button:hover,
.top-search .new-button:hover {
  background-color: var(--green-hover-bg) !important;
}

.delete-btn {
  background-color: var(--red-color) !important;
  color: var(--white-color) !important;
}

.delete-btn img {
  filter: brightness(0) invert(1) !important;
}

.delete-btn:hover {
  background-color: var(--red-hover-color) !important;
}

.payment-button {
  background-color: #ffffff !important;
  color: #2196f3;
  min-height: 48px;
  min-width: 180px;
  border: 1px solid #2196f3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: space-evenly;
}

.payment-button:hover {
  background-color: #2196f3 !important;
  color: #fff;

  img {
    filter: brightness(0) invert(1);
  }

  /* darker green */
}

.download-button {
  background-color: var(--bright-blue) !important;
  /* أزرق جذاب */
  color: var(--white-color);
}

.download-button:hover {
  background-color: var(--deep-blue) !important;
  /* أزرق أدكن عند المرور */
}

.temp-name-button {
  background-color: var(--vivid-purple) !important;
  color: var(--white-color) !important;
}

.temp-name-button:hover {
  background-color: var(--royal-purple) !important;
}

/* Reload (Primary Blue) */
.reload-btn {
  background: #1976d2 !important;
  color: white !important;

  img {
    filter: brightness(0) invert(1);
  }
}

.reload-btn:hover {
  background: #0d47a1 !important;
}

/* Move (Accent Green) */
.move-btn {
  background: #388e3c !important;
  color: white !important;

  img {
    filter: brightness(0) invert(1);
  }
}

.move-btn:hover {
  background: #1b5e20 !important;
}

.total-cell {
  background-color: var(--green-bg);
  color: var(--white-color);
}

.action-button {
  background-color: var(--green-bg) !important;
  color: var(--white-color) !important;

  img {
    filter: brightness(0) invert(1);
  }
}

.action-button:hover {
  background-color: var(--green-hover-bg) !important;
}

.print-button {
  background-color: var(--amber-gold);
  color: var(--white-color);

  img {
    width: 20px;
    filter: brightness(0) invert(1);
  }
}

.print-button:hover {
  background-color: var(--burnt-orange) !important;
}

.edit-button {
  background-color: var(--primary-blue);
  color: var(--white-color);

  img {
    width: 16px;
    filter: brightness(0) invert(1);
  }
}

.edit-button:hover {
  background-color: var(--blue-dark) !important;
}

/* end button  */
/* start pagination */
.pagination.paging-footer {
  color: var(--dark-color);
  padding: 10px 5px 5px 5px;
  background-color: var(--gray-bg) !important;
  direction: rtl;
  border-radius: 16px;
  margin-top: 16px;

  input {
    width: 60px;
    height: 38px;
    text-align: center;
    margin-inline-end: 8px;
  }
}

.paging-footer md-icon {
  color: var(--dark-color) !important;
}

.paging-footer md-button.disabled {
  color: var(--dark-color) !important;
  cursor: not-allowed;
}

.pagination.paging-footer md-icon {
  color: var(--dark-color) !important;
}

/* end pagination */

/* end gneral  */
/* start search inputs style  */

.search-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.input-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 8px;

  @media (max-width: 991px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 776px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 600px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* end search inputs style  */
.page-content {
  padding: 8px;
  border-radius: 8px;
  box-shadow: unset;
  width: 100%;
  overflow: visible;
  background-color: var(--white-color);

  md-autocomplete {
    min-width: unset !important;
    width: 100%;
  }

  fieldset {
    legend {
      font-weight: bold;
    }
  }

  .search-box {
    z-index: 999999999999;
    border: 1px solid var(--border-color);
    padding: 8px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;

    background-color: var(--white-color);
  }

  .search-container .searchText {
    border-left: unset !important;
    border-right: unset !important;
    border-radius: 0 !important;
  }

  .check-search {
    display: flex;
    align-items: start;
    position: relative;

    md-checkbox {
      position: absolute;
      inset-inline-start: 0;
      z-index: 99999;
    }
  }

  .badge {
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .md-tab {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .top-search {
    background-color: var(--gray-bg);
    padding: 8px 16px;
    border-radius: 16px;
    position: sticky;
    top: 66px;
    z-index: 9;
    margin-bottom: 16px;
  }

  md-autocomplete[md-floating-label] .md-show-clear-button button {
    top: 28px;
  }

  md-input-container .md-placeholder,
  md-input-container label:not(.md-no-float):not(.md-container-ignore),
  md-input-container.md-input-focused:not([md-no-float]) .md-select-placeholder span:first-child {
    transform: unset !important;
    position: relative !important;
  }

  md-input-container label:not(.md-container-ignore) {
    bottom: unset !important;
  }

  md-input-container .md-placeholder {
    opacity: unset !important;
  }

  md-input-container.md-icon-left>label {
    right: unset !important;
  }

  .input-wrapper {
    padding: unset !important;
    margin: unset !important;
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .input-wrapper:focus-visible {
    outline: unset !important;
  }

  .input-wrapper:focus-within {
    box-shadow: unset !important;
  }

  /* إخفاء الأيقونة الأصلية للـ date input */
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    cursor: pointer;
  }

  /* تنسيق الأيقونة المخصصة */
  .custom-calendar-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 44px;
    pointer-events: none;
    /* عشان ما تمنع الضغط على input */
    width: 20px;
    height: 20px;
    padding: unset !important;
  }

  /* Date input itself */
  input,
  md-select,
  select,
  textarea {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--dark-font-color);
    outline: none;
    padding: 6px 0;
    background: var(--white-color);
    padding: 0 12px !important;
    height: 48px;
    border-radius: 8px !important;
    background-color: var(--white-color) !important;
    border: 1px solid var(--border-color);
    color: var(--input-color);
  }

  textarea {
    padding: 12px !important;
    min-height: 72px !important;
  }

  md-icon {
    padding: unset !important;
    transform: unset !important;
    top: 12px !important;
    filter: invert(48%) sepia(6%) saturate(305%) hue-rotate(179deg) brightness(93%) contrast(89%) !important;
  }

  md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border: 1px solid var(--input-border) !important;
  }

  md-select.ng-invalid.ng-touched .md-select-value {
    border-bottom: none;
  }

  md-input-container .md-input[disabled] {
    border-bottom-color: var(--border-color) !important;
  }

  md-autocomplete {
    height: unset !important;
  }

  md-autocomplete md-autocomplete-wrap {
    height: unset !important;
  }

  input[type="date"]:focus {
    box-shadow: unset !important;
    outline: unset !important;
  }

  label {
    color: var(--dark-color) !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-weight: normal !important;
  }

  .md-errors-spacer {
    display: none;
  }

  md-input-container>md-select {
    margin: unset !important;
  }

  md-checkbox .md-label {
    margin-top: unset !important;
  }

  md-input-container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  md-checkbox {
    margin-left: unset !important;
    margin-bottom: unset !important;

    /* width: 20px !important; */
  }

  .action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  md-radio-button {
    margin-right: unset !important;
    margin-inline-start: 8px !important;
  }

  md-input-container.md-input-invalid .md-input,
  input.ng-invalid,
  select.ng-invalid {
    border-bottom: unset !important;
    border: 1px solid var(--border-color) !important;
  }
}

.page-content .search-content {
  margin-bottom: 16px;
  padding: 8px;
  border-radius: 16px;
  background-color: var(--gray-bg);
}

.page-content .search-content .layout-row:not(:last-child) {
  margin-bottom: 8px;
}

/* Button 1: فاتورة مشتريات */
.page-content .search-content .actions-buttons .btn-invoice {
  background-color: var(--bright-blue);
  /* normal */
}

.page-content .search-content .actions-buttons .btn-invoice:hover {
  background-color: var(--deep-blue);
  /* hover */
}

/* Button 
2: مستند تسعير */
.page-content .search-content .actions-buttons .btn-pricing {
  background-color: var(--mint-green);
  /* normal */
}

.page-content .search-content .actions-buttons .btn-pricing:hover {
  background-color: var(--forest-green);
  /* hover */
}

/* Button 3: طباعة الباركود */
.page-content .search-content .actions-buttons .btn-barcode {
  background-color: var(--amber-gold);
  /* normal */
}

.page-content .search-content .actions-buttons .btn-barcode:hover {
  background-color: var(--burnt-orange);
  /* hover */
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-top: 16px;
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
.table-wrapper::-webkit-scrollbar {
  height: 10px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: var(--gray-bg);
  border-radius: 10px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

.table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 2px solid var(--gray-bg);
}

table.awesomeTable.enhanceTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px !important;
  /* optional, to force scrolling if the table is large */
}

table.awesomeTable.enhanceTable .fit-width {
  width: 56px !important;
}

table.awesomeTable.enhanceTable .fit-input-width {
  width: 200px !important;
}

table.awesomeTable.enhanceTable .fit-input-small-width {
  width: 100px !important;
}

table.awesomeTable.enhanceTable button {
  border: none;
}

.awesomeTable.enhanceTable tbody tr,
.awesomeTable.enhanceTable tbody tr::before,
.awesomeTable.enhanceTable tbody tr::after {
  border-bottom: none !important;
  box-shadow: none !important;
}

.awesomeTable.enhanceTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 2px solid var(--sec-border-color) !important;
  /* لون البوردر */
  border-radius: 16px !important;
  /* الزوايا */
  overflow: hidden !important;
  /* عشان الزوايا تتقص */
}

.awesomeTable.enhanceTable tbody td input[readonly] {
  background-color: var(--gray-bg) !important;
}

.awesomeTable.enhanceTable .table-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.awesomeTable.enhanceTable thead {
  box-shadow: unset !important;

  th {
    button {
      width: 56px !important;
      min-width: unset !important;
    }

    a {
      width: 56px !important;
      min-width: unset !important;
    }
  }
}

.awesomeTable.enhanceTable thead th {
  background-color: var(--gray-bg) !important;
  color: var(--color-highlight) !important;
  padding: 16px !important;
  white-space: nowrap !important;
}

.awesomeTable.enhanceTable tfoot td,
.awesomeTable.enhanceTable tfoot th {
  background-color: var(--gray-bg) !important;
  color: var(--color-highlight) !important;
}

.awesomeTable.enhanceTable tfoot td.center-middle button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.awesomeTable.enhanceTable thead th a {
  display: flex;
  justify-content: center;

  .add-button {
    min-width: 24px;
  }
}

.awesomeTable.enhanceTable tbody td {
  background-color: var(--white-color) !important;
  color: var(--dark-color) !important;
  padding: 8px !important;
}

.awesomeTable.enhanceTable tbody {
  tr:nth-child(even) {
    td {
      background-color: var(--bg-light-gray) !important;
    }
  }

  tr {
    td:last-child {
      background-color: var(--gray-bg) !important;
    }
  }
}

.awesomeTable.enhanceTable tbody td input,
.awesomeTable.enhanceTable tbody td select,
.awesomeTable.enhanceTable tbody td textarea {
  font-size: 16px;
  outline: none;
  background: var(--white-color);
  padding: 0 12px !important;
  height: 48px;
  border-radius: 8px !important;
  background-color: var(--white-color) !important;
  border: 1px solid var(--border-color);
  color: var(--input-color);
  width: 100%;
}

.awesomeTable.enhanceTable tbody td input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  cursor: pointer;
}

.awesomeTable.enhanceTable tbody .table-calender-input {
  position: relative;

  .custom-calendar-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 14px;
    pointer-events: none;
    width: 20px;
    height: 20px;
    padding: unset !important;
  }

  &:not(:has(input)) {
    .custom-calendar-icon {
      display: none;
    }
  }
}

/* .awesomeTable.enhanceTable tbody td md-icon {
  top: 24px !important;
  inset-inline-start: -24px !important;
} */

.awesomeTable.enhanceTable tfoot td .md-button.md-primary.md-fab {
  background-color: var(--green-bg);
}

.awesomeTable.enhanceTable tfoot td .md-button.md-primary.md-fab:hover {
  background-color: var(--green-hover-bg);
}

.total-cell-footer {
  padding: 16px;

  div {
    background-color: var(--sky-blue-light);
    padding: 4px 10px;
    border-radius: 8px;
    color: var(--sky-blue);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed;
  }
}

input[readonly] {
  background-color: var(--soft-gray) !important;
}

/* end general page style */

div .tree ul li span {
  background-color: rgb(44 62 80) !important;
  font-family: 'IBM-Plex' !important;
}