:root {
  --default-font-family: Inter, var(--font-sans);
  font-feature-settings: 'liga' 1, 'calt' 1, 'tnum' 1, 'ss01' 1;
  --radius: 0.3rem;
  --spacing: 0.2rem;

  /* AG Grid row state — consumed by `app/js/ag-theme.js`.
     Light values stay subtle (zinc-100 mixed with bg). Dark values use
     solid tokens — translucent mixes on the zinc-950 background read
     as nearly invisible, so we drop the transparency. */
  --ag-row-selected: #3aa8ff;
  --ag-row-hover:    color-mix(in oklab, var(--secondary) 50%, transparent);

  /* AG Grid emphasised total-price cell — used via `cellClass: 'tprice-cell'`. */
  --ag-tprice-bg: #fffbeb;

  /* AG Grid pinned-footer rows — bg + borders applied to .ag-floating-bottom. */
  --ag-footer-bg:            #f9fafb;
  --ag-footer-border-top:    #6b7280;
  --ag-footer-border-bottom: #e5e7eb;

  /* Order Sheet — desktop-mirrored column tints + conditional highlights.
     Light = exact Delphi colors; dark = low-alpha hue tints so they stay
     subtle on the zinc-950 grid. Used via inline `backgroundColor: var(--os-*)`
     in order-sheet/index.js. */
  --os-col-po:   #FFFFC0;  /* PO + on.od */
  --os-col-tot:  #C0C0FF;  /* All + TJual */
  --os-col-gdg:  #FFC0C0;  /* Gdg + in.tr */
  --os-col-br1:  #C0FFC0;  /* Mumbul */
  --os-col-br2:  #C0FFFF;  /* Kampial */
  --os-col-br3:  #FEEAAB;  /* Ungasan */
  --os-low-bg:   #FF0000;  /* low-stock alert */
  --os-early-bg: #87CEEB;  /* tgl_terima < tgl_create */
  --os-noimg-bg: #FFFF80;  /* no product image */
  --os-stop-bg:  #FFAAAA;  /* stop_order = Y */
  --os-stop-fg:  #CC0000;
  --sb-promo-bg: #F0C0F0;  /* status-barang: item on promo (plu / nama / H.Jual) */
}
.dark {
  --ag-row-selected: var(--color-blue-800);
  --ag-row-hover:    var(--secondary);

  --ag-tprice-bg: rgba(251, 191, 36, 0.32);

  --ag-footer-bg:            var(--color-zinc-900);
  --ag-footer-border-top:    var(--color-zinc-600);
  --ag-footer-border-bottom: var(--color-zinc-800);

  --os-col-po:   rgba(253, 224, 71,  0.16);  /* yellow-300 */
  --os-col-tot:  rgba(165, 180, 252, 0.18);  /* indigo-300 */
  --os-col-gdg:  rgba(248, 113, 113, 0.16);  /* red-400 */
  --os-col-br1:  rgba(134, 239, 172, 0.16);  /* green-300 */
  --os-col-br2:  rgba(103, 232, 249, 0.16);  /* cyan-300 */
  --os-col-br3:  rgba(252, 211, 77,  0.16);  /* amber-300 */
  --os-low-bg:   rgba(220, 38,  38,  0.55);  /* keep alert prominent */
  --os-early-bg: rgba(56,  189, 248, 0.28);  /* sky-400 */
  --os-noimg-bg: rgba(250, 204, 21,  0.26);  /* yellow-400 */
  --os-stop-bg:  rgba(239, 68,  68,  0.30);  /* red-500 */
  --os-stop-fg:  #fca5a5;                    /* red-300 — legible on dark */
  --sb-promo-bg: rgba(217, 70, 239, 0.22);   /* fuchsia-500 — item on promo */
}
.ag-cell.tprice-cell {
  background: var(--ag-tprice-bg);
}
@supports (font-variation-settings: normal) {
  :root { --default-font-family: InterVariable, var(--font-sans); }
}
.compact-table.kt-card-table {
  .kt-table {
    th,	td {
      min-height: 33px;
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      &:first-child {
        padding-inline-start: calc(var(--spacing) * 3);
      }
      &:last-child {
        padding-inline-end: calc(var(--spacing) * 3);
      }
    }
  }
}
.kt-select-options {
  max-height: 400px;
  overflow: auto;
}
.kt-table-col {
  display: flex;
  justify-content: space-between;

  &.asc .kt-table-col-sort {
    &:before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3E%3C/svg%3E");
    }
    &:after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C9CEDA'/%3E%3C/svg%3E");
    }
  }

  &.desc .kt-table-col-sort {
    &:before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C9CEDA'/%3E%3C/svg%3E");
    }
    &:after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3E%3C/svg%3E");
    }
  }
}
[data-kt-toggle-password-initialized] [data-kt-toggle-password-trigger] > span {
  line-height: 0;
}
@layer components {
  #scrollable_content {
    padding-block: calc(var(--spacing) * 6);
  }
  @media (width >= 80rem) {
    #scrollable_content {
      padding-block: calc(var(--spacing) * 7.5);
    }
  }
}
.kt-card.h-full {
  overflow: hidden;
}
/* Select2 — styled to match kt-select (based on erp-finnex).
   Height, font-size, line-height, radius and padding all mirror
   the .kt-select rule in styles.css so the two render identically. */
.select2-container {
  font-size: 0.8125rem;
  font-family: inherit;

  &.select2 .select2-selection {
    height: calc(var(--spacing) * 8.5);
    border-radius: calc(var(--radius) - 2px) !important;
    border: 1px solid var(--input);
    background-color: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    .dark & {
      border-color: #27272a;
      background-color: #09090b;
    }

    .select2-selection__rendered {
      line-height: calc(var(--spacing) * 8.5 - 2px);
      padding-left: calc(var(--spacing) * 3);
      padding-right: calc(var(--spacing) * 6);
      color: var(--secondary-foreground);

      .select2-selection__clear {
        line-height: calc(var(--spacing) * 8.5 - 2px);
        margin-top: 0;
        margin-inline-end: calc(var(--spacing) * 2.5);
        padding-inline: calc(var(--spacing) * 1.5);
      }
    }

    &.select2-selection--multiple .select2-selection__rendered {
      padding-right: calc(var(--spacing) * 6);

      .select2-selection__clear {
        margin: 0;
        margin-inline-end: calc(var(--spacing) * 2.5);
        line-height: 28px;
        padding-inline: calc(var(--spacing) * 1.5);
      }

      .select2-selection__choice {
        line-height: 20px;
        background-color: var(--muted);
        border-color: var(--input);
        display: flex;
        justify-content: center;
        align-content: center;
        gap: 3px;

        .select2-selection__choice__remove {
          line-height: 18px;
          margin: 0;
        }
      }
    }

    .select2-selection__placeholder {
      color: var(--muted-foreground);
      font-size: var(--text-sm);
    }

    .select2-selection__arrow {
      height: calc(var(--spacing) * 8.5 - 2px);
      right: 6px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 14px 11px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239f9fa9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");

      b { display: none; }
    }
  }

  &.select2-container--open .select2-selection,
  &.select2-container--focus .select2-selection {
    border-color: var(--primary) !important;
    outline: none;
    box-shadow: none;
  }

  .select2-dropdown {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    background-color: var(--popover);
    z-index: 9999;

    .select2-search {
      padding: 0;
      border-bottom: 1px solid var(--border);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 1);

      input {
        border: 0;
        outline: 0;
        font-size: var(--text-sm);
        min-height: 30px;
        background-color: var(--popover);
        color: var(--foreground);
      }
    }

    .select2-results__options {
      display: flex;
      flex-direction: column;
      gap: calc(var(--spacing) * 1);
      padding-inline: calc(var(--spacing) * 1);
      padding-block: calc(var(--spacing) * 1);

      .select2-results__option {
        padding-inline: calc(var(--spacing) * 2.5);
        padding-block: calc(var(--spacing) * 1.5);
        border-radius: var(--radius-md);
        color: var(--foreground);
        font-size: var(--text-xs);
        font-family: inherit;

        &.select2-results__message {
          text-align: center;
          color: var(--muted-foreground);
        }

        &[aria-selected=true],
        &.select2-results__option--highlighted {
          background-color: var(--accent);
          color: var(--accent-foreground);
        }
      }
    }
  }

  &.select2-container--default .select2-search--inline .select2-search__field {
    margin: 0;
  }
}

@layer utilities {
  .border-destructive {
    border-color: var(--destructive);
  }
}
/* AG Grid — global defaults */
.ag-root-wrapper { border: 0; border-radius: 0; }
.ag-header-cell-label,
.ag-header-group-cell-label { justify-content: center; }
/* Pinned footer rows */
.ag-floating-bottom { border-top: 1px solid var(--ag-footer-border-top); }
.ag-floating-bottom .ag-row {
  background: var(--ag-footer-bg);
  border-bottom: 1px solid var(--ag-footer-border-bottom);
}
.ag-floating-bottom .ag-cell { padding-block: 3px; }
.ag-floating-bottom .kt-input-sm { height: calc(var(--spacing) * 6) }
.ag-cell-cb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.select2-xs .select2-container {
  font-size: var(--text-xs);

  .select2-selection {
    height: 28px;

    .select2-selection__rendered {
      line-height: 26px;
      .select2-selection__clear {
        line-height: 26px;
        margin-inline-end: calc(var(--spacing) * 2.5);
        padding-inline: calc(var(--spacing) * 1.5);
      }
    }

    .select2-selection__arrow { height: 26px; }
  }
}

/* Matches the small tier (.kt-input-sm / .kt-btn-sm = 7 × --spacing).
   Pair this with .kt-input-sm / .kt-btn-sm; pair .select2-xs (≈ 28px)
   with .kt-input / .kt-btn / .kt-btn-md. There is no Select2 size
   below this — both inner line-height and container shrink together. */
.select2-sm .select2-container {
  font-size: var(--text-xs);

  &.select2 .select2-selection {
    height: calc(var(--spacing) * 7);

    .select2-selection__rendered {
      line-height: calc(var(--spacing) * 7 - 2px);
      padding-inline-start: calc(var(--spacing) * 2.5);
      padding-inline-end: calc(var(--spacing) * 6);
      .select2-selection__clear {
        line-height: calc(var(--spacing) * 7 - 2px);
        margin-inline-end: calc(var(--spacing) * 2.5);
        padding-inline: calc(var(--spacing) * 1.5);
      }
    }

    .select2-selection__arrow { height: calc(var(--spacing) * 7); }
  }
}