:root,
[data-bs-theme=light] {
  --vz-blue: #5596f7;
  --vz-indigo: #4f46bb;
  --vz-purple: #695eef;
  --vz-pink: #f672a7;
  --vz-red: #ff7f41;
  --vz-orange: #f1963b;
  --vz-yellow: #d4b04c;
  --vz-green: #2f7d4a;
  --vz-teal: #2c8c6a;
  --vz-cyan: #73dce9;
  --vz-white: #fff;
  --vz-gray: #878a99;
  --vz-gray-dark: #343a40;
  --vz-gray-100: #f3f6f9;
  --vz-gray-200: #eff2f7;
  --vz-gray-300: #e9ebec;
  --vz-gray-400: #ced4da;
  --vz-gray-500: #adb5bd;
  --vz-gray-600: #878a99;
  --vz-gray-700: #495057;
  --vz-gray-800: #343a40;
  --vz-gray-900: #212529;

  /* =========================
     CUSTOM KEJAKSAAN COLORS
  ========================= */
  --vz-primary: #2f7d4a;
  --vz-secondary: #d4b04c;

  --vz-success: #2f7d4a;
  --vz-info: #73dce9;
  --vz-warning: #d4b04c;
  --vz-danger: #c96b4b;
  --vz-light: #f3f6f9;
  --vz-dark: #343a40;

  --vz-primary-rgb: 47, 125, 74;
  --vz-secondary-rgb: 212, 176, 76;

  --vz-success-rgb: 47, 125, 74;
  --vz-info-rgb: 115, 220, 233;
  --vz-warning-rgb: 212, 176, 76;
  --vz-danger-rgb: 201, 107, 75;
  --vz-light-rgb: 243, 246, 249;
  --vz-dark-rgb: 52, 58, 64;

  --vz-primary-text-emphasis: #25633a;
  --vz-secondary-text-emphasis: #b18f34;

  --vz-success-text-emphasis: #25633a;
  --vz-info-text-emphasis: #62bbc6;
  --vz-warning-text-emphasis: #b18f34;
  --vz-danger-text-emphasis: #a8573b;
  --vz-light-text-emphasis: #ced4da;
  --vz-dark-text-emphasis: #343a40;

  --vz-primary-bg-subtle: #e4f1e8;
  --vz-secondary-bg-subtle: #f8f1dc;

  --vz-success-bg-subtle: #e4f1e8;
  --vz-info-bg-subtle: #eafafc;
  --vz-warning-bg-subtle: #f8f1dc;
  --vz-danger-bg-subtle: #f8e4dc;
  --vz-light-bg-subtle: #f9fbfc;
  --vz-dark-bg-subtle: #e9ebec;

  --vz-primary-border-subtle: #9fc8ad;
  --vz-secondary-border-subtle: #ead79d;

  --vz-success-border-subtle: #9fc8ad;
  --vz-info-border-subtle: #c7f1f6;
  --vz-warning-border-subtle: #ead79d;
  --vz-danger-border-subtle: #e4b4a4;
  --vz-light-border-subtle: #eff2f7;
  --vz-dark-border-subtle: #adb5bd;

  --vz-white-rgb: 255, 255, 255;
  --vz-black-rgb: 0, 0, 0;

  --vz-font-sans-serif: "Outfit", sans-serif;
  --vz-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --vz-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

  --vz-body-font-family: var(--vz-font-sans-serif);
  --vz-body-font-size: 0.875rem;
  --vz-body-font-weight: 400;
  --vz-body-line-height: 1.5;

  --vz-body-color: #212529;
  --vz-body-color-rgb: 33, 37, 41;

  --vz-body-bg: #f7f7f9;
  --vz-body-bg-rgb: 247, 247, 249;

  --vz-emphasis-color: #212529;
  --vz-emphasis-color-rgb: 33, 37, 41;

  --vz-secondary-color: #878a99;
  --vz-secondary-color-rgb: 135, 138, 153;

  --vz-secondary-bg: #fff;
  --vz-secondary-bg-rgb: 255, 255, 255;

  --vz-tertiary-color: rgba(33, 37, 41, 0.5);
  --vz-tertiary-color-rgb: 33, 37, 41;

  --vz-tertiary-bg: #eff2f7;
  --vz-tertiary-bg-rgb: 239, 242, 247;

  --vz-heading-color: #495057;

  --vz-link-color: #2f7d4a;
  --vz-link-color-rgb: 47, 125, 74;

  --vz-link-decoration: none;

  --vz-link-hover-color: #25633a;
  --vz-link-hover-color-rgb: 37, 99, 58;

  --vz-code-color: #f672a7;

  --vz-highlight-color: #212529;
  --vz-highlight-bg: #fcf8e3;

  --vz-border-width: 1px;
  --vz-border-style: solid;
  --vz-border-color: #e9ebec;
  --vz-border-color-translucent: #ced4da;

  --vz-border-radius: 0.25rem;
  --vz-border-radius-sm: 0.2rem;
  --vz-border-radius-lg: 0.3rem;
  --vz-border-radius-xl: 1rem;
  --vz-border-radius-xxl: 2rem;
  --vz-border-radius-2xl: var(--vz-border-radius-xxl);
  --vz-border-radius-pill: 50rem;

  --vz-box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
  --vz-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --vz-box-shadow-lg: 0 5px 10px rgba(30, 32, 37, 0.12);
  --vz-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  --vz-focus-ring-width: 0.25rem;
  --vz-focus-ring-opacity: 0.25;
  --vz-focus-ring-color: rgba(var(--vz-primary-rgb), 0.25);

  --vz-form-valid-color: #2f7d4a;
  --vz-form-valid-border-color: #2f7d4a;

  --vz-form-invalid-color: #c96b4b;
  --vz-form-invalid-border-color: #c96b4b;
}

[data-bs-theme=dark] {
  color-scheme: dark;

  --vz-body-color: #ced4da;
  --vz-body-color-rgb: 206, 212, 218;

  --vz-body-bg: #1a1d21;
  --vz-body-bg-rgb: 26, 29, 33;

  --vz-emphasis-color: #fff;
  --vz-emphasis-color-rgb: 255, 255, 255;

  --vz-secondary-color: #878a99;
  --vz-secondary-color-rgb: 135, 138, 153;

  --vz-secondary-bg: #212529;
  --vz-secondary-bg-rgb: 33, 37, 41;

  --vz-tertiary-color: rgba(206, 212, 218, 0.75);
  --vz-tertiary-color-rgb: 206, 212, 218;

  --vz-tertiary-bg: #2a2d31;
  --vz-tertiary-bg-rgb: 42, 45, 49;

  --vz-primary-text-emphasis: #69b285;
  --vz-secondary-text-emphasis: #e4c96f;

  --vz-success-text-emphasis: #69b285;
  --vz-info-text-emphasis: #8fe3ed;
  --vz-warning-text-emphasis: #e4c96f;
  --vz-danger-text-emphasis: #d48a6f;

  --vz-light-text-emphasis: #535659;
  --vz-dark-text-emphasis: #5f6164;

  --vz-primary-bg-subtle: rgba(47, 125, 74, 0.15);
  --vz-secondary-bg-subtle: rgba(212, 176, 76, 0.15);

  --vz-success-bg-subtle: rgba(47, 125, 74, 0.15);
  --vz-info-bg-subtle: rgba(115, 220, 233, 0.15);
  --vz-warning-bg-subtle: rgba(212, 176, 76, 0.15);
  --vz-danger-bg-subtle: rgba(201, 107, 75, 0.15);

  --vz-light-bg-subtle: #25282c;
  --vz-dark-bg-subtle: #313437;

  --vz-primary-border-subtle: #245f39;
  --vz-secondary-border-subtle: #8f7730;

  --vz-success-border-subtle: #245f39;
  --vz-info-border-subtle: #3a6e75;
  --vz-warning-border-subtle: #8f7730;
  --vz-danger-border-subtle: #7a4331;

  --vz-light-border-subtle: #35383c;
  --vz-dark-border-subtle: #3c3f42;

  --vz-heading-color: #ced4da;

  --vz-link-color: #b6dfc3;
  --vz-link-hover-color: #d7f0de;

  --vz-link-color-rgb: 182, 223, 195;
  --vz-link-hover-color-rgb: 215, 240, 222;

  --vz-code-color: #f672a7;

  --vz-highlight-color: #dee2e6;
  --vz-highlight-bg: #664d03;

  --vz-border-color: #32383e;
  --vz-border-color-translucent: #32383e;

  --vz-form-valid-color: #69b285;
  --vz-form-valid-border-color: #69b285;

  --vz-form-invalid-color: #d48a6f;
  --vz-form-invalid-border-color: #d48a6f;
}

[data-bs-theme=light][data-sidebar=dark] {
  --vz-vertical-menu-bg: #1f2b23;

  --vz-vertical-menu-border: #2d3b32;

  --vz-vertical-menu-item-color: #b8c4bc;

  --vz-vertical-menu-item-bg: rgba(212, 176, 76, 0.12);

  --vz-vertical-menu-item-hover-color: #e4c96f;

  --vz-vertical-menu-item-active-color: #e4c96f;

  --vz-vertical-menu-item-active-bg: rgba(212, 176, 76, 0.16);

  --vz-vertical-menu-sub-item-color: #93a096;

  --vz-vertical-menu-sub-item-hover-color: #e4c96f;

  --vz-vertical-menu-sub-item-active-color: #e4c96f;

  --vz-vertical-menu-title-color: #748178;
}

[data-bs-theme=dark][data-sidebar=dark] {
  --vz-vertical-menu-bg: #212529;
  --vz-vertical-menu-border: #212529;
  --vz-vertical-menu-item-color: #7c7f90;
  --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.15);
  --vz-vertical-menu-item-hover-color: #fff;
  --vz-vertical-menu-item-active-color: #fff;
  --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
  --vz-vertical-menu-sub-item-color: #7c7f90;
  --vz-vertical-menu-sub-item-hover-color: #fff;
  --vz-vertical-menu-sub-item-active-color: #fff;
  --vz-vertical-menu-title-color: #5f6270;
  --vz-twocolumn-menu-iconview-bg: #292e32;
}

.app-search,
.topbar-search-form {
    min-width: 500px;
}

.topbar-search-form .form-select,
.topbar-search-form .input-group-text {
    height: 38px;
    background: #f5f7f9;
}

.topbar-search-form .form-select:focus {
    box-shadow: none;
    border-color: var(--vz-primary);
}

.topbar-search-form .input-group {
    border-radius: 8px;
    overflow: hidden;
}