/* =====================================================================
   SINERGI — Design System "Bahari Melayu"
   Kanwil BPN Provinsi Kepulauan Riau

   Palet soft-flat diturunkan dari warna lambang Provinsi Kepulauan Riau
   (Perda Prov. Kepri No. 1 Tahun 2005): biru (laut), biru tua (pita nama),
   kuning emas (keris, perahu, bintang, pita), hijau muda (rantai), merah;
   pendukung putih & hitam. Netral memakai nada "pasir pantai".
   Motif: gelombang laut tujuh lapis (lambang Kepri).

   Aturan pakai:
   - Halaman TIDAK boleh menulis hex langsung; pakai token var(--...).
   - Warna data/grafik: --chart-1..8 (urutan tetap, tervalidasi CVD).
   - Warna status: --status-* selalu disertai ikon + label.
   ===================================================================== */

:root {
  /* ---------- Ramps (OKLCH-derived, sRGB hex) ---------- */
  --laut-50:  #edf9fd; --laut-100: #dbf4fb; --laut-200: #bde8f5; --laut-300: #94d5e7; --laut-400: #63b7ce;
  --laut-500: #389ab3; --laut-600: #1d8097; --laut-700: #0d677b; --laut-800: #084f5f; --laut-900: #083843;

  --samudra-50:  #edf5fb; --samudra-100: #dceaf4; --samudra-200: #c0d4e3; --samudra-300: #95afc2;
  --samudra-500: #4e6d83; --samudra-700: #2b495d; --samudra-800: #1b3648; --samudra-900: #112736; --samudra-950: #091b28;

  --emas-50:  #fff8e9; --emas-100: #ffefcc; --emas-200: #ffe1a5; --emas-300: #fccf7a; --emas-400: #efbb55;
  --emas-500: #dca83c; --emas-600: #b98b2a; --emas-700: #936d1c; --emas-800: #735514;

  --hijau-50:  #ecfbf2; --hijau-100: #d9f7e4; --hijau-200: #b9eccd; --hijau-300: #91dab0;
  --hijau-500: #44a171; --hijau-600: #2e7f55; --hijau-700: #286d4a; --hijau-800: #205339;

  --merah-50:  #fff3f1; --merah-100: #ffe5e1; --merah-200: #ffcec6; --merah-300: #fcada3;
  --merah-500: #d86258; --merah-600: #be4b43; --merah-700: #9f3d36; --merah-800: #7e302a;

  --pasir-0: #ffffff; --pasir-25: #fbfaf7; --pasir-50: #f7f5f1; --pasir-100: #efece7; --pasir-200: #e4e1da;
  --pasir-300: #d5d0c8; --pasir-400: #aeaaa2; --pasir-500: #848078; --pasir-600: #66635c;

  --tinta-400: #838e98; --tinta-500: #687581; --tinta-600: #4f5d6a; --tinta-700: #384755; --tinta-800: #253340; --tinta-900: #172431;

  /* ---------- Semantic tokens ---------- */
  --c-bg:            var(--pasir-50);
  --c-surface:       #ffffff;
  --c-surface-2:     var(--pasir-25);
  --c-surface-3:     var(--pasir-100);
  --c-border:        var(--pasir-200);
  --c-border-strong: var(--pasir-300);
  --c-ink:           var(--tinta-900);
  --c-ink-2:         var(--tinta-700);
  --c-muted:         var(--tinta-500);
  --c-subtle:        var(--tinta-400);

  --c-brand:        var(--laut-600);
  --c-brand-hover:  var(--laut-700);
  --c-brand-strong: var(--laut-800);
  --c-brand-soft:   var(--laut-50);
  --c-brand-soft-2: var(--laut-100);
  --c-link:         var(--laut-700);

  --c-accent:      var(--emas-400);
  --c-accent-ink:  var(--emas-800);
  --c-accent-soft: var(--emas-50);

  --c-success: var(--hijau-600); --c-success-soft: var(--hijau-50); --c-success-ink: var(--hijau-800); --c-success-line: var(--hijau-200);
  --c-warning: var(--emas-500);  --c-warning-soft: var(--emas-50);  --c-warning-ink: var(--emas-800);  --c-warning-line: var(--emas-200);
  --c-danger:  var(--merah-600); --c-danger-soft:  var(--merah-50); --c-danger-ink:  var(--merah-700); --c-danger-line:  var(--merah-200);
  --c-info:    var(--laut-600);  --c-info-soft:    var(--laut-50);  --c-info-ink:    var(--laut-800);  --c-info-line:    var(--laut-200);

  --focus-ring: 0 0 0 3px rgba(29, 128, 151, 0.22);

  /* ---------- Data visualisation (dataviz-validated, fixed order) ---------- */
  --chart-1: #1c8cb4; /* laut    */
  --chart-2: #dca83c; /* emas    */
  --chart-3: #cc6395; /* rose    */
  --chart-4: #e68335; /* jingga  */
  --chart-5: #32bdb3; /* tosca   */
  --chart-6: #d4574b; /* merah   */
  --chart-7: #4760a9; /* samudra */
  --chart-8: #3e985d; /* hijau   */
  --chart-grid:  var(--pasir-200);
  --chart-axis:  var(--pasir-300);
  --chart-label: var(--tinta-500);
  --status-good:     var(--hijau-600);
  --status-warning:  var(--emas-500);
  --status-serious:  #d9773a;
  --status-critical: var(--merah-600);

  /* ---------- Typography ---------- */
  --font-sans: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-2xs: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.875rem;
  --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;

  /* ---------- Layout ---------- */
  --header-height: 60px;
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 76px;
  --content-pad: 28px;

  /* ---------- Shape & elevation ---------- */
  --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(17, 39, 54, 0.05);
  --shadow-sm: 0 1px 2px rgba(17, 39, 54, 0.04), 0 2px 6px rgba(17, 39, 54, 0.05);
  --shadow-md: 0 4px 14px rgba(17, 39, 54, 0.08), 0 1px 3px rgba(17, 39, 54, 0.05);
  --shadow-lg: 0 14px 36px rgba(17, 39, 54, 0.14), 0 2px 6px rgba(17, 39, 54, 0.06);
  --transition: all 0.2s ease;

  /* ---------- Motif gelombang tujuh lapis ---------- */
  --motif-gelombang-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='112' viewBox='0 0 240 112'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1.4'%3E%3Cpath d='M0 8 Q30 0 60 8 T120 8 T180 8 T240 8'/%3E%3Cpath d='M0 24 Q30 16 60 24 T120 24 T180 24 T240 24'/%3E%3Cpath d='M0 40 Q30 32 60 40 T120 40 T180 40 T240 40'/%3E%3Cpath d='M0 56 Q30 48 60 56 T120 56 T180 56 T240 56'/%3E%3Cpath d='M0 72 Q30 64 60 72 T120 72 T180 72 T240 72'/%3E%3Cpath d='M0 88 Q30 80 60 88 T120 88 T180 88 T240 88'/%3E%3Cpath d='M0 104 Q30 96 60 104 T120 104 T180 104 T240 104'/%3E%3C/g%3E%3C/svg%3E");
  --motif-gelombang-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='112' viewBox='0 0 240 112'%3E%3Cg fill='none' stroke='%231d8097' stroke-opacity='0.08' stroke-width='1.4'%3E%3Cpath d='M0 8 Q30 0 60 8 T120 8 T180 8 T240 8'/%3E%3Cpath d='M0 24 Q30 16 60 24 T120 24 T180 24 T240 24'/%3E%3Cpath d='M0 40 Q30 32 60 40 T120 40 T180 40 T240 40'/%3E%3Cpath d='M0 56 Q30 48 60 56 T120 56 T180 56 T240 56'/%3E%3Cpath d='M0 72 Q30 64 60 72 T120 72 T180 72 T240 72'/%3E%3Cpath d='M0 88 Q30 80 60 88 T120 88 T180 88 T240 88'/%3E%3Cpath d='M0 104 Q30 96 60 104 T120 104 T180 104 T240 104'/%3E%3C/g%3E%3C/svg%3E");

  /* ---------- Legacy aliases (masih dipakai template lama) ---------- */
  --c-primary: var(--laut-600); --c-primary-dark: var(--laut-700); --c-primary-darker: var(--laut-800);
  --c-primary-navy: var(--samudra-800); --c-primary-light: var(--laut-300); --c-primary-lighter: var(--laut-100); --c-primary-pale: var(--laut-50);
  --c-white: #ffffff; --c-card: #ffffff; --c-text: var(--c-ink); --c-text-secondary: var(--c-ink-2); --c-text-muted: var(--c-muted); --c-divider: var(--pasir-100);
  --sidebar-bg: var(--samudra-800); --sidebar-active-bg: rgba(255, 255, 255, 0.09); --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --shadow-card: var(--shadow-sm); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md);
  --primary-gradient: linear-gradient(0deg, var(--laut-600), var(--laut-600));
  --teal-gradient:    linear-gradient(0deg, var(--laut-700), var(--laut-700));
  --success-gradient: linear-gradient(0deg, var(--hijau-600), var(--hijau-600));
  --warning-gradient: linear-gradient(0deg, var(--emas-500), var(--emas-500));
  --info-gradient:    linear-gradient(0deg, var(--laut-500), var(--laut-500));
  --border-radius-lg: var(--radius-lg); --border-radius-xl: var(--radius-xl); --spacing-unit: 8px;
}

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--c-bg) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.55;
}

strong, b { font-weight: 700; }

a { color: var(--c-link); transition: color 0.15s ease; }
a:hover { color: var(--laut-800); }

::selection { background: var(--laut-100); color: var(--c-ink); }

:focus-visible { outline: 2px solid var(--laut-500); outline-offset: 2px; }

h1, h2, h3, h4, h5,
.ui.header { font-family: var(--font-sans) !important; color: var(--c-ink); letter-spacing: 0; }

/* Semantic UI typeface enforcement */
.ui.table, .ui.table thead th, .ui.table tbody td, .ui.table tfoot th, .ui.table tfoot td,
.ui.label, .ui.button, .ui.form, .ui.input, .ui.input input, .ui.dropdown, .ui.dropdown .menu,
.ui.card, .ui.card .header, .ui.card .meta, .ui.card .description, .ui.cards > .card .header,
.ui.modal, .ui.modal .header, .ui.modal .content, .ui.message, .ui.message .header,
.ui.segment, .ui.header, .ui.list, .ui.menu, .ui.breadcrumb, .ui.popup, .ui.toast,
.ui.statistic, .ui.statistic .label, .ui.statistic .value, .ui.statistics .statistic > .value,
.ui.calendar, .ui.checkbox label, .ui.accordion, .ui.pagination.menu,
th, td, select, input, textarea, button, optgroup {
  font-family: var(--font-sans) !important;
}

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--pasir-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--pasir-300); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--pasir-400); background-clip: padding-box; border: 2px solid transparent; }
*::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   Top bar
   ===================================================================== */
.ui.top.fixed.menu,
.ui.menu.fixed.top {
  left: var(--sidebar-width) !important;
  right: 0 !important;
  width: auto !important;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 20px 0 12px;
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border: none !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  align-items: center;
  transition: left 0.25s ease;
}
body:has(#sidebar.collapsed) .ui.top.fixed.menu { left: var(--sidebar-collapsed-width) !important; }

.ui.top.fixed.menu > .item,
.ui.top.fixed.menu .right.menu > .item { color: var(--c-ink-2) !important; align-self: stretch; }
.ui.top.fixed.menu > .item::before,
.ui.top.fixed.menu .right.menu > .item::before { display: none !important; }

.ui.top.fixed.menu .header.item {
  font-weight: 700 !important;
  font-size: var(--fs-base) !important;
  color: var(--c-ink) !important;
  max-width: 520px;
  padding-left: 8px !important;
  background: transparent !important;
}
.ui.top.fixed.menu .header.item:hover { background: transparent !important; color: var(--c-brand) !important; }
.topbar-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.ui.top.fixed.menu .item.topbar-burger {
  display: none;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 0 10px !important;
  font-size: 1.15rem;
  color: var(--c-ink) !important;
}

.ui.top.fixed.menu .item.topbar-context { padding: 0 6px !important; background: transparent !important; }
.topbar-context-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 360px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--laut-50);
  border: 1px solid var(--laut-100);
  color: var(--laut-800);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-context-chip i.icon { margin: 0 !important; color: var(--emas-600); font-size: 0.95em; }

.ui.top.fixed.menu .ui.dropdown.item.topbar-user {
  gap: 10px; padding: 0 6px 0 10px !important;
  font-weight: 600; font-size: var(--fs-sm);
  border-radius: var(--radius);
  margin: 10px 0 !important;
  align-self: center !important;
  height: 40px;
}
.ui.top.fixed.menu .ui.dropdown.item.topbar-user:hover,
.ui.top.fixed.menu .ui.dropdown.item.topbar-user.active { background: var(--c-surface-3) !important; }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--samudra-800); color: var(--emas-300);
  flex-shrink: 0;
}
.topbar-avatar i.icon { margin: 0 !important; font-size: 0.95rem; height: auto; }
.topbar-user-email { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui.top.fixed.menu .ui.dropdown.item.topbar-user > .dropdown.icon { margin: 0 0 0 2px !important; color: var(--c-muted); }

.ui.top.fixed.menu .ui.dropdown .menu {
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-lg) !important;
  margin-top: 6px !important;
  padding: 6px !important;
  min-width: 220px !important;
  overflow: hidden;
}
.ui.top.fixed.menu .ui.dropdown .menu > .item {
  border-radius: var(--radius-sm) !important;
  color: var(--c-ink-2) !important;
  font-size: var(--fs-base) !important;
  padding: 10px 12px !important;
  font-weight: 500;
}
.ui.top.fixed.menu .ui.dropdown .menu > .item > .icon { color: var(--c-muted); margin-right: 10px !important; }
.ui.top.fixed.menu .ui.dropdown .menu > .item:hover { background: var(--laut-50) !important; color: var(--laut-800) !important; }
.ui.top.fixed.menu .ui.dropdown .menu > .item:hover > .icon { color: var(--laut-600); }
.ui.top.fixed.menu .ui.dropdown .menu > .item.topbar-switch { color: var(--laut-700) !important; font-weight: 600; }
.ui.top.fixed.menu .ui.dropdown .menu > .item.topbar-logout { color: var(--merah-700) !important; }
.ui.top.fixed.menu .ui.dropdown .menu > .item.topbar-logout > .icon { color: var(--merah-600); }
.ui.top.fixed.menu .ui.dropdown .menu > .item.topbar-logout:hover { background: var(--merah-50) !important; }
.ui.top.fixed.menu .ui.dropdown .menu > .divider { margin: 6px 0 !important; border-color: var(--c-border) !important; }

/* =====================================================================
   Sidebar
   ===================================================================== */
#sidebar span:not(.sidebar-brand-text),
.ui.top.fixed.menu span:not(.topbar-avatar):not(.topbar-context-chip) { background-color: transparent !important; }
.ui.top.fixed.menu .topbar-avatar { background: var(--samudra-800) !important; }
.ui.top.fixed.menu .topbar-context-chip { background: var(--laut-50) !important; }
.ui.top.fixed.menu .topbar-user-email { font-weight: 600 !important; }

#sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  margin: 0 !important;
  padding: 0 14px;
  background: var(--samudra-800) !important;
  background-image: var(--motif-gelombang-dark) !important;
  background-repeat: repeat-x !important;
  background-position: left bottom 96px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  color: #fff;
  transition: width 0.25s ease, transform 0.25s ease;
  overflow: hidden;
  z-index: 102;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  height: var(--header-height);
  flex-shrink: 0;
  padding: 0 6px;
  margin: 0 -14px 10px;
  padding-left: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none !important;
}
.sidebar-brand-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.sidebar-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sidebar-brand-name { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.08em; }
.sidebar-brand-sub {
  color: var(--emas-300); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.02em;
  line-height: 1.25; max-width: 184px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px 12px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); background-clip: padding-box; }

.sidebar-section-label {
  color: rgba(255, 255, 255, 0.42);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 12px 8px;
}

#sidebar .item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 10px 12px !important;
  margin: 0 0 2px !important;
  border-radius: var(--radius) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.005em;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease !important;
  white-space: nowrap;
}
#sidebar .item::before { display: none !important; }
#sidebar .item > i.icon {
  float: none !important;
  order: -1;
  margin: 0 !important;
  width: 20px;
  font-size: 1.05rem !important;
  color: var(--samudra-300);
  opacity: 1;
  transition: color 0.15s ease;
}
#sidebar .item:hover { background-color: var(--sidebar-hover-bg) !important; color: #fff !important; }
#sidebar .item:hover > i.icon { color: var(--laut-200); }
#sidebar .item.active {
  background-color: var(--sidebar-active-bg) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#sidebar .item.active > i.icon { color: var(--emas-400); }
#sidebar .item.active::after {
  content: "";
  position: absolute; left: -14px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--emas-400);
}

#sidebar a { text-decoration: none; }

.sidebar-note {
  margin: 4px 0 8px;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  white-space: normal;
}
.sidebar-note i.icon { color: var(--emas-400); }
#sidebar .sidebar-note a { color: var(--emas-300) !important; font-weight: 700; }
#sidebar .sidebar-note a:hover { color: var(--emas-200) !important; }

/* Kantah switcher (kanwil) */
.sidebar-kantah-switcher {
  margin: 8px 0 10px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-kantah-info { display: flex; align-items: center; gap: 10px; padding: 11px 12px 9px; }
.sidebar-kantah-info i { font-size: 15px; color: var(--emas-400); flex-shrink: 0; }
.sidebar-kantah-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-kantah-caption {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45); font-weight: 700; line-height: 1.3;
}
.sidebar-kantah-name {
  font-size: var(--fs-sm); font-weight: 700; color: #fff; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-kantah-btn,
#sidebar .sidebar-kantah-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 9px 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  color: var(--emas-300) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.15s ease !important;
}
.sidebar-kantah-btn:hover,
#sidebar .sidebar-kantah-btn:hover { background: rgba(255, 255, 255, 0.12) !important; color: var(--emas-200) !important; }
.sidebar-kantah-btn i { font-size: 13px !important; }
.sidebar-kantah-switcher::before, .sidebar-kantah-switcher::after,
.sidebar-kantah-switcher *:not(i.icon)::before, .sidebar-kantah-switcher *:not(i.icon)::after { display: none !important; }

/* Footer: collapse toggle + identity */
.sidebar-footer {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 0 16px;
  margin-top: auto;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sidebar-footer .app-identity {
  order: 1;
  font-size: 0.68rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.45);
  padding: 2px 6px 10px;
}
.sidebar-footer .app-identity .ui.divider { display: none; }
#toggle-sidebar,
.sidebar-footer .ui.button#toggle-sidebar {
  order: 2;
  position: static;
  transform: none;
  align-self: flex-start;
  width: 36px !important; height: 36px !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.25s ease !important;
}
#toggle-sidebar:hover { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }
#toggle-sidebar i.icon { margin: 0 !important; }

/* Collapsed */
#sidebar.collapsed { width: var(--sidebar-collapsed-width); padding: 0 10px; }
#sidebar.collapsed .sidebar-brand { justify-content: center; padding-left: 0; margin: 0 -10px 10px; }
#sidebar.collapsed .sidebar-brand-text,
#sidebar.collapsed .sidebar-section-label,
#sidebar.collapsed .sidebar-note,
#sidebar.collapsed .app-identity,
#sidebar.collapsed .sidebar-kantah-info { display: none; }
#sidebar.collapsed .item { justify-content: center; font-size: 0 !important; padding: 11px 0 !important; gap: 0; }
#sidebar.collapsed .item > i.icon { font-size: 1.15rem !important; width: auto; }
#sidebar.collapsed .item.active::after { left: -10px; }
#sidebar.collapsed .sidebar-kantah-switcher { background: transparent; border-color: transparent; }
#sidebar.collapsed .sidebar-kantah-btn { border-top: none !important; border-radius: var(--radius) !important; padding: 11px 0 !important; font-size: 0 !important; }
#sidebar.collapsed .sidebar-kantah-btn i { font-size: 1.05rem !important; }
#sidebar.collapsed #toggle-sidebar { align-self: center; margin: 0 !important; }

/* Restoring a persisted collapsed state on load must not animate */
html.sidebar-preload #sidebar, html.sidebar-preload #content,
html.sidebar-preload .ui.top.fixed.menu { transition: none !important; }

/* Mobile off-canvas */
.sidebar-backdrop { display: none; }

/* =====================================================================
   Content area & page patterns
   ===================================================================== */
#content {
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  padding: 24px var(--content-pad) 40px;
  min-height: calc(100vh - var(--header-height));
  transition: margin-left 0.25s ease;
}
#content.expanded { margin-left: var(--sidebar-collapsed-width); }

/* Page header: <div class="page-header"><div><h1 class="page-title">..</h1><p class="page-subtitle">..</p></div><div class="page-actions">..</div></div> */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.page-eyebrow { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--emas-700); margin: 0 0 4px; }
.page-title, h1.page-title, .ui.header.page-title { font-size: var(--fs-2xl) !important; line-height: 1.2; font-weight: 700 !important; color: var(--c-ink) !important; margin: 0 !important; letter-spacing: 0; }
.page-subtitle { margin: 6px 0 0; color: var(--c-muted); font-size: var(--fs-base); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Section heading inside a page: icon chip + title + optional subtitle */
.section-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.section-head > .icon-chip { flex-shrink: 0; }
.section-head h3, .section-head .section-title { margin: 0 !important; font-size: var(--fs-lg) !important; font-weight: 700 !important; color: var(--c-ink) !important; line-height: 1.3; }
.section-head .section-subtitle { margin: 2px 0 0; color: var(--c-muted); font-size: var(--fs-sm); }

.icon-chip {
  width: 38px; height: 38px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--laut-50); color: var(--laut-700); border: 1px solid var(--laut-100);
}
.icon-chip > i.icon { margin: 0 !important; height: auto; font-size: 1.05rem; }
.icon-chip.emas  { background: var(--emas-50);  color: var(--emas-700);  border-color: var(--emas-100); }
.icon-chip.hijau { background: var(--hijau-50); color: var(--hijau-700); border-color: var(--hijau-100); }
.icon-chip.merah { background: var(--merah-50); color: var(--merah-700); border-color: var(--merah-100); }
.icon-chip.samudra { background: var(--samudra-50); color: var(--samudra-700); border-color: var(--samudra-100); }

/* Hero banner (dark samudra, wave motif, gold eyebrow) */
.hero-banner {
  position: relative; overflow: hidden;
  padding: 22px 26px;
  border-radius: var(--radius-xl);
  background-color: var(--samudra-800);
  background-image: var(--motif-gelombang-dark);
  background-position: right -40px bottom -20px;
  color: #fff;
  margin: 0 0 20px;
}
.hero-banner::after {
  content: ""; position: absolute; right: 26px; top: 22px;
  width: 44px; height: 3px; border-radius: 3px; background: var(--emas-400);
}
.hero-banner h1, .hero-banner h2, .hero-banner h3, .hero-banner .ui.header { color: #fff !important; margin: 0 !important; }
.hero-banner p, .hero-banner .hero-subtitle { color: var(--samudra-200); margin: 6px 0 0; }
.hero-banner .hero-eyebrow { color: var(--emas-300); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }

/* Card surface for custom blocks */
.surface-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 20px;
}

/* KPI / stat card */
.kpi-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.kpi-card .kpi-label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-card .kpi-value { font-size: 1.75rem; line-height: 1.15; font-weight: 700; color: var(--c-ink); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.kpi-card .kpi-meta { font-size: var(--fs-xs); color: var(--c-muted); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }

/* Toolbar & filter bar */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-bar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 16px;
  padding: 16px; margin-bottom: 16px;
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
}
.filter-bar .field, .filter-field { min-width: 0; }
.filter-bar label, .filter-field > label, .filter-label {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-2); letter-spacing: 0.04em; text-transform: uppercase;
}

/* Chips & badges */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.6;
  background: var(--pasir-100); color: var(--c-ink-2); border: 1px solid var(--pasir-200);
}
.chip.laut  { background: var(--laut-50);  color: var(--laut-800);  border-color: var(--laut-100); }
.chip.emas  { background: var(--emas-50);  color: var(--emas-800);  border-color: var(--emas-200); }
.chip.hijau { background: var(--hijau-50); color: var(--hijau-800); border-color: var(--hijau-200); }
.chip.merah { background: var(--merah-50); color: var(--merah-700); border-color: var(--merah-200); }

/* Empty state */
.empty-state { text-align: center; padding: 36px 16px; color: var(--c-muted); }
.empty-state > i.icon { font-size: 2rem; color: var(--pasir-400); margin-bottom: 8px; }
.empty-state .empty-title { color: var(--c-ink-2); font-weight: 700; margin-bottom: 4px; }

/* Text helpers */
.text-muted { color: var(--c-muted) !important; }
.text-ink { color: var(--c-ink) !important; }
.text-brand { color: var(--c-brand) !important; }
.text-success { color: var(--c-success) !important; }
.text-warning { color: var(--emas-700) !important; }
.text-danger { color: var(--c-danger) !important; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Breadcrumb
   ===================================================================== */
.ui.breadcrumb { margin-bottom: 18px !important; font-size: var(--fs-sm) !important; line-height: 1.5; }
.ui.breadcrumb a, .ui.breadcrumb a.section { color: var(--c-muted) !important; font-weight: 500; }
.ui.breadcrumb a:hover { color: var(--c-brand) !important; }
.ui.breadcrumb .divider { color: var(--pasir-400) !important; margin: 0 6px !important; }
.ui.breadcrumb .active.section { color: var(--c-ink) !important; font-weight: 700; }

/* =====================================================================
   Segments
   ===================================================================== */
.ui.segment {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--c-surface) !important;
  color: var(--c-ink);
}
.ui.padded.segment { padding: 24px !important; }
.ui.raised.segment, .ui.raised.segments { box-shadow: var(--shadow-sm) !important; }
.ui.segments { border-radius: var(--radius-lg) !important; border: 1px solid var(--c-border) !important; box-shadow: var(--shadow-xs) !important; overflow: hidden; }
.ui.segments > .segment { border: none !important; border-top: 1px solid var(--c-border) !important; border-radius: 0 !important; box-shadow: none !important; }
.ui.segments > .segment:first-child { border-top: none !important; }
.ui.basic.segment { background: transparent !important; border: none !important; box-shadow: none !important; }
.ui.secondary.segment { background: var(--c-surface-2) !important; }
.ui.inverted.segment { background: var(--samudra-800) !important; border-color: var(--samudra-800) !important; color: #fff; }

/* Brand panel segment (pengganti inverted brown) */
.ui.segment.sinergi-primary {
  background: var(--samudra-800) !important;
  background-image: var(--motif-gelombang-dark) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
.ui.segment.sinergi-primary .ui.dividing.header { color: #fff !important; border-bottom-color: rgba(255, 255, 255, 0.16) !important; }
.ui.segment.sinergi-primary label { color: var(--samudra-100) !important; }

/* =====================================================================
   Headers
   ===================================================================== */
.ui.header { color: var(--c-ink) !important; font-weight: 700 !important; }
h1.ui.header { font-size: var(--fs-2xl); }
h2.ui.header { font-size: 1.5rem; letter-spacing: 0; }
h3.ui.header { font-size: var(--fs-lg); }
h4.ui.header { font-size: var(--fs-md); }
.ui.header .sub.header, .ui.header > .content > .sub.header { color: var(--c-muted) !important; font-weight: 500 !important; font-size: var(--fs-sm) !important; }
.ui.header > i.icon { color: var(--laut-600); }
.ui.dividing.header {
  border-bottom: 1px solid var(--c-border) !important;
  color: var(--c-ink) !important;
  padding-bottom: 12px !important;
}

/* =====================================================================
   Tables
   ===================================================================== */
.ui.table {
  font-size: var(--fs-base) !important;
  color: var(--c-ink-2);
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}
.ui.table thead th {
  background: var(--c-surface-2) !important;
  color: var(--c-ink-2) !important;
  font-weight: 700 !important;
  font-size: var(--fs-xs) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--c-border) !important;
  border-left: none !important;
  white-space: nowrap;
  vertical-align: middle;
}
.ui.table thead tr:first-child > th:first-child { border-radius: var(--radius-lg) 0 0 0 !important; }
.ui.table thead tr:first-child > th:last-child { border-radius: 0 var(--radius-lg) 0 0 !important; }
.ui.celled.table thead th, .ui.celled.table tbody td, .ui.celled.table tfoot th, .ui.celled.table tfoot td { border-left: 1px solid var(--pasir-100) !important; }
.ui.celled.table thead th:first-child, .ui.celled.table tbody td:first-child, .ui.celled.table tfoot th:first-child, .ui.celled.table tfoot td:first-child { border-left: none !important; }
.ui.table tbody tr { background: var(--c-surface); transition: background 0.12s ease; }
.ui.striped.table > tbody > tr:nth-child(2n), .ui.table tbody tr:nth-child(even) { background: var(--c-surface-2) !important; }
.ui.table tbody tr:hover, .ui.selectable.table tbody tr:hover { background: var(--laut-50) !important; }
.ui.table tbody td {
  font-size: var(--fs-base) !important;
  color: var(--c-ink-2) !important;
  border-top: 1px solid var(--pasir-100) !important;
  padding: 11px 16px !important;
  vertical-align: middle;
}
.ui.table tbody tr:first-child td { border-top: none !important; }
.ui.table tfoot th, .ui.table tfoot td {
  background: var(--pasir-100) !important;
  color: var(--c-ink) !important;
  font-weight: 700 !important;
  font-size: var(--fs-base) !important;
  padding: 11px 16px !important;
  border-top: 1px solid var(--c-border) !important;
}
.ui.table td.positive, .ui.table tr.positive td { background: var(--hijau-50) !important; color: var(--hijau-800) !important; }
.ui.table td.negative, .ui.table tr.negative td, .ui.table td.error, .ui.table tr.error td { background: var(--merah-50) !important; color: var(--merah-700) !important; }
.ui.table td.warning, .ui.table tr.warning td { background: var(--emas-50) !important; color: var(--emas-800) !important; }
.ui.table td.active, .ui.table tr.active td { background: var(--laut-50) !important; color: var(--laut-800) !important; }
.ui.table.compact thead th { padding: 9px 12px !important; }
.ui.table.compact tbody td, .ui.table.compact tfoot th, .ui.table.compact tfoot td { padding: 8px 12px !important; font-size: var(--fs-sm) !important; }
.ui.very.compact.table tbody td { padding: 6px 10px !important; }
.ui.definition.table thead th:first-child, .ui.definition.table td:first-child { background: var(--c-surface-2) !important; font-weight: 600 !important; color: var(--c-ink) !important; }
.ui.selectable.table tbody tr { cursor: pointer; }
.ui.table td, .ui.table th { font-variant-numeric: tabular-nums; }
/* Colored Semantic table variants collapse to the neutral table */
.ui.teal.table, .ui.blue.table, .ui.green.table, .ui.orange.table, .ui.red.table, .ui.purple.table, .ui.yellow.table { border-top: 1px solid var(--c-border) !important; }

.scroll-container { overflow-x: auto; border-radius: var(--radius-lg); }
.scroll-container > .ui.table { margin: 0; }

/* =====================================================================
   Buttons
   ===================================================================== */
.ui.button {
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  padding: 0.82em 1.25em;
  background: var(--c-surface) !important;
  color: var(--c-ink-2) !important;
  box-shadow: inset 0 0 0 1px var(--c-border-strong) !important;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  text-shadow: none !important;
  letter-spacing: 0.005em;
}
.ui.button:hover { background: var(--c-surface-3) !important; color: var(--c-ink) !important; }
.ui.button:focus-visible { box-shadow: inset 0 0 0 1px var(--c-border-strong), var(--focus-ring) !important; }
.ui.button:active { transform: translateY(1px); }
.ui.button > .icon:not(.button) { opacity: 0.95; }

/* Solid variants — mapped to the Kepri palette */
.ui.primary.button, .ui.primary.buttons .button,
.ui.blue.button, .ui.blue.buttons .button,
.ui.teal.button, .ui.teal.buttons .button {
  background: var(--laut-600) !important; color: #fff !important; box-shadow: none !important;
}
.ui.primary.button:hover, .ui.primary.buttons .button:hover,
.ui.blue.button:hover, .ui.blue.buttons .button:hover,
.ui.teal.button:hover, .ui.teal.buttons .button:hover { background: var(--laut-700) !important; color: #fff !important; }

.ui.positive.button, .ui.positive.buttons .button,
.ui.green.button, .ui.green.buttons .button,
.ui.olive.button, .ui.olive.buttons .button {
  background: var(--hijau-600) !important; color: #fff !important; box-shadow: none !important;
}
.ui.positive.button:hover, .ui.green.button:hover, .ui.olive.button:hover,
.ui.positive.buttons .button:hover, .ui.green.buttons .button:hover { background: var(--hijau-700) !important; color: #fff !important; }

.ui.negative.button, .ui.negative.buttons .button,
.ui.red.button, .ui.red.buttons .button {
  background: var(--merah-600) !important; color: #fff !important; box-shadow: none !important;
}
.ui.negative.button:hover, .ui.red.button:hover,
.ui.negative.buttons .button:hover, .ui.red.buttons .button:hover { background: var(--merah-700) !important; color: #fff !important; }

.ui.orange.button, .ui.orange.buttons .button,
.ui.yellow.button, .ui.yellow.buttons .button {
  background: var(--emas-400) !important; color: var(--samudra-900) !important; box-shadow: none !important;
}
.ui.orange.button:hover, .ui.yellow.button:hover,
.ui.orange.buttons .button:hover, .ui.yellow.buttons .button:hover { background: var(--emas-500) !important; color: var(--samudra-950) !important; }

.ui.purple.button, .ui.purple.buttons .button,
.ui.violet.button, .ui.violet.buttons .button,
.ui.black.button, .ui.black.buttons .button,
.ui.secondary.button, .ui.secondary.buttons .button {
  background: var(--samudra-800) !important; color: #fff !important; box-shadow: none !important;
}
.ui.purple.button:hover, .ui.violet.button:hover, .ui.black.button:hover, .ui.secondary.button:hover,
.ui.purple.buttons .button:hover, .ui.black.buttons .button:hover { background: var(--samudra-900) !important; color: #fff !important; }

.ui.grey.button, .ui.grey.buttons .button { background: var(--pasir-100) !important; color: var(--c-ink-2) !important; box-shadow: inset 0 0 0 1px var(--c-border) !important; }
.ui.grey.button:hover { background: var(--pasir-200) !important; }

/* Basic (outline) variants */
.ui.basic.button, .ui.basic.buttons .button { background: var(--c-surface) !important; color: var(--c-ink-2) !important; box-shadow: inset 0 0 0 1px var(--c-border-strong) !important; }
.ui.basic.button:hover, .ui.basic.buttons .button:hover { background: var(--c-surface-3) !important; }
.ui.basic.primary.button, .ui.basic.blue.button, .ui.basic.teal.button { color: var(--laut-700) !important; box-shadow: inset 0 0 0 1px var(--laut-300) !important; background: var(--c-surface) !important; }
.ui.basic.primary.button:hover, .ui.basic.blue.button:hover, .ui.basic.teal.button:hover { background: var(--laut-50) !important; }
.ui.basic.green.button, .ui.basic.positive.button { color: var(--hijau-700) !important; box-shadow: inset 0 0 0 1px var(--hijau-300) !important; background: var(--c-surface) !important; }
.ui.basic.green.button:hover, .ui.basic.positive.button:hover { background: var(--hijau-50) !important; }
.ui.basic.red.button, .ui.basic.negative.button { color: var(--merah-700) !important; box-shadow: inset 0 0 0 1px var(--merah-300) !important; background: var(--c-surface) !important; }
.ui.basic.red.button:hover, .ui.basic.negative.button:hover { background: var(--merah-50) !important; }
.ui.basic.orange.button, .ui.basic.yellow.button { color: var(--emas-800) !important; box-shadow: inset 0 0 0 1px var(--emas-300) !important; background: var(--c-surface) !important; }
.ui.basic.orange.button:hover, .ui.basic.yellow.button:hover { background: var(--emas-50) !important; }

.ui.inverted.button { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important; }
.ui.inverted.button:hover { background: rgba(255, 255, 255, 0.12) !important; }

.ui.disabled.button, .ui.button:disabled { opacity: 0.5 !important; }
.ui.loading.button { color: transparent !important; }

/* Button groups (incl. the "Pilih Semua / or / Hilangkan Semua" pairs) */
.ui.buttons { border-radius: var(--radius) !important; box-shadow: none; flex-wrap: nowrap; max-width: 100%; }
.ui.buttons .button { border-radius: 0 !important; }
.ui.buttons .button:first-child { border-top-left-radius: var(--radius) !important; border-bottom-left-radius: var(--radius) !important; }
.ui.buttons .button:last-child { border-top-right-radius: var(--radius) !important; border-bottom-right-radius: var(--radius) !important; }
.ui.buttons .or { width: 0.3em; }
.ui.buttons .or::before {
  font-family: var(--font-sans) !important; font-weight: 700; font-size: 0.68rem;
  width: 1.7em; height: 1.7em; line-height: 1.7em; margin-top: -0.85em; margin-left: -0.85em;
  color: var(--c-muted); background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border);
}
.ui.mini.buttons .button, .ui.mini.button { font-size: 0.72rem !important; padding: 0.62em 0.9em; }
.ui.tiny.buttons .button, .ui.tiny.button { font-size: 0.78rem !important; }
.ui.circular.button { border-radius: 50em !important; }

/* =====================================================================
   Forms, inputs, dropdowns
   ===================================================================== */
.ui.form .field > label, .ui.form .fields > label {
  color: var(--c-ink-2) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px !important;
}
.ui.form input:not([type]), .ui.form input[type="text"], .ui.form input[type="email"], .ui.form input[type="password"],
.ui.form input[type="number"], .ui.form input[type="tel"], .ui.form input[type="search"], .ui.form input[type="date"],
.ui.form input[type="url"], .ui.form input[type="file"], .ui.form textarea, .ui.form select,
.ui.input > input, .ui.selection.dropdown {
  border: 1px solid var(--c-border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--c-surface) !important;
  color: var(--c-ink) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  font-size: var(--fs-base) !important;
}
.ui.input > input, .ui.form input:not([type]), .ui.form input[type="text"], .ui.form input[type="email"], .ui.form input[type="password"],
.ui.form input[type="number"], .ui.form input[type="tel"], .ui.form input[type="search"] { padding: 0.72em 0.95em !important; }
.ui.input.left.icon > input, .ui.left.icon.input > input { padding-left: 2.6em !important; }
.ui.icon.input > input { padding-right: 2.6em !important; }
.ui.left.icon.input > input { padding-right: 0.95em !important; }
.ui.input > input::placeholder, .ui.form input::placeholder, .ui.form textarea::placeholder { color: var(--c-subtle) !important; opacity: 1; }
.ui.input > input:hover, .ui.selection.dropdown:hover, .ui.form input:hover, .ui.form textarea:hover { border-color: var(--pasir-400) !important; }
.ui.input > input:focus, .ui.form input:focus, .ui.form textarea:focus, .ui.form select:focus,
.ui.selection.active.dropdown, .ui.selection.dropdown:focus, .ui.selection.active.dropdown:hover {
  border-color: var(--laut-500) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none;
}
.ui.icon.input > i.icon { color: var(--c-muted); opacity: 1; }
.ui.selection.dropdown { min-height: 2.75em; padding: 0.72em 2.4em 0.72em 0.95em !important; }
.ui.selection.dropdown > .dropdown.icon { color: var(--c-muted); top: 0.8em !important; }
.ui.dropdown .menu {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
}
.ui.selection.active.dropdown .menu { border-color: var(--laut-500) !important; border-top-width: 0 !important; }
.ui.dropdown .menu > .item { font-size: var(--fs-base) !important; color: var(--c-ink-2) !important; }
.ui.dropdown .menu > .item:hover { background: var(--laut-50) !important; color: var(--laut-800) !important; }
.ui.dropdown .menu .selected.item, .ui.dropdown .menu .active.item { background: var(--laut-50) !important; color: var(--laut-800) !important; font-weight: 600 !important; }
.ui.multiple.dropdown > .label {
  background: var(--laut-50) !important; color: var(--laut-800) !important;
  box-shadow: inset 0 0 0 1px var(--laut-100) !important; border-radius: var(--radius-sm) !important; font-weight: 600 !important;
}
.ui.form .field.error input, .ui.form .field.error textarea, .ui.form .field.error .ui.dropdown {
  border-color: var(--merah-500) !important; background: var(--merah-50) !important;
}
.ui.form .field.error label { color: var(--merah-700) !important; }
.ui.form .disabled.field, .ui.form .field :disabled { opacity: 0.6; }

/* Checkbox & toggle */
.ui.checkbox label, .ui.checkbox + label { color: var(--c-ink-2) !important; font-size: var(--fs-base); }
.ui.checkbox label::before, .ui.checkbox .box::before { border-radius: 5px !important; border-color: var(--c-border-strong) !important; }
.ui.checkbox input:checked ~ label::before { background: var(--laut-600) !important; border-color: var(--laut-600) !important; }
.ui.checkbox input:checked ~ label::after, .ui.checkbox input:checked ~ .box::after { color: #fff !important; }
.ui.toggle.checkbox label::before { background: var(--pasir-300) !important; border-radius: 999px !important; }
.ui.toggle.checkbox input:checked ~ label::before, .ui.toggle.checkbox input:focus:checked ~ label::before { background: var(--laut-600) !important; }
.ui.toggle.checkbox label::after { box-shadow: 0 1px 2px rgba(17, 39, 54, 0.2) !important; }
.ui.radio.checkbox input:checked ~ label::before { background: #fff !important; }
.ui.radio.checkbox input:checked ~ label::after { background: var(--laut-600) !important; }

/* Calendar popup (semantic-ui-calendar) */
.ui.calendar .ui.popup, .ui.calendar.popup { border-radius: var(--radius-lg) !important; border: 1px solid var(--c-border) !important; box-shadow: var(--shadow-lg) !important; }
.ui.calendar .ui.table tr td, .ui.calendar .ui.table tr th { padding: 0.55em !important; border: none !important; text-transform: none; letter-spacing: 0; }
.ui.calendar .ui.table tr .link:hover { background: var(--laut-50) !important; }
.ui.calendar .ui.table tr .active, .ui.calendar .ui.table tr td.active { background: var(--laut-600) !important; color: #fff !important; border-radius: var(--radius-sm); }
.ui.calendar .ui.table tr .today { color: var(--emas-700) !important; font-weight: 700; }

/* =====================================================================
   Labels
   ===================================================================== */
.ui.label {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: var(--fs-xs) !important;
  background: var(--pasir-100) !important;
  color: var(--c-ink-2) !important;
  border: 1px solid var(--pasir-200);
  padding: 0.42em 0.75em !important;
}
.ui.blue.label, .ui.teal.label, .ui.primary.label { background: var(--laut-50) !important; color: var(--laut-800) !important; border-color: var(--laut-100) !important; }
.ui.green.label, .ui.olive.label, .ui.positive.label { background: var(--hijau-50) !important; color: var(--hijau-800) !important; border-color: var(--hijau-200) !important; }
.ui.red.label, .ui.negative.label { background: var(--merah-50) !important; color: var(--merah-700) !important; border-color: var(--merah-200) !important; }
.ui.orange.label, .ui.yellow.label { background: var(--emas-50) !important; color: var(--emas-800) !important; border-color: var(--emas-200) !important; }
.ui.purple.label, .ui.violet.label, .ui.black.label, .ui.secondary.label { background: var(--samudra-50) !important; color: var(--samudra-700) !important; border-color: var(--samudra-100) !important; }
.ui.grey.label { background: var(--pasir-100) !important; color: var(--c-ink-2) !important; border-color: var(--pasir-200) !important; }
.ui.basic.label { background: var(--c-surface) !important; }
.ui.circular.label { border-radius: 50em !important; }
.ui.tag.label { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.ui.label > .icon { margin-right: 0.4em; }

/* =====================================================================
   Messages
   ===================================================================== */
.ui.message {
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface-2) !important;
  color: var(--c-ink-2) !important;
  padding: 14px 18px !important;
  position: relative;
}
.ui.message .header { color: inherit !important; font-weight: 700 !important; }
.ui.icon.message > .icon:not(.close) { font-size: 1.8em; opacity: 0.9; }
.ui.positive.message, .ui.success.message { background: var(--hijau-50) !important; color: var(--hijau-800) !important; border-color: var(--hijau-200) !important; }
.ui.negative.message, .ui.error.message { background: var(--merah-50) !important; color: var(--merah-700) !important; border-color: var(--merah-200) !important; }
.ui.info.message, .ui.blue.message, .ui.teal.message { background: var(--laut-50) !important; color: var(--laut-800) !important; border-color: var(--laut-100) !important; }
.ui.warning.message, .ui.yellow.message, .ui.orange.message { background: var(--emas-50) !important; color: var(--emas-800) !important; border-color: var(--emas-200) !important; }
.ui.purple.message, .ui.violet.message { background: var(--samudra-50) !important; color: var(--samudra-700) !important; border-color: var(--samudra-100) !important; }

/* =====================================================================
   Statistics
   ===================================================================== */
.ui.statistic > .value, .ui.statistics .statistic > .value { color: var(--c-ink) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
.ui.statistic > .label, .ui.statistics .statistic > .label { color: var(--c-muted) !important; font-weight: 600 !important; letter-spacing: 0.04em; }
.ui.teal.statistic > .value, .ui.blue.statistic > .value { color: var(--laut-700) !important; }
.ui.green.statistic > .value { color: var(--hijau-700) !important; }
.ui.red.statistic > .value { color: var(--merah-700) !important; }
.ui.orange.statistic > .value, .ui.yellow.statistic > .value { color: var(--emas-700) !important; }

/* =====================================================================
   Cards
   ===================================================================== */
.ui.card, .ui.cards > .card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-surface) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.ui.link.card:hover, .ui.link.cards > .card:hover, a.ui.card:hover, .ui.cards > a.card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px); }
.ui.card > .content, .ui.cards > .card > .content { border-color: var(--c-border) !important; }
.ui.card > .content > .header, .ui.cards > .card > .content > .header { color: var(--c-ink) !important; font-weight: 700 !important; }
.ui.card > .content > .meta, .ui.card .meta { color: var(--c-muted) !important; }
.ui.card > .extra.content, .ui.cards > .card > .extra { border-color: var(--c-border) !important; color: var(--c-muted) !important; font-size: var(--fs-sm) !important; }

/* =====================================================================
   Modals, dimmer, popups, toasts
   ===================================================================== */
.ui.modal { border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important; overflow: hidden; }
.ui.modal > .header {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--c-border) !important;
  color: var(--c-ink) !important; font-weight: 700 !important; font-size: var(--fs-lg) !important;
  padding: 18px 24px !important;
}
.ui.modal > .content { padding: 20px 24px !important; color: var(--c-ink-2); }
.ui.modal > .actions { background: var(--c-surface-2) !important; border-top: 1px solid var(--c-border) !important; padding: 14px 24px !important; }
.ui.modal > .close { color: var(--c-muted); }
.ui.dimmer { background: rgba(9, 27, 40, 0.55) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#preloader.dimmer { background: rgba(9, 27, 40, 0.88) !important; }
.ui.inverted.dimmer { background: rgba(247, 245, 241, 0.82) !important; }
.ui.popup { border-radius: var(--radius) !important; border: 1px solid var(--c-border) !important; box-shadow: var(--shadow-md) !important; color: var(--c-ink-2) !important; }
.ui.inverted.popup { background: var(--samudra-900) !important; color: #fff !important; border: none !important; }
[data-tooltip]::after { background: var(--samudra-900) !important; color: #fff !important; border-radius: var(--radius-sm) !important; font-family: var(--font-sans) !important; font-weight: 500; }
[data-tooltip]::before { background: var(--samudra-900) !important; }
.ui.toast-container .toast-box, .ui.toast { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
.ui.toast { background: var(--samudra-800) !important; color: #fff !important; }
.ui.success.toast, .ui.green.toast { background: var(--hijau-700) !important; }
.ui.error.toast, .ui.red.toast { background: var(--merah-700) !important; }
.ui.warning.toast, .ui.yellow.toast, .ui.orange.toast { background: var(--emas-400) !important; color: var(--samudra-950) !important; }

/* =====================================================================
   Menus: pagination, secondary, tabs
   ===================================================================== */
.ui.pagination.menu {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  background: var(--c-surface) !important;
  min-height: 2.6em;
  overflow: hidden;
}
.ui.pagination.menu .item { color: var(--c-ink-2) !important; min-width: 2.6em; justify-content: center; font-weight: 600; font-size: var(--fs-sm); }
.ui.pagination.menu .item::before { background: var(--c-border) !important; }
.ui.pagination.menu .item:hover { background: var(--c-surface-3) !important; }
.ui.pagination.menu .active.item { background: var(--laut-600) !important; color: #fff !important; }
.ui.pagination.menu .disabled.item { color: var(--c-subtle) !important; }

.ui.secondary.menu .item { border-radius: var(--radius) !important; color: var(--c-ink-2) !important; font-weight: 500; }
.ui.secondary.menu .item:hover { color: var(--c-ink) !important; background: var(--c-surface-3) !important; }
.ui.secondary.menu .active.item { color: var(--laut-800) !important; background: var(--laut-50) !important; font-weight: 700 !important; }
.ui.secondary.pointing.menu { border-bottom: 1px solid var(--c-border) !important; }
.ui.secondary.pointing.menu .item { border-radius: 0 !important; background: transparent !important; }
.ui.secondary.pointing.menu .active.item { border-color: var(--laut-600) !important; color: var(--laut-800) !important; background: transparent !important; }
.ui.tabular.menu .active.item { border-radius: var(--radius) var(--radius) 0 0 !important; color: var(--laut-800) !important; font-weight: 700 !important; }
.ui.accordion .title { color: var(--c-ink) !important; font-weight: 600; }

/* =====================================================================
   Loader / progress / divider
   ===================================================================== */
.ui.loader::before { border-color: var(--laut-100) !important; }
.ui.loader::after { border-color: var(--laut-600) transparent transparent !important; }
.ui.inverted.dimmer .ui.loader::before { border-color: var(--laut-100) !important; }
.ui.dimmer .ui.loader:not(.inverted)::after, #preloader .ui.loader::after { border-color: var(--emas-400) transparent transparent !important; }
.ui.progress { background: var(--pasir-100) !important; border-radius: 999px !important; }
.ui.progress .bar { background: var(--laut-600) !important; border-radius: 999px !important; min-width: 0; }
.ui.progress.success .bar, .ui.green.progress .bar { background: var(--hijau-600) !important; }
.ui.progress.warning .bar, .ui.yellow.progress .bar, .ui.orange.progress .bar { background: var(--emas-500) !important; }
.ui.progress.error .bar, .ui.red.progress .bar { background: var(--merah-600) !important; }
.ui.divider:not(.vertical):not(.horizontal) { border-top-color: var(--c-border) !important; border-bottom: none !important; }

/* =====================================================================
   Utilities kept for compatibility
   ===================================================================== */
.highlight-diff { background-color: var(--emas-50) !important; border-left: 3px solid var(--emas-500) !important; }
.custom-rounded { border-radius: var(--radius-xl) !important; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .topbar-user-email { display: none; }
  .ui.top.fixed.menu .header.item { max-width: 280px; }
}

@media (max-width: 992px) {
  :root { --content-pad: 20px; }
  #sidebar { width: var(--sidebar-collapsed-width); padding: 0 10px; }
  #sidebar .sidebar-brand { justify-content: center; padding-left: 0; margin: 0 -10px 10px; }
  #sidebar .sidebar-brand-text, #sidebar .sidebar-section-label, #sidebar .sidebar-note,
  #sidebar .app-identity, #sidebar .sidebar-kantah-info { display: none; }
  #sidebar .item { justify-content: center; font-size: 0 !important; padding: 11px 0 !important; gap: 0; }
  #sidebar .item > i.icon { font-size: 1.15rem !important; width: auto; }
  #sidebar .item.active::after { left: -10px; }
  #sidebar .sidebar-kantah-switcher { background: transparent; border-color: transparent; }
  #sidebar .sidebar-kantah-btn { border-top: none !important; border-radius: var(--radius) !important; padding: 11px 0 !important; font-size: 0 !important; }
  #toggle-sidebar { display: none !important; }
  .ui.top.fixed.menu, body:has(#sidebar.collapsed) .ui.top.fixed.menu { left: var(--sidebar-collapsed-width) !important; }
  #content, #content.expanded { margin-left: var(--sidebar-collapsed-width); }
  .ui.top.fixed.menu .item.topbar-context { display: none; }
}

@media (max-width: 768px) {
  :root { --content-pad: 14px; }
  #sidebar, #sidebar.collapsed {
    width: var(--sidebar-width) !important; padding: 0 14px !important;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg) !important;
    z-index: 1100;
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  #sidebar .sidebar-brand, #sidebar.collapsed .sidebar-brand { justify-content: flex-start; padding-left: 20px; margin: 0 -14px 10px; }
  #sidebar .sidebar-brand-text, #sidebar.collapsed .sidebar-brand-text,
  #sidebar .sidebar-kantah-info, #sidebar.collapsed .sidebar-kantah-info { display: flex; }
  #sidebar .sidebar-section-label, #sidebar.collapsed .sidebar-section-label,
  #sidebar .sidebar-note, #sidebar.collapsed .sidebar-note,
  #sidebar .app-identity, #sidebar.collapsed .app-identity { display: block; }
  #sidebar .item, #sidebar.collapsed .item { justify-content: flex-start; font-size: var(--fs-base) !important; padding: 10px 12px !important; gap: 12px; }
  #sidebar .item > i.icon, #sidebar.collapsed .item > i.icon { font-size: 1.05rem !important; width: 20px; }
  #sidebar .item.active::after, #sidebar.collapsed .item.active::after { left: -14px; }
  #sidebar .sidebar-kantah-switcher, #sidebar.collapsed .sidebar-kantah-switcher { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); }
  #sidebar .sidebar-kantah-btn, #sidebar.collapsed .sidebar-kantah-btn { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 0 !important; padding: 9px 12px !important; font-size: var(--fs-xs) !important; }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(9, 27, 40, 0.45); z-index: 1050; }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .ui.top.fixed.menu, body:has(#sidebar.collapsed) .ui.top.fixed.menu { left: 0 !important; padding: 0 8px; }
  .ui.top.fixed.menu .item.topbar-burger { display: flex !important; }
  .ui.top.fixed.menu .header.item { max-width: 180px; padding-left: 4px !important; }
  #content, #content.expanded { margin-left: 0; padding: 16px var(--content-pad) 32px; }
  .page-title, h1.page-title, .ui.header.page-title { font-size: var(--fs-xl) !important; }
  .hero-banner { padding: 18px; }
}

/* Mobile: data tables scroll horizontally instead of Semantic UI's stacked-cell layout */
@media only screen and (max-width: 767px) {
  .ui.table:not(.unstackable):not(.stackable) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100%;
  }
  .ui.table:not(.unstackable):not(.stackable) thead { display: table-header-group !important; }
  .ui.table:not(.unstackable):not(.stackable) tbody { display: table-row-group !important; }
  .ui.table:not(.unstackable):not(.stackable) tfoot { display: table-footer-group !important; }
  .ui.table:not(.unstackable):not(.stackable) tr { display: table-row !important; padding: 0 !important; box-shadow: none !important; }
  .ui.table:not(.unstackable):not(.stackable) th,
  .ui.table:not(.unstackable):not(.stackable) td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap;
    box-shadow: none !important;
  }
  .ui.table:not(.unstackable):not(.stackable) tbody td { border-top: 1px solid var(--pasir-100) !important; }
  .ui.table:not(.unstackable):not(.stackable) tbody tr:first-child td { border-top: none !important; }
  .ui.table:not(.unstackable):not(.stackable) thead tr:first-child > th:first-child,
  .ui.table:not(.unstackable):not(.stackable) thead tr:first-child > th:last-child { border-radius: 0 !important; }
}

@media print {
  #sidebar, .ui.top.fixed.menu, .sidebar-backdrop { display: none !important; }
  #content, #content.expanded { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; }
}