/* Arah visual Kelola. Token di colors.scss; berkas ini menimpa build yang sudah jalan. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

:root .light {
  --new-back-drop: #1b5aa3;
  --new-settings: #eef3f8;
  --new-border: #e3eaf2;
  --new-bgColor: #eef3f8;
  --new-bgColorInner: #ffffff;
  --new-sep: #e3eaf2;
  --new-bgLineColor: #e3eaf2;
  --new-textItemFocused: #1b5aa3;
  --new-textItemBlur: #777777;
  --new-boxFocused: #eaf3fd;
  --new-textColor: 17 17 17;
  --new-blockSeparator: #eef3f8;
  --new-btn-simple: #eaf3fd;
  --new-btn-text: #111111;
  --new-btn-primary: #2e7fd6;
  --new-ai-btn: #1b5aa3;
  --new-box-hover: #eaf3fd;
  --new-table-border: #e3eaf2;
  --new-table-header: #f7fafe;
  --new-table-text: #777777;
  --new-table-text-focused: #1b5aa3;
  --new-col-color: #e3eaf2;
  --new-menu-hover: #1b5aa3;
  --popup-color: rgba(27, 90, 163, 0.16);
  --color-primary: #eef3f8;
  --color-secondary: #ffffff;
  --color-text: #111111;
  --color-third: #ffffff;
  --color-forth: #2e7fd6;
  --color-seventh: #1b5aa3;
  --color-gray: #777777;
}

:root .dark {
  --new-btn-primary: #2e7fd6;
  --new-ai-btn: #4c97e0;
  --new-textItemFocused: #163a66;
  --new-boxFocused: #1b5aa3;
  --new-table-text-focused: #8ec4f5;
  --color-forth: #2e7fd6;
  --color-seventh: #4c97e0;
}

body {
  font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
}

svg [fill="#612BD3"],
svg [fill="#612bd3"] {
  fill: #2e7fd6;
}

:is(
  .bg-\[\#612BD3\],
  .bg-\[\#612bd3\],
  .hover\:bg-\[\#612BD3\]:hover,
  .hover\:bg-\[\#612bd3\]:hover
) {
  background-color: #2e7fd6 !important;
}

:is(
  .hover\:bg-\[\#5520CB\]:hover,
  .hover\:bg-\[\#5520cb\]:hover,
  .hover\:bg-\[\#5023b8\]:hover
) {
  background-color: #1b5aa3 !important;
}

:is(
  .text-\[\#612BD3\],
  .text-\[\#612bd3\]
) {
  color: #2e7fd6 !important;
}

:is(
  .border-\[\#612BD3\],
  .border-\[\#612bd3\],
  .hover\:border-\[\#612BD3\]:hover,
  .hover\:border-\[\#612bd3\]:hover,
  .focus\:border-\[\#612BD3\]:focus,
  .focus\:border-\[\#612bd3\]:focus
) {
  border-color: #2e7fd6 !important;
}

:is(
  .bg-\[\#612BD3\]\/10,
  .bg-\[\#612bd3\]\/10
) {
  background-color: rgb(46 127 214 / 0.1) !important;
}

:is(
  .hover\:border-\[\#612bd3\]\/50:hover,
  .hover\:border-\[\#612BD3\]\/50:hover
) {
  border-color: rgb(46 127 214 / 0.5) !important;
}

.text-\[\#FC69FF\],
.text-\[\#fc69ff\] {
  color: #ffc94a !important;
}

/* Layar masuk: panel navy, kartu form putih. */
.min-h-screen.w-screen.bg-\[\#0E0E0E\] {
  background-color: #1b5aa3 !important;
}

.min-h-screen.w-screen.bg-\[\#0E0E0E\] .bg-\[\#1A1919\] {
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: #e3eaf2 !important;
}

.min-h-screen.w-screen.bg-\[\#0E0E0E\] .bg-\[\#1A1919\] .text-\[\#D1D1D1\],
.min-h-screen.w-screen.bg-\[\#0E0E0E\] .bg-\[\#1A1919\] .text-\[\#FFF\] {
  color: #777777 !important;
}

.min-h-screen.w-screen.bg-\[\#0E0E0E\] .bg-\[\#1A1919\] .text-\[\#FFF\] {
  color: #111111 !important;
}

/* Tidak ada sudut runcing. 8px lantai, 12px panel. Radius yang sudah lebih besar dibiarkan. */
:root {
  --kelola-radius: 12px;
  --kelola-radius-sm: 8px;
}

html body :where(
  div,
  section,
  aside,
  nav,
  header,
  footer,
  main,
  article,
  ul,
  ol,
  li,
  table,
  thead,
  tbody,
  tr,
  th,
  td,
  img,
  video,
  canvas,
  iframe,
  dialog,
  form,
  fieldset,
  label,
  button,
  input,
  textarea,
  select,
  summary
):not([class*="rounded"]) {
  border-radius: var(--kelola-radius-sm);
}

html body :where(
  [role="dialog"],
  [role="menu"],
  [role="listbox"],
  [class*="modal"],
  [class*="Modal"],
  [class*="popup"],
  [class*="menu"]
):not([class*="rounded"]) {
  border-radius: var(--kelola-radius);
}

html body [class*="rounded-none"],
html body .uppy-Dashboard-inner,
html body .uppy-StatusBar {
  border-radius: var(--kelola-radius-sm) !important;
}

html body [class*="rounded-full"],
html body input[type="radio"] {
  border-radius: 9999px !important;
}