/* ── INPUT-V2 TOKENS
   Token di bawah ini BELUM ada di barantum-shared.css.
   Semua token lain (--primary, --tx-*, --fs-*, --fw-*, --sp-*, --border,
   --surface, --card-bg, --shadow-sm/md, --radius, --bg-hover, dll)
   diwarisi langsung dari barantum-shared.css.
── */
:root {
  /* Alias: text token shared (--text-*) → singkatan --tx-* yang dipakai di file ini */
  --tx-1:           var(--text-1);   /* #18233A — body text, input value */
  --tx-2:           var(--text-2);   /* #6B7A99 — muted, placeholder, icon */
  --tx-3:           var(--text-3);   /* #A3ADBE — light, hint, sub-label */

  /* Alias: border-strong → br-strong dari shared */
  --border-strong:  var(--br-strong);

  /* Semantic colors (shared hanya punya --sev-*, bukan --danger/success/warning) */
  --danger:         var(--sev-crit);   /* #dc2626 */
  --danger-light:   #FFF4F3;
  --success:        var(--sev-ok);     /* #16a34a */
  --success-light:  #d4f7e3;
  --warning:        var(--sev-warn);   /* #d97706 */
  --warning-light:  #fee3bf;
  --info:           var(--sev-info);   /* #2284C6 */

  /* Brand extras (belum ada di shared) */
  --primary-hover:  #15689e;
  --primary-border: #BEE0F9;

  /* Disabled */
  --bg-disabled:    #e9ecef;

  /* Focus & error shadow (belum ada di shared) */
  --shadow-focus:   0 0 0 3px #E0EEFF;
  --shadow-error:   0 0 0 3px rgba(220,38,38,.12);

  /* Radius extras (shared hanya punya --radius: 8px) */
  --radius-sm:      6px;
  --radius-lg:      12px;

  /* Type extras (shared tidak punya --fs-xl dan --fw-bolder) */
  --fs-xl:          24px;
  --fw-bolder:      700;

  /* Spacing extras (shared hanya sampai --sp-5: 24px) */
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Input-specific tokens */
  --input-height:  38px;
  --input-font:    var(--fs-base);
  --input-px:      12px;
  --input-radius:  var(--radius);

  /* Label style tokens */
  --label-fs:      0.8125rem;
  --label-fw:      var(--fw-med);
  --label-color:   var(--tx-1);
  --label-tt:      uppercase;
  --label-ls:      0.03em;
}

/* ── PAGE LAYOUT ── */
.page-wrap { max-width: 1200px; margin: 0 auto; padding: var(--sp-8) var(--sp-6); }
.page-header { margin-bottom: var(--sp-10); }
.page-title { font-size: var(--fs-xl); font-weight: var(--fw-bolder); color: var(--tx-1); margin-bottom: 4px; }
.page-sub { font-size: var(--fs-sm); color: var(--tx-2); }
.page-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  background: var(--primary-light); color: var(--primary);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-bottom: var(--sp-3);
  text-transform: uppercase; letter-spacing: .05em;
}

/* ── NAV SIDEBAR ── */
.layout { display: flex; gap: var(--sp-8); align-items: flex-start; }
.sidebar-nav {
  width: 220px; flex-shrink: 0; position: sticky; top: var(--sp-6);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.sidebar-nav h6 {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .07em; color: var(--tx-3); padding: var(--sp-2) var(--sp-2) var(--sp-1);
  margin-bottom: 2px;
}
.sidebar-nav a {
  display: block; padding: 6px var(--sp-2); font-size: var(--fs-sm);
  color: var(--tx-2); text-decoration: none; border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
}
.sidebar-nav a:hover { background: var(--primary-light); color: var(--primary); }
.sidebar-nav a.active { background: var(--primary-light); color: var(--primary); font-weight: var(--fw-med); }
.sidebar-sep { height: 1px; background: var(--border); margin: var(--sp-2) 0; }
.main-content { flex: 1; min-width: 0; }

/* ── SECTION ── */
.section { margin-bottom: var(--sp-12); scroll-margin-top: var(--sp-6); }
.section-head { margin-bottom: var(--sp-5); }
.section-eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .07em; color: var(--tx-3); margin-bottom: 4px;
}
.section-title { font-size: var(--fs-md); font-weight: var(--fw-bolder); color: var(--tx-1); margin-bottom: 4px; }
.section-desc { font-size: var(--fs-sm); color: var(--tx-2); line-height: 1.6; }
.file-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  background: var(--primary-light); color: var(--primary);
  font-size: 11px; font-family: monospace; margin-left: 8px; vertical-align: middle;
}

/* ── CARD ── */
.card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-body { padding: var(--sp-5) var(--sp-6); }
.card-title {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .07em; color: var(--tx-2); margin-bottom: var(--sp-4);
}

/* ── STATES GRID ── */
.states-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.state-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.state-lbl {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: var(--sp-2);
}
.state-lbl--normal   { color: var(--tx-3); }
.state-lbl--filled   { color: var(--primary); }
.state-lbl--disabled { color: var(--tx-3); }
.state-lbl--error    { color: var(--red); }

/* ── FORM ROW ── */
.form-demo {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.form-demo-head {
  padding: var(--sp-3) var(--sp-6); background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .07em; color: var(--tx-2);
}
.form-row {
  display: flex; align-items: flex-start;
  padding: 10px var(--sp-6); border-bottom: 1px solid var(--surface);
}
.form-row:last-child { border-bottom: none; }
/* LABEL — sesuai barantum-v6.css: uppercase, 0.875rem, weight 500, color gray-100 */
.form-label {
  width: 196px; flex-shrink: 0; padding-top: 9px;
  font-size: var(--label-fs); font-weight: var(--label-fw);
  color: var(--label-color); text-transform: var(--label-tt);
  letter-spacing: var(--label-ls);
}
.form-label .req { color: var(--red); margin-left: 2px; }
.form-field { flex: 1; min-width: 0; }
.field-hint { font-size: var(--fs-xs); color: var(--tx-2); margin-top: 5px; }
.field-error { color:var(--red); font-size: var(--fontSizes-sm); margin-top: var(--space-2); }

/* ════════════════════════════════════════════
   INPUT COMPONENTS
════════════════════════════════════════════ */

/* ── Base Input ── */
.v2-input {
  width: 100% !important; height: var(--input-height) !important; padding: 0 var(--input-px) !important;
  font-size: var(--input-font) !important; font-family: "Inter", sans-serif !important;
  color: var(--tx-1) !important; background: var(--card-bg) !important;
  border: 1px solid var(--border) !important; border-radius: var(--input-radius) !important;
  outline: none !important; transition: border-color .15s ease-in, box-shadow .15s ease-in !important;
  appearance: none !important;
  display: block !important;
  box-shadow: none;
}
.v2-input::placeholder { color: var(--tx-2) !important; }
.v2-input:hover:not(:disabled):not(.v2-input--error) { border-color: var(--primary-border) !important; }
.v2-input:focus { border-color: var(--primary) !important; box-shadow: var(--shadow-focus) !important; }
.v2-input:disabled,
.v2-input[readonly] { background: var(--bg-disabled) !important; color: var(--tx-2) !important; cursor: not-allowed !important; }
.v2-input--error { border-color: var(--red) !important; box-shadow: var(--shadow-error) !important; }
.v2-input--sm  { height: 32px !important; font-size: var(--fs-sm) !important; padding: 0 10px !important; }
.v2-input--lg  { height: 44px !important; font-size: var(--fs-md) !important; }
.v2-input--icon-l { padding-left: 36px !important; }
.v2-input--icon-r { padding-right: 36px !important; }
.v2-select--icon-l { padding-left: 36px !important; }

/* Input wrap (for icon overlay) */
.v2-input-wrap { position: relative; width: 100%; }
.v2-icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--tx-2); pointer-events: none;
}
.v2-icon--l { left: 11px; }
.v2-icon--r { right: 11px; }

/* ── Textarea ── */
.v2-textarea {
  width: 100% !important; min-height: 84px !important; padding: 9px var(--input-px) !important;
  font-size: var(--input-font) !important; font-family: "Inter", sans-serif !important;
  color: var(--tx-1) !important; background: var(--card-bg) !important;
  border: 1px solid var(--border) !important; border-radius: var(--input-radius) !important;
  outline: none !important; resize: vertical !important; line-height: 1.6 !important;
  transition: border-color .15s ease-in, box-shadow .15s ease-in !important;
  display: block !important;
}
.v2-textarea::placeholder { color: var(--tx-2) !important; }
.v2-textarea:hover:not(:disabled) { border-color: var(--primary-border) !important; }
.v2-textarea:focus { border-color: var(--primary) !important; box-shadow: var(--shadow-focus) !important; }
.v2-textarea:disabled,
.v2-textarea[readonly] { background: var(--bg-disabled) !important; cursor: not-allowed !important; }
.v2-textarea--error { border-color: var(--red) !important; box-shadow: var(--shadow-error) !important; }

/* ── Addon (prefix/suffix) ── */
.v2-addon-wrap { display: flex; }
.v2-addon {
  display: inline-flex; align-items: center; padding: 0 12px;
  background: var(--bg-disabled); border: 1px solid var(--border);
  font-size: var(--fs-base); color: var(--tx-1); font-weight: var(--fw-med);
  flex-shrink: 0; white-space: nowrap; user-select: none;
}
.v2-addon--l { border-right: none; border-radius: var(--radius) 0 0 var(--radius); }
.v2-addon--r { border-left: none; border-radius: 0 var(--radius) var(--radius) 0; }
.v2-addon-wrap .v2-input { border-radius: 0; }
.v2-addon-wrap .v2-input:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.v2-addon-wrap .v2-input:first-child { border-radius: var(--radius) 0 0 var(--radius); }

/* ── Select (native) ── */
.v2-select-wrap { position: relative; }
.v2-select {
  width: 100% !important; height: var(--input-height) !important; padding: 0 36px 0 var(--input-px) !important;
  font-size: var(--input-font) !important; font-family: "Inter", sans-serif !important;
  color: var(--tx-1) !important; background-color: var(--card-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A99' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  border: 1px solid var(--border) !important; border-radius: var(--input-radius) !important;
  outline: none !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  transition: border-color .15s ease-in, box-shadow .15s ease-in !important;
  display: block !important;
}
.v2-select:hover:not(:disabled) { border-color: var(--primary-border) !important; }
.v2-select:focus { border-color: var(--primary) !important; box-shadow: var(--shadow-focus) !important; }
.v2-select:disabled { background-color: var(--bg-disabled) !important; cursor: not-allowed !important; }
.v2-select--error { border-color: var(--red) !important; box-shadow: var(--shadow-error) !important; }
.v2-caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--tx-2); pointer-events: none; transition: transform .2s ease;
}

/* ── Multiselect tag-input ── */
.v2-ms {
  min-height: var(--input-height); padding: 4px 36px 4px 6px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--input-radius); cursor: pointer;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; position: relative;
  transition: border-color .15s ease-in, box-shadow .15s ease-in;
}
.v2-ms:hover:not(.v2-ms--disabled) { border-color: var(--primary-border); }
.v2-ms:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.v2-ms--disabled { background: var(--bg-disabled); cursor: not-allowed; }
.v2-ms--error { border-color: var(--red) !important; box-shadow: var(--shadow-error) !important; }
.v2-ms-ph { font-size: var(--fs-base); color: var(--tx-2); padding: 0 4px; }
.v2-ms-caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--tx-2); pointer-events: none; transition: transform .2s ease;
}
/* Tag — bg primary, white text, matches actual vue-multiselect */
.v2-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px 3px 10px; border-radius: 5px;
  background: var(--primary); color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1;
}
.v2-tag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: none; cursor: pointer;
  font-size: 10px; color: #fff;
}

/* ── Colored tag (multitag) ── */
.v2-ctag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px 3px 10px; border-radius: 5px;
  font-size: var(--fs-sm); font-weight: var(--fw-med); line-height: 1; color: #fff;
}
.v2-ctag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.25); border: none; cursor: pointer;
  font-size: 10px; color: #fff;
}

/* ── Related-to pill ── */
.v2-relpill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  background: var(--primary-light); color: var(--primary);
  font-size: var(--fs-sm); font-weight: var(--fw-med);
}
.v2-relpill-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(27,111,190,.15); border: none; cursor: pointer;
  font-size: 9px; color: var(--primary);
}

/* ── Date icon ── */
.v2-date-icon {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--tx-2); pointer-events: none;
}

/* ── Radio / Checkbox ── */
.v2-radio-group, .v2-check-group { display: flex; flex-direction: column; gap: 8px; }
.v2-radio-item, .v2-check-item {
  display: flex !important; align-items: center !important; gap: 10px;
  font-size: var(--fs-base); color: var(--tx-1); cursor: pointer;
  margin: 0 !important;
}
.v2-radio-item label, .v2-check-item label {
  margin: 0 !important; font-weight: var(--fw-reg) !important; cursor: pointer;
}
.v2-radio, .v2-check {
  width: 16px !important; height: 16px !important;
  min-width: 16px !important; min-height: 16px !important;
  max-width: 16px !important; max-height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--tx-2) !important; background: var(--card-bg) !important;
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  display: inline-block !important;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.v2-radio { border-radius: 50% !important; }
.v2-check { border-radius: 4px !important; }
.v2-radio:checked { border-color: var(--primary) !important; background: var(--primary) !important; box-shadow: inset 0 0 0 3px #fff !important; }
.v2-check:checked {
  border-color: var(--primary) !important; background: var(--card-bg) !important;
  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='%231B6FBE' stroke-width='2' d='M3 8l3 3 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
}
.v2-radio:disabled, .v2-check:disabled { background: #f2f4f4 !important; border-color: #b3c0ce !important; cursor: not-allowed !important; }
.v2-radio--error, .v2-check--error { border-color: var(--red) !important; }

/* ── Stopwatch ── */
.v2-sw { display: inline-flex; align-items: center; gap: 10px; }
.v2-sw-display { font-size: 22px; font-weight: var(--fw-bolder); color: var(--tx-1); font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.v2-sw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; font-size: 14px;
}
.v2-sw-btn--play  { background: var(--success-light); color: var(--success); }
.v2-sw-btn--stop  { background: var(--danger-light);  color: var(--red); }
.v2-sw-btn--reset { background: var(--bg-disabled);   color: var(--tx-2); }

/* ── Editor toolbar ── */
.v2-editor { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.v2-editor:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.v2-editor-toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 8px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.v2-tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px; font-size: 13px;
  color: var(--tx-2); border: none; background: transparent; cursor: pointer; transition: background .12s;
}
.v2-tbtn:hover { background: var(--bg-disabled); }
.v2-tsep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.v2-editor-body { min-height: 80px; padding: 8px var(--input-px); font-size: var(--fs-base); color: var(--tx-1); line-height: 1.6; }
.v2-editor-ph { color: var(--tx-2); }

/* ── Attach / Dropzone ── */
.v2-dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 24px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; background: var(--card-bg);
}
.v2-dropzone:hover { border-color: var(--primary); background: var(--primary-light); }
.v2-dropzone--error {
  border-color: var(--red) !important;
  background: var(--danger-light) !important;
}
.v2-dropzone--error i { color: var(--red) !important; }
.v2-dropzone--disabled {
  opacity: .5;
  pointer-events: none;
  background: var(--bg-disabled) !important;
}
/* Compact mode — pas udah ada file, dropzone diciutin biar hemat tempat */
.v2-dropzone--compact {
  padding: 12px !important;
}
.v2-dropzone--compact i {
  font-size: 20px !important;
  margin-bottom: 2px !important;
}
.v2-dropzone--compact p {
  margin: 0;
  display: inline;
}
.v2-dropzone--compact p:not(:last-child)::after {
  content: " ";
}
.v2-dropzone i { font-size: 28px; color: var(--tx-2); display: block; margin-bottom: 6px; }
.v2-dropzone p { font-size: var(--fs-sm); color: var(--tx-2); }
.v2-dropzone p strong { color: var(--primary); }
.v2-dropzone.v2-dropzone--error p strong {
  color: var(--red);
}
.v2-file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--tx-2); margin-top: 6px;
}
.v2-file-item i { font-size: 16px; color: var(--primary); }
.v2-file-name { flex: 1; font-weight: var(--fw-med); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-file-size { color: var(--tx-2); flex-shrink: 0; }
.v2-file-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: transparent; color: var(--tx-2); cursor: pointer; font-size: 12px;
}
.v2-file-del:hover { background: var(--danger-light); color: var(--red); }

/* ── Sync card (mis. ASSA Rent nomor polisi panel) ── */
.v2-sync-card {
  margin-top: 8px;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--tx-1);
}
.v2-sync-card + .v2-sync-card { margin-top: 6px; }
.v2-sync-card hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-2) 0; }
.v2-sync-card .v2-sync-empty {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary);
  margin: 0 auto var(--sp-2);
}
.v2-sync-card .v2-sync-empty i { font-size: 20px; color: var(--primary); }
.v2-sync-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--tx-2); }

/* tombol search di dalam input v2 (mis. cari nomor polisi) */
.v2-input-btn-r {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--tx-2); cursor: pointer;
}
.v2-input-btn-r:hover { background: var(--primary-light); color: var(--primary); }

/* ── DO / DON'T ── */
.dodont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
.dodont-card { border-radius: var(--radius); padding: var(--sp-5); }
.dodont-card--do   { background: #f0fdf4; border: 1px solid #86efac; }
.dodont-card--dont { background: var(--danger-light); border: 1px solid #fca5a5; }
.dodont-head {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-bolder); text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: var(--sp-3);
}
.dodont-head--do   { color: var(--success); }
.dodont-head--dont { color: var(--red); }
.dodont-item { font-size: var(--fs-sm); color: var(--tx-1); margin-bottom: 6px; display: flex; gap: 6px; }
.dodont-item::before { flex-shrink: 0; margin-top: 2px; }
.dodont-card--do   .dodont-item::before { content: "✓"; color: var(--success); font-weight: 700; }
.dodont-card--dont .dodont-item::before { content: "✕"; color: var(--red);  font-weight: 700; }

/* ── TOKEN REFERENCE ── */
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.token-item { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.token-swatch { height: 48px; }
.token-meta { padding: 8px 10px; background: var(--card-bg); }
.token-name { font-size: 11px; font-family: monospace; color: var(--primary); font-weight: 600; }
.token-val  { font-size: 10px; color: var(--tx-2); margin-top: 2px; }

.scale-row { display: flex; align-items: center; gap: var(--sp-4); padding: 8px 0; border-bottom: 1px solid var(--surface); }
.scale-row:last-child { border-bottom: none; }
.scale-label { width: 120px; font-size: var(--fs-xs); color: var(--tx-2); font-family: monospace; flex-shrink: 0; }
.scale-demo { flex: 1; }
.scale-val { font-size: var(--fs-xs); color: var(--tx-3); text-align: right; font-family: monospace; flex-shrink: 0; }

/* ── MISC ── */
.spacer { height: var(--sp-6); }
.divider { height: 1px; background: var(--border); margin: var(--sp-5) 0; }
.chip-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  background: var(--bg-disabled); color: var(--tx-2);
  font-size: var(--fs-xs); font-family: monospace; margin-left: 4px;
}
.badge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 20px; font-size: var(--fs-xs); font-weight: var(--fw-med);
}
.badge-pill--success { background: var(--success-light); color: var(--success); }
.badge-pill--error   { background: var(--danger-light);  color: var(--red); }
.badge-pill--info    { background: var(--primary-light); color: var(--primary); }
.size-hint { font-size: var(--fs-xs); color: var(--tx-3); margin-top: 4px; }

/* responsive */
@media (max-width: 960px) {
  .layout { flex-direction: column; }
  .sidebar-nav { width: 100%; position: static; }
  .states-grid { grid-template-columns: repeat(2, 1fr); }
  .dodont-grid  { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   LEGACY OVERRIDE — Bootstrap form-control → v2 look
   Tanpa mengubah file .vue. Berlaku untuk SEMUA input/ components.
   Dibuat: implementasi v2
════════════════════════════════════════════ */
.form-control {
  height: var(--input-height) !important;
  padding: 0 var(--input-px) !important;
  font-size: var(--fs-base) !important;
  font-family: "Inter", sans-serif !important;
  color: var(--tx-1) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s ease-in, box-shadow .15s ease-in !important;
}
.form-control::placeholder { color: var(--tx-2) !important; }
.form-control:hover:not(:disabled):not([readonly]) {
  border-color: var(--primary-border) !important;
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}
.form-control:disabled,
.form-control[readonly] {
  background: var(--bg-disabled) !important;
  color: var(--tx-2) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
.form-control.is-invalid,
.form-control.border-danger,
.form-control.v2-input--error,
.form-control.v2-textarea--error,
.form-control.is-invalid:focus,
.form-control.border-danger:focus,
.form-control.v2-input--error:focus,
.form-control.v2-textarea--error:focus,
.v2-input--error:focus,
.v2-textarea--error:focus {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-error) !important;
}

/* form-control inside addon-wrap → reset border-radius so addon attaches cleanly */
.v2-addon-wrap .form-control {
  border-radius: 0 !important;
}
.v2-addon-wrap .form-control:first-child {
  border-radius: var(--radius) 0 0 var(--radius) !important;
}
.v2-addon-wrap .form-control:last-child {
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}

/* form-control with v2 icon padding modifiers (higher specificity than .form-control alone) */
.form-control.v2-input--icon-l {
  padding-left: 36px !important;
}
.form-control.v2-input--icon-r {
  padding-right: 36px !important;
}

/* Textarea: override height auto */
textarea.form-control {
  height: auto !important;
  min-height: 84px !important;
  padding: 9px var(--input-px) !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

/* Native select */
select.form-control {
  padding-right: 32px !important;
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a96aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* ════════════════════════════════════════════
   LIBRARY OVERRIDES — selaraskan tampilan komponen library
   dengan token v2 (--input-height, --border, --primary, dst).
   Markup library tidak diubah; hanya CSS yang di-override.
════════════════════════════════════════════ */

/* ── vue-multiselect ── */
.multiselect {
  min-height: var(--input-height) !important;
  font-family: "Inter", sans-serif !important;
  font-size: var(--input-font) !important;
  color: var(--tx-1) !important;
}
.multiselect__tags {
  min-height: var(--input-height) !important;
  padding: 4px 36px 0 8px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--input-radius) !important;
  font-size: var(--input-font) !important;
  transition: border-color .15s ease-in, box-shadow .15s ease-in !important;
}
.multiselect:hover:not(.multiselect--disabled) .multiselect__tags {
  border-color: var(--primary-border) !important;
}
.multiselect--active .multiselect__tags {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}
.multiselect.multiselect--error .multiselect__tags {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-error) !important;
}

/* Autocomplete option layout — multi-line dengan icon */
.multiselect__option .autocomplete-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  padding: 2px 0;
  width: 100%;
}
.multiselect__option .autocomplete-option-line {
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: inherit;
}
.multiselect__option .autocomplete-option-line i {
  color: var(--tx-2);
  flex-shrink: 0;
}
.multiselect__option:has(.autocomplete-option) {
  min-height: auto !important;
  padding: 10px 12px !important;
  white-space: normal !important;
  display: block !important;
}
/* Hide vue-multiselect "Press Enter to Select / Selected" pseudo overlay
   pas option pakai layout autocomplete (multi-line) — biar gak nimpah konten */
.multiselect__option--highlight:has(.autocomplete-option)::after,
.multiselect__option--selected:has(.autocomplete-option)::after {
  display: none !important;
}
/* Highlight state: text + icon putih semua */
.multiselect__option--highlight:has(.autocomplete-option),
.multiselect__option--highlight:has(.autocomplete-option) .autocomplete-option-line,
.multiselect__option--highlight:has(.autocomplete-option) .autocomplete-option-line i,
.multiselect__option--highlight:has(.autocomplete-option) span {
  color: #fff !important;
}
/* Selected state: text + icon primary */
.multiselect__option--selected:has(.autocomplete-option),
.multiselect__option--selected:has(.autocomplete-option) .autocomplete-option-line,
.multiselect__option--selected:has(.autocomplete-option) .autocomplete-option-line i,
.multiselect__option--selected:has(.autocomplete-option) span {
  color: var(--primary) !important;
}
.multiselect--disabled,
.multiselect--disabled .multiselect__tags,
.multiselect--disabled .multiselect__current,
.multiselect--disabled .multiselect__select {
  background: var(--bg-disabled) !important;
  color: var(--tx-2) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
.multiselect__placeholder {
  color: var(--tx-2) !important;
  font-size: var(--input-font) !important;
  padding-top: 3px !important;
  margin-bottom: 5px !important;
}
.multiselect__input,
.multiselect__single {
  background: transparent !important;
  font-size: var(--input-font) !important;
  color: var(--tx-1) !important;
  padding: 1px 0 0 4px !important;
  margin-bottom: 6px !important;
  min-height: 22px !important;
  line-height: 22px !important;
}
.multiselect__select {
  width: 36px !important;
  height: var(--input-height) !important;
  padding: 0 !important;
}
.multiselect__select::before {
  border-color: var(--tx-2) transparent transparent !important;
  border-width: 5px 5px 0 !important;
  margin-top: 2px !important;
}
.multiselect__tag {
  background: var(--primary) !important;
  color: #fff !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-med) !important;
  border-radius: 5px !important;
  padding: 3px 22px 3px 10px !important;
  margin: 2px 4px 2px 0 !important;
  line-height: 1 !important;
}
.multiselect__tag-icon {
  width: 18px !important;
  line-height: 18px !important;
  border-radius: 50% !important;
  margin-right: 2px !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.multiselect__tag-icon::after {
  color: #fff !important;
  font-size: 14px !important;
}
.multiselect__tag-icon:hover {
  background: rgba(255, 255, 255, .2) !important;
}
.multiselect__content-wrapper {
  /* position: absolute !important; */
  position: static !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--card-bg) !important;
  margin-top: 2px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: auto !important;
  z-index: 1050 !important;
}
.multiselect__option {
  padding: 8px 12px !important;
  font-size: var(--fs-base) !important;
  color: var(--tx-1) !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}
.multiselect__option::after {
  line-height: 40px !important;
}
.multiselect__option--highlight {
  background: var(--accent, #00B87A) !important;
  color: #fff !important;
}
.multiselect__option--highlight::after {
  background: var(--accent, #00B87A) !important;
  color: #fff !important;
}
.multiselect__option--selected {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: var(--fw-med) !important;
}
.multiselect__option--selected::after {
  color: var(--primary) !important;
}
.multiselect__option--selected.multiselect__option--highlight {
  background: var(--red) !important;
  color: #fff !important;
}
.multiselect__option--selected.multiselect__option--highlight::after {
  background: var(--red) !important;
  color: #fff !important;
}
.multiselect__option--group {
  background: var(--surface) !important;
  color: var(--tx-2) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
.multiselect__strong {
  font-weight: var(--fw-bold) !important;
  color: var(--tx-1) !important;
}

/* ── vue-select (v-select / vs__*) ── */
.v-select {
  font-family: "Inter", sans-serif !important;
  font-size: var(--input-font) !important;
}
.v-select .vs__dropdown-toggle {
  min-height: var(--input-height) !important;
  padding: 0 4px 4px 0 !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--input-radius) !important;
  transition: border-color .15s ease-in, box-shadow .15s ease-in !important;
}
.v-select:hover:not(.vs--disabled) .vs__dropdown-toggle {
  border-color: var(--primary-border) !important;
}
.v-select.vs--open .vs__dropdown-toggle,
.v-select.vs--searching .vs__dropdown-toggle,
.v-select:focus-within .vs__dropdown-toggle {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}
.v-select.vs--error .vs__dropdown-toggle {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-error) !important;
}
.v-select.vs--disabled .vs__dropdown-toggle,
.v-select.vs--disabled .vs__search,
.v-select.vs--disabled .vs__selected,
.v-select.vs--disabled .vs__open-indicator,
.v-select.vs--disabled .vs__clear {
  background: var(--bg-disabled) !important;
  color: var(--tx-2) !important;
  cursor: not-allowed !important;
}
.v-select .vs__selected-options {
  padding: 0 4px !important;
  gap: 4px !important;
}
.v-select .vs__search,
.v-select .vs__search:focus {
  font-size: var(--input-font) !important;
  color: var(--tx-1) !important;
  padding: 0 0 0 7px !important;
  margin: 4px 0 0 !important;
  line-height: 1.4 !important;
  border: none !important;
  box-shadow: none !important;
}
.v-select .vs__search::placeholder {
  color: var(--tx-2) !important;
}
.v-select .vs__selected {
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-med) !important;
  padding: 3px 4px 3px 10px !important;
  margin: 4px 2px 0 0 !important;
}
.v-select .vs__deselect {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .2) !important;
  margin-left: 4px !important;
  fill: #fff !important;
  opacity: 1 !important;
}
.v-select.vs--single .vs__selected {
  background: transparent !important;
  color: var(--tx-1) !important;
  border: none !important;
  padding: 0 0 0 7px !important;
  margin: 4px 0 0 !important;
  font-size: var(--input-font) !important;
  font-weight: var(--fw-reg) !important;
}
.v-select .vs__open-indicator {
  fill: var(--tx-2) !important;
  transform: scale(0.85) !important;
}
.v-select .vs__actions {
  padding: 0 8px 0 4px !important;
}
.v-select .vs__clear {
  fill: var(--tx-2) !important;
}
.v-select .vs__dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--card-bg) !important;
  margin-top: 2px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 4px 0 !important;
}
.v-select .vs__dropdown-option {
  padding: 8px 12px !important;
  font-size: var(--fs-base) !important;
  color: var(--tx-1) !important;
}
.v-select .vs__dropdown-option--highlight {
  background: var(--accent, #00B87A) !important;
  color: #fff !important;
}
.v-select .vs__dropdown-option--selected {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  font-weight: var(--fw-med) !important;
}
.v-select .vs__no-options {
  padding: 8px 12px !important;
  font-size: var(--fs-sm) !important;
  color: var(--tx-2) !important;
}

/* ── Related-To variant (.v-select--rel) ─────────────────
   Pill-style untuk komponen relatedto_*.vue.
   Selected item tampil sebagai .v2-relpill (rounded, primary-light bg)
   alih-alih tag biru default. Search input dapat icon search prefix.
─────────────────────────────────────────────────────────── */
.v-select--rel .vs__dropdown-toggle {
  padding-left: 36px !important;
  position: relative !important;
}
.v-select--rel .vs__dropdown-toggle::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg) !important;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7A99'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}
/* Pill style untuk selected item — single & multi mode */
.v-select--rel .vs__selected,
.v-select--rel.vs--single .vs__selected {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 3px 4px 3px 10px !important;
  margin: 4px 4px 0 0 !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-med) !important;
  line-height: 1.4 !important;
}
/* Tombol close pill — bulat dengan tint primary */
.v-select--rel .vs__deselect {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: rgba(27, 111, 190, .15) !important;
  fill: var(--primary) !important;
  margin-left: 2px !important;
  opacity: 1 !important;
  transition: background .15s ease-in !important;
}
.v-select--rel .vs__deselect:hover {
  background: rgba(27, 111, 190, .28) !important;
}
/* Search input di-shift kanan agar tidak nabrak ikon search prefix */
.v-select--rel .vs__search,
.v-select--rel .vs__search:focus {
  padding-left: 0 !important;
}
/* Saat ada selection, search input nempel di sebelah pill */
.v-select--rel.vs--single.vs--searchable .vs__selected + .vs__search {
  margin-left: 4px !important;
}

/* ── vue-datepicker-next (mx-*) ── */
.mx-datepicker {
  width: 100% !important;
}
.mx-datepicker .mx-input-wrapper {
  width: 100%;
}
.mx-datepicker .mx-input {
  height: var(--input-height) !important;
  padding: 0 36px 0 var(--input-px) !important;
  font-size: var(--input-font) !important;
  font-family: "Inter", sans-serif !important;
  color: var(--tx-1) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--input-radius) !important;
  box-shadow: none !important;
  transition: border-color .15s ease-in, box-shadow .15s ease-in !important;
}
.mx-datepicker .mx-input::placeholder { color: var(--tx-2) !important; }
.mx-datepicker .mx-input:hover:not(:disabled) { border-color: var(--primary-border) !important; }
.mx-datepicker .mx-input:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}
.mx-datepicker .mx-input:disabled,
.mx-datepicker.disabled .mx-input {
  background: var(--bg-disabled) !important;
  color: var(--tx-2) !important;
  cursor: not-allowed !important;
}
.mx-datepicker .mx-icon-calendar,
.mx-datepicker .mx-icon-clear {
  right: 10px !important;
  font-size: 16px !important;
  color: var(--tx-2) !important;
}
.mx-datepicker-popup {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--card-bg) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: "Inter", sans-serif !important;
}
.mx-calendar-content .cell:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}
.mx-calendar-content .cell.active {
  background: var(--primary) !important;
  color: #fff !important;
}
.mx-calendar-content .cell.in-range,
.mx-calendar-content .cell.hover-in-range {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}
.mx-calendar-content .cell.today {
  color: var(--gray-10) !important;
  font-weight: var(--fw-bold) !important;
}
/* Active state selalu menang — handle kombinasi active+today/in-range */
.mx-calendar-content .cell.active,
.mx-calendar-content .cell.active:hover,
.mx-calendar-content .cell.active.today,
.mx-calendar-content .cell.active.in-range {
  background: var(--primary) !important;
  color: #fff !important;
}
/* Force white text on all descendants of active cell (in case lib uses inner span/div) */
.mx-calendar-content .cell.active,
.mx-calendar-content .cell.active *,
.mx-calendar-content .cell.active:hover *,
.mx-calendar-content .cell.active.today *,
.mx-calendar-content .cell.active.in-range *,
.mx-table-date td.cell.active,
.mx-table-date td.cell.active * {
  color: #fff !important;
}
.mx-btn:hover { color: var(--primary) !important; }
.mx-btn-current-month,
.mx-btn-current-year { font-weight: var(--fw-med) !important; color: var(--tx-1) !important; }

/* ── vue-datetime3 (vdatetime / vdatetime-popup) ── */
.vdatetime { width: 100% !important; }
.vdatetime-input {
  width: 100% !important;
  height: var(--input-height) !important;
  padding: 0 36px 0 var(--input-px) !important;
  font-size: var(--input-font) !important;
  font-family: "Inter", sans-serif !important;
  color: var(--tx-1) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--input-radius) !important;
  outline: none !important;
  transition: border-color .15s ease-in, box-shadow .15s ease-in !important;
}
.vdatetime-input::placeholder { color: var(--tx-2) !important; }
.vdatetime-input:hover:not(:disabled) { border-color: var(--primary-border) !important; }
.vdatetime-input:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-focus) !important;
}
.vdatetime-input:disabled {
  background: var(--bg-disabled) !important;
  color: var(--tx-2) !important;
  cursor: not-allowed !important;
}
.vdatetime-popup {
  border-radius: var(--radius) !important;
  font-family: "Inter", sans-serif !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden !important;
}
.vdatetime-popup__header { background: var(--primary) !important; }
.vdatetime-calendar__month__day--selected > span > span,
.vdatetime-calendar__month__day--selected:hover > span > span {
  background: var(--primary) !important;
  color: #fff !important;
}
.vdatetime-popup__actions__button { color: var(--primary) !important; }
.vdatetime-time-picker__item--selected,
.vdatetime-year-picker__item--selected,
.vdatetime-month-picker__item--selected { color: var(--primary) !important; }

/* ── vue3-editor / Quill (.v2-editor wrapper) ── */
.v2-editor .ql-toolbar.ql-snow {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
  padding: 6px 8px !important;
  font-family: "Inter", sans-serif !important;
}
.v2-editor .ql-toolbar.ql-snow .ql-formats { margin-right: 8px !important; }
.v2-editor .ql-toolbar.ql-snow button {
  width: 26px !important;
  height: 26px !important;
  border-radius: 4px !important;
  padding: 3px !important;
  color: var(--tx-2) !important;
  transition: background .12s !important;
}
.v2-editor .ql-toolbar.ql-snow button:hover { background: var(--bg-disabled) !important; }
.v2-editor .ql-toolbar.ql-snow button:hover .ql-stroke,
.v2-editor .ql-toolbar.ql-snow button.ql-active .ql-stroke {
  stroke: var(--primary) !important;
}
.v2-editor .ql-toolbar.ql-snow button:hover .ql-fill,
.v2-editor .ql-toolbar.ql-snow button.ql-active .ql-fill {
  fill: var(--primary) !important;
}
.v2-editor .ql-container.ql-snow {
  border: none !important;
  font-family: "Inter", sans-serif !important;
  font-size: var(--fs-base) !important;
  color: var(--tx-1) !important;
}
.v2-editor .ql-editor {
  min-height: 80px !important;
  padding: 8px var(--input-px) !important;
  line-height: 1.6 !important;
}
.v2-editor .ql-editor.ql-blank::before {
  color: var(--tx-2) !important;
  font-style: normal !important;
  left: var(--input-px) !important;
  right: var(--input-px) !important;
}

/* ── Error state for date/datetime library inputs (place last to win specificity) ── */
.mx-datepicker .mx-input.v2-input--error,
.mx-datepicker .v2-input--error {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-error) !important;
}
.vdatetime-input.v2-input--error {
  border-color: var(--red) !important;
  box-shadow: var(--shadow-error) !important;
}
.v2-editor.v2-editor--error { border-color: var(--red) !important; box-shadow: var(--shadow-error) !important; }