* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--ssa-font-main);
  background: var(--ssa-bg-app);
  color: var(--ssa-text-main);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font-family: inherit;
}

.ssa-muted {
  color: var(--ssa-text-muted);
}

.ssa-landing {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at top left, var(--ssa-primary-soft), transparent 35%),
    var(--ssa-bg-app);
}

.ssa-landing-card {
  width: min(960px, 100%);
  background: var(--ssa-bg-card);
  color: var(--ssa-text-main);
  border: 1px solid var(--ssa-border);
  border-radius: 28px;
  box-shadow: var(--ssa-shadow);
  padding: 36px;
}

.ssa-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ssa-logo {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--ssa-primary);
  color: #ffffff;
  font-weight: 900;
}

.ssa-landing h1 {
  margin: 20px 0 8px;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
}

.ssa-landing p {
  color: var(--ssa-text-muted);
  font-size: 17px;
  line-height: 1.65;
}

.ssa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.ssa-btn {
  border: 1px solid var(--ssa-border);
  background: var(--ssa-bg-card);
  color: var(--ssa-text-main);
  border-radius: 14px;
  padding: 11px 16px;
  cursor: pointer;
  font-weight: 700;
}

.ssa-btn-primary {
  background: var(--ssa-primary);
  color: #ffffff;
  border-color: var(--ssa-primary);
}

.ssa-btn-primary:hover {
  background: var(--ssa-primary-hover);
}

.ssa-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  background: var(--ssa-bg-app);
  color: var(--ssa-text-main);
}

.ssa-sidebar {
  background: var(--ssa-bg-sidebar);
  color: var(--ssa-text-sidebar);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ssa-sidebar-title {
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
}

.ssa-sidebar-subtitle {
  color: var(--ssa-text-sidebar);
  opacity: 0.75;
  font-size: 12px;
  margin-top: 4px;
}

.ssa-nav {
  display: grid;
  gap: 8px;
}

.ssa-nav-item {
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--ssa-text-sidebar);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.92;
}

.ssa-nav-item.is-active {
  background: var(--ssa-primary);
  color: #ffffff;
  opacity: 1;
}

.ssa-sidebar-note {
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 14px;
  color: var(--ssa-text-sidebar);
}

.ssa-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ssa-header {
  min-height: 72px;
  background: var(--ssa-bg-header);
  color: var(--ssa-text-header);
  border-bottom: 1px solid var(--ssa-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 18px;
}

.ssa-header h1 {
  margin: 0;
  font-size: 22px;
}

.ssa-header small {
  color: var(--ssa-text-muted);
}

.ssa-content {
  padding: 24px;
  display: grid;
  gap: 20px;
}

.ssa-card {
  background: var(--ssa-bg-card);
  color: var(--ssa-text-main);
  border: 1px solid var(--ssa-border);
  border-radius: 20px;
  box-shadow: var(--ssa-shadow);
  padding: 20px;
}

.ssa-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ssa-kpi-title {
  color: var(--ssa-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ssa-kpi-value {
  font-size: 26px;
  font-weight: 900;
  margin-top: 8px;
}

.ssa-kpi-note {
  margin-top: 6px;
  color: var(--ssa-success);
  font-size: 13px;
  font-weight: 700;
}

.ssa-two-col {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

.ssa-fake-chart {
  height: 240px;
  border-radius: 18px;
  border: 1px solid var(--ssa-border);
  background:
    linear-gradient(to top, var(--ssa-primary-soft), transparent),
    repeating-linear-gradient(to top, transparent 0 39px, var(--ssa-border) 40px),
    var(--ssa-bg-card);
  position: relative;
  overflow: hidden;
}

.ssa-fake-chart::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 52px;
  height: 96px;
  border-radius: 50% 50% 0 0;
  border-top: 8px solid var(--ssa-primary);
  transform: skewX(-18deg);
}

.ssa-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.ssa-field label {
  display: block;
  font-size: 12px;
  color: var(--ssa-text-muted);
  font-weight: 800;
  margin-bottom: 6px;
}

.ssa-input,
.ssa-select {
  width: 100%;
  background: var(--ssa-input-bg);
  color: var(--ssa-input-text);
  border: 1px solid var(--ssa-input-border);
  border-radius: 13px;
  padding: 11px 12px;
}

.ssa-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.ssa-table th,
.ssa-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--ssa-border);
  text-align: left;
  font-size: 14px;
}

.ssa-table th {
  background: var(--ssa-table-header-bg);
  color: var(--ssa-text-main);
  font-size: 12px;
  text-transform: uppercase;
}

.ssa-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.ssa-badge-success {
  background: var(--ssa-success-soft);
  color: var(--ssa-success);
}

.ssa-badge-warning {
  background: var(--ssa-warning-soft);
  color: var(--ssa-warning);
}

.ssa-footer {
  padding: 18px 24px;
  color: var(--ssa-text-muted);
  font-size: 13px;
}

@media (max-width: 1000px) {
  .ssa-shell {
    grid-template-columns: 1fr;
  }

  .ssa-grid,
  .ssa-two-col,
  .ssa-form-row {
    grid-template-columns: 1fr;
  }
}


/* SPM_SSA_SETTINGS_SINGLE_MENU_V1 */
.ssa-view {
  display: none;
}

.ssa-view.is-active {
  display: grid;
  gap: 20px;
}

.ssa-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.ssa-section-heading h2 {
  margin: 0 0 8px;
}

.ssa-section-heading p {
  margin: 0;
}

.ssa-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  background: var(--ssa-primary-soft);
  color: var(--ssa-primary);
  border: 1px solid var(--ssa-border);
}

.ssa-theme-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ssa-grid-preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ssa-preview-mini {
  box-shadow: none;
}

.ssa-preview-mini .ssa-badge {
  margin-right: 6px;
  margin-top: 8px;
}

@media (max-width: 1000px) {
  .ssa-section-heading {
    display: grid;
  }

  .ssa-grid-preview {
    grid-template-columns: 1fr;
  }
}

/* SSA_LOGIN_SIMPLE_V1 */
.ssa-login-body {
  min-height: 100vh;
  margin: 0;
  background: var(--ssa-bg);
  color: var(--ssa-text);
}

.ssa-login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ssa-login-card {
  width: min(460px, 100%);
  background: var(--ssa-surface);
  border: 1px solid var(--ssa-border);
  border-radius: 24px;
  box-shadow: var(--ssa-shadow);
  padding: 28px;
}

.ssa-login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.ssa-login-brand h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ssa-text);
}

.ssa-login-brand p {
  margin: 6px 0 0;
  color: var(--ssa-muted);
  line-height: 1.5;
}

.ssa-login-form {
  display: grid;
  gap: 16px;
}

.ssa-login-btn {
  width: 100%;
  justify-content: center;
}

.ssa-login-status {
  min-height: 22px;
  margin: 0;
  color: var(--ssa-muted);
  font-size: 14px;
}

.ssa-login-status.is-error {
  color: var(--ssa-danger);
}

.ssa-login-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ssa-border);
  color: var(--ssa-muted);
  font-size: 13px;
  line-height: 1.5;
}

.ssa-user-area {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: right;
}

.ssa-user-area small {
  display: block;
  margin-top: 2px;
  color: var(--ssa-muted);
}

.ssa-btn-small {
  padding: 8px 12px;
  font-size: 13px;
}

/* SSA_ACCESS_UI_V1 */
.ssa-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
  align-items: end;
}

.ssa-field-action {
  align-self: end;
}

.ssa-access-form {
  display: grid;
  gap: 12px;
}

.ssa-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 14px;
}

.ssa-access-status {
  min-height: 22px;
  margin: 0;
}

.ssa-access-status.is-error {
  color: var(--ssa-danger);
}

.ssa-access-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ssa-access-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ssa-border);
  border-radius: 14px;
  background: var(--ssa-surface);
  color: var(--ssa-text);
}

.ssa-access-check input {
  margin-top: 4px;
}

.ssa-access-check strong {
  display: block;
  color: var(--ssa-text);
  line-height: 1.35;
}

.ssa-access-check small {
  display: block;
  margin-top: 4px;
  color: var(--ssa-muted);
}

[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .ssa-form-grid,
  .ssa-access-list {
    grid-template-columns: 1fr;
  }
}

/* SSA_GLOBAL_SETTINGS_UI_V1 */
.ssa-field-wide {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .ssa-field-wide {
    grid-column: span 1;
  }
}

/* SSA_DASHBOARD_DETAIL_V1 */
.ssa-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 12px;
}

.ssa-dashboard-metrics > div {
  padding: 14px;
  border: 1px solid var(--ssa-border);
  border-radius: 14px;
  background: var(--ssa-surface);
}

.ssa-dashboard-metrics strong {
  display: block;
  color: var(--ssa-text);
  font-size: 24px;
  line-height: 1.2;
}

.ssa-dashboard-metrics small {
  display: block;
  margin-top: 4px;
  color: var(--ssa-muted);
}

@media (max-width: 900px) {
  .ssa-dashboard-metrics {
    grid-template-columns: 1fr;
  }
}

/* SSA_BRANCH_LOGO_UI_V1 */
.ssa-divider {
  border: 0;
  border-top: 1px solid var(--ssa-border);
  margin: 18px 0;
}

/* SSA_COMPACT_SETTINGS_MODAL_V1 */
.ssa-settings-hub-card {
  position: relative;
}

.ssa-settings-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.ssa-settings-tile {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 94px;
  padding: 16px;
  border: 1px solid var(--ssa-border);
  border-radius: 18px;
  background: var(--ssa-surface);
  color: var(--ssa-text);
  text-align: left;
  cursor: pointer;
}

.ssa-settings-tile:hover,
.ssa-settings-tile:focus {
  outline: none;
  border-color: var(--ssa-primary);
  box-shadow: 0 0 0 3px var(--ssa-primary-soft);
}

.ssa-settings-tile strong {
  display: block;
  color: var(--ssa-text);
  font-size: 15px;
  line-height: 1.25;
}

.ssa-settings-tile small {
  display: block;
  color: var(--ssa-muted);
  line-height: 1.4;
}

.ssa-settings-panel[hidden] {
  display: none !important;
}

.ssa-settings-panel.is-in-modal {
  display: block !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.ssa-settings-panel.is-in-modal > .ssa-section-heading:first-child {
  display: none;
}

.ssa-modal-open {
  overflow: hidden;
}

.ssa-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--ssa-sidebar-width, 280px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.36);
}

.ssa-modal-backdrop.is-open {
  display: flex;
}

.ssa-modal-dialog {
  --ssa-modal-width: 820px;
  width: min(var(--ssa-modal-width), calc(100vw - var(--ssa-sidebar-width, 280px) - 56px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ssa-border);
  border-radius: 22px;
  background: var(--ssa-surface);
  color: var(--ssa-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.ssa-modal-dialog[data-size="small"] {
  --ssa-modal-width: 560px;
}

.ssa-modal-dialog[data-size="medium"] {
  --ssa-modal-width: 820px;
}

.ssa-modal-dialog[data-size="wide"] {
  --ssa-modal-width: 1180px;
}

.ssa-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ssa-border);
  background: var(--ssa-surface);
}

.ssa-modal-header h2 {
  margin: 0;
  color: var(--ssa-text);
  font-size: 20px;
  line-height: 1.25;
}

.ssa-modal-header small {
  display: block;
  margin-top: 4px;
  color: var(--ssa-muted);
}

.ssa-modal-x {
  width: 38px;
  height: 38px;
  border: 1px solid var(--ssa-border);
  border-radius: 12px;
  background: var(--ssa-surface);
  color: var(--ssa-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ssa-modal-x:hover,
.ssa-modal-x:focus {
  outline: none;
  border-color: var(--ssa-primary);
}

.ssa-modal-body {
  padding: 20px;
  overflow: auto;
}

.ssa-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--ssa-border);
  background: var(--ssa-surface);
}

@media (max-width: 1000px) {
  .ssa-settings-hub {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .ssa-modal-backdrop {
    left: 0;
    padding: 14px;
  }

  .ssa-modal-dialog {
    width: min(100%, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
  }
}

@media (max-width: 640px) {
  .ssa-settings-hub {
    grid-template-columns: 1fr;
  }

  .ssa-modal-header,
  .ssa-modal-body,
  .ssa-modal-footer {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* SSA_MODAL_SOLID_BACKGROUND_FIX_V1 */
html[data-mode="light"],
body:not([data-mode="dark"]) {
  --ssa-modal-solid-bg: #ffffff;
  --ssa-modal-solid-subtle-bg: #f8fafc;
  --ssa-modal-solid-border: #dbe3ef;
}

html[data-mode="dark"],
body[data-mode="dark"],
[data-mode="dark"] {
  --ssa-modal-solid-bg: #0f172a;
  --ssa-modal-solid-subtle-bg: #111c31;
  --ssa-modal-solid-border: #334155;
}

.ssa-modal-backdrop.is-open {
  background: rgba(2, 6, 23, 0.68) !important;
  backdrop-filter: blur(2px);
}

.ssa-modal-dialog {
  background: var(--ssa-modal-solid-bg) !important;
  background-color: var(--ssa-modal-solid-bg) !important;
  border-color: var(--ssa-modal-solid-border) !important;
  opacity: 1 !important;
  isolation: isolate;
}

.ssa-modal-header,
.ssa-modal-body,
.ssa-modal-footer {
  background: var(--ssa-modal-solid-bg) !important;
  background-color: var(--ssa-modal-solid-bg) !important;
  opacity: 1 !important;
}

.ssa-modal-body {
  position: relative;
}

.ssa-modal-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ssa-modal-solid-bg);
  pointer-events: none;
}

.ssa-settings-panel.is-in-modal {
  background: var(--ssa-modal-solid-bg) !important;
  background-color: var(--ssa-modal-solid-bg) !important;
  opacity: 1 !important;
}

.ssa-settings-panel.is-in-modal .ssa-card,
.ssa-settings-panel.is-in-modal .ssa-table-wrap,
.ssa-settings-panel.is-in-modal .ssa-access-check,
.ssa-settings-panel.is-in-modal .ssa-login-card {
  background: var(--ssa-modal-solid-subtle-bg) !important;
  background-color: var(--ssa-modal-solid-subtle-bg) !important;
  border-color: var(--ssa-modal-solid-border) !important;
  opacity: 1 !important;
}

.ssa-settings-panel.is-in-modal input,
.ssa-settings-panel.is-in-modal select,
.ssa-settings-panel.is-in-modal textarea,
.ssa-settings-panel.is-in-modal .ssa-input,
.ssa-settings-panel.is-in-modal .ssa-select {
  background: var(--ssa-modal-solid-bg) !important;
  background-color: var(--ssa-modal-solid-bg) !important;
  opacity: 1 !important;
}

/* SSA_MODAL_TEXT_CONTRAST_FIX_V1 */
.ssa-modal-dialog {
  background: var(--ssa-surface, #ffffff) !important;
  color: var(--ssa-text, #0f172a) !important;
  border-color: var(--ssa-border, #cbd5e1) !important;
  opacity: 1 !important;
}

.ssa-modal-header,
.ssa-modal-body,
.ssa-modal-footer,
.ssa-settings-panel.is-in-modal {
  background: var(--ssa-surface, #ffffff) !important;
  color: var(--ssa-text, #0f172a) !important;
  opacity: 1 !important;
}

.ssa-modal-dialog h1,
.ssa-modal-dialog h2,
.ssa-modal-dialog h3,
.ssa-modal-dialog h4,
.ssa-modal-dialog strong,
.ssa-modal-dialog label,
.ssa-modal-dialog th,
.ssa-modal-dialog td,
.ssa-modal-dialog p,
.ssa-modal-dialog span {
  color: var(--ssa-text, #0f172a) !important;
}

.ssa-modal-dialog small,
.ssa-modal-dialog .ssa-muted,
.ssa-modal-dialog .ssa-kpi-note,
.ssa-modal-dialog .ssa-access-status,
.ssa-modal-dialog .ssa-login-status {
  color: var(--ssa-muted, #475569) !important;
}

.ssa-modal-dialog input,
.ssa-modal-dialog select,
.ssa-modal-dialog textarea,
.ssa-modal-dialog .ssa-input,
.ssa-modal-dialog .ssa-select {
  background: var(--ssa-bg, #f8fafc) !important;
  color: var(--ssa-text, #0f172a) !important;
  border: 1px solid var(--ssa-border, #cbd5e1) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--ssa-text, #0f172a) !important;
}

.ssa-modal-dialog input::placeholder,
.ssa-modal-dialog textarea::placeholder {
  color: var(--ssa-muted, #64748b) !important;
  opacity: 1 !important;
}

.ssa-modal-dialog select option {
  background: var(--ssa-surface, #ffffff) !important;
  color: var(--ssa-text, #0f172a) !important;
}

.ssa-modal-dialog .ssa-table,
.ssa-modal-dialog table {
  background: var(--ssa-surface, #ffffff) !important;
  color: var(--ssa-text, #0f172a) !important;
}

.ssa-modal-dialog thead,
.ssa-modal-dialog .ssa-table thead {
  background: var(--ssa-bg, #f8fafc) !important;
}

.ssa-modal-dialog tbody,
.ssa-modal-dialog tr,
.ssa-modal-dialog td {
  background: transparent !important;
}

.ssa-modal-dialog .ssa-table th {
  background: var(--ssa-bg, #f8fafc) !important;
  color: var(--ssa-text, #0f172a) !important;
}

.ssa-modal-dialog .ssa-card,
.ssa-modal-dialog .ssa-table-wrap,
.ssa-modal-dialog .ssa-access-check,
.ssa-modal-dialog .ssa-settings-panel,
.ssa-modal-dialog .ssa-form-grid {
  background: var(--ssa-surface, #ffffff) !important;
  color: var(--ssa-text, #0f172a) !important;
  opacity: 1 !important;
}

.ssa-modal-dialog .ssa-btn {
  opacity: 1 !important;
}

.ssa-modal-dialog .ssa-btn:not(.ssa-btn-primary) {
  background: var(--ssa-bg, #f8fafc) !important;
  color: var(--ssa-text, #0f172a) !important;
  border-color: var(--ssa-border, #cbd5e1) !important;
}

.ssa-modal-dialog .ssa-btn-primary {
  color: #ffffff !important;
  opacity: 1 !important;
}

.ssa-modal-x {
  background: var(--ssa-bg, #f8fafc) !important;
  color: var(--ssa-text, #0f172a) !important;
  border-color: var(--ssa-border, #cbd5e1) !important;
  opacity: 1 !important;
}

/* Dark/system safety: paksa warna modal mengikuti token aplikasi, bukan putih pucat */
html[data-mode="dark"] .ssa-modal-dialog,
html[data-mode="dark"] .ssa-modal-header,
html[data-mode="dark"] .ssa-modal-body,
html[data-mode="dark"] .ssa-modal-footer,
html[data-mode="dark"] .ssa-settings-panel.is-in-modal,
html[data-mode="system"] .ssa-modal-dialog,
html[data-mode="system"] .ssa-modal-header,
html[data-mode="system"] .ssa-modal-body,
html[data-mode="system"] .ssa-modal-footer,
html[data-mode="system"] .ssa-settings-panel.is-in-modal {
  background: var(--ssa-surface, #0f172a) !important;
  color: var(--ssa-text, #f8fafc) !important;
}

html[data-mode="dark"] .ssa-modal-dialog input,
html[data-mode="dark"] .ssa-modal-dialog select,
html[data-mode="dark"] .ssa-modal-dialog textarea,
html[data-mode="dark"] .ssa-modal-dialog .ssa-input,
html[data-mode="dark"] .ssa-modal-dialog .ssa-select,
html[data-mode="system"] .ssa-modal-dialog input,
html[data-mode="system"] .ssa-modal-dialog select,
html[data-mode="system"] .ssa-modal-dialog textarea,
html[data-mode="system"] .ssa-modal-dialog .ssa-input,
html[data-mode="system"] .ssa-modal-dialog .ssa-select {
  background: var(--ssa-bg, #020617) !important;
  color: var(--ssa-text, #f8fafc) !important;
  -webkit-text-fill-color: var(--ssa-text, #f8fafc) !important;
}

html[data-mode="dark"] .ssa-modal-dialog select option,
html[data-mode="system"] .ssa-modal-dialog select option {
  background: var(--ssa-surface, #0f172a) !important;
  color: var(--ssa-text, #f8fafc) !important;
}

/* SSA_MODAL_DARK_SOLID_CONTRAST_FIX_V1 */
.ssa-modal-backdrop.is-open {
  background: rgba(2, 6, 23, 0.78) !important;
  backdrop-filter: blur(3px);
}

.ssa-modal-dialog {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58) !important;
  opacity: 1 !important;
}

.ssa-modal-header,
.ssa-modal-body,
.ssa-modal-footer,
.ssa-settings-panel.is-in-modal {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.ssa-modal-header {
  border-bottom: 1px solid #334155 !important;
}

.ssa-modal-footer {
  border-top: 1px solid #334155 !important;
}

.ssa-modal-dialog h1,
.ssa-modal-dialog h2,
.ssa-modal-dialog h3,
.ssa-modal-dialog h4,
.ssa-modal-dialog h5,
.ssa-modal-dialog h6,
.ssa-modal-dialog label,
.ssa-modal-dialog strong,
.ssa-modal-dialog p,
.ssa-modal-dialog span,
.ssa-modal-dialog div,
.ssa-modal-dialog th,
.ssa-modal-dialog td {
  color: #f8fafc !important;
}

.ssa-modal-dialog small,
.ssa-modal-dialog .ssa-muted,
.ssa-modal-dialog .ssa-kpi-note,
.ssa-modal-dialog .ssa-access-status,
.ssa-modal-dialog .ssa-login-status,
.ssa-modal-dialog .ssa-kpi-title {
  color: #cbd5e1 !important;
}

.ssa-modal-dialog input,
.ssa-modal-dialog select,
.ssa-modal-dialog textarea,
.ssa-modal-dialog .ssa-input,
.ssa-modal-dialog .ssa-select {
  background: #020617 !important;
  background-color: #020617 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  border: 1px solid #64748b !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.ssa-modal-dialog input:focus,
.ssa-modal-dialog select:focus,
.ssa-modal-dialog textarea:focus,
.ssa-modal-dialog .ssa-input:focus,
.ssa-modal-dialog .ssa-select:focus {
  outline: none !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22) !important;
}

.ssa-modal-dialog input::placeholder,
.ssa-modal-dialog textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

.ssa-modal-dialog select option {
  background: #020617 !important;
  color: #f8fafc !important;
}

.ssa-modal-dialog input[disabled],
.ssa-modal-dialog select[disabled],
.ssa-modal-dialog textarea[disabled],
.ssa-modal-dialog input[readonly],
.ssa-modal-dialog textarea[readonly] {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-color: #475569 !important;
  opacity: 1 !important;
}

.ssa-modal-dialog .ssa-card,
.ssa-modal-dialog .ssa-table-wrap,
.ssa-modal-dialog .ssa-access-check,
.ssa-modal-dialog .ssa-settings-panel,
.ssa-modal-dialog .ssa-form-grid,
.ssa-modal-dialog .ssa-dashboard-metrics > div {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.ssa-modal-dialog .ssa-table,
.ssa-modal-dialog table {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.ssa-modal-dialog thead,
.ssa-modal-dialog .ssa-table thead,
.ssa-modal-dialog .ssa-table th {
  background: #1e293b !important;
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.ssa-modal-dialog tbody,
.ssa-modal-dialog tr,
.ssa-modal-dialog td {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.ssa-modal-dialog tr:nth-child(even) td {
  background: #0f172a !important;
  background-color: #0f172a !important;
}

.ssa-modal-x {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #64748b !important;
  opacity: 1 !important;
}

.ssa-modal-x:hover,
.ssa-modal-x:focus {
  background: #1e293b !important;
  border-color: #38bdf8 !important;
}

.ssa-modal-dialog .ssa-btn {
  opacity: 1 !important;
  font-weight: 700 !important;
}

.ssa-modal-dialog .ssa-btn:not(.ssa-btn-primary) {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #64748b !important;
}

.ssa-modal-dialog .ssa-btn:not(.ssa-btn-primary):hover,
.ssa-modal-dialog .ssa-btn:not(.ssa-btn-primary):focus {
  background: #1e293b !important;
  border-color: #38bdf8 !important;
}

.ssa-modal-dialog .ssa-btn-primary {
  background: #22c55e !important;
  color: #052e16 !important;
  border: 1px solid #4ade80 !important;
}

.ssa-modal-dialog .ssa-badge,
.ssa-modal-dialog .ssa-pill {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  opacity: 1 !important;
}

.ssa-modal-dialog .ssa-badge-success {
  background: #bbf7d0 !important;
  color: #14532d !important;
}

.ssa-modal-dialog .ssa-badge-warning {
  background: #fde68a !important;
  color: #78350f !important;
}

.ssa-modal-dialog .ssa-pill {
  background: #164e63 !important;
  color: #ecfeff !important;
}

.ssa-modal-dialog .ssa-divider {
  border-top-color: #334155 !important;
}

/* Pastikan panel/form di modal tidak pernah transparan */
.ssa-settings-panel.is-in-modal,
.ssa-settings-panel.is-in-modal * {
  text-shadow: none !important;
}

.ssa-settings-panel.is-in-modal::before,
.ssa-settings-panel.is-in-modal::after {
  background: #111827 !important;
}

/* SSA_PRODUCT_MASTER_UI_V1 */
.ssa-product-master-layout {
  display: grid;
  gap: 22px;
}

.ssa-product-master-block {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #334155;
  border-radius: 16px;
  background: #111827;
}

.ssa-product-master-block h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.35;
}

/* SSA_PRODUCT_MASTER_UI_V1 */
.ssa-product-master-layout {
  display: grid;
  gap: 22px;
}

.ssa-product-master-block {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #334155;
  border-radius: 16px;
  background: #111827;
}

.ssa-product-master-block h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.35;
}

/* SSA_NUMBERING_UI_V1 */
.ssa-numbering-help {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border: 1px solid #334155;
  border-radius: 14px;
  background: #0f172a;
  color: #f8fafc;
}

.ssa-numbering-help span,
.ssa-modal-dialog code {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid #475569;
  border-radius: 999px;
  background: #020617;
  color: #e0f2fe !important;
  font-size: 12px;
}

/* SSA_AUTO_CODE_UI_V1 */
.ssa-auto-code-input[readonly] {
  cursor: not-allowed;
  border-style: dashed !important;
}

.ssa-auto-code-note {
  display: block;
  margin-top: 6px;
  color: #cbd5e1 !important;
  font-size: 12px;
  line-height: 1.35;
}

.ssa-modal-dialog .ssa-auto-code-input[readonly] {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-color: #64748b !important;
}

.ssa-modal-dialog .ssa-auto-code-note {
  color: #cbd5e1 !important;
}

/* SSA_AUTO_SORT_ORDER_UI_V1 */
.ssa-auto-sort-input[disabled] {
  cursor: not-allowed;
  border-style: dashed !important;
}

.ssa-auto-sort-note {
  display: block;
  margin-top: 6px;
  color: #cbd5e1 !important;
  font-size: 12px;
  line-height: 1.35;
}

.ssa-modal-dialog .ssa-auto-sort-input[disabled] {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-color: #64748b !important;
  opacity: 1 !important;
}

.ssa-modal-dialog .ssa-auto-sort-note {
  color: #cbd5e1 !important;
}

/* SSA_PRODUCT_ITEM_UI_V1 */
.ssa-modal-dialog[data-size="wide"] .ssa-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.ssa-modal-dialog[data-size="wide"] .ssa-table th,
.ssa-modal-dialog[data-size="wide"] .ssa-table td {
  white-space: nowrap;
}

/* SSA_PRODUCT_IMPORT_UI_V1 */
.ssa-product-import-block {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid #334155;
  border-radius: 16px;
  background: #111827;
}

.ssa-product-import-block h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.35;
}

.ssa-product-import-block input[type="file"] {
  padding: 10px;
}

/* SSA_FINAL_MODAL_CONTRAST_ALL_V1 */
.ssa-modal-dialog,
.ssa-modal-dialog * {
  text-shadow: none !important;
}

.ssa-modal-dialog {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid #475569 !important;
}

.ssa-modal-dialog .ssa-card,
.ssa-modal-dialog .ssa-section,
.ssa-modal-dialog .ssa-access-check,
.ssa-modal-dialog .ssa-settings-tile,
.ssa-modal-dialog .ssa-product-master-block,
.ssa-modal-dialog .ssa-product-import-block,
.ssa-modal-dialog .ssa-table-wrap,
.ssa-modal-dialog .ssa-form-grid,
.ssa-modal-dialog .ssa-field,
.ssa-modal-dialog .ssa-login-card,
.ssa-modal-dialog .ssa-dashboard-metrics > div,
.ssa-modal-dialog [class*="card"],
.ssa-modal-dialog [class*="check"],
.ssa-modal-dialog [class*="tile"],
.ssa-modal-dialog [class*="block"] {
  background: #111827 !important;
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.ssa-modal-dialog .ssa-access-check {
  border: 1px solid #334155 !important;
  border-radius: 14px !important;
  padding: 14px !important;
}

.ssa-modal-dialog .ssa-access-check:hover {
  border-color: #38bdf8 !important;
  background: #0f172a !important;
}

.ssa-modal-dialog h1,
.ssa-modal-dialog h2,
.ssa-modal-dialog h3,
.ssa-modal-dialog h4,
.ssa-modal-dialog h5,
.ssa-modal-dialog h6,
.ssa-modal-dialog label,
.ssa-modal-dialog strong,
.ssa-modal-dialog b,
.ssa-modal-dialog p,
.ssa-modal-dialog span,
.ssa-modal-dialog div,
.ssa-modal-dialog li,
.ssa-modal-dialog th,
.ssa-modal-dialog td,
.ssa-modal-dialog a {
  color: #f8fafc !important;
}

.ssa-modal-dialog small,
.ssa-modal-dialog .ssa-muted,
.ssa-modal-dialog .ssa-access-status,
.ssa-modal-dialog .ssa-login-status,
.ssa-modal-dialog .ssa-auto-code-note,
.ssa-modal-dialog .ssa-auto-sort-note,
.ssa-modal-dialog .ssa-kpi-note,
.ssa-modal-dialog .ssa-kpi-title,
.ssa-modal-dialog .ssa-help,
.ssa-modal-dialog .ssa-caption {
  color: #cbd5e1 !important;
}

.ssa-modal-dialog input,
.ssa-modal-dialog select,
.ssa-modal-dialog textarea,
.ssa-modal-dialog .ssa-input,
.ssa-modal-dialog .ssa-select {
  background: #020617 !important;
  background-color: #020617 !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  border: 1px solid #64748b !important;
  opacity: 1 !important;
}

.ssa-modal-dialog input::placeholder,
.ssa-modal-dialog textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1 !important;
}

.ssa-modal-dialog input[type="checkbox"],
.ssa-modal-dialog input[type="radio"] {
  accent-color: #38bdf8 !important;
  width: 15px;
  height: 15px;
  -webkit-text-fill-color: initial !important;
}

.ssa-modal-dialog select option {
  background: #020617 !important;
  color: #f8fafc !important;
}

.ssa-modal-dialog input[disabled],
.ssa-modal-dialog select[disabled],
.ssa-modal-dialog textarea[disabled],
.ssa-modal-dialog input[readonly],
.ssa-modal-dialog textarea[readonly],
.ssa-modal-dialog .ssa-auto-code-input[readonly],
.ssa-modal-dialog .ssa-auto-sort-input[disabled] {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
  border-color: #64748b !important;
  opacity: 1 !important;
}

.ssa-modal-dialog table,
.ssa-modal-dialog .ssa-table {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.ssa-modal-dialog thead,
.ssa-modal-dialog thead tr,
.ssa-modal-dialog thead th,
.ssa-modal-dialog .ssa-table th {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.ssa-modal-dialog tbody,
.ssa-modal-dialog tbody tr,
.ssa-modal-dialog tbody td,
.ssa-modal-dialog .ssa-table td {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

.ssa-modal-dialog tbody tr:nth-child(even) td {
  background: #0f172a !important;
}

.ssa-modal-dialog .ssa-btn,
.ssa-modal-dialog button {
  opacity: 1 !important;
}

.ssa-modal-dialog .ssa-btn:not(.ssa-btn-primary),
.ssa-modal-dialog button:not(.ssa-btn-primary):not([type="submit"]) {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #64748b !important;
}

.ssa-modal-dialog .ssa-btn-primary,
.ssa-modal-dialog button[type="submit"],
.ssa-modal-dialog .ssa-field-action .ssa-btn {
  background: #22c55e !important;
  color: #052e16 !important;
  border: 1px solid #4ade80 !important;
  font-weight: 800 !important;
}

.ssa-modal-dialog .ssa-modal-x {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #64748b !important;
}

.ssa-modal-dialog .ssa-modal-x:hover,
.ssa-modal-dialog .ssa-modal-x:focus,
.ssa-modal-dialog .ssa-btn:not(.ssa-btn-primary):hover,
.ssa-modal-dialog .ssa-btn:not(.ssa-btn-primary):focus {
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

.ssa-modal-dialog .ssa-badge-success {
  background: #bbf7d0 !important;
  color: #14532d !important;
}

.ssa-modal-dialog .ssa-badge-warning {
  background: #fde68a !important;
  color: #78350f !important;
}

.ssa-modal-dialog .ssa-pill,
.ssa-modal-dialog .ssa-badge:not(.ssa-badge-success):not(.ssa-badge-warning) {
  background: #164e63 !important;
  color: #ecfeff !important;
  border: 1px solid #38bdf8 !important;
}

.ssa-modal-dialog code {
  background: #020617 !important;
  color: #e0f2fe !important;
  border: 1px solid #475569 !important;
}

/* SSA_ACCESS_CARD_CONTRAST_APP_CSS_V1
   Fix final kontras card Hak Akses.
   Tujuan:
   - Teks permission card jelas tanpa harus hover.
   - Checkbox OWNER/disabled tetap terlihat.
   - CSS-only, tidak mengubah JS/API/database.
*/
.ssa-modal-dialog [data-access-feature-list] .ssa-access-check,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #cbd5e1 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-text-fill-color: #111827 !important;
}

.ssa-modal-dialog [data-access-feature-list] .ssa-access-check *,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check * {
  color: #111827 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-text-fill-color: #111827 !important;
}

.ssa-modal-dialog [data-access-feature-list] .ssa-access-check:hover,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check:hover {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #38bdf8 !important;
  opacity: 1 !important;
}

.ssa-modal-dialog [data-access-feature-list] .ssa-access-check:hover *,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check:hover * {
  color: #0f172a !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #0f172a !important;
}

.ssa-modal-dialog [data-access-feature-list] .ssa-access-check input[type="checkbox"],
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check input[type="checkbox"] {
  opacity: 1 !important;
  filter: none !important;
  accent-color: #22c55e !important;
  -webkit-text-fill-color: initial !important;
}

.ssa-modal-dialog [data-access-feature-list] .ssa-access-check input[type="checkbox"]:disabled,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check input[type="checkbox"]:disabled,
.ssa-modal-dialog [data-access-feature-list] .ssa-access-check input[type="checkbox"][disabled],
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check input[type="checkbox"][disabled] {
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed !important;
}

.ssa-modal-dialog [data-access-feature-list] .ssa-access-check.disabled,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check.disabled,
.ssa-modal-dialog [data-access-feature-list] .ssa-access-check[aria-disabled="true"],
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check[aria-disabled="true"] {
  opacity: 1 !important;
}

.ssa-modal-dialog [data-access-feature-list] .ssa-access-check .text-muted,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check .text-muted,
.ssa-modal-dialog [data-access-feature-list] .ssa-access-check .muted,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check .muted,
.ssa-modal-dialog [data-access-feature-list] .ssa-access-check small,
.ssa-modal-dialog [data-access-feature-list] label.ssa-access-check small {
  color: #374151 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #374151 !important;
}


/* SSA_OPERATIONAL_CUSTOMER_DEVICE_CSS_V1 */
.ssa-operational-panel {
  margin-bottom: 18px;
}

.ssa-operational-search-grid {
  margin-bottom: 12px;
}

.ssa-operational-form {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--ssa-border);
  border-radius: 16px;
  background: var(--ssa-surface-soft);
}

.ssa-section-heading-small {
  margin-bottom: 10px;
}

.ssa-section-heading-small h3 {
  margin: 0;
}

.ssa-operational-form textarea {
  resize: vertical;
}

.ssa-operational-panel .ssa-table-wrap {
  margin-top: 10px;
}

.ssa-operational-panel .ssa-btn-small {
  margin: 2px;
}

@media (max-width: 900px) {
  .ssa-operational-form {
    padding: 12px;
  }
}

/* SSA_SERVICE_2_MODE_CSS_V1 */
.ssa-service-panel {
  margin-top: 18px;
}

.ssa-service-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 10px;
}

.ssa-service-form [hidden] {
  display: none !important;
}

.ssa-service-form textarea {
  resize: vertical;
}

.ssa-service-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--ssa-border);
  background: var(--ssa-surface-soft);
}

.ssa-service-row-quick .ssa-service-mode-badge {
  color: #14532d;
  background: #dcfce7;
  border-color: #86efac;
}

.ssa-service-row-queue .ssa-service-mode-badge {
  color: #78350f;
  background: #fef3c7;
  border-color: #fcd34d;
}

/* SSA_OPERATIONAL_COMPACT_CSS_V1 */
.ssa-operational-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.ssa-operational-tile {
  text-align: left;
  min-height: 104px;
}

.ssa-operational-tile strong {
  display: block;
  margin-bottom: 6px;
}

.ssa-operational-tile small {
  display: block;
  line-height: 1.4;
}

.ssa-operational-tile.is-active {
  border-color: var(--ssa-primary);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.ssa-operational-tile.is-disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.ssa-operational-empty-state {
  padding: 18px;
  margin-bottom: 16px;
}

.ssa-operational-empty-state h3 {
  margin-top: 0;
}

.ssa-operational-active-heading {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--ssa-border);
  border-radius: 16px;
  background: var(--ssa-surface-soft);
}

.ssa-operational-panel[hidden],
.ssa-operational-active-heading[hidden],
.ssa-operational-empty-state[hidden] {
  display: none !important;
}

@media (max-width: 1000px) {
  .ssa-operational-compact-grid {
    grid-template-columns: 1fr;
  }
}


/* SSA_OPERATIONAL_COMPACT_ACCESS_SAFE_CSS_V1
   Panel operasional dibuka/tutup dengan class, bukan hidden,
   supaya tidak dibuka ulang oleh applyFeatureVisibility().
*/
.ssa-view[data-view="operasional"] .is-operational-panel-closed {
  display: none !important;
}

.ssa-view[data-view="operasional"] .ssa-operational-panel.is-operational-panel-closed,
.ssa-view[data-view="operasional"] [data-operational-active-heading].is-operational-panel-closed,
.ssa-view[data-view="operasional"] [data-operational-empty-state].is-operational-panel-closed {
  display: none !important;
}

/* SSA_OPERATIONAL_MODAL_MANUAL_SERVICE_CSS_V1 */
.ssa-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.is-operational-form-parked {
  display: none !important;
}

.ssa-modal-dialog .is-operational-form-parked {
  display: block !important;
}

.ssa-modal-dialog .ssa-operational-form {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: var(--ssa-modal-solid-subtle-bg, var(--ssa-surface-soft));
  border: 1px solid var(--ssa-modal-solid-border, var(--ssa-border));
}

.ssa-modal-dialog .ssa-action-row {
  justify-content: flex-start;
}

.ssa-modal-dialog .ssa-operational-form .ssa-form-grid {
  margin-top: 10px;
}


/* SSA_GLOBAL_NO_WHITE_BACKGROUND_V1
   Aturan global:
   - Background putih tidak boleh dipakai untuk area UI
   - Putih boleh untuk text/icon jika perlu
*/
:root {
  --ssa-no-white-bg-main: #081426;
  --ssa-no-white-bg-soft: #0d1b31;
  --ssa-no-white-bg-soft-2: #10203a;
  --ssa-no-white-border: rgba(148, 163, 184, 0.28);
  --ssa-no-white-text: #f8fafc;
  --ssa-no-white-muted: #cbd5e1;
}

/* Modal / dialog / wrapper */
.ssa-modal,
.ssa-modal-backdrop,
.ssa-modal-content,
.ssa-modal-dialog,
.ssa-modal-card,
.ssa-modal-body,
.ssa-modal-footer,
[data-global-modal],
[data-global-modal-dialog],
[data-global-modal-body],
[data-global-modal-footer],
[data-global-modal-card] {
  background-color: var(--ssa-no-white-bg-main) !important;
  background-image: none !important;
}

/* Card / panel / form / section */
.ssa-card,
.ssa-panel,
.ssa-surface,
.ssa-surface-soft,
.ssa-operational-panel,
.ssa-service-panel,
.ssa-settings-panel,
.ssa-settings-card,
.ssa-access-form,
.ssa-operational-form,
.ssa-service-form,
.ssa-form-card,
.ssa-form-panel,
.ssa-operational-empty-state,
.ssa-operational-active-heading,
.ssa-table-wrap,
.ssa-stat-card,
.ssa-summary-card,
.ssa-content-card,
.ssa-filter-card,
.ssa-section-card,
.ssa-popover,
.ssa-dropdown-panel {
  background-color: var(--ssa-no-white-bg-soft) !important;
  background-image: none !important;
  border-color: var(--ssa-no-white-border) !important;
}

/* Area form di dalam modal yang tadi masih putih */
.ssa-modal-dialog .ssa-operational-form,
.ssa-modal-dialog .ssa-access-form,
.ssa-modal-dialog .ssa-service-form,
.ssa-modal-dialog .ssa-card,
.ssa-modal-dialog .ssa-form-grid,
.ssa-modal-dialog .ssa-field,
.ssa-modal-dialog .ssa-field-wide {
  background-color: var(--ssa-no-white-bg-soft) !important;
  background-image: none !important;
}

/* Tabel */
.ssa-table,
.ssa-table thead,
.ssa-table tbody,
.ssa-table tfoot {
  background-color: transparent !important;
}

.ssa-table thead th {
  background-color: var(--ssa-no-white-bg-soft-2) !important;
  color: var(--ssa-no-white-text) !important;
  border-color: var(--ssa-no-white-border) !important;
}

.ssa-table tbody tr,
.ssa-table tbody td,
.ssa-table tfoot td {
  background-color: var(--ssa-no-white-bg-soft) !important;
  color: var(--ssa-no-white-text) !important;
  border-color: var(--ssa-no-white-border) !important;
}

/* Input / select / textarea */
.ssa-input,
.ssa-select,
textarea.ssa-input,
input.ssa-input,
select.ssa-select,
.ssa-field input,
.ssa-field select,
.ssa-field textarea {
  background-color: #071224 !important;
  background-image: none !important;
  color: var(--ssa-no-white-text) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
}

.ssa-input::placeholder,
.ssa-field input::placeholder,
.ssa-field textarea::placeholder {
  color: var(--ssa-no-white-muted) !important;
  opacity: 0.85 !important;
}

/* Browser autofill jangan putih */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ssa-no-white-text) !important;
  -webkit-box-shadow: 0 0 0px 1000px #071224 inset !important;
  box-shadow: 0 0 0px 1000px #071224 inset !important;
  transition: background-color 999999s ease-in-out 0s !important;
}

/* Option dropdown */
select option {
  background-color: #071224 !important;
  color: var(--ssa-no-white-text) !important;
}

/* Tile / empty state / compact ui */
.ssa-settings-tile,
.ssa-operational-tile,
.ssa-tile,
.ssa-empty-state,
.ssa-list-card,
.ssa-menu-card {
  background-color: var(--ssa-no-white-bg-soft) !important;
  background-image: none !important;
  border-color: var(--ssa-no-white-border) !important;
}

/* Text global tetap kontras */
.ssa-card,
.ssa-panel,
.ssa-access-form,
.ssa-operational-form,
.ssa-service-form,
.ssa-table,
.ssa-table td,
.ssa-table th,
.ssa-field label,
.ssa-muted,
.ssa-modal-title,
.ssa-modal-subtitle,
.ssa-section-heading h2,
.ssa-section-heading h3 {
  color: var(--ssa-no-white-text) !important;
}

.ssa-muted,
.ssa-field small,
small.ssa-muted {
  color: var(--ssa-no-white-muted) !important;
}

/* Divider / line */
hr,
.ssa-divider,
.ssa-card hr,
.ssa-modal hr {
  border-color: var(--ssa-no-white-border) !important;
}

/* Jika ada wrapper terang generik */
[class*="modal"] [class*="body"],
[class*="modal"] [class*="content"],
[class*="modal"] [class*="card"],
[class*="modal"] form {
  background-color: var(--ssa-no-white-bg-soft) !important;
  background-image: none !important;
}

/* Jangan ubah tombol primary sukses */
.ssa-btn,
button.ssa-btn {
  background-image: none;
}


/* SSA_SERVICE_STATUS_UPDATE_CSS_V1 */
.ssa-modal-dialog [data-service-status-update-form] .ssa-table-wrap {
  margin-top: 14px;
}

.ssa-modal-dialog [data-service-status-log-body] td {
  vertical-align: top;
}

/* SSA_SERVICE_PART_JOB_PRICE_CSS_V1 */
.ssa-price-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.ssa-price-summary-card,
.ssa-service-price-block {
  background: var(--ssa-no-white-bg-soft, var(--ssa-surface-soft)) !important;
  border: 1px solid var(--ssa-no-white-border, var(--ssa-border));
  border-radius: 16px;
}

.ssa-price-summary-card {
  padding: 12px;
}

.ssa-price-summary-card small {
  display: block;
  color: var(--ssa-no-white-muted, var(--ssa-muted));
  margin-bottom: 4px;
}

.ssa-price-summary-card strong {
  display: block;
  color: var(--ssa-no-white-text, #f8fafc);
  font-size: 15px;
}

.ssa-price-summary-card.is-grand-total strong {
  font-size: 18px;
}

.ssa-service-price-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ssa-service-price-block {
  padding: 14px;
  margin-bottom: 14px;
}

.ssa-service-price-block h3 {
  margin: 0 0 12px;
}

.ssa-service-discount-block {
  margin-top: 4px;
}

.ssa-row-actions {
  justify-content: flex-start !important;
}

.ssa-row-actions .ssa-btn {
  white-space: nowrap;
}

.ssa-service-price-panel .ssa-table-wrap {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .ssa-price-summary-grid,
  .ssa-service-price-layout {
    grid-template-columns: 1fr;
  }
}

/* SSA_GLOBAL_MODAL_RESPONSIVE_SERVICE_SIMPLE_CSS_V1 */
:root {
  --ssa-sidebar-width-global: 244px;
}

[data-global-modal].is-open,
[data-global-modal]:not([hidden]) {
  left: var(--ssa-sidebar-width-global) !important;
  width: calc(100vw - var(--ssa-sidebar-width-global)) !important;
  right: 0 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 22px !important;
  overflow: hidden !important;
}

[data-global-modal-dialog] {
  width: fit-content !important;
  min-width: min(520px, calc(100vw - var(--ssa-sidebar-width-global) - 44px)) !important;
  max-width: min(1380px, calc(100vw - var(--ssa-sidebar-width-global) - 44px)) !important;
  max-height: calc(100vh - 44px) !important;
  overflow: hidden !important;
}

[data-global-modal-dialog][data-size="small"] {
  width: fit-content !important;
  max-width: min(620px, calc(100vw - var(--ssa-sidebar-width-global) - 44px)) !important;
}

[data-global-modal-dialog][data-size="normal"] {
  width: min(860px, calc(100vw - var(--ssa-sidebar-width-global) - 44px)) !important;
}

[data-global-modal-dialog][data-size="wide"] {
  width: min(1180px, calc(100vw - var(--ssa-sidebar-width-global) - 44px)) !important;
}

[data-global-modal-dialog][data-size="full-content-area"] {
  width: min(1480px, calc(100vw - var(--ssa-sidebar-width-global) - 44px)) !important;
}

[data-global-modal-body] {
  max-height: calc(100vh - 170px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

[data-global-modal-body] .ssa-table-wrap {
  overflow-x: auto !important;
}

[data-global-modal-body] .ssa-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

[data-global-modal-body] input,
[data-global-modal-body] select,
[data-global-modal-body] textarea,
[data-global-modal-body] .ssa-field,
[data-global-modal-body] .ssa-card,
[data-global-modal-body] .ssa-access-form,
[data-global-modal-body] .ssa-operational-form {
  min-width: 0 !important;
  max-width: 100% !important;
}

.ssa-inline-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ssa-service-simple-composer {
  display: block;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--ssa-no-white-border, var(--ssa-border));
  border-radius: 18px;
  background: var(--ssa-no-white-bg-soft, var(--ssa-surface-soft)) !important;
}

.ssa-service-simple-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.ssa-service-draft-summary {
  margin-top: 10px;
}

@media (max-width: 900px) {
  :root {
    --ssa-sidebar-width-global: 0px;
  }

  [data-global-modal].is-open,
  [data-global-modal]:not([hidden]) {
    left: 0 !important;
    width: 100vw !important;
    padding: 12px !important;
  }

  [data-global-modal-dialog],
  [data-global-modal-dialog][data-size="small"],
  [data-global-modal-dialog][data-size="normal"],
  [data-global-modal-dialog][data-size="wide"],
  [data-global-modal-dialog][data-size="full-content-area"] {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }

  .ssa-inline-control,
  .ssa-service-simple-grid {
    grid-template-columns: 1fr;
  }
}

/* SSA_SERVICE_MODAL_LAYOUT_STACK_CSS_V1 */

/* Modal global harus pakai area kanan, tidak menutup sidebar */
@media (min-width: 901px) {
  [data-global-modal].is-open,
  [data-global-modal]:not([hidden]) {
    left: 244px !important;
    width: calc(100vw - 244px) !important;
    right: 0 !important;
    padding: 18px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  [data-global-modal-dialog][data-size="full-content-area"],
  [data-global-modal-dialog][data-size="wide"] {
    width: calc(100vw - 244px - 36px) !important;
    max-width: calc(100vw - 244px - 36px) !important;
    min-width: 0 !important;
  }
}

[data-global-modal-dialog] {
  max-height: calc(100vh - 36px) !important;
  overflow: hidden !important;
}

[data-global-modal-body] {
  max-height: calc(100vh - 158px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Form service dibuat 2 area: kiri data service, kanan part/jasa/total */
.ssa-modal-dialog [data-service-form] {
  padding: 12px !important;
}

.ssa-modal-dialog [data-service-form] > .ssa-form-grid {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.95fr) minmax(520px, 1.15fr) !important;
  gap: 12px 14px !important;
  align-items: start !important;
}

/* Semua field service normal masuk kolom kiri */
.ssa-modal-dialog [data-service-form] > .ssa-form-grid > .ssa-field:not(.ssa-service-simple-composer) {
  grid-column: 1 / 2 !important;
  min-width: 0 !important;
}

/* Field yang kecil tetap rapi satu kolom agar tidak berantakan */
.ssa-modal-dialog [data-service-form] > .ssa-form-grid > .ssa-field:not(.ssa-service-simple-composer) .ssa-input,
.ssa-modal-dialog [data-service-form] > .ssa-form-grid > .ssa-field:not(.ssa-service-simple-composer) .ssa-select,
.ssa-modal-dialog [data-service-form] > .ssa-form-grid > .ssa-field:not(.ssa-service-simple-composer) textarea {
  width: 100% !important;
  min-width: 0 !important;
}

/* Composer part/jasa ada di kanan dari atas */
.ssa-modal-dialog [data-service-form] .ssa-service-simple-composer {
  grid-column: 2 / 3 !important;
  grid-row: 1 / span 99 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: start !important;
  padding: 12px !important;
}

/* Di dalam panel kanan, Part dan Jasa jangan dibuat sempit berdampingan */
.ssa-modal-dialog .ssa-service-simple-composer .ssa-service-simple-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* Ringkasan total 4 kotak rapi */
.ssa-modal-dialog .ssa-service-simple-composer .ssa-price-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

/* Tabel part/jasa jangan memaksa horizontal scroll */
.ssa-modal-dialog .ssa-service-simple-composer .ssa-table-wrap {
  overflow-x: hidden !important;
  width: 100% !important;
}

.ssa-modal-dialog .ssa-service-simple-composer .ssa-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
}

.ssa-modal-dialog .ssa-service-simple-composer .ssa-table th,
.ssa-modal-dialog .ssa-service-simple-composer .ssa-table td {
  white-space: normal !important;
  word-break: break-word !important;
  padding: 8px 6px !important;
}

/* Input part/jasa dibuat lebih padat seperti contoh */
.ssa-modal-dialog .ssa-service-simple-composer .ssa-form-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ssa-modal-dialog .ssa-service-simple-composer .ssa-field {
  grid-column: span 3 !important;
}

.ssa-modal-dialog .ssa-service-simple-composer .ssa-field-wide {
  grid-column: 1 / -1 !important;
}

.ssa-modal-dialog .ssa-service-simple-composer .ssa-field-action {
  grid-column: span 2 !important;
}

.ssa-modal-dialog .ssa-service-simple-composer .ssa-service-price-block {
  padding: 10px !important;
  margin-bottom: 10px !important;
}

.ssa-modal-dialog .ssa-service-simple-composer h3 {
  margin: 0 0 8px !important;
  font-size: 14px !important;
}

/* Tombol simpan/batal service tetap di kiri bawah dan tidak tertutup */
.ssa-modal-dialog [data-service-form] .ssa-field-action {
  align-self: end !important;
}

/* Jika layar tidak cukup, baru turun satu kolom */
@media (max-width: 1200px) {
  .ssa-modal-dialog [data-service-form] > .ssa-form-grid {
    grid-template-columns: 1fr !important;
  }

  .ssa-modal-dialog [data-service-form] .ssa-service-simple-composer {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 760px) {
  .ssa-modal-dialog .ssa-service-simple-composer .ssa-price-summary-grid,
  .ssa-modal-dialog .ssa-service-simple-composer .ssa-form-grid {
    grid-template-columns: 1fr !important;
  }

  .ssa-modal-dialog .ssa-service-simple-composer .ssa-field,
  .ssa-modal-dialog .ssa-service-simple-composer .ssa-field-action,
  .ssa-modal-dialog .ssa-service-simple-composer .ssa-field-wide {
    grid-column: 1 / -1 !important;
  }
}

/* SSA_GLOBAL_COMPACT_THEME_V1
   Theme compact global:
   - font lebih kecil
   - input lebih pendek
   - tabel lebih rapat
   - panel/card lebih padat
   - modal kecil tetap kecil
   - modal besar memakai area kanan
   - tidak memakai background putih untuk UI
*/

:root {
  --ssa-compact-font-xs: 10.5px;
  --ssa-compact-font-sm: 11.5px;
  --ssa-compact-font-md: 12.5px;
  --ssa-compact-font-lg: 15px;
  --ssa-compact-font-xl: 18px;

  --ssa-compact-input-h: 30px;
  --ssa-compact-btn-h: 30px;
  --ssa-compact-radius: 8px;
  --ssa-compact-gap: 8px;
  --ssa-compact-pad: 10px;

  --ssa-compact-bg: #081426;
  --ssa-compact-panel: #0d1b31;
  --ssa-compact-panel-2: #101f37;
  --ssa-compact-table-head: #1d2a3d;
  --ssa-compact-border: rgba(148, 163, 184, 0.26);
  --ssa-compact-text: #f8fafc;
  --ssa-compact-muted: #cbd5e1;
  --ssa-compact-input-bg: #071224;
}

/* ===== GLOBAL FONT / BODY ===== */
body,
.ssa-app,
.ssa-main,
.ssa-content,
.ssa-card,
.ssa-panel,
.ssa-modal-dialog,
.ssa-table,
.ssa-input,
.ssa-select,
.ssa-btn,
button,
input,
select,
textarea {
  font-size: var(--ssa-compact-font-md) !important;
  line-height: 1.25 !important;
}

.ssa-page-title,
.ssa-section-heading h1 {
  font-size: var(--ssa-compact-font-xl) !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}

.ssa-section-heading h2 {
  font-size: 17px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.ssa-section-heading h3,
.ssa-card h3,
.ssa-panel h3 {
  font-size: var(--ssa-compact-font-lg) !important;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
}

.ssa-muted,
.ssa-field small,
small,
.ssa-pill {
  font-size: var(--ssa-compact-font-sm) !important;
}

/* ===== SIDEBAR / NAV ===== */
.ssa-sidebar,
.ssa-nav {
  font-size: var(--ssa-compact-font-md) !important;
}

.ssa-nav-item {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}

.ssa-brand-title {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

.ssa-brand-subtitle {
  font-size: 11px !important;
}

/* ===== CARD / PANEL GLOBAL ===== */
.ssa-card,
.ssa-panel,
.ssa-settings-card,
.ssa-settings-panel,
.ssa-operational-panel,
.ssa-service-panel,
.ssa-access-form,
.ssa-operational-form,
.ssa-service-form,
.ssa-content-card,
.ssa-filter-card,
.ssa-section-card,
.ssa-table-wrap {
  border-radius: 12px !important;
  padding: var(--ssa-compact-pad) !important;
  background: var(--ssa-compact-panel) !important;
  border-color: var(--ssa-compact-border) !important;
}

.ssa-section-heading {
  gap: 8px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

.ssa-grid,
.ssa-dashboard-grid,
.ssa-settings-grid,
.ssa-operational-grid {
  gap: 10px !important;
}

/* ===== FORM GLOBAL ===== */
.ssa-form-grid,
.ssa-access-form .ssa-form-grid,
.ssa-operational-form .ssa-form-grid,
.ssa-service-form .ssa-form-grid {
  gap: 8px 10px !important;
}

.ssa-field {
  gap: 4px !important;
  min-width: 0 !important;
}

.ssa-field label,
label {
  font-size: var(--ssa-compact-font-sm) !important;
  line-height: 1.15 !important;
  margin-bottom: 3px !important;
  font-weight: 700 !important;
}

.ssa-input,
.ssa-select,
input.ssa-input,
select.ssa-select,
.ssa-field input,
.ssa-field select {
  height: var(--ssa-compact-input-h) !important;
  min-height: var(--ssa-compact-input-h) !important;
  padding: 5px 9px !important;
  border-radius: 7px !important;
  font-size: var(--ssa-compact-font-sm) !important;
  background: var(--ssa-compact-input-bg) !important;
  color: var(--ssa-compact-text) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

textarea.ssa-input,
.ssa-field textarea {
  min-height: 48px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
  font-size: var(--ssa-compact-font-sm) !important;
  background: var(--ssa-compact-input-bg) !important;
  color: var(--ssa-compact-text) !important;
}

.ssa-input::placeholder,
.ssa-field input::placeholder,
.ssa-field textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
}

.ssa-inline-control {
  gap: 6px !important;
}

/* ===== BUTTON GLOBAL ===== */
.ssa-btn,
button.ssa-btn {
  min-height: var(--ssa-compact-btn-h) !important;
  height: var(--ssa-compact-btn-h) !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  font-size: var(--ssa-compact-font-sm) !important;
  line-height: 1 !important;
}

.ssa-btn-small,
.ssa-table .ssa-btn,
.ssa-row-actions .ssa-btn {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  font-size: var(--ssa-compact-font-xs) !important;
  border-radius: 7px !important;
}

.ssa-action-row {
  gap: 6px !important;
}

/* ===== TABLE GLOBAL ===== */
.ssa-table-wrap {
  padding: 0 !important;
  overflow-x: auto !important;
}

.ssa-table {
  font-size: var(--ssa-compact-font-sm) !important;
  border-collapse: collapse !important;
}

.ssa-table th,
.ssa-table td {
  padding: 6px 7px !important;
  height: 30px !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  border-color: var(--ssa-compact-border) !important;
}

.ssa-table th {
  background: var(--ssa-compact-table-head) !important;
  color: var(--ssa-compact-text) !important;
  font-size: var(--ssa-compact-font-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.ssa-table td {
  background: var(--ssa-compact-panel) !important;
  color: var(--ssa-compact-text) !important;
}

.ssa-table small {
  font-size: 10px !important;
}

/* ===== MODAL GLOBAL RESPONSIVE ===== */
[data-global-modal].is-open,
[data-global-modal]:not([hidden]) {
  background: rgba(2, 6, 23, 0.74) !important;
}

[data-global-modal-dialog] {
  border-radius: 14px !important;
  background: var(--ssa-compact-panel) !important;
  border-color: rgba(148, 163, 184, 0.32) !important;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.48) !important;
}

[data-global-modal-body] {
  padding: 10px !important;
  overflow-x: hidden !important;
}

[data-global-modal-footer] {
  padding: 9px 12px !important;
}

.ssa-modal-title,
[data-global-modal-title] {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.ssa-modal-subtitle,
[data-global-modal-subtitle] {
  font-size: var(--ssa-compact-font-sm) !important;
}

/* Modal kecil jangan dipaksa lebar */
[data-global-modal-dialog][data-size="small"] {
  width: fit-content !important;
  min-width: 420px !important;
  max-width: min(620px, calc(100vw - var(--ssa-sidebar-width-global, 244px) - 44px)) !important;
}

[data-global-modal-dialog][data-size="normal"] {
  width: min(760px, calc(100vw - var(--ssa-sidebar-width-global, 244px) - 44px)) !important;
}

[data-global-modal-dialog][data-size="wide"] {
  width: min(1080px, calc(100vw - var(--ssa-sidebar-width-global, 244px) - 44px)) !important;
}

[data-global-modal-dialog][data-size="full-content-area"] {
  width: min(1320px, calc(100vw - var(--ssa-sidebar-width-global, 244px) - 44px)) !important;
}

/* ===== OPERASIONAL / SERVICE COMPACT LIKE EXAMPLE ===== */
.ssa-modal-dialog [data-service-form] {
  padding: 10px !important;
}

.ssa-modal-dialog [data-service-form] > .ssa-form-grid {
  gap: 8px 10px !important;
}

.ssa-service-simple-composer,
.ssa-service-price-block,
.ssa-price-summary-card {
  border-radius: 10px !important;
  padding: 9px !important;
  background: var(--ssa-compact-panel-2) !important;
  border-color: var(--ssa-compact-border) !important;
}

.ssa-service-simple-composer .ssa-section-heading {
  padding-bottom: 5px !important;
  border-bottom: 1px solid var(--ssa-compact-border) !important;
}

.ssa-service-simple-composer .ssa-service-price-block h3 {
  font-size: 13px !important;
}

.ssa-price-summary-grid {
  gap: 7px !important;
}

.ssa-price-summary-card {
  min-height: 52px !important;
}

.ssa-price-summary-card small {
  font-size: 10px !important;
}

.ssa-price-summary-card strong {
  font-size: 13px !important;
}

.ssa-price-summary-card.is-grand-total strong {
  font-size: 15px !important;
}

/* ===== SETTINGS / DROPDOWN / HAK AKSES COMPACT ===== */
.ssa-settings-tile,
.ssa-operational-tile,
.ssa-tile,
.ssa-list-card,
.ssa-menu-card {
  border-radius: 12px !important;
  padding: 10px !important;
  min-height: auto !important;
  background: var(--ssa-compact-panel) !important;
}

.ssa-pill {
  min-height: 24px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
}

/* ===== SCROLLBAR TIPIS ===== */
* {
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0b1220;
}

::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Mobile tetap aman */
@media (max-width: 900px) {
  [data-global-modal-dialog][data-size="small"],
  [data-global-modal-dialog][data-size="normal"],
  [data-global-modal-dialog][data-size="wide"],
  [data-global-modal-dialog][data-size="full-content-area"] {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }
}