: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) */

  --border: var(--color-zinc-400);
  --input: var(--color-zinc-400);

  /* ── HRIS accent palette (burnt orange) ────────────────────────────────
     Single source of truth for the HR module's accent colour. HR templates
     must reference these tokens instead of hardcoding hex values, so the
     whole module can be re-tinted from here. Neutrals/grays and the
     semantic status colours (green=ok, red=danger, amber=warn) are
     deliberately NOT part of this set — only the accent family. */
  --hr-accent:          #c07a56;  /* primary fill: buttons, active pills */
  --hr-accent-hover:    #a86745;  /* hover/pressed on primary fill */
  --hr-accent-text:     #996848;  /* accent text/links on light bg */
  --hr-accent-dim:      #8a7259;  /* de-emphasised accent: repeated section labels */
  --hr-accent-soft:     #fbf2ec;  /* soft tint bg (badges, hover rows) */
  --hr-accent-border:   #ecd3c3;  /* border on soft tint */
  --hr-accent-contrast: #ffffff;  /* text sitting on --hr-accent fill */
}
.dark {
  --ag-row-selected: var(--color-blue-800);
  --ag-row-hover:    var(--secondary);

  --border: var(--color-zinc-400);
  --input: var(--color-zinc-400);

  /* HRIS accent — dark variants. Fill stays the same hue so buttons read
     identically across themes; text/soft/border lift for legibility on
     the warm near-black HR surfaces. */
  --hr-accent:          #b9714f;
  --hr-accent-hover:    #c9855f;
  --hr-accent-text:     #c69b81;
  --hr-accent-dim:      #b5a094;
  --hr-accent-soft:     #38302a;
  --hr-accent-border:   #4a423a;
  --hr-accent-contrast: #ffffff;

  /* HRIS dark surfaces — warm (hue ~25deg) instead of the old cool
     blue-grey ramp, so the module reads as one warm theme with the orange
     accent. Lightness is matched to the values these replaced, so every
     text/bg pair keeps (or improves on) its previous WCAG contrast:
       #1a191d -> #2b2725   #232228 -> #34302d
       #3d3b44 -> #403b37   #504e59 -> #4f4945
       #c4c6d0 -> #d8d2cc   #8e92a3 -> #a49d97
     Matte = LOW SATURATION (~8%, a warm grey not a brown), NOT low contrast.
     Depth still needs real value steps between layers, so this is a 4-level
     elevation ramp: page -> canvas -> card -> elevated. Flattening those to
     one value (which an earlier revision did) reads as fog, not matte. */
  --hr-surface-page:   #1f1c1a;  /* L0 outermost page frame */
  --hr-surface-canvas: #262220;  /* L1 canvas the cards sit on */
  --hr-surface-0:      #302b28;  /* L2 card background */
  --hr-surface-1:      #3a3531;  /* L3 elevated / hover / alt rows */
  --hr-border:         #474039;
  --hr-border-strong:  #5a524a;  /* hover + focus borders */
  --hr-text-body:      #d8d2cc;
  --hr-text-muted:     #a49d97;

  --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-modal-backdrop {
  backdrop-filter: none;
  background-color: rgba(0, 0, 0, 0.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: var(--input);
      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; }
  }
}

/* Autocomplete — a plain text input with a suggestion panel under it. The panel
   reuses the Select2 dropdown markup and skin so it matches the Select2 filters
   sitting beside it. Select2 parks its own panel off-screen (left: -100000px)
   and places it with JS; here it is anchored to the wrapper instead. */
.kt-autocomplete {
  position: relative;

  .select2-container {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    margin-top: calc(var(--spacing) * 1);
    z-index: 9999;
  }

  &.kt-autocomplete-open .select2-container {
    display: block;
  }

  .select2-dropdown {
    position: static;
    width: 100%;
  }

  /* Resolved name, right-aligned inside the input. It only appears once a code
     resolves — editing the code hides it again — so it never sits under what is
     being typed. display:block keeps `truncate` working on the overflow. */
  [data-ac-name] {
    display: none;
    position: absolute;
    inset-inline-end: calc(var(--spacing) * 3);
    top: 50%;
    transform: translateY(-50%);
    max-width: 70%;
    font-size: var(--text-xs);
    pointer-events: none;
  }

  &.kt-autocomplete-resolved [data-ac-name] {
    display: block;
  }
}

/* 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); }
  }
}



#scrollable_content.hris-content-area {
  padding-block: 0;
  background: #ffffff !important;
}
#scrollable_content.hris-content-area > main {
  min-height: 100%;
  padding: 1rem;
}
#scrollable_content.hris-content-area main .kt-container-fluid {
  width: 100%;
  max-width: none;
  padding: 0 !important;
}
@media (width >= 80rem) {
  #scrollable_content.hris-content-area > main {
    padding: 1rem;
  }
}
@media (width < 48rem) {
  #scrollable_content.hris-content-area > main {
    padding: 0.75rem;
  }
}

.app-content-frame {
  min-width: 0;
}


.drawer-panel:not(.active) {
  box-shadow: 0 0 0 transparent !important;
}


.qn-launch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 62px;
  padding: calc(var(--spacing) * 2);
  color: var(--secondary-foreground);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}
.qn-launch:hover { color: var(--primary); background: var(--background); border-color: var(--border); }
.qn-launch-label { font-size: var(--text-xs, 0.75rem); font-weight: 500; }
.qn-launch .kbd { min-width: 0; padding: 0 3px; font-size: 9px; }

.quicknav-results { padding-bottom: calc(var(--spacing) * 1.5); }
.quicknav-results.hidden { display: none; }

.quicknav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius);
  cursor: pointer;
}
.quicknav-item .qn-label { font-size: var(--text-sm, 0.875rem); font-weight: 500; color: var(--foreground); }
.quicknav-item .qn-group { margin-inline-start: calc(var(--spacing) * 2); font-size: var(--text-xs, 0.75rem); color: var(--muted-foreground); }
.quicknav-item.is-active,
.quicknav-item:hover { background: var(--accent); }
.quicknav-empty { padding: calc(var(--spacing) * 3); text-align: center; font-size: var(--text-sm, 0.875rem); color: var(--muted-foreground); }

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px calc(var(--spacing) * 1.5);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
}
.sg-keys,
.quicknav-item .sg-keys { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }

.sg-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh calc(var(--spacing) * 5) calc(var(--spacing) * 5);
  background: rgb(0 0 0 / 0.45);
}
.sg-overlay.hidden { display: none; }

.sg-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: 80vh;
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.5);
}
.sg-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 5);
  border-bottom: 1px solid var(--border);
}
.sg-title { font-size: var(--text-lg, 1.125rem); font-weight: 600; }

.sg-search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 5);
  border-bottom: 1px solid var(--border);
}
.sg-search-ico { flex-shrink: 0; color: var(--muted-foreground); font-size: 1rem; }
.sg-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(var(--spacing) * 1.5) 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--foreground);
  background: transparent;
  border: 0;
  outline: none;
}
.sg-search-input::placeholder { color: var(--muted-foreground); }

.sg-scroll { flex: 1 1 auto; overflow-y: auto; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5); }
.sg-body { }

.sg-group + .sg-group { margin-top: calc(var(--spacing) * 5); }
.sg-group-title {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.sg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2) 0;
  border-bottom: 1px dashed var(--border);
}
.sg-row:last-child { border-bottom: 0; }
.sg-row .sg-desc { font-size: var(--text-sm, 0.875rem); color: var(--foreground); }
.sg-row .sg-note { font-size: var(--text-xs, 0.75rem); color: var(--muted-foreground); }


[data-kt-theme-mode="dark"] .bg-muted, [data-bs-theme="dark"] .bg-muted, html.dark .bg-muted {
  background-color: #3e3d44 !important;
}

html.dark, [data-kt-theme-mode="dark"], [data-bs-theme="dark"] {
  --muted: #3e3d44 !important;
}