/* =========================================================
     CSS DASAR / GLOBAL
     ========================================================= */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: Arial, sans-serif;
    background: #f4f7f9;
    color: #1f2937;
  }

  /* =========================================================
     HALAMAN LOGIN / REGISTER / FORGOT PASSWORD
     ========================================================= */
  .login-page {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
  }

  .login-left {
    flex: 1;
    min-width: 320px;
    background: linear-gradient(135deg, #10293d 0%, #245a73 45%, #8bc4de 100%);
    color: #ffffff;
    padding: 48px;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
      radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.10) 0, transparent 18%),
      radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08) 0, transparent 20%),
      radial-gradient(circle at 70% 75%, rgba(255, 255, 255, 0.07) 0, transparent 22%);
    background-size:
      28px 28px,
      28px 28px,
      420px 420px,
      360px 360px,
      400px 400px;
    background-position:
      0 0,
      0 0,
      0 0,
      100% 0,
      100% 100%;
  }

  .login-left-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
  }

  .brand-box {
    max-width: 560px;
  }

  .app-logo {
    width: 96px;
    height: 96px;
    margin-bottom: 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }

  .app-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .brand-box h1 {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
  }

  .brand-box h2 {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 20px;
    white-space: nowrap;
    color: #F4CF2B;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .brand-description {
    font-size: 13px;
    line-height: 1.9;
    opacity: 0.94;
    max-width: 520px;
    text-align: justify;
  }

  .login-left-footer {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .login-left-footer p {
    font-size: 13px;
    line-height: 1.7;
    opacity: 0.88;
  }

  .login-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 11px;
  }

  .login-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .login-contact-link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .login-contact-link span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .login-contact-link:hover,
  .login-contact-link:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
  }

  @media (max-width: 560px) {
    .login-contact-links {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .login-contact-link {
      width: 100%;
    }
  }

  .login-right {
    flex: 1;
    min-width: 320px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
  }

  .login-card {
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 24px;
    padding: 34px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    border: 1px solid #eef2f7;
  }

  .login-card-header {
    margin-bottom: 24px;
  }

  .login-card-header h3 {
    font-size: 30px;
    margin-bottom: 8px;
    font-weight: 700;
    background: linear-gradient(135deg, #0f766e, #2f7892);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .login-card-header p {
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
  }

  /* =========================================================
     FORM DASAR
     ========================================================= */
  .form-group {
    margin-bottom: 14px;
  }

  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
  }

  .form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    background: #ffffff;
  }

  .form-group input:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.10);
  }

  .compact-group {
    margin-bottom: 12px;
  }

  .field-hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
  }

  .input-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10) !important;
    background: #fffafa;
  }

  .input-error::placeholder {
    color: #b91c1c;
  }

  /* =========================================================
     INPUT PASSWORD / TOGGLE
     ========================================================= */
  .password-input-wrap {
    position: relative;
  }

  .password-input-wrap input {
    padding-right: 52px;
  }

  .password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .password-toggle:hover {
    color: #374151;
  }

  /* =========================================================
     KOMPONEN TOMBOL GLOBAL
     ========================================================= */
  .btn-primary {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    margin-top: 8px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f766e 0%, #245a73 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.16);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
    box-sizing: border-box;
  }

  .btn-primary:hover {
    transform: translateY(-1px);
    opacity: 0.98;
  }

  .btn-primary.is-loading {
    opacity: 0.92;
    cursor: not-allowed;
    pointer-events: none;
  }

  .btn-secondary-outline {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all 0.2s ease;
  }

  .btn-secondary-outline:hover {
    transform: translateY(-1px);
    background: #f9fafb;
  }

  .btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: buttonSpin 0.7s linear infinite;
  }

  @keyframes buttonSpin {
    to {
      transform: rotate(360deg);
    }
  }

  /* =========================================================
     LINK HALAMAN LOGIN
     ========================================================= */
  .login-links {
    margin-top: 22px;
    text-align: center;
  }

  .login-links p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.8;
  }

  .login-links a {
    color: #0f766e;
    text-decoration: none;
    font-weight: 700;
  }

  .login-links a:hover {
    text-decoration: underline;
  }

  .remember-row {
    margin-top: 2px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .remember-me {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
  }

  .remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0f766e;
    cursor: pointer;
  }

  .login-info-message {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef5df;
    color: #0f766e;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid #d9e7b3;
  }

  /* =========================================================
     PASSWORD STRENGTH / MATCH
     ========================================================= */
  .password-strength {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .password-strength-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
  }

  .password-strength-fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease, background 0.25s ease;
    background: #ef4444;
  }

  .password-strength-text {
    min-width: 56px;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    color: #6b7280;
  }

  .password-strength-wrapper {
    margin-top: -2px;
    margin-bottom: 14px;
  }

  .password-match-status {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
  }

  .password-match-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .password-match-status.is-match .password-match-icon {
    background: #dcfce7;
    color: #16a34a;
  }

  .password-match-status.is-match .password-match-text {
    color: #16a34a;
    font-weight: 600;
  }

  .password-match-status.is-mismatch .password-match-icon {
    background: #fee2e2;
    color: #dc2626;
  }

  .password-match-status.is-mismatch .password-match-text {
    color: #dc2626;
    font-weight: 600;
  }

  /* =========================================================
     TOAST / NOTIFIKASI
     ========================================================= */
  .toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .toast {
    position: relative;
    min-width: 320px;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px 14px 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: toastIn 0.22s ease;
    overflow: hidden;
  }

  .toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    border-radius: 16px 0 0 16px;
  }

  .toast-success::before {
    background: #16a34a;
  }

  .toast-error::before {
    background: #dc2626;
  }

  .toast-warning::before {
    background: #d97706;
  }

  .toast-info::before {
    background: #2563eb;
  }

  .toast-content {
    flex: 1;
    padding-right: 20px;
  }

  .toast-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 16px;
    line-height: 1;
  }

  .toast-close:hover {
    background: #f3f4f6;
    color: #374151;
  }

  .toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .toast-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #111827;
  }

  .toast-message {
    font-size: 13px;
    line-height: 1.6;
    color: #4b5563;
  }

  .toast-success .toast-icon {
    background: #dcfce7;
    color: #16a34a;
  }

  .toast-error .toast-icon {
    background: #fee2e2;
    color: #dc2626;
  }

  .toast-warning .toast-icon {
    background: #fef3c7;
    color: #d97706;
  }

  .toast-info .toast-icon {
    background: #dbeafe;
    color: #2563eb;
  }

  @keyframes toastIn {
    from {
      opacity: 0;
      transform: translateY(-8px) translateX(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0) translateX(0);
    }
  }

  /* =========================================================
     HALAMAN MODERN / TOPBAR / DASHBOARD
     ========================================================= */
  .modern-dashboard-page {
    min-height: 100vh;
    background:
      radial-gradient(circle at top right, rgba(139, 196, 222, 0.20), transparent 24%),
      linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
    padding: 24px;
  }

  .modern-topbar {
    position: sticky;
    top: 12px;
    z-index: 100;
    max-width: 1280px;
    margin: 0 auto 24px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, 0.9);
    border-radius: 24px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  }

  .modern-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  .modern-brand .app-logo {
    width: 58px;
    height: 58px;
    margin-bottom: 0;
    border-radius: 18px;
    padding: 10px;
  }

  .modern-brand-text h2 {
    font-size: 20px;
    color: #111827;
    margin-bottom: 4px;
  }

  .modern-brand-text p {
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
  }

  .modern-topbar-right {
    position: relative;
  }

  .modern-user-dropdown {
    position: relative;
  }

  .modern-user-trigger {
    border: none;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    min-width: 240px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  }

  .modern-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f766e 0%, #2f7892 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }

  .modern-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .modern-user-meta {
    text-align: left;
    flex: 1;
    min-width: 0;
  }

  .modern-user-meta strong {
    display: block;
    font-size: 14px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modern-user-meta p {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
  }

  .modern-user-chevron {
    color: #6b7280;
    flex-shrink: 0;
  }

  .modern-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 8px;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
    display: none;
    z-index: 50;
  }

  .modern-user-menu.show {
    display: block;
  }

  .modern-user-menu-item {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .modern-user-menu-item:hover {
    background: #f3f4f6;
  }

  .modern-user-menu-item.danger {
    color: #b91c1c;
  }

  .modern-user-menu-item.danger:hover {
    background: #fff1f2;
  }

  .modern-dashboard-main {
    max-width: 1280px;
    margin: 0 auto;
  }

  /* =========================================================
     HERO MODERN DASHBOARD
     ========================================================= */
  .modern-hero {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 34px 32px;
    background: linear-gradient(135deg, #10293d 0%, #245a73 42%, #8bc4de 100%);
    color: #ffffff;
    box-shadow: 0 22px 42px rgba(16, 41, 61, 0.18);
    margin-bottom: 28px;
  }

  .modern-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1080px;
  }

  .modern-hero-badge {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 16px;
  }

  .modern-hero h1 {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 14px;
  }

.modern-hero p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 1080px;
  opacity: 0.96;
  white-space: nowrap;
}

  .modern-hero-orb {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 1;
  }

  .modern-hero-orb.orb-1 {
    width: 220px;
    height: 220px;
    top: -50px;
    right: -40px;
  }

  .modern-hero-orb.orb-2 {
    width: 140px;
    height: 140px;
    bottom: -40px;
    right: 180px;
  }

  .modern-section {
    margin-top: 10px;
  }

  .modern-section-header {
    margin-bottom: 20px;
  }

  .modern-section-header h3 {
    font-size: 24px;
    color: #111827;
    margin-bottom: 6px;
  }

  .modern-section-header p {
    font-size: 14px;
    color: #6b7280;
  }

  .modern-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
  }

.modern-feature-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 26px;
  padding: 24px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

  .modern-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 38px rgba(15, 23, 42, 0.10);
  }

.modern-card-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: normal;
  z-index: 0;
}

.city-pattern {
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.14) 12%,
      rgba(255,255,255,0.00) 12%,
      rgba(255,255,255,0.00) 24%,
      rgba(255,255,255,0.12) 24%,
      rgba(255,255,255,0.00) 24%,
      rgba(255,255,255,0.00) 38%,
      rgba(255,255,255,0.16) 38%,
      rgba(255,255,255,0.00) 38%,
      rgba(255,255,255,0.00) 54%,
      rgba(255,255,255,0.10) 54%,
      rgba(255,255,255,0.00) 54%
    ),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,0.18), transparent 22%);
  background-size: 220px 100%, 100% 100%, 100% 100%;
  background-position: bottom left, center, center;
}

.field-pattern {
  background:
    repeating-linear-gradient(
      155deg,
      rgba(255,255,255,0.16) 0 8px,
      transparent 8px 24px
    ),
    repeating-linear-gradient(
      25deg,
      rgba(255,255,255,0.10) 0 6px,
      transparent 6px 22px
    ),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,0.18), transparent 22%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
}

.map-pattern {
  background:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px),
    radial-gradient(circle at 78% 24%, rgba(255,255,255,0.18), transparent 18%),
    radial-gradient(circle at 28% 70%, rgba(255,255,255,0.14), transparent 16%);
  background-size: 26px 26px, 26px 26px, 100% 100%, 100% 100%;
  background-position: center;
}

.modern-feature-card.lapor::after,
.modern-feature-card.sawah::after,
.modern-feature-card.peta::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -26px;
  height: 92px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 1;
}

.modern-feature-card.lapor::after {
  background: rgba(52, 39, 6, 0.30);
}

.modern-feature-card.sawah::after {
  background: rgba(21, 49, 12, 0.26);
}

.modern-feature-card.peta::after {
  background: rgba(9, 28, 52, 0.26);
}

.modern-feature-card.lapor {
  background: linear-gradient(135deg, #10293d 0%, #245a73 52%, #2f7892 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 34px rgba(95, 77, 18, 0.22);
}

.modern-feature-card.sawah {
  background: linear-gradient(135deg, #10293d 0%, #245a73 52%, #2f7892 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 34px rgba(16, 41, 61, 0.22);
}

.modern-feature-card.peta {
  background: linear-gradient(135deg, #1f4668 0%, #2b5c86 52%, #3d78a8 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 34px rgba(31, 70, 104, 0.22);
}

/* =====================================================
   SILUET ABSTRAK PREMIUM
   ===================================================== */

/* LAPOR PELANGGARAN */
.modern-feature-card.lapor::before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  opacity: 0.12;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.75) 0 18%,
      transparent 18% 28%,
      rgba(255,255,255,0.60) 28% 42%,
      transparent 42% 54%,
      rgba(255,255,255,0.55) 54% 72%,
      transparent 72% 100%
    ),
    linear-gradient(180deg,
      transparent 0 48%,
      rgba(255,255,255,0.75) 48% 58%,
      transparent 58% 100%
    );
  transform: rotate(-6deg);
}

/* LINDUNGI SAWAH */
.modern-feature-card.sawah::before {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -14px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  opacity: 0.13;
  pointer-events: none;
  background:
    radial-gradient(circle at 40% 70%, rgba(255,255,255,0.75), transparent 26%),
    radial-gradient(circle at 68% 48%, rgba(255,255,255,0.55), transparent 24%),
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,0.32) 0 4px,
      transparent 4px 18px
    );
  transform: rotate(18deg);
}

/* PETA INFORMASI */
.modern-feature-card.peta::before {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 170px;
  height: 170px;
  opacity: 0.13;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.55) 1px, transparent 1px),
    radial-gradient(circle at 62% 38%, rgba(255,255,255,0.78), transparent 14%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  border-radius: 28px;
  transform: rotate(8deg);
}

  .modern-feature-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

.modern-feature-icon {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}

  .modern-feature-body,
  .modern-feature-action {
    position: relative;
    z-index: 2;
  }

.modern-feature-body h4 {
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 10px;
}

.modern-feature-body p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

  .modern-feature-action {
    margin-top: 18px;
  }

.modern-feature-action span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}
  /* =========================================================
     TOMBOL KEMBALI
     ========================================================= */
  .page-back-row {
    margin-bottom: 18px;
  }

  .page-back-button {
    border: none;
    background: #ffffff;
    border: 1px solid #dbe3ea;
    color: #374151;
    padding: 11px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
  }

  .page-back-button:hover {
    background: #f8fafc;
    color: #111827;
  }

  /* =========================================================
     FEATURE HERO / HALAMAN FITUR
     ========================================================= */
  .feature-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 30px 28px;
    margin-bottom: 24px;
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
  }

  .feature-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
  }

  .feature-hero-badge {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
  }

  .feature-hero h1 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .feature-hero p {
    font-size: 15px;
    line-height: 1.9;
    max-width: 680px;
    opacity: 0.96;
  }

  .feature-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    pointer-events: none;
  }

  .feature-hero-lapor {
    background: linear-gradient(135deg, #0f766e 0%, #2f7892 45%, #8bc8c0 100%);
  }

  .feature-hero-lapor .feature-hero-pattern {
    background:
      linear-gradient(transparent 74%, rgba(255, 255, 255, 0.35) 74%),
      linear-gradient(90deg, transparent 72%, rgba(255, 255, 255, 0.25) 72%);
    background-size: 70px 70px, 70px 70px;
  }

  .feature-hero-sawah {
    background: linear-gradient(135deg, #10293d 0%, #245a73 42%, #62aaa3 100%);
  }

  .feature-hero-sawah .feature-hero-pattern {
    background:
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0 12px, transparent 12px 24px),
      radial-gradient(circle at 80% 22%, rgba(255, 255, 255, 0.22), transparent 26%);
  }

  .feature-hero-peta {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 45%, #8bc4de 100%);
  }

  .feature-hero-peta .feature-hero-pattern {
    background:
      linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 28px 28px, 28px 28px;
  }

.feature-hero-compact {
  min-height: auto;
  padding: 22px 26px;
}

.feature-hero-compact .feature-hero-content h1 {
  margin-bottom: 6px;
  font-size: 28px;
}

.feature-hero-compact .feature-hero-content p {
  max-width: none;
  font-size: 14px;
  line-height: 1.7;
}

.subpage-hero-compact {
  margin-bottom: 20px;
}

  .feature-layout {
    display: grid;
    gap: 20px;
  }

  .feature-main-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: flex-start;
    gap: 18px;
  }

  .feature-main-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eef5df, #dbeafe);
    color: #10293d;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .feature-main-text h3 {
    font-size: 24px;
    color: #111827;
    margin-bottom: 10px;
  }

  .feature-main-text p {
    font-size: 15px;
    line-height: 1.9;
    color: #4b5563;
  }

  .feature-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }

  .feature-info-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  }

  .feature-info-card h4 {
    font-size: 18px;
    color: #111827;
    margin-bottom: 8px;
  }

  .feature-info-card p {
    font-size: 14px;
    line-height: 1.8;
    color: #4b5563;
  }

  /* =========================================================
     HALAMAN VERIFY / STATUS
     ========================================================= */
  .verify-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f6f9 0%, #e9eef3 100%);
    padding: 24px;
  }

  .verify-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  }

  .verify-icon {
    margin-bottom: 20px;
  }

  .verify-icon.success svg {
    background: #eef5df;
    border-radius: 50%;
    padding: 12px;
  }

  .verify-icon.error svg {
    background: #fde8e8;
    border-radius: 50%;
    padding: 12px;
  }

  .verify-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
  }

  .verify-desc {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 28px;
  }

  .verify-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .verify-btn.primary {
    background: #0f766e;
    color: #ffffff;
  }

  .verify-btn.primary:hover {
    background: #0d615b;
  }

  .verify-btn.secondary {
    background: #6b7280;
    color: #ffffff;
  }

  .verify-btn.secondary:hover {
    background: #4b5563;
  }

  .verify-footer {
    margin-top: 28px;
    font-size: 12px;
    color: #9ca3af;
  }

  .verify-footer p {
    margin: 0;
    font-weight: 600;
    color: #6b7280;
  }

  .verify-footer span {
    font-size: 11px;
  }

  /* =========================================================
     HALAMAN PROFIL
     ========================================================= */
  .profile-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
  }

  .profile-sidebar-card,
  .profile-form-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
  }

  .profile-sidebar-card {
    padding: 20px 18px;
    text-align: center;
    position: sticky;
    top: 20px;
  }

  .profile-photo-wrap {
    position: relative;
    width: 108px;
    height: 108px;
    margin: 0 auto 14px;
  }

  .profile-photo {
    width: 108px;
    height: 108px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f766e 0%, #0d615b 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    box-shadow: 0 16px 36px rgba(15, 118, 110, 0.22);
    overflow: hidden;
    position: relative;
  }

  .profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .profile-photo-edit-btn {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    cursor: pointer;
    color: #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  .profile-photo-edit-btn:hover {
    transform: translateY(-1px);
    background: #f9fafb;
  }

  .profile-sidebar-info h3 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #111827;
  }

  .profile-sidebar-info p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6b7280;
  }

  .profile-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #eef5df;
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
  }

  .profile-form-card {
    padding: 18px 18px 20px;
  }

  .profile-card-header {
    margin-bottom: 10px;
  }

  .profile-card-header h3 {
    margin: 0 0 4px;
    font-size: 19px;
    color: #111827;
  }

  .profile-card-header p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
  }

  .profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: start;
  }

  .profile-form-group-full {
    grid-column: 1 / -1;
  }

  .profile-form-card textarea {
    width: 100%;
    min-height: 68px;
    max-height: 110px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    color: #111827;
    background: #ffffff;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
  }

  .profile-form-card textarea:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
  }

  #profileForm input[disabled],
  #profileForm textarea[disabled] {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
  }

  #profileForm.is-editing input,
  #profileForm.is-editing textarea {
    background: #ffffff;
    color: #111827;
    cursor: text;
  }

  .profile-form-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
  }

/* =========================================================
   STATUS EMAIL PROFIL
   ========================================================= */

.profile-label-row label {
  margin-bottom: 0;
  line-height: 1.2;
}

.profile-field-status.is-verified {
  background: #eef5df;
  color: #0f766e;
}

.profile-field-status.is-pending {
  background: #fff7e6;
  color: #b45309;
}

.profile-field-status.is-unverified {
  background: #fee2e2;
  color: #b91c1c;
}

.profile-inline-link-btn:hover {
  text-decoration: underline;
}
  /* =========================================================
     MODAL CROP FOTO PROFIL
     ========================================================= */
  .photo-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 8px;
    overflow-y: auto;
  }

  .photo-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(4px);
  }

  .photo-crop-dialog {
    position: relative;
    width: min(92vw, 760px);
    max-height: calc(100vh - 24px);
    margin: 12px auto;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    z-index: 2;
    display: flex;
    flex-direction: column;
  }

  .photo-crop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 12px;
    border-bottom: 1px solid #e5e7eb;
  }

  .photo-crop-header h3 {
    margin: 0 0 4px;
    font-size: 22px;
    color: #111827;
  }

  .photo-crop-header p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
  }

  .photo-crop-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
  }

  .photo-crop-body {
    padding: 12px 20px 10px;
    overflow-y: auto;
    flex: 1;
  }

  .photo-crop-stage-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .photo-crop-stage {
    position: relative;
    width: min(100%, 520px);
    height: min(52vh, 360px);
    min-height: 260px;
    border-radius: 20px;
    overflow: hidden;
    background:
      linear-gradient(45deg, #f3f4f6 25%, transparent 25%) -10px 0/20px 20px,
      linear-gradient(-45deg, #f3f4f6 25%, transparent 25%) -10px 0/20px 20px,
      linear-gradient(45deg, transparent 75%, #f3f4f6 75%) -10px 0/20px 20px,
      linear-gradient(-45deg, transparent 75%, #f3f4f6 75%) -10px 0/20px 20px,
      #fafafa;
    user-select: none;
    touch-action: none;
    cursor: grab;
  }

  .photo-crop-stage.is-dragging {
    cursor: grabbing;
  }

  .photo-crop-stage img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    max-width: none;
    max-height: none;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
  }

  .photo-crop-frame {
    position: absolute;
    width: 260px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255,255,255,0.95);
    border-radius: 999px;
    box-shadow:
      0 0 0 9999px rgba(15, 23, 42, 0.45),
      0 8px 24px rgba(15, 23, 42, 0.16);
    pointer-events: none;
  }

  .photo-crop-controls {
    margin-top: 18px;
  }

  .photo-crop-controls label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
  }

  .photo-crop-controls input[type="range"] {
    width: 100%;
  }

  .photo-crop-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 14px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    flex-shrink: 0;
    align-items: center;
  }

  /* =========================================================
     KONSISTENSI TOMBOL PROFIL & CROP
     ========================================================= */
  .profile-form-actions button,
  .photo-crop-footer button {
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
    margin-top: 0;
  }

  .profile-form-actions .btn-primary,
  .photo-crop-footer .btn-primary,
  .profile-form-actions .btn-secondary-outline,
  .photo-crop-footer .btn-secondary-outline {
    min-width: 140px;
    width: auto;
    box-shadow: none;
  }

  .profile-form-actions .btn-primary,
  .photo-crop-footer .btn-primary {
    color: #ffffff;
  }

  .profile-form-actions button:hover,
  .photo-crop-footer button:hover {
    transform: translateY(-1px);
  }

  /* =========================================================
     RESPONSIVE
     ========================================================= */

  @media (max-width: 960px) {
    .profile-layout {
      grid-template-columns: 1fr;
    }

    .profile-sidebar-card {
      position: static;
    }
  }

  @media (max-width: 900px) {
    .login-page {
      flex-direction: column;
    }

    .login-left,
    .login-right {
      padding: 32px 24px;
    }

    .brand-box h1 {
      font-size: 32px;
    }

    .brand-box h2 {
      font-size: 16px;
    }

    .login-card {
      max-width: 100%;
      padding: 28px 22px;
    }

    .modern-dashboard-page {
      padding: 18px;
    }

    .modern-topbar {
      flex-direction: column;
      align-items: stretch;
    }

    .modern-user-trigger {
      width: 100%;
      min-width: 0;
    }

    .modern-hero {
      padding: 28px 24px;
    }

    .modern-hero h1 {
      font-size: 28px;
    }
  }

  @media (max-width: 768px) {
    .feature-hero {
      padding: 24px 22px;
    }

    .feature-hero h1 {
      font-size: 28px;
    }

    .feature-main-card {
      flex-direction: column;
    }
  }

  @media (max-width: 640px) {
    .toast-container {
      top: 16px;
      right: 16px;
      left: 16px;
    }

    .toast {
      min-width: 0;
      max-width: 100%;
    }

    .profile-form-grid {
      grid-template-columns: 1fr;
    }

    .profile-form-card,
    .profile-sidebar-card {
      padding: 20px 16px;
      border-radius: 20px;
    }

    .profile-photo,
    .profile-photo-wrap {
      width: 104px;
      height: 104px;
    }

    .profile-photo {
      font-size: 34px;
    }

    .photo-crop-dialog {
      width: calc(100vw - 16px);
      max-height: calc(100vh - 16px);
      margin: 8px auto;
      border-radius: 18px;
    }

    .photo-crop-header,
    .photo-crop-body,
    .photo-crop-footer {
      padding-left: 16px;
      padding-right: 16px;
    }

    .photo-crop-header {
      padding-top: 16px;
      padding-bottom: 12px;
    }

    .photo-crop-body {
      padding-top: 12px;
      padding-bottom: 10px;
    }

    .photo-crop-stage {
      height: min(42vh, 300px);
      min-height: 220px;
    }

    .photo-crop-frame {
      width: 200px;
      height: 200px;
    }

    .photo-crop-footer {
      flex-direction: column;
      align-items: stretch;
      padding-top: 12px;
      padding-bottom: 14px;
    }

    .btn-secondary-outline,
    .photo-crop-footer .btn-primary {
      width: 100%;
    }
  }

/* =========================================================
   FINAL FIX - FIELD EMAIL AGAR SEJAJAR DENGAN NAMA
   ========================================================= */
.profile-form-grid {
  align-items: start;
}

.profile-form-grid > .form-group {
  align-self: start;
}

.profile-email-group {
  position: relative;
}

.profile-email-group .profile-label-row {
  position: relative;
  min-height: 22px;
  margin-bottom: 8px;
  display: block;
}

.profile-email-group .profile-label-row label {
  display: inline-block;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  line-height: 22px;
}

.profile-email-group .profile-email-meta {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.profile-email-group .profile-field-status {
  margin: 0;
  height: 20px;
  min-height: 20px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.profile-email-group .profile-inline-link-btn {
  margin: 0;
  padding: 0;
  height: 22px;
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
}

.profile-email-group .profile-inline-link-btn:hover {
  text-decoration: underline;
}

.profile-email-group .profile-field-status.is-verified {
  background: #eef5df;
  color: #0f766e;
}

.profile-email-group .profile-field-status.is-pending {
  background: #fff7e6;
  color: #b45309;
}

.profile-email-group .profile-field-status.is-unverified {
  background: #fee2e2;
  color: #b91c1c;
}

@media (max-width: 640px) {
  .profile-email-group .profile-label-row {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .profile-email-group .profile-email-meta {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* =========================================================
   FINAL ALIGNMENT - SAMAKAN HEADER SETIAP FIELD PROFIL
   ========================================================= */
.profile-standard-group,
.profile-email-group {
  align-self: start;
}

.profile-label-row-fixed {
  min-height: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.profile-label-row-fixed label {
  margin: 0 !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  height: 22px;
}

.profile-email-group .profile-label-row {
  min-height: 22px;
  height: 22px;
  margin-bottom: 8px;
}

.profile-form-grid > .form-group input {
  margin-top: 0 !important;
}

#profileActionButtons {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#profileActionButtons .btn-primary,
#profileActionButtons .btn-secondary-outline {
  margin-left: 0;
}

.profile-bio-group {
  margin-top: 8px;
  margin-bottom: 4px;
}

/* =========================================================
   FINAL SPACING PROFIL - RAPAT & TOMBOL MEPE T KANAN
   ========================================================= */
.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px !important;
  align-items: start;
}

.profile-form-card .form-group {
  margin-bottom: 0 !important;
}

.profile-card-header {
  margin-bottom: 8px !important;
}

.profile-form-group-full {
  grid-column: 1 / -1;
}

.profile-bio-group {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.profile-bio-group label {
  margin-bottom: 6px !important;
}

.profile-form-actions {
  margin-top: 8px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

#profileActionButtons {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
}

#profileActionButtons .btn-primary,
#profileActionButtons .btn-secondary-outline {
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* =========================================================
   FINAL POLISH - MODAL OTP
   ========================================================= */
.otp-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.otp-modal-content {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 22px 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  text-align: center;
}

.otp-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.otp-modal-close:hover {
  background: #e5e7eb;
}

.otp-modal-content h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #111827;
}

.otp-modal-content p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #6b7280;
}

.otp-input {
  width: 100%;
  height: 46px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  color: #111827;
  outline: none;
  box-sizing: border-box;
}

.otp-input:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}

.otp-input::placeholder {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: #9ca3af;
}

.otp-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.otp-submit-btn {
  min-width: 140px;
  height: 44px;
}

.otp-submit-btn .btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: buttonSpin 0.7s linear infinite;
}

/* =========================================================
   STATUS NOMOR HP - RAPI SEPERTI EMAIL
   ========================================================= */
.profile-phone-group {
  align-self: start;
}

.profile-phone-group .profile-field-head {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.profile-phone-group .profile-field-head label {
  margin-bottom: 0 !important;
  line-height: 1.2;
  flex-shrink: 0;
}

.profile-phone-tools {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .profile-phone-group .profile-field-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-phone-tools {
    width: 100%;
    justify-content: flex-start;
  }
}

.profile-phone-group .profile-field-status,
.profile-email-group .profile-field-status {
  min-height: 22px;
  padding: 0 10px;
  font-size: 10px;
  line-height: 1;
}

/* =========================================================
   FINAL CONTACT STATUS - EMAIL & NOMOR HP SERAGAM
   ========================================================= */
.profile-contact-group {
  align-self: start;
}

.profile-contact-head {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.profile-contact-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.profile-contact-label-wrap label {
  margin: 0 !important;
  line-height: 1.2;
  flex-shrink: 0;
}

.profile-contact-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-contact-group .profile-field-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  margin: 0 !important;
}

.profile-contact-group .profile-inline-link-btn {
  margin: 0;
  padding: 0;
  min-height: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
}

.profile-contact-group .profile-inline-link-btn:hover {
  text-decoration: underline;
}

.profile-contact-group .profile-field-status.is-verified {
  background: #eef5df;
  color: #0f766e;
}

.profile-contact-group .profile-field-status.is-pending {
  background: #fff7e6;
  color: #b45309;
}

.profile-contact-group .profile-field-status.is-unverified {
  background: #fee2e2;
  color: #b91c1c;
}

@media (max-width: 760px) {
  .profile-contact-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-contact-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

  /* =========================================================
     HALAMAN UBAH SANDI
     ========================================================= */
  .feature-hero-ubah-sandi {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(135deg, rgba(16, 41, 61, 0.96) 0%, rgba(36, 90, 115, 0.94) 58%, rgba(47, 120, 146, 0.88) 100%);
    border-radius: 28px;
    padding: 34px 34px 30px;
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.10);
  }

  .feature-hero-ubah-sandi .feature-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
  }

  .feature-hero-ubah-sandi .feature-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
  }

  .feature-hero-ubah-sandi h1 {
    font-size: 34px;
    line-height: 1.18;
    font-weight: 700;
    margin: 0 0 12px;
    color: #ffffff;
  }

  .feature-hero-ubah-sandi p {
    margin: 0;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.9;
    color: rgba(248, 250, 252, 0.96);
    text-align: justify;
    text-justify: inter-word;
  }

  .feature-hero-ubah-sandi .feature-hero-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background:
      radial-gradient(circle at top right, rgba(255,255,255,0.34) 0, rgba(255,255,255,0) 34%),
      radial-gradient(circle at bottom left, rgba(255,255,255,0.20) 0, rgba(255,255,255,0) 32%);
  }

  .ubah-sandi-layout {
    margin-top: 22px;
  }

  .ubah-sandi-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
    overflow: hidden;
  }

  .ubah-sandi-card-header {
    padding: 26px 28px 18px;
    border-bottom: 1px solid #eef2f7;
    background:
      linear-gradient(180deg, #ffffff 0%, #fcfdfb 100%);
  }

  .ubah-sandi-card-header h3 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: #111827;
  }

  .ubah-sandi-card-header p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: #4b5563;
  }

  .ubah-sandi-card-body {
    padding: 26px 28px 30px;
  }

  .ubah-sandi-info-box {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;
    align-items: start;
    background: linear-gradient(180deg, #f8fbf2 0%, #f5f8ed 100%);
    border: 1px solid #dbe7bd;
    border-radius: 20px;
    padding: 18px 18px;
    margin-bottom: 22px;
  }

  .ubah-sandi-info-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f766e 0%, #0d615b 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.20);
    flex-shrink: 0;
  }

  .ubah-sandi-info-icon svg {
    width: 24px;
    height: 24px;
    display: block;
  }

  .ubah-sandi-info-text h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #24310a;
  }

  .ubah-sandi-info-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.85;
    color: #385466;
    text-align: justify;
    text-justify: inter-word;
  }

  .ubah-sandi-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .ubah-sandi-card .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
  }

  .ubah-sandi-card .form-group input[type="password"],
  .ubah-sandi-card .form-group input[type="text"] {
    width: 100%;
    height: 52px;
    border: 1px solid #d8dee8;
    border-radius: 16px;
    padding: 0 52px 0 16px;
    font-size: 14px;
    color: #111827;
    background: #fbfcfd;
    outline: none;
    transition: all 0.2s ease;
  }

  .ubah-sandi-card .form-group input[type="password"]:focus,
  .ubah-sandi-card .form-group input[type="text"]:focus {
    border-color: #0d615b;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
  }

  .ubah-sandi-card .form-group input::placeholder {
    color: #9ca3af;
  }

  .ubah-sandi-card .password-input-wrap {
    position: relative;
  }

  .ubah-sandi-card .password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .ubah-sandi-card .password-toggle:hover {
    color: #10293d;
    transform: translateY(-50%) scale(1.04);
  }

  .ubah-sandi-help-list {
    margin: 2px 0 0;
    padding-left: 18px;
    color: #4b5563;
  }

  .ubah-sandi-help-list li {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.75;
  }

  .ubah-sandi-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
  }

  .ubah-sandi-submit-btn {
    min-width: 280px;
    min-height: 52px;
    border: none;
    border-radius: 16px;
    padding: 0 24px;
    background: linear-gradient(135deg, #0f766e 0%, #0d615b 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 16px 32px rgba(15, 118, 110, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }

  .ubah-sandi-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15, 118, 110, 0.22);
  }

  .ubah-sandi-submit-btn:active {
    transform: translateY(0);
  }

  .ubah-sandi-submit-btn[disabled] {
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.12);
  }

  .ubah-sandi-note {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px dashed #d6dec3;
    background: #fafcf7;
    font-size: 12.5px;
    line-height: 1.8;
    color: #55614a;
  }

  .ubah-sandi-note strong {
    color: #24310a;
  }

  @media (max-width: 860px) {
    .feature-hero-ubah-sandi {
      padding: 28px 22px 24px;
      border-radius: 24px;
    }

    .feature-hero-ubah-sandi h1 {
      font-size: 28px;
    }

    .ubah-sandi-card-header,
    .ubah-sandi-card-body {
      padding-left: 20px;
      padding-right: 20px;
    }

    .ubah-sandi-info-box {
      grid-template-columns: 1fr;
    }

    .ubah-sandi-info-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
    }

    .ubah-sandi-actions {
      justify-content: stretch;
    }

    .ubah-sandi-submit-btn {
      width: 100%;
      min-width: 0;
    }
  }

  @media (max-width: 640px) {
    .feature-hero-ubah-sandi {
      padding: 24px 18px 22px;
      border-radius: 22px;
    }

    .feature-hero-ubah-sandi .feature-hero-badge {
      font-size: 11px;
      padding: 7px 12px;
    }

    .feature-hero-ubah-sandi h1 {
      font-size: 24px;
    }

    .feature-hero-ubah-sandi p {
      font-size: 13px;
      line-height: 1.8;
      text-align: left;
    }

    .ubah-sandi-card {
      border-radius: 22px;
    }

    .ubah-sandi-card-header h3 {
      font-size: 20px;
    }

    .ubah-sandi-card .form-group input[type="password"],
    .ubah-sandi-card .form-group input[type="text"] {
      height: 50px;
      border-radius: 14px;
      font-size: 13px;
    }

    .ubah-sandi-submit-btn {
      min-height: 50px;
      border-radius: 14px;
      font-size: 13px;
    }

    .ubah-sandi-note {
      font-size: 12px;
    }
  }

/* =========================================================
   KOMPATIBILITAS HEADER LAMA
   Menjaga class lama agar tidak menimpa header final
   ========================================================= */
.modern-brand-button {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modern-brand-button:hover {
  opacity: 0.98;
  transform: translateY(-1px);
}

.modern-brand-button:focus {
  outline: none;
}

/* Nonaktifkan sistem subpage lama agar tidak menimpa header final */
.subpage-topbar,
.subpage-topbar-left,
.subpage-topbar-right,
.subpage-brand,
.subpage-back-button,
.subpage-user-dropdown,
.subpage-user-trigger,
.subpage-user-avatar,
.subpage-user-meta,
.subpage-user-chevron,
.subpage-user-menu {
  all: unset;
}

    /* =========================================================
     FINAL FIX - HEADER SUBPAGE SERAGAM
     Berlaku untuk Profil Saya, Ubah Sandi, dan subpage lain
     Dashboard utama tetap pakai modern-topbar biasa
     ========================================================= */
  .profile-topbar {
    position: sticky;
    top: 12px;
    z-index: 100;
    margin-bottom: 24px;
  }

  .profile-logo-button {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
  }

  .profile-logo-button .app-logo {
    width: 58px;
    height: 58px;
    margin-bottom: 0;
    border-radius: 18px;
    padding: 10px;
  }

  .profile-logo-button:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.02);
  }

  .profile-logo-button:active {
    transform: translateY(0) scale(0.95);
  }

  .profile-logo-button:focus {
    outline: none;
  }

  .profile-topbar .profile-only-user-menu {
    width: 156px;
    min-width: 156px;
  }

  .profile-topbar .profile-only-user-menu .modern-user-menu-item {
    padding: 12px 14px;
    border-radius: 12px;
  }

  @media (max-width: 900px) {
    .profile-topbar {
      flex-direction: column;
      align-items: stretch;
    }

    .profile-topbar .modern-user-trigger {
      width: 100%;
      min-width: 0;
    }
  }

  @media (max-width: 640px) {
    .profile-logo-button .app-logo {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      padding: 9px;
    }

    .profile-topbar .profile-only-user-menu {
      width: 100%;
      min-width: 0;
      right: 0;
    }
  }

  
  /* =========================================================
     PETA INFORMASI TATA RUANG
     BLOK BERSIH - KHUSUS PetaInformasi.html
     ========================================================= */

  .webgis-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #dfe7ec;
  }

  .webgis-map-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: #dfe7ec;
  }

  .webgis-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  /* =========================================
     HEADER OVERLAY
     ========================================= */
  .webgis-overlay-header {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    pointer-events: none;
  }

  .webgis-overlay-header > * {
    pointer-events: auto;
  }

  .webgis-overlay-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* =========================================
     KARTU HOME / BRAND
     ========================================= */
  .webgis-home-card {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: 52px;
    min-height: 52px;
    padding: 0 16px 0 12px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 18px;
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
    cursor: default;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background-color 0.18s ease,
      border-color 0.18s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .webgis-home-logo-button {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      opacity 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .webgis-home-logo-button:hover {
    transform: translateY(-1px);
  }

  .webgis-home-logo-button:active {
    transform: scale(.96);
  }

  .webgis-home-logo-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(15, 118, 110,.14);
  }

  .webgis-home-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
  }

  .webgis-home-logo .app-logo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 14px rgba(15,23,42,.08) !important;
    backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  .webgis-home-logo .app-logo img,
  .webgis-home-logo .app-logo svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: contain !important;
  }

  .webgis-home-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.05;
    min-height: 36px;
    margin: 0;
  }

  .webgis-home-text strong,
  .webgis-home-text small {
    transition: transform 0.18s ease, opacity 0.18s ease;
  }

  .webgis-home-text strong {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    line-height: 1.05;
  }

  .webgis-home-text small {
    margin: 2px 0 0;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1.05;
  }

  .webgis-home-card:hover .webgis-home-logo .app-logo {
    transform: scale(1.03);
  }

  .webgis-home-card:active .webgis-home-logo .app-logo {
    transform: scale(0.98);
  }

  .webgis-home-card:hover .webgis-home-text strong,
  .webgis-home-card:hover .webgis-home-text small {
    transform: translateX(1px);
  }

  /* =========================================
     SEARCH BOX
     ========================================= */
  .webgis-search-card {
    position: relative;
    width: 320px;
    max-width: 90vw;
  }

  .webgis-search-box {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
  }

  .webgis-search-box svg {
    color: #6b7280;
    flex-shrink: 0;
  }

  .webgis-search-box input {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
    font-size: 14px;
    color: #111827;
  }

  .webgis-search-box input::placeholder {
    color: #9ca3af;
  }

  .webgis-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 1600 !important;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
  }

  .webgis-search-item {
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(243,244,246,.95);
    font-size: 13px;
    color: #111827;
    line-height: 1.5;
    transition: background .15s ease;
    background: transparent;
  }

  .webgis-search-item:hover {
    background: rgba(249,250,251,.95);
  }

  .webgis-search-item:last-child {
    border-bottom: none;
  }

  /* =========================================
     USER MINI DROPDOWN OVERRIDE
     ========================================= */
  .webgis-user-dropdown {
    position: relative;
  }

  .webgis-user-trigger-mini {
    height: 52px;
    min-height: 52px;
    padding: 0 12px 0 10px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(15,23,42,.12);
  }

  .webgis-user-meta-mini {
    display: flex;
    align-items: center;
  }

  .webgis-user-meta-mini strong {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .webgis-user-menu-mini {
    min-width: 160px;
  }

  /* =========================================
     TOMBOL KONTROL PETA
     ========================================= */
  .webgis-home-map-btn,
  .webgis-my-location-floating,
  .webgis-basemap-toggle {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 16px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 26px rgba(15,23,42,.12);
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    margin: 0;
  }

  .webgis-home-map-btn svg,
  .webgis-my-location-floating svg {
    width: 20px;
    height: 20px;
  }

  .webgis-basemap-toggle svg {
    width: 22px;
    height: 22px;
  }

  .webgis-home-map-btn:hover,
  .webgis-my-location-floating:hover,
  .webgis-basemap-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.92);
  }

  .webgis-home-map-btn:active,
  .webgis-my-location-floating:active,
  .webgis-basemap-toggle:active {
    transform: scale(.97);
  }

  .webgis-home-map-btn:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 4px rgba(15, 118, 110,.14),
      0 16px 26px rgba(15,23,42,.12);
  }

  .webgis-my-location-floating:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 4px rgba(59,130,246,.12),
      0 16px 26px rgba(15,23,42,.12);
  }

  .webgis-my-location-floating {
    position: absolute;
    top: 298px;
    left: 18px;
    z-index: 900 !important;
  }

  .webgis-basemap-toggle {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 1001;
  }

  /* =========================================
     BASEMAP STACK
     ========================================= */
  .webgis-basemap-stack {
    position: absolute;
    left: 18px;
    bottom: 72px;
    z-index: 1001;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
  }

  .webgis-basemap-stack.is-open {
    pointer-events: auto;
  }

  .webgis-basemap-stack:not(.is-open) .webgis-basemap-card {
    pointer-events: none;
  }

  .webgis-basemap-card {
    position: relative;
    width: 150px;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 18px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 28px rgba(15,23,42,.10);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(.96);
    transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .webgis-basemap-stack.is-open .webgis-basemap-card {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .webgis-basemap-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15,23,42,.12);
  }

  .webgis-basemap-card.active {
    border: 1.6px solid rgba(15, 118, 110,.55);
    background: rgba(255,255,255,.94);
    box-shadow:
      0 0 0 3px rgba(15, 118, 110,.08),
      0 18px 34px rgba(15, 118, 110,.14);
    transform: translateY(-1px);
  }

  .webgis-basemap-card.active .webgis-basemap-name {
    color: #2f3e00;
  }

  .webgis-basemap-card.active::after {
    content: "✓";
    position: absolute;
    top: 7px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 118, 110,.92);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 6px 12px rgba(15, 118, 110,.18);
  }

  .webgis-basemap-thumb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    border: 1px solid rgba(17,24,39,.08);
  }

  .webgis-basemap-name {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    text-align: left;
  }

  /* OSM thumbnail */
  .thumb-osm {
    background: linear-gradient(135deg, #eef7e8 0%, #f7faf8 100%);
  }

  .thumb-osm span:nth-child(1) {
    position: absolute;
    inset: 7px 6px auto 6px;
    height: 3px;
    border-radius: 999px;
    background: #d4a017;
    transform: rotate(-18deg);
  }

  .thumb-osm span:nth-child(2) {
    position: absolute;
    inset: 19px 5px auto 8px;
    height: 2px;
    border-radius: 999px;
    background: #9ca3af;
    transform: rotate(22deg);
  }

  .thumb-osm span:nth-child(3) {
    position: absolute;
    width: 14px;
    height: 14px;
    right: 6px;
    bottom: 6px;
    border-radius: 6px;
    background: rgba(86,148,76,.45);
  }

  /* Google Satellite thumbnail */
  .thumb-google-satellite {
    background: linear-gradient(135deg, #10293d 0%, #245a73 35%, #2f7892 68%, #8bc8c0 100%);
  }

  .thumb-google-satellite span:nth-child(1),
  .thumb-google-satellite span:nth-child(2),
  .thumb-google-satellite span:nth-child(3) {
    position: absolute;
    border-radius: 8px;
    opacity: .9;
  }

  .thumb-google-satellite span:nth-child(1) {
    width: 18px;
    height: 10px;
    top: 6px;
    left: 5px;
    background: rgba(57,89,39,.65);
    transform: rotate(-12deg);
  }

  .thumb-google-satellite span:nth-child(2) {
    width: 16px;
    height: 12px;
    right: 5px;
    top: 11px;
    background: rgba(132,113,77,.65);
    transform: rotate(8deg);
  }

  .thumb-google-satellite span:nth-child(3) {
    width: 20px;
    height: 9px;
    left: 10px;
    bottom: 7px;
    background: rgba(170,154,112,.65);
    transform: rotate(-8deg);
  }

  /* ATR/BPN thumbnail */
  .thumb-atrbpn {
    background: linear-gradient(135deg, #dbe7d8 0%, #edf3ea 38%, #d2c7b6 68%, #c1b39a 100%);
  }

  .thumb-atrbpn span:nth-child(1) {
    position: absolute;
    inset: 6px auto auto 6px;
    width: 28px;
    height: 1.8px;
    background: rgba(17,24,39,.45);
    transform: rotate(-18deg);
  }

  .thumb-atrbpn span:nth-child(2) {
    position: absolute;
    inset: 16px auto auto 4px;
    width: 34px;
    height: 1.8px;
    background: rgba(17,24,39,.35);
    transform: rotate(-18deg);
  }

  .thumb-atrbpn span:nth-child(3) {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, transparent 0 24%, rgba(255,255,255,.45) 24% 26%, transparent 26% 49%, rgba(255,255,255,.45) 49% 51%, transparent 51% 74%, rgba(255,255,255,.42) 74% 76%, transparent 76% 100%),
      linear-gradient(0deg, transparent 0 24%, rgba(255,255,255,.42) 24% 26%, transparent 26% 49%, rgba(255,255,255,.42) 49% 51%, transparent 51% 74%, rgba(255,255,255,.42) 74% 76%, transparent 76% 100%);
    opacity: .85;
  }

  /* =========================================
     SCALE & COORDINATE
     ========================================= */
  .webgis-scale-box {
    position: absolute;
    right: 18px;
    bottom: 62px;
    z-index: 1000;
    width: 128px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 14px 24px rgba(15,23,42,.08);
  }

  .webgis-scale-bar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
  }

  .webgis-scale-bar {
    height: 7px;
    border-left: 2px solid #111827;
    border-right: 2px solid #111827;
    border-bottom: 2px solid #111827;
    border-radius: 0 0 4px 4px;
    min-width: 42px;
  }

  .webgis-scale-label {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    line-height: 1.1;
  }

  .webgis-scale-ratio {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    margin-top: 2px;
    letter-spacing: .2px;
  }

  .webgis-coordinate-box {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    min-width: 170px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 3px;
    border-radius: 14px;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 16px 26px rgba(15,23,42,.10);
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
  }

  /* =========================================
     BOTTOM TOOLBAR
     ========================================= */
  .webgis-bottom-toolbar {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 24px;
    background: rgba(255,255,255,.34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 14px 28px rgba(15,23,42,.08);
  }

  .webgis-bottom-tool {
    width: 78px;
    min-height: 68px;
    border: 1px solid rgba(255,255,255,.42);
    background: rgba(255,255,255,.74);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all .18s ease;
  }

  .webgis-bottom-tool:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.95);
    box-shadow: 0 14px 22px rgba(15,23,42,.08);
  }

  .webgis-bottom-tool:active {
    transform: scale(.97);
  }

  .webgis-bottom-tool .tool-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
  }

  .webgis-bottom-tool .tool-icon svg {
    width: 22px;
    height: 22px;
  }

  .webgis-bottom-tool span:last-child {
    font-size: 11px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
  }

  /* =========================================
     MEASURE MODAL
     ========================================= */
.webgis-measure-modal-backdrop {
  position: absolute;
  top: 84px;
  right: 18px;
  bottom: 18px;
  z-index: 1260;

  pointer-events: none;
  transform: translateX(calc(100% + 36px));
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}

.webgis-measure-modal-backdrop.is-open {
  pointer-events: auto;
  transform: translateX(0);
  opacity: 1;
}

  .webgis-measure-modal {
    width: min(390px, calc(100vw - 36px));
    height: 100%;
    border-radius: 26px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 20px 48px rgba(15,23,42,.14);
    padding: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .webgis-measure-header {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }

  .webgis-measure-header h3 {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
  }

  .webgis-measure-header p {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
  }

  .webgis-measure-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 14px;
    background: rgba(243,244,246,.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .webgis-measure-close svg {
    width: 18px;
    height: 18px;
  }

  .webgis-measure-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .webgis-measure-mode-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }

  .webgis-measure-mode-btn {
    min-height: 84px;
    border-radius: 20px;
    border: 1px solid rgba(229,231,235,.95);
    background: rgba(255,255,255,.84);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      border-color .16s ease,
      background .16s ease;
  }

  .webgis-measure-mode-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(15,23,42,.06);
  }

  .webgis-measure-mode-btn:active {
    transform: scale(.96);
  }

  .webgis-measure-mode-btn.active {
    border-color: rgba(15, 118, 110,.45);
    background: rgba(15, 118, 110,.08);
    box-shadow: 0 0 0 3px rgba(15, 118, 110,.08);
  }

  .webgis-measure-mode-btn .tool-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .webgis-measure-mode-btn .tool-icon svg {
    width: 22px;
    height: 22px;
  }

  .webgis-measure-mode-btn span:last-child {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
  }

  .webgis-measure-color-group {
    margin-bottom: 0;
  }

  .webgis-measure-color-group label,
  .webgis-measure-form label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
  }

  .webgis-measure-color-group label {
    margin-bottom: 10px;
  }

  .webgis-measure-color-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
  }

  .measure-color-chip {
    width: 100%;
    height: 38px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 14px rgba(15,23,42,.10);
    cursor: pointer;
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      border-color .16s ease,
      background .16s ease;
  }

  .measure-color-chip[data-color="#0f766e"] { background: #0f766e; }
  .measure-color-chip[data-color="#2563eb"] { background: #2563eb; }
  .measure-color-chip[data-color="#dc2626"] { background: #dc2626; }
  .measure-color-chip[data-color="#ea580c"] { background: #ea580c; }
  .measure-color-chip[data-color="#7c3aed"] { background: #7c3aed; }

  .measure-color-chip:hover {
    transform: translateY(-1px);
  }

  .measure-color-chip:active {
    transform: scale(.97);
  }

  .measure-color-chip.active {
    box-shadow: 0 0 0 4px rgba(17,24,39,.08), 0 6px 14px rgba(15,23,42,.14);
    border-color: #ffffff;
  }

  .webgis-measure-form {
    margin-bottom: 16px;
  }

  .webgis-measure-form label {
    margin-bottom: 8px;
  }

  .webgis-measure-form input {
    width: 100%;
    height: 48px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: rgba(255,255,255,.95);
    padding: 0 14px;
    font-size: 14px;
    color: #111827;
    outline: none;
  }

  .webgis-measure-form input:focus {
    border-color: rgba(15, 118, 110,.42);
    box-shadow: 0 0 0 4px rgba(15, 118, 110,.08);
  }

  .webgis-measure-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
  }

  .webgis-measure-action-btn {
    height: 46px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    vertical-align: middle;
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      background .16s ease,
      border-color .16s ease;
  }

  .webgis-measure-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(15,23,42,.08);
  }

  .webgis-measure-action-btn:active {
    transform: translateY(0) scale(.97);
  }

  .webgis-measure-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(15, 118, 110,.10);
  }

  .webgis-measure-action-btn.primary {
    background: linear-gradient(135deg, #0f766e, #245a73);
    color: #fff;
    border: none;
  }

  .webgis-measure-action-btn.primary:hover {
    box-shadow: 0 14px 22px rgba(15, 118, 110,.22);
  }

  .webgis-measure-action-btn.success {
    background: linear-gradient(135deg, #2563eb, #4f8df5);
    color: #fff;
    border: none;
    box-shadow: 0 10px 18px rgba(37,99,235,.18);
  }

  .webgis-measure-action-btn.success:hover {
    box-shadow: 0 14px 22px rgba(37,99,235,.22);
  }

  .webgis-measure-action-btn.subtle {
    color: #6b7280;
  }

  .webgis-measure-action-btn.subtle:hover {
    background: rgba(243,244,246,.96);
  }

  .webgis-measure-action-btn:disabled {
    opacity: .72;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }

  .webgis-measure-hint {
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(249,250,251,.95);
  }

  .webgis-measure-result {
    border-radius: 18px;
    background: rgba(249,250,251,.96);
    border: 1px solid rgba(229,231,235,.92);
    padding: 14px;
  }

  .webgis-measure-result-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 13px;
  }

  .webgis-measure-result-row span {
    color: #6b7280;
  }

  .webgis-measure-result-row strong {
    color: #111827;
    text-align: right;
  }

  .webgis-measure-drawing-cursor {
    cursor: crosshair !important;
  }

  /* =========================================
     LAYER PANEL
     ========================================= */
  .webgis-layer-panel-shell {
    position: absolute;
    top: 84px;
    right: 18px;
    bottom: 18px;
    z-index: 1250;
    display: none;
    pointer-events: none;
  }

  .webgis-layer-panel-shell.is-open {
    display: block;
    pointer-events: auto;
  }

  .webgis-layer-panel {
    width: min(390px, calc(100vw - 36px));
    height: 100%;
    border-radius: 26px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: 0 20px 48px rgba(15,23,42,.14);
    padding: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .webgis-layer-panel-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .webgis-layer-panel-header h3 {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
  }

  .webgis-layer-panel-header p {
    font-size: 13px;
    color: #6b7280;
  }

  .webgis-layer-panel-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 14px;
    background: rgba(243,244,246,.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .webgis-layer-panel-close svg {
    width: 18px;
    height: 18px;
  }

  .webgis-layer-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .webgis-layer-empty {
    padding: 18px;
    border-radius: 18px;
    background: rgba(249,250,251,.95);
    border: 1px solid rgba(229,231,235,.9);
    font-size: 13px;
    color: #6b7280;
    text-align: center;
  }

  .webgis-layer-card {
    position: relative;
    border-radius: 20px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(229,231,235,.95);
    box-shadow: 0 10px 20px rgba(15,23,42,.05);
    padding: 14px;
  }

  .webgis-layer-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .webgis-layer-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .webgis-layer-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
  }

  .webgis-layer-card-title strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
  }

  .webgis-layer-card-title span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
  }

  .webgis-layer-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .webgis-layer-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .webgis-layer-tool-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(229,231,235,.95);
    border-radius: 12px;
    background: rgba(249,250,251,.96);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
  }

  .webgis-layer-tool-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,1);
    box-shadow: 0 8px 14px rgba(15,23,42,.06);
  }

  .webgis-layer-tool-btn:active {
    transform: scale(.96);
  }

  .webgis-layer-tool-btn svg {
    width: 16px;
    height: 16px;
    stroke: #111827;
  }

  .webgis-layer-opacity {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .webgis-layer-opacity label {
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
    min-width: 72px;
  }

  .webgis-layer-opacity input[type="range"] {
    width: 100%;
  }

  .webgis-layer-download-menu {
    display: none;
    position: absolute;
    top: 56px;
    right: 14px;
    z-index: 2;
    min-width: 132px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(229,231,235,.95);
    box-shadow: 0 16px 28px rgba(15,23,42,.10);
  }

  .webgis-layer-download-menu.is-open {
    display: block;
  }

  .webgis-layer-download-menu button {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
  }

  .webgis-layer-download-menu button:hover {
    background: rgba(243,244,246,.95);
  }

.webgis-layer-panel-close {
  position: relative;
  z-index: 30;
  pointer-events: auto;
}
  /* =========================================
     LEAFLET OVERRIDES
     ========================================= */
  .leaflet-top.leaflet-left {
    top: 194px;
    left: 18px;
  }

  .leaflet-control-zoom {
    margin: 0 !important;
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 16px 26px rgba(15,23,42,.12) !important;
  }

  .leaflet-control-zoom a {
    width: 46px !important;
    height: 46px !important;
    line-height: 46px !important;
    font-size: 22px !important;
    color: #111827 !important;
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none !important;
  }

  .leaflet-control-zoom a:hover {
    background: rgba(255,255,255,.92) !important;
  }

  .leaflet-control-zoom-in {
    border-bottom: 1px solid rgba(229,231,235,.9) !important;
  }

  .leaflet-control-attribution {
    display: none !important;
  }

  .leaflet-control-scale {
    display: none !important;
  }

  .leaflet-bottom.leaflet-right {
    right: 18px;
    bottom: 82px;
  }

  /* =========================================
     SCROLLBAR
     ========================================= */
  .webgis-measure-content::-webkit-scrollbar,
  .webgis-layer-panel-body::-webkit-scrollbar {
    width: 8px;
  }

  .webgis-measure-content::-webkit-scrollbar-track,
  .webgis-layer-panel-body::-webkit-scrollbar-track {
    background: transparent;
  }

  .webgis-measure-content::-webkit-scrollbar-thumb,
  .webgis-layer-panel-body::-webkit-scrollbar-thumb {
    background: rgba(156,163,175,.45);
    border-radius: 999px;
  }

  .webgis-measure-content::-webkit-scrollbar-thumb:hover,
  .webgis-layer-panel-body::-webkit-scrollbar-thumb:hover {
    background: rgba(107,114,128,.55);
  }

  /* =========================================
     RESPONSIVE
     ========================================= */
  @media (max-width: 768px) {
    .webgis-overlay-header {
      top: 14px;
      left: 14px;
      right: 14px;
      flex-direction: column;
      align-items: stretch;
    }

    .webgis-home-card,
    .webgis-user-trigger-mini {
      width: 100%;
      height: 50px;
      min-height: 50px;
    }

    .webgis-home-text strong {
      font-size: 12px;
    }

    .webgis-home-text small {
      font-size: 9px;
    }

    .leaflet-top.leaflet-left {
      left: 14px;
    }

    .leaflet-bottom.leaflet-right {
      right: 14px;
      bottom: 74px;
    }

    .webgis-my-location-floating {
      top: 286px;
      left: 14px;
    }

    .webgis-basemap-toggle {
      left: 14px;
      bottom: 14px;
    }

    .webgis-basemap-stack {
      left: 14px;
      bottom: 68px;
    }

    .webgis-basemap-card {
      width: 138px;
      min-height: 54px;
    }

    .webgis-basemap-thumb {
      width: 38px;
      height: 38px;
    }

    .webgis-bottom-toolbar {
      gap: 6px;
      padding: 8px 10px;
      bottom: 12px;
    }

    .webgis-bottom-tool {
      width: 62px;
      min-height: 58px;
    }

    .webgis-bottom-tool span:last-child {
      font-size: 10px;
    }

    .webgis-measure-modal-backdrop,
    .webgis-layer-panel-shell {
    top: 152px;
    right: 14px;
    left: 14px;
    bottom: 18px;
    }

    .webgis-measure-modal,
    .webgis-layer-panel {
      width: 100%;
    }

    .webgis-measure-modal {
      padding: 16px;
      border-radius: 22px;
    }

    .webgis-measure-mode-group {
      grid-template-columns: 1fr;
    }

    .webgis-measure-actions {
      flex-wrap: wrap;
    }
  }

  /* =========================================================
   CETAK PETA / PRINT LAYOUT
   ========================================================= */
.webgis-print-panel-shell {
  position: absolute;
  top: 84px;
  right: 18px;
  bottom: 18px;
  z-index: 1270;
  display: none;
  pointer-events: none;
}

.webgis-print-panel-shell.is-open {
  display: block;
  pointer-events: auto;
}

.webgis-print-panel {
  width: min(390px, calc(100vw - 36px));
  height: 100%;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 20px 48px rgba(15,23,42,.14);
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.webgis-print-panel-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.webgis-print-panel-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 4px;
}

.webgis-print-panel-header p {
  font-size: 13px;
  color: #6b7280;
}

.webgis-print-panel-close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 14px;
  background: rgba(243,244,246,.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.webgis-print-panel-close svg {
  width: 18px;
  height: 18px;
}

.webgis-print-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.webgis-print-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.webgis-print-form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.webgis-print-form-group input,
.webgis-print-form-group select {
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: rgba(255,255,255,.95);
  padding: 0 14px;
  font-size: 14px;
  color: #111827;
  outline: none;
}

.webgis-print-form-group input:focus,
.webgis-print-form-group select:focus {
  border-color: rgba(15, 118, 110,.42);
  box-shadow: 0 0 0 4px rgba(15, 118, 110,.08);
}

.webgis-print-note-box {
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(249,250,251,.95);
}

.webgis-print-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.webgis-print-action-btn {
  height: 46px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.webgis-print-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(15,23,42,.08);
}

.webgis-print-action-btn.primary {
  background: linear-gradient(135deg, #0f766e, #245a73);
  color: #fff;
  border: none;
}

.webgis-print-action-btn.secondary {
  background: linear-gradient(135deg, #2563eb, #4f8df5);
  color: #fff;
  border: none;
}

.webgis-print-action-btn.subtle {
  color: #6b7280;
}

/* ===== print layout hidden on screen until preview ===== */
.webgis-print-layout-shell {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(15,23,42,.42);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.webgis-print-layout-shell.is-open {
  display: flex;
}

.webgis-print-layout-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 18px;
}

.webgis-print-layout-loading.is-active {
  display: flex;
}

.webgis-print-layout-loading-card {
  width: min(360px, calc(100vw - 48px));
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 18px;
  box-shadow: 0 18px 34px rgba(15,23,42,.12);
  padding: 22px 20px;
  text-align: center;
}

.webgis-print-layout-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 14px;
  border-radius: 999px;
  border: 4px solid rgba(15, 118, 110,.14);
  border-top-color: #0f766e;
  animation: webgisPrintSpin 0.9s linear infinite;
}

.webgis-print-layout-loading-text {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 6px;
}

.webgis-print-layout-loading-subtext {
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280;
}

@keyframes webgisPrintSpin {
  to {
    transform: rotate(360deg);
  }
}

.webgis-print-layout-page {
  width: min(1200px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  overflow: overlay;
  clip-path: inset(0 round 18px);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.20);
  padding: 24px;
}

.webgis-print-layout-page::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.webgis-print-layout-page::-webkit-scrollbar-track {
  background: transparent;
  margin: 14px 0;
}

.webgis-print-layout-page::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
  border: 3px solid #ffffff;
}

.webgis-print-layout-page::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.72);
}

.webgis-print-layout-page {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.65) transparent;
}

.webgis-print-layout-page.paper-a4.landscape {
  aspect-ratio: 1.414 / 1;
}

.webgis-print-layout-page.paper-a4.portrait {
  aspect-ratio: 1 / 1.414;
}

.webgis-print-layout-page.paper-a3.landscape {
  aspect-ratio: 1.414 / 1;
}

.webgis-print-layout-page.paper-a3.portrait {
  aspect-ratio: 1 / 1.414;
}

.webgis-print-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.webgis-print-brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.webgis-print-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
}

.webgis-print-brand-logo .app-logo {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.webgis-print-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
}

.webgis-print-brand-text strong {
  font-size: 22px;
  line-height: 1.18;
  color: #111827;
  font-weight: 800;
  margin: 0;
}

.webgis-print-brand-text span {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.25;
  margin: 0;
}

.webgis-print-meta {
  text-align: right;
  font-size: 12px;
  color: #374151;
  line-height: 1.7;
}

.webgis-print-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
}

.webgis-print-map-wrap {
  position: relative;
  min-height: 620px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
  isolation: isolate;
}

.webgis-print-map {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 620px;
}

.webgis-print-north-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1200;
  width: 56px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(209,213,219,.9);
  border-radius: 14px;
  padding: 8px 6px 6px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(15,23,42,.10);
  pointer-events: none;
}

.north-arrow-label {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 2px;
}

.webgis-print-north-arrow svg {
  width: 36px;
  height: 36px;
}

.webgis-print-scale-box {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1200;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(209,213,219,.9);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 8px 16px rgba(15,23,42,.10);
  pointer-events: none;
}

.webgis-print-scale-bar {
  width: 160px;
  height: 8px;
  border-left: 2px solid #111827;
  border-right: 2px solid #111827;
  border-bottom: 2px solid #111827;
  margin-bottom: 6px;
}

.webgis-print-scale-label {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.webgis-print-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.webgis-print-sidebar-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: #ffffff;
}

.webgis-print-sidebar-card h4 {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 12px;
}

.webgis-print-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.webgis-print-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: #374151;
}

.webgis-print-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #374151;
}

.webgis-print-footer {
  margin-top: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.webgis-print-footer p {
  font-size: 11px;
  line-height: 1.6;
  color: #4b5563;
}

@media (max-width: 900px) {
  .webgis-print-panel-shell {
    top: 152px;
    right: 14px;
    left: 14px;
    bottom: 148px;
  }

  .webgis-print-panel {
    width: 100%;
  }

  .webgis-print-grid {
    grid-template-columns: 1fr;
  }

  .webgis-print-layout-page {
    padding: 16px;
  }

  .webgis-print-main {
    grid-template-columns: 1fr;
  }

  .webgis-print-map-wrap,
  .webgis-print-map {
    min-height: 420px;
  }

  .webgis-print-header {
    flex-direction: column;
  }

  .webgis-print-meta {
    text-align: left;
  }
}

/* ===== print mode ===== */
@media print {
  body * {
    visibility: hidden !important;
  }

  #webgisPrintLayoutShell,
  #webgisPrintLayoutShell * {
    visibility: visible !important;
  }

  #webgisPrintLayoutShell {
    position: static !important;
    inset: auto !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .webgis-print-layout-page {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .webgis-print-panel-shell,
  .webgis-layer-panel-shell,
  .webgis-measure-modal-backdrop,
  .webgis-bottom-toolbar,
  .webgis-overlay-header,
  .webgis-basemap-stack,
  .webgis-basemap-toggle,
  .webgis-my-location-floating,
  .webgis-scale-box,
  .webgis-coordinate-box {
    display: none !important;
  }
}

.webgis-print-action-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ADD DATA PANEL
   ========================================================= */
.webgis-adddata-shell {
  position: absolute;
  top: 84px;
  right: 18px;
  bottom: 18px;
  z-index: 1275;
  pointer-events: none;
}

.webgis-adddata-shell.is-open {
  pointer-events: auto;
}

.webgis-adddata-panel {
  width: min(420px, calc(100vw - 36px));
  height: 100%;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 20px 48px rgba(15,23,42,.14);
  padding: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.webgis-adddata-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.webgis-adddata-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 4px;
}

.webgis-adddata-header p {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

.webgis-adddata-close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 14px;
  background: rgba(243,244,246,.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.webgis-adddata-close svg {
  width: 18px;
  height: 18px;
}

.webgis-adddata-tabs {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.webgis-adddata-tab {
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,.95);
  background: rgba(255,255,255,.9);
  font-size: 12px;
  font-weight: 800;
  color: #374151;
  cursor: pointer;
  transition: all .16s ease;
}

.webgis-adddata-tab:hover {
  transform: translateY(-1px);
}

.webgis-adddata-tab.active {
  background: linear-gradient(135deg, #0f766e, #245a73);
  color: #ffffff;
  border: none;
  box-shadow: 0 10px 18px rgba(15, 118, 110,.18);
}

.webgis-adddata-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.webgis-adddata-tabpanel {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

.webgis-adddata-tabpanel.active {
  display: block;
}

.webgis-adddata-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.webgis-adddata-form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.webgis-adddata-form-group select,
.webgis-adddata-form-group input {
  width: 100%;
  height: 48px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: rgba(255,255,255,.95);
  padding: 0 14px;
  font-size: 14px;
  color: #111827;
  outline: none;
}

.webgis-adddata-form-group select:focus,
.webgis-adddata-form-group input:focus {
  border-color: rgba(15, 118, 110,.42);
  box-shadow: 0 0 0 4px rgba(15, 118, 110,.08);
}

.webgis-adddata-highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15, 118, 110,.08), rgba(47, 120, 146,.10));
  border: 1px solid rgba(15, 118, 110,.10);
  margin-bottom: 14px;
}

.webgis-adddata-highlight.soft {
  background: rgba(249,250,251,.96);
  border: 1px solid rgba(229,231,235,.95);
}

.webgis-adddata-highlight-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.9);
  color: #10293d;
}

.webgis-adddata-highlight-icon svg {
  width: 18px;
  height: 18px;
}

.webgis-adddata-highlight strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 3px;
}

.webgis-adddata-highlight p {
  font-size: 12px;
  line-height: 1.55;
  color: #6b7280;
}

.webgis-adddata-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.webgis-adddata-result-head strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 2px;
}

.webgis-adddata-result-head span {
  font-size: 12px;
  color: #6b7280;
}

.webgis-adddata-refresh-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(229,231,235,.95);
  background: rgba(255,255,255,.95);
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  cursor: pointer;
}

.webgis-adddata-dataset-list,
.webgis-adddata-measure-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.webgis-adddata-dataset-card,
.webgis-adddata-measure-card {
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(229,231,235,.95);
  box-shadow: 0 10px 20px rgba(15,23,42,.05);
  padding: 14px;
  transition: all .16s ease;
}

.webgis-adddata-dataset-card:hover,
.webgis-adddata-measure-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(15,23,42,.08);
}

.webgis-adddata-dataset-card.active {
  border-color: rgba(15, 118, 110,.35);
  box-shadow: 0 0 0 4px rgba(15, 118, 110,.08);
}

.webgis-adddata-dataset-top,
.webgis-adddata-measure-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.webgis-adddata-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #10293d;
  background: rgba(15, 118, 110,.10);
}

.webgis-adddata-dataset-title,
.webgis-adddata-measure-title {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  line-height: 1.35;
  margin-bottom: 4px;
}

.webgis-adddata-dataset-meta,
.webgis-adddata-measure-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}

.webgis-adddata-dataset-meta div,
.webgis-adddata-measure-meta div {
  color: #4b5563;
}

.webgis-adddata-dataset-meta strong,
.webgis-adddata-measure-meta strong {
  color: #111827;
}

.webgis-adddata-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.webgis-adddata-card-btn,
.webgis-adddata-action-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(229,231,235,.95);
  background: rgba(255,255,255,.95);
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .16s ease;
}

.webgis-adddata-card-btn:hover,
.webgis-adddata-action-btn:hover {
  transform: translateY(-1px);
}

.webgis-adddata-card-btn.primary,
.webgis-adddata-action-btn.primary {
  background: linear-gradient(135deg, #0f766e, #245a73);
  color: #ffffff;
  border: none;
}

.webgis-adddata-card-btn.secondary,
.webgis-adddata-action-btn.secondary {
  background: linear-gradient(135deg, #2563eb, #4f8df5);
  color: #ffffff;
  border: none;
}

.webgis-adddata-card-btn.subtle,
.webgis-adddata-action-btn.subtle {
  color: #6b7280;
}

.webgis-adddata-empty {
  padding: 20px 16px;
  border-radius: 18px;
  background: rgba(249,250,251,.95);
  border: 1px dashed rgba(209,213,219,.95);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

.webgis-adddata-dropzone {
  border-radius: 22px;
  border: 1.5px dashed rgba(156,163,175,.65);
  background: rgba(249,250,251,.96);
  padding: 22px 18px;
  text-align: center;
  margin-bottom: 14px;
}

.webgis-adddata-dropzone-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.9);
  color: #374151;
}

.webgis-adddata-dropzone-icon svg {
  width: 22px;
  height: 22px;
}

.webgis-adddata-dropzone strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 5px;
}

.webgis-adddata-dropzone p {
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280;
  margin-bottom: 14px;
}

.webgis-adddata-upload-btn {
  height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #2563eb, #4f8df5);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
  user-select: none;
}

.webgis-adddata-upload-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.24);
}

.webgis-adddata-upload-btn:active {
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.96);
  box-shadow: 0 7px 14px rgba(37, 99, 235, 0.18);
}

.webgis-adddata-upload-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 55%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
  pointer-events: none;
}

.webgis-adddata-upload-btn:active::after {
  transform: scale(2.4);
  opacity: 1;
}

.webgis-adddata-upload-meta {
  margin-top: 14px;
  font-size: 12px;
  color: #4b5563;
}

.webgis-adddata-inline-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .webgis-adddata-shell {
    top: 152px;
    right: 14px;
    left: 14px;
    bottom: 148px;
  }

  .webgis-adddata-panel {
    width: 100%;
  }

  .webgis-adddata-grid {
    grid-template-columns: 1fr;
  }

  .webgis-adddata-tabs {
    grid-template-columns: 1fr;
  }

  .webgis-adddata-dataset-meta,
  .webgis-adddata-measure-meta {
    grid-template-columns: 1fr;
  }
}

.webgis-popup {
  min-width: 220px;
  line-height: 1.5;
}

.webgis-popup-title {
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
}

.webgis-popup-row {
  font-size: 12px;
  color: #374151;
  margin-bottom: 4px;
}

.webgis-popup-row strong {
  color: #111827;
}

.webgis-popup-link {
  margin-top: 8px;
}

.webgis-popup-link a {
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
}

.webgis-adddata-card-btn:disabled,
.webgis-adddata-action-btn:disabled,
.webgis-adddata-refresh-btn:disabled {
  opacity: .72;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.webgis-adddata-card-btn.is-loading,
.webgis-adddata-action-btn.is-loading,
.webgis-adddata-refresh-btn.is-loading {
  position: relative;
}

.webgis-adddata-card-btn.subtle.is-loading::before,
.webgis-adddata-action-btn.subtle.is-loading::before,
.webgis-adddata-refresh-btn.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 999px;
  border: 2px solid rgba(107,114,128,.25);
  border-top-color: #374151;
  display: inline-block;
  animation: webgisBtnSpin .7s linear infinite;
  vertical-align: middle;
}

.webgis-adddata-card-btn.primary.is-loading::before,
.webgis-adddata-action-btn.primary.is-loading::before,
.webgis-adddata-card-btn.secondary.is-loading::before,
.webgis-adddata-action-btn.secondary.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #ffffff;
  display: inline-block;
  animation: webgisBtnSpin .7s linear infinite;
  vertical-align: middle;
}

@keyframes webgisBtnSpin {
  to {
    transform: rotate(360deg);
  }
}

.webgis-layer-check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.webgis-layer-check input {
  display: none;
}

.webgis-layer-check span {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.webgis-layer-check input:checked + span {
  background: linear-gradient(135deg, #0f766e, #245a73);
  border-color: transparent;
}

.webgis-layer-check input:checked + span::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
  margin-top: -2px;
}

.webgis-layer-tool-btn.danger {
  color: #b91c1c;
}

.webgis-layer-tool-btn.danger:hover {
  background: #fee2e2;
}

.webgis-layer-legend {
  display: none;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(249,250,251,.95);
  border: 1px solid rgba(229,231,235,.95);
}

.webgis-layer-legend.is-open {
  display: block;
}

.webgis-layer-legend-title {
  font-size: 12px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 8px;
}

.webgis-layer-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.webgis-layer-legend-item span {
  width: 18px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid #64748b;
  flex-shrink: 0;
}

.webgis-layer-legend-item em {
  font-style: normal;
  font-size: 12px;
  color: #374151;
  line-height: 1.4;
}

.webgis-layer-legend-empty {
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
}


.analysis-side-panel {
  position: fixed;
  top: 84px;
  right: 18px;
  bottom: 18px;

  width: min(420px, calc(100vw - 36px));

  z-index: 9000;
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, .14);
  border: 1px solid rgba(226, 232, 240, .95);

  display: flex;
  flex-direction: column;

  transform: translateX(calc(100% + 36px));
  opacity: 0;
  pointer-events: none;
  transition: .28s ease;

  overflow: hidden;
}

.analysis-side-panel.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.analysis-panel-header {
  position: relative;
  padding: 22px 24px 16px;
  background: #ffffff;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
}

.analysis-panel-header h3 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #111827;
  line-height: 1.2;
}

.analysis-panel-header p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
  padding-right: 42px;
}

.analysis-panel-badge {
  display: none;
}

.analysis-panel-close {
  position: absolute;
  top: 16px;
  right: 16px;

  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;

  background: #f1f5f9;
  color: #334155;
  font-size: 24px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.analysis-panel-close:hover {
  background: #e5e7eb;
}

.analysis-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.analysis-step {
  padding: 8px 4px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.analysis-step.active {
  color: #0f766e;
  background: #eef5df;
  border-color: #91c8c0;
}

.analysis-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.analysis-section-title h4 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #111827;
}

.analysis-section-title p {
  margin: 0 0 18px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
}

.analysis-form {
  display: grid;
  gap: 14px;
}

.analysis-form label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.analysis-form input,
.analysis-form select {
  height: 43px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 0 13px;
  outline: none;
  font-size: 14px;
  background: #ffffff;
}

.analysis-form select:disabled {
  background: #f1f5f9;
  color: #94a3b8;
}

.analysis-choice-list {
  display: grid;
  gap: 12px;
}

.analysis-choice {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.analysis-choice strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
  font-size: 14px;
}

.analysis-choice span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.analysis-choice:hover,
.analysis-choice.selected {
  border-color: #0d615b;
  background: #f7fbea;
  box-shadow: 0 12px 28px rgba(15, 118, 110, .12);
}

.analysis-note {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
}

.analysis-result {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.analysis-result div {
  padding: 13px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
}

.analysis-result span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.analysis-result strong {
  color: #111827;
  font-size: 14px;
}

.analysis-panel-footer {
  padding: 14px 16px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.analysis-btn {
  border: 0;
  border-radius: 14px;
  padding: 11px 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    opacity 0.15s ease;
}

.analysis-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.20);
  filter: brightness(1.03);
}

.analysis-btn:not(:disabled):active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
  filter: brightness(0.97);
}

.analysis-btn.is-loading {
  opacity: 0.9;
  cursor: wait;
}

.analysis-btn.is-done {
  background: #eef5df !important;
  color: #0f766e !important;
  border: 1px solid rgba(15, 118, 110, 0.18);
  box-shadow: none !important;
  cursor: not-allowed;
}

.analysis-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: rmButtonSpin 0.75s linear infinite;
  flex: 0 0 auto;
}

@keyframes rmButtonSpin {
  to {
    transform: rotate(360deg);
  }
}

.analysis-btn.ghost {
  background: #f1f5f9;
  color: #334155;
}

.analysis-btn.primary {
  background: linear-gradient(135deg, #0f766e, #0d615b);
  color: #ffffff;
}

.analysis-btn.full {
  width: 100%;
}

.analysis-empty-state {
  min-height: 260px;
  display: grid;
  place-content: center;
  text-align: center;
  color: #64748b;
  gap: 6px;
}

.analysis-empty-state strong {
  color: #111827;
}

/* mobile / tablet */
@media (max-width: 520px) {
  .analysis-side-panel {
    top: auto;
    left: 10px;
    right: 10px;
    bottom: 10px;

    width: auto;
    max-width: none;

    border-radius: 22px 22px 18px 18px;

    transform: translateY(calc(100% + 30px));
  }

  .analysis-side-panel.active {
    transform: translateY(0);
  }

  .analysis-stepper {
    grid-template-columns: repeat(5, minmax(54px, 1fr));
    overflow-x: auto;
  }
}

/* =========================================================
   SLIDE ANIMATION UNTUK SEMUA PANEL KANAN
   ========================================================= */

.webgis-adddata-shell,
.webgis-layer-panel-shell,
.webgis-print-panel-shell {
  display: block !important;
  pointer-events: none;
  transform: translateX(calc(100% + 36px));
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}

.webgis-adddata-shell.is-open,
.webgis-layer-panel-shell.is-open,
.webgis-print-panel-shell.is-open {
  pointer-events: auto;
  transform: translateX(0);
  opacity: 1;
}
.analysis-btn.is-disabled,
.analysis-btn:disabled {
  opacity: .72;
  cursor: not-allowed !important;
  pointer-events: auto !important;
  filter: grayscale(.15);
}


.webgis-modern-popup .leaflet-popup-content-wrapper,
.leaflet-popup-content-wrapper {
  border-radius: 18px;
}

.popup-link {
  display: block;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #0f766e;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.popup-title {
  font-size: 17px;
  font-weight: 800;
  color: #10293d;
  margin-bottom: 14px;
  line-height: 1.35;
}

.popup-row {
  margin-bottom: 10px;
}

.popup-row span {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 3px;
  font-weight: 800;
}

.popup-row strong {
  display: block;
  font-size: 14px;
  color: #111827;
  line-height: 1.45;
}

.popup-mini-btn {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 800;
  cursor: pointer;
}

.popup-mini-btn:hover {
  background: #e5e7eb;
}

.popup-attr-floating {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(15, 23, 42, .38);
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-attr-card {
  width: min(520px, calc(100vw - 32px));
  max-height: 78vh;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.popup-attr-header {
  padding: 16px 18px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-attr-header button {
  border: 0;
  background: #f1f5f9;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 20px;
}

.popup-attr-body {
  padding: 16px 18px;
  overflow-y: auto;
  max-height: 62vh;
}

.popup-attr-row {
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
}

.popup-attr-row span {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 4px;
}

.popup-attr-row strong {
  display: block;
  font-size: 13px;
  color: #111827;
  line-height: 1.45;
}

.popup-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 16px 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.popup-nav button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #eef5df;
  color: #10293d;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.popup-nav span {
  min-width: 76px;
  text-align: center;
  font-size: 12px;
  color: #475569;
  font-weight: 800;
}

.webgis-modern-popup .leaflet-popup-content-wrapper {
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(0,0,0,.18);
}

.webgis-modern-popup .leaflet-popup-content {
  margin: 0;
  min-width: 280px;
}

.map-popup-modern {
  font-family: inherit;
}

/* WRAPPER POPUP */
.webgis-modern-popup .leaflet-popup-content-wrapper {
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
}

.webgis-modern-popup .leaflet-popup-content {
  margin: 0;
  min-width: 290px;
}

.webgis-modern-popup .leaflet-popup-tip {
  background: white;
}

/* Tombol close */
.webgis-modern-popup .leaflet-popup-close-button {
  top: 10px !important;
  right: 10px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  text-align: center;
  font-weight: 700;
}

.webgis-modern-popup .leaflet-popup-close-button:hover {
  background: #e2e8f0;
}

/* isi popup */
.map-popup-modern {
  font-family: inherit;
  overflow: hidden;
}

.popup-head {
  padding: 14px 18px;
  background: #ffffff;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  border-bottom: 1px solid #e5e7eb;
}

.popup-body {
  padding: 16px 18px 18px;
  background: white;
}

.popup-item {
  margin-bottom: 12px;
}

.popup-item span {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 4px;
}

.popup-item strong {
  display: block;
  font-size: 14px;
  color: #111827;
  line-height: 1.45;
}

/* tombol bawah */
.popup-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.popup-link-btn,
.popup-mini-btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.popup-link-btn {
  background: #0f766e;
  color: white !important;
}

.popup-mini-btn {
  background: #f1f5f9;
  color: #334155;
}

.analysis-search-select {
  position: relative;
}

.analysis-search-select input[type="text"] {
  width: 100%;
}

.analysis-search-dropdown {
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
}

.analysis-search-option {
  width: 100%;
  border: 0;
  background: #ffffff;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #eef2f7;
}

.analysis-search-option:hover {
  background: #f8fafc;
}

.analysis-search-option strong {
  display: block;
  font-size: 13px;
  color: #111827;
}

.analysis-search-option span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
}

.analysis-search-empty {
  padding: 12px 14px;
  color: #64748b;
  font-size: 13px;
}
.analysis-status-badge {
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: .02em;
}

.analysis-status-badge.status-allowed {
  background: #dcfce7;
  color: #166534 !important;
}

.analysis-status-badge.status-limited {
  background: #fef3c7;
  color: #92400e !important;
}

.analysis-status-badge.status-denied {
  background: #fee2e2;
  color: #991b1b !important;
}

.analysis-status-badge.status-unknown {
  background: #f1f5f9;
  color: #475569 !important;
}

.analysis-zone-list {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.analysis-zone-list h5 {
  margin: 0 0 10px;
  font-size: 13px;
  color: #111827;
}

.analysis-zone-item {
  padding: 10px 0;
  border-top: 1px solid #e5e7eb;
}

.analysis-zone-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.analysis-zone-item strong {
  display: block;
  font-size: 13px;
  color: #111827;
}

.analysis-zone-item span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
}

.analysis-subtitle {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 900;
  color: #111827;
}

.analysis-mini-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.analysis-mini-actions button {
  border: 1px solid #d9e2c3;
  background: #f8fbf1;
  color: #0f766e;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.analysis-mini-actions button:hover {
  background: #eef5df;
}

.analysis-floor-box {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px;
  background: #f8fafc;
}

.analysis-floor-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #334155;
}

.analysis-floor-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.analysis-floor-row span {
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}

.analysis-floor-row input {
  width: 100%;
}

.analysis-component-picker {
  margin-top: 12px;
}

.analysis-component-picker-card {
  border: 1px solid #dbe7c8;
  background: #fbfdf6;
  border-radius: 18px;
  padding: 12px;
}

.analysis-component-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.analysis-component-picker-head strong {
  font-size: 13px;
  color: #111827;
}

.analysis-component-picker-head button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.analysis-choice-list.compact {
  gap: 8px;
}

.analysis-choice-list.compact .analysis-choice {
  padding: 10px 12px;
}

.analysis-result.compact {
  margin-top: 10px;
}

.analysis-eval-list {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}

.analysis-eval-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #e5e7eb;
}

.analysis-eval-row:first-child {
  border-top: 0;
}

.analysis-eval-row strong {
  display: block;
  font-size: 13px;
  color: #111827;
}

.analysis-eval-row span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
}

.analysis-form.clean {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.analysis-auto-area-card {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #dbe7c8;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbfdf6 0%, #f6faed 100%);
}

.analysis-auto-area-card span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.analysis-auto-area-card strong {
  display: block;
  font-size: 13px;
  color: #111827;
}

.analysis-auto-area-card button {
  border: 1px solid #c7dedc;
  background: #ffffff;
  color: #0f766e;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.analysis-auto-area-card button:hover {
  background: #eef5df;
}

.analysis-param-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px;
  background: #ffffff;
}

.analysis-param-card.is-main {
  background: #f8fafc;
}

.analysis-param-card.is-wide {
  background: #fbfdff;
}

.analysis-param-card label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #111827;
}

.analysis-param-card input[type="number"] {
  width: 100%;
  min-height: 40px;
}

.analysis-param-card input[readonly] {
  background: #f1f5f9;
  color: #334155;
  cursor: not-allowed;
}

.analysis-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: #64748b;
}

.analysis-mini-actions.clean {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.analysis-mini-actions.clean button {
  border: 1px solid #d9e2c3;
  background: #f8fbf1;
  color: #0f766e;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.analysis-mini-actions.clean button:hover {
  background: #eef5df;
}

.analysis-floor-summary-row {
  display: grid;
  grid-template-columns: minmax(130px, 180px) 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.analysis-floor-summary-row span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}

.analysis-floor-summary-row strong {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #111827;
  font-size: 13px;
}

.analysis-floor-list-clean {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.analysis-floor-row.clean {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items: center;
}

.analysis-floor-row.clean span {
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}

.analysis-area-summary-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.analysis-area-summary-row span {
  font-size: 11px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.analysis-area-summary-row strong {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #111827;
  font-size: 13px;
}

.analysis-area-list-clean {
  display: grid;
  gap: 10px;
}

.analysis-area-row-clean {
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.analysis-area-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.analysis-area-row-head strong {
  font-size: 12px;
  color: #111827;
}

.analysis-area-remove-btn {
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #b91c1c;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.analysis-area-row-clean input[type="number"] {
  width: 100%;
  min-height: 40px;
}

.analysis-add-area-btn {
  margin-top: 10px;
  border: 1px solid #c7dedc;
  background: #ffffff;
  color: #0f766e;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.analysis-add-area-btn:hover {
  background: #eef5df;
}

@media (max-width: 520px) {
  .analysis-auto-area-card {
    grid-template-columns: 1fr;
  }

  .analysis-floor-summary-row {
    grid-template-columns: 1fr;
  }
}

.webgis-layer-legend-note {
  margin-top: 6px;
  padding-left: 26px;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

.webgis-layer-tool-btn.is-disabled,
.webgis-layer-tool-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  background: #f1f5f9;
  border-color: #e5e7eb;
  box-shadow: none;
}

.webgis-layer-tool-btn.is-disabled:hover,
.webgis-layer-tool-btn:disabled:hover {
  transform: none;
  background: #f1f5f9;
  box-shadow: none;
}

.webgis-layer-tool-btn.is-disabled svg,
.webgis-layer-tool-btn:disabled svg {
  stroke: #94a3b8;
}

.webgis-layer-download-menu.is-locked {
  pointer-events: none;
}

.webgis-layer-download-locked {
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
  white-space: normal;
  max-width: 180px;
}

/* =========================================================
   FINAL CETAK PETA - SATU BLOK BERSIH
   ========================================================= */

.webgis-print-header,
.webgis-print-north-arrow,
.webgis-print-scale-box {
  display: none !important;
}

.webgis-print-layout-page {
  background: #ffffff !important;
  border: 1px solid #d8dee6 !important;
  border-radius: 14px !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;
  padding: 16px !important;
  color: #111827 !important;
}

.webgis-print-layout-page.paper-a4.landscape,
.webgis-print-layout-page.paper-a3.landscape {
  width: min(96vw, 1320px);
}

.webgis-print-layout-page.paper-a4.portrait,
.webgis-print-layout-page.paper-a3.portrait {
  width: min(92vw, 920px);
}

.webgis-print-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.webgis-print-map-wrap {
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid #111827 !important;
  border-radius: 7px !important;
  background: #e5e7eb !important;
  min-height: 650px !important;
  isolation: isolate !important;
}

.webgis-print-map {
  min-height: 650px !important;
  width: 100% !important;
  height: 100% !important;
}

.webgis-print-sidebar {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}

.webgis-print-sidebar-card {
  border: 1px solid #d8dee6 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 12px !important;
}

.webgis-print-sidebar-card h4 {
  margin: -12px -12px 10px !important;
  padding: 9px 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #f8fafc !important;
  border-radius: 12px 12px 0 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: #111827 !important;
}

.webgis-print-sidebar-logo-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.webgis-print-logo-box {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.webgis-print-logo-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6px !important;
  display: block;
}

.webgis-print-logo-box span {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  font-size: 17px;
  font-weight: 900;
}

.webgis-print-sidebar-brand-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.webgis-print-sidebar-brand-copy strong {
  font-size: 15px !important;
  line-height: 1.1 !important;
  color: #111827 !important;
}

.webgis-print-sidebar-brand-copy span {
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

.webgis-print-sidebar-title-block {
  padding: 10px 0 11px !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin-bottom: 12px !important;
}

.webgis-print-sidebar-title {
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

.webgis-print-sidebar-subtitle {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

.webgis-print-north-scale-block {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  margin: 8px 0 12px !important;
  padding: 8px 0 10px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.webgis-print-modern-north {
  width: 58px !important;
  height: 78px !important;
}

.webgis-print-modern-north svg {
  width: 58px !important;
  height: 78px !important;
  display: block !important;
}

.webgis-print-modern-north .north-text {
  font-size: 15px;
  font-weight: 900;
  fill: #111827;
}

.webgis-print-modern-north .north-dark {
  fill: #111827;
}

.webgis-print-modern-north .north-light {
  fill: #f8fafc;
  stroke: #111827;
  stroke-width: 1.2;
}

.webgis-print-modern-north .north-line {
  stroke: #111827;
  stroke-width: 2;
  stroke-linecap: round;
}

.webgis-print-sidebar-mini-info {
  display: grid !important;
  gap: 6px !important;
}

.webgis-print-sidebar-mini-info div {
  display: grid !important;
  gap: 2px !important;
  padding: 7px 8px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}

.webgis-print-sidebar-mini-info strong {
  font-size: 9.5px !important;
  color: #111827 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.webgis-print-sidebar-mini-info span {
  font-size: 10.5px !important;
  color: #475569 !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

.webgis-print-legend {
  display: grid !important;
  gap: 10px !important;
  max-height: 390px !important;
  overflow: auto !important;
  padding-right: 3px !important;
}

.webgis-print-legend-layer {
  padding-bottom: 9px !important;
  border-bottom: 1px dashed #e5e7eb !important;
}

.webgis-print-legend-layer:last-child {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.webgis-print-legend-layer-title {
  margin-bottom: 6px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
}

.webgis-print-legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 5px !important;
}

.webgis-print-legend-item em {
  font-style: normal !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  color: #374151 !important;
}

.webgis-print-legend-empty {
  font-size: 10px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  padding: 7px 8px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
}

.webgis-print-info-list {
  display: grid !important;
  gap: 6px !important;
  font-size: 10px !important;
}

.webgis-print-info-list div {
  display: grid !important;
  grid-template-columns: 92px 1fr !important;
  gap: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px dashed #e5e7eb !important;
}

.webgis-print-info-list div:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.webgis-print-info-list strong {
  color: #111827 !important;
}

.webgis-print-info-list span {
  color: #475569 !important;
  word-break: break-word !important;
}

.webgis-print-coordinate-grid {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1100 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.webgis-print-grid-line {
  display: none !important;
}

.webgis-print-grid-cross {
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1101 !important;
}

.webgis-print-grid-cross .h,
.webgis-print-grid-cross .v {
  position: absolute !important;
  background: rgba(37, 99, 235, .42) !important;
  border-radius: 1px !important;
}

.webgis-print-grid-cross .h {
  left: 0 !important;
  right: 0 !important;
  top: 3px !important;
  height: 1px !important;
}

.webgis-print-grid-cross .v {
  top: 0 !important;
  bottom: 0 !important;
  left: 3px !important;
  width: 1px !important;
}

.webgis-print-grid-tick {
  position: absolute !important;
  z-index: 1102 !important;
  background: rgba(37, 99, 235, .95) !important;
}

.webgis-print-grid-tick.top,
.webgis-print-grid-tick.bottom {
  width: 1.5px !important;
  height: 8px !important;
  transform: translateX(-50%) !important;
}

.webgis-print-grid-tick.top {
  top: 0 !important;
}

.webgis-print-grid-tick.bottom {
  bottom: 0 !important;
}

.webgis-print-grid-tick.left,
.webgis-print-grid-tick.right {
  width: 8px !important;
  height: 1.5px !important;
  transform: translateY(-50%) !important;
}

.webgis-print-grid-tick.left {
  left: 0 !important;
}

.webgis-print-grid-tick.right {
  right: 0 !important;
}

.webgis-print-grid-label {
  position: absolute !important;
  z-index: 1103 !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #2563eb !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border: none !important;
}

.webgis-print-grid-label.lng.top {
  top: 5px !important;
  transform: translateX(-50%) !important;
}

.webgis-print-grid-label.lng.bottom {
  bottom: 5px !important;
  transform: translateX(-50%) !important;
}

.webgis-print-grid-label.lat.left {
  left: 7px !important;
  transform: translateY(-50%) rotate(-90deg) !important;
  transform-origin: center !important;
}

.webgis-print-grid-label.lat.right {
  right: 7px !important;
  transform: translateY(-50%) rotate(-90deg) !important;
  transform-origin: center !important;
}

.webgis-print-footer {
  margin-top: 10px !important;
  padding: 8px 11px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
}

.webgis-print-footer p {
  margin: 0 !important;
  font-size: 9.5px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
}

@media print {
  .webgis-print-main {
    grid-template-columns: minmax(0, 1fr) 285px !important;
  }

  .webgis-print-map-wrap,
  .webgis-print-map {
    min-height: 620px !important;
  }

  .webgis-print-legend {
    max-height: none !important;
    overflow: visible !important;
  }

  .webgis-print-coordinate-grid {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ===== penyempurnaan final sidebar cetak ===== */

.webgis-print-brand-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
  padding-bottom: 12px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.webgis-print-logo-box {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  overflow: hidden !important;
  margin: 0 auto 6px !important;
}

.webgis-print-logo-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6px !important;
  display: block;
}

.webgis-print-logo-box span {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  font-size: 17px;
  font-weight: 900;
}

.webgis-print-brand-center strong {
  font-size: 15px !important;
  line-height: 1.15 !important;
  color: #111827 !important;
  font-weight: 900 !important;
}

.webgis-print-brand-center small {
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

.webgis-print-sidebar-title-block {
  text-align: center !important;
  padding: 10px 0 12px !important;
  margin-bottom: 12px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.webgis-print-sidebar-title {
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

.webgis-print-sidebar-subtitle {
  display: none !important;
}

.webgis-print-cartography-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 4px 0 12px !important;
  padding: 8px 0 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.webgis-print-modern-north {
  width: 50px !important;
  height: 56px !important;
  margin: 0 auto !important;
}

.webgis-print-modern-north svg {
  width: 50px !important;
  height: 56px !important;
  display: block !important;
}

.webgis-print-modern-north .north-text {
  font-size: 15px !important;
  font-weight: 900 !important;
  fill: #111827 !important;
}

.webgis-print-modern-north .north-dark {
  fill: #111827 !important;
}

.webgis-print-modern-north .north-light {
  fill: #ffffff !important;
  stroke: #111827 !important;
  stroke-width: 1.2 !important;
}

.webgis-print-modern-north .north-line,
.webgis-print-side-north-arrow .north-stem {
  display: none !important;
}

.webgis-print-grid-label {
  padding: 1px 2px !important;
  background: rgba(255, 255, 255, .58) !important;
  color: #2563eb !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border: none !important;
  box-shadow: none !important;
}

.webgis-print-grid-label.lng.top {
  top: 3px !important;
  transform: translateX(-50%) !important;
}

.webgis-print-grid-label.lng.bottom {
  bottom: 3px !important;
  transform: translateX(-50%) !important;
}

.webgis-print-grid-label.lat.left {
  left: -9px !important;
  transform: translateY(-50%) rotate(-90deg) !important;
  transform-origin: center !important;
}

.webgis-print-grid-label.lat.right {
  right: -9px !important;
  transform: translateY(-50%) rotate(-90deg) !important;
  transform-origin: center !important;
}

.webgis-print-grid-tick.top,
.webgis-print-grid-tick.bottom {
  width: 1.5px !important;
  height: 7px !important;
}

.webgis-print-grid-tick.left,
.webgis-print-grid-tick.right {
  width: 7px !important;
  height: 1.5px !important;
}

#webgisPrintMap .leaflet-control-zoom {
  display: none !important;
}

/* ===== final print preview close + WYSIWYG print ===== */

.webgis-print-preview-action-bar {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #e5e7eb !important;
}

.webgis-print-preview-action-bar button {
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  color: #374151 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.webgis-print-preview-action-bar button.primary {
  border-color: #0f766e !important;
  background: #0f766e !important;
  color: #ffffff !important;
}

@media print {
  body.rm-printing-map .webgis-print-preview-action-bar {
    display: none !important;
  }

  body.rm-printing-map .webgis-print-layout-shell {
    position: static !important;
    inset: auto !important;
    display: block !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body.rm-printing-map .webgis-print-layout-page {
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 16px !important;
    background: #ffffff !important;
  }

  body.rm-printing-map .webgis-print-main {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 12px !important;
  }

  body.rm-printing-map .webgis-print-map-wrap,
  body.rm-printing-map .webgis-print-map {
    min-height: var(--rm-print-map-height) !important;
    height: var(--rm-print-map-height) !important;
    max-height: var(--rm-print-map-height) !important;
  }
}

/* =========================================================
   FIX FINAL UKURAN KERTAS CETAK A4 / A3
   Supaya hasil print tidak terpotong.
   ========================================================= */

@page rm-a4-landscape {
  size: A4 landscape;
  margin: 6mm;
}

@page rm-a4-portrait {
  size: A4 portrait;
  margin: 6mm;
}

@page rm-a3-landscape {
  size: A3 landscape;
  margin: 6mm;
}

@page rm-a3-portrait {
  size: A3 portrait;
  margin: 6mm;
}

.webgis-print-layout-page.paper-a4.landscape {
  page: rm-a4-landscape;
}

.webgis-print-layout-page.paper-a4.portrait {
  page: rm-a4-portrait;
}

.webgis-print-layout-page.paper-a3.landscape {
  page: rm-a3-landscape;
}

.webgis-print-layout-page.paper-a3.portrait {
  page: rm-a3-portrait;
}

/* Preview mengikuti rasio kertas, tapi tetap nyaman dilihat di layar */
.webgis-print-layout-page.paper-a4.landscape,
.webgis-print-layout-page.paper-a3.landscape {
  aspect-ratio: 297 / 210;
}

.webgis-print-layout-page.paper-a4.portrait,
.webgis-print-layout-page.paper-a3.portrait {
  aspect-ratio: 210 / 297;
}

@media print {
  html,
  body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.rm-printing-map .webgis-print-layout-shell {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: var(--rm-print-page-width) !important;
    height: var(--rm-print-page-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  body.rm-printing-map .webgis-print-layout-page {
    width: var(--rm-print-page-width) !important;
    height: var(--rm-print-page-height) !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  body.rm-printing-map .webgis-print-main {
    flex: 0 0 var(--rm-print-map-height) !important;
    height: var(--rm-print-map-height) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--rm-print-sidebar-width) !important;
    gap: var(--rm-print-gap) !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.rm-printing-map .webgis-print-map-wrap,
  body.rm-printing-map .webgis-print-map {
    height: var(--rm-print-map-height) !important;
    min-height: var(--rm-print-map-height) !important;
    max-height: var(--rm-print-map-height) !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.rm-printing-map .webgis-print-sidebar {
    width: var(--rm-print-sidebar-width) !important;
    max-width: var(--rm-print-sidebar-width) !important;
    height: var(--rm-print-map-height) !important;
    max-height: var(--rm-print-map-height) !important;
    overflow: hidden !important;
    gap: 2.5mm !important;
  }

  body.rm-printing-map .webgis-print-sidebar-card {
    padding: 2.2mm !important;
    border-radius: 2mm !important;
  }

  body.rm-printing-map .webgis-print-brand-center {
    padding-bottom: 2.2mm !important;
    margin-bottom: 2.2mm !important;
    gap: 1mm !important;
  }

  body.rm-printing-map .webgis-print-logo-box {
    width: 12mm !important;
    height: 12mm !important;
    min-width: 12mm !important;
    border-radius: 3mm !important;
    margin-bottom: 1mm !important;
  }

  body.rm-printing-map .webgis-print-brand-center strong {
    font-size: 8.5pt !important;
    line-height: 1.1 !important;
  }

  body.rm-printing-map .webgis-print-brand-center small {
    font-size: 6.7pt !important;
    line-height: 1.15 !important;
  }

  body.rm-printing-map .webgis-print-sidebar-title-block {
    padding: 2mm 0 !important;
    margin-bottom: 2mm !important;
  }

  body.rm-printing-map .webgis-print-sidebar-title {
    font-size: 8.5pt !important;
    line-height: 1.18 !important;
  }

  body.rm-printing-map .webgis-print-cartography-box {
    gap: 1.5mm !important;
    margin: 1mm 0 2mm !important;
    padding: 1.5mm 0 2mm !important;
  }

  body.rm-printing-map .webgis-print-modern-north {
    width: 11mm !important;
    height: 13mm !important;
  }

  body.rm-printing-map .webgis-print-modern-north svg {
    width: 11mm !important;
    height: 13mm !important;
  }

  body.rm-printing-map .webgis-print-sidebar-mini-info {
    gap: 1.2mm !important;
  }

  body.rm-printing-map .webgis-print-sidebar-mini-info div {
    padding: 1.4mm 1.7mm !important;
    border-radius: 1.6mm !important;
  }

  body.rm-printing-map .webgis-print-sidebar-mini-info strong {
    font-size: 5.8pt !important;
  }

  body.rm-printing-map .webgis-print-sidebar-mini-info span {
    font-size: 6.3pt !important;
    line-height: 1.2 !important;
  }

  body.rm-printing-map .webgis-print-legend {
    max-height: none !important;
    overflow: hidden !important;
    gap: 1.5mm !important;
  }

  body.rm-printing-map .webgis-print-legend-layer-title {
    font-size: 6.2pt !important;
    margin-bottom: 1mm !important;
  }

  body.rm-printing-map .webgis-print-legend-item {
    gap: 1.4mm !important;
    margin-top: 1mm !important;
  }

  body.rm-printing-map .webgis-print-legend-item em,
  body.rm-printing-map .webgis-print-legend-item span {
    font-size: 5.8pt !important;
    line-height: 1.15 !important;
  }

  body.rm-printing-map .webgis-print-info-list {
    gap: 1.2mm !important;
    font-size: 5.8pt !important;
  }

  body.rm-printing-map .webgis-print-info-list div {
    grid-template-columns: 19mm 1fr !important;
    gap: 1.5mm !important;
    padding-bottom: 1.2mm !important;
  }

  body.rm-printing-map .webgis-print-footer {
    flex: 0 0 var(--rm-print-footer-height) !important;
    height: var(--rm-print-footer-height) !important;
    margin-top: var(--rm-print-gap) !important;
    padding: 2mm !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.rm-printing-map .webgis-print-footer p {
    font-size: 6pt !important;
    line-height: 1.25 !important;
  }

  body.rm-printing-map .webgis-print-preview-action-bar {
    display: none !important;
  }

  body.rm-printing-map .leaflet-control-container {
    display: none !important;
  }

  body.rm-printing-map .webgis-print-coordinate-grid,
  body.rm-printing-map .webgis-print-grid-cross,
  body.rm-printing-map .webgis-print-grid-tick,
  body.rm-printing-map .webgis-print-grid-label {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
}

/* =========================================================
   FIX WARNA PRINT + LEGENDA CETAK
   ========================================================= */

.webgis-print-layout-page,
.webgis-print-layout-page *,
.webgis-print-modern-scale-svg,
.webgis-print-modern-scale-svg *,
.webgis-print-legend-swatch-svg,
.webgis-print-legend-swatch-svg *,
.webgis-print-map svg,
.webgis-print-map svg *,
#webgisPrintMap svg,
#webgisPrintMap svg * {
  print-color-adjust: exact !important;
  -webkit-print-color-adjust: exact !important;
  forced-color-adjust: none !important;
}

.webgis-print-modern-scale-svg {
  width: 118px !important;
  height: 26px !important;
  display: block !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.webgis-print-legend-swatch-svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  display: inline-block !important;
  flex: 0 0 14px !important;
}

.webgis-print-legend-item {
  align-items: center !important;
}

.webgis-print-legend-more {
  margin-top: 5px !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

@media print {
  body.rm-printing-map {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  body.rm-printing-map .webgis-print-modern-scale-svg,
  body.rm-printing-map .webgis-print-modern-scale-svg *,
  body.rm-printing-map .webgis-print-legend-swatch-svg,
  body.rm-printing-map .webgis-print-legend-swatch-svg *,
  body.rm-printing-map #webgisPrintMap svg,
  body.rm-printing-map #webgisPrintMap svg * {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    forced-color-adjust: none !important;
  }

  body.rm-printing-map .webgis-print-legend {
    overflow: hidden !important;
  }

  body.rm-printing-map .webgis-print-legend-layer {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body.rm-printing-map .webgis-print-legend-swatch-svg {
    width: 3mm !important;
    height: 3mm !important;
    min-width: 3mm !important;
  }

  body.rm-printing-map .webgis-print-modern-scale-svg {
  width: 29mm !important;
  height: 6mm !important;
  overflow: visible !important;
  }

  body.rm-printing-map .webgis-print-modern-scale-labels {
    width: 28mm !important;
  }

  body.rm-printing-map .webgis-print-legend-more {
    font-size: 5.6pt !important;
    padding: 1mm 1.3mm !important;
  }
}

@media print {
  body.rm-printing-map .webgis-print-sidebar {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 2mm !important;
    height: var(--rm-print-map-height) !important;
    max-height: var(--rm-print-map-height) !important;
    overflow: hidden !important;
  }

  body.rm-printing-map .webgis-print-sidebar-card {
    overflow: hidden !important;
  }

  body.rm-printing-map .webgis-print-sidebar-card:nth-child(2) {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.rm-printing-map .webgis-print-legend {
    max-height: 100% !important;
    overflow: hidden !important;
    gap: 1.1mm !important;
  }

  body.rm-printing-map .webgis-print-legend-layer {
    padding-bottom: 1mm !important;
    margin-bottom: 1mm !important;
  }

  body.rm-printing-map .webgis-print-info-list {
    gap: .8mm !important;
    font-size: 5.6pt !important;
  }

  body.rm-printing-map .webgis-print-info-list div {
    grid-template-columns: 13mm 1fr !important;
    gap: 1mm !important;
    padding-bottom: .7mm !important;
  }

  body.rm-printing-map .webgis-print-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--rm-print-footer-height) !important;
  height: var(--rm-print-footer-height) !important;
  margin-top: var(--rm-print-gap) !important;
  padding: 1.4mm 2mm !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-top: 0.3mm solid #cbd5e1 !important;
  background: #ffffff !important;
}

body.rm-printing-map .webgis-print-footer p {
  margin: 0 !important;
  font-size: 5.3pt !important;
  line-height: 1.2 !important;
  color: #475569 !important;
  text-align: center !important;
  white-space: normal !important;
}
}
/* =========================================================
   FINAL SCALE BAR BERSIH - ANGKA LANGSUNG DI SVG
   ========================================================= */

.webgis-print-modern-scale {
  width: 128px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.webgis-print-modern-scale-svg {
  width: 128px !important;
  height: 32px !important;
  display: block !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.webgis-print-modern-scale-svg .scale-text {
  font-size: 7.2px !important;
  font-weight: 800 !important;
  fill: #111827 !important;
  dominant-baseline: middle !important;
}

.webgis-print-modern-scale-labels {
  display: none !important;
}

.webgis-print-modern-scale-bar {
  display: none !important;
}

@media print {
  body.rm-printing-map .webgis-print-modern-scale {
    width: 30mm !important;
  }

  body.rm-printing-map .webgis-print-modern-scale-svg {
    width: 30mm !important;
    height: 7.5mm !important;
    overflow: visible !important;
  }

  body.rm-printing-map .webgis-print-modern-scale-svg .scale-text {
    font-size: 5.2px !important;
    font-weight: 800 !important;
    fill: #111827 !important;
  }

  body.rm-printing-map .webgis-print-modern-scale-labels,
  body.rm-printing-map .webgis-print-modern-scale-bar {
    display: none !important;
  }
}

.analysis-btn.is-loading {
  opacity: 0.85;
  cursor: not-allowed;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.analysis-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: rmButtonSpin 0.75s linear infinite;
  flex: 0 0 auto;
}

@keyframes rmButtonSpin {
  to {
    transform: rotate(360deg);
  }
}
.analysis-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  padding: 28px 18px;
  text-align: center;
  color: #334155;
}

.analysis-loading-spinner {
  width: 38px;
  height: 38px;
  border: 4px solid #e5e7eb;
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: rmAnalysisSpin 0.75s linear infinite;
}

.analysis-loading-state strong {
  font-size: 15px;
  color: #1f2937;
}

.analysis-loading-state span {
  font-size: 13px;
  color: #64748b;
}

@keyframes rmAnalysisSpin {
  to {
    transform: rotate(360deg);
  }
}

.webgis-print-action-btn,
.webgis-print-preview-action-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    opacity 0.15s ease;
}

.webgis-print-action-btn:not(:disabled):hover,
.webgis-print-preview-action-bar button:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.webgis-print-action-btn:not(:disabled):active,
.webgis-print-preview-action-bar button:not(:disabled):active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.97);
}

.webgis-print-action-btn.is-loading,
.webgis-print-preview-action-bar button.is-loading {
  opacity: 0.9;
  cursor: wait;
  pointer-events: none;
}

.rm-print-btn-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: rmPrintButtonSpin 0.75s linear infinite;
  flex: 0 0 auto;
}

.rm-print-preview-btn-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: rmPrintButtonSpin 0.75s linear infinite;
  flex: 0 0 auto;
}

.webgis-print-action-btn.secondary .rm-print-btn-spinner,
.webgis-print-preview-action-bar button:not(.primary) .rm-print-btn-spinner {
  border-color: rgba(15, 118, 110, 0.25);
  border-top-color: #0f766e;
}

@keyframes rmPrintButtonSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   FIX Z-INDEX DROPDOWN USER DI PETA INFORMASI
   Agar menu logout tidak tertutup panel layer/add data/print
   ========================================================= */
.webgis-overlay-header {
  z-index: 1700 !important;
  overflow: visible !important;
}

.webgis-overlay-right,
.webgis-user-dropdown {
  position: relative;
  z-index: 1710 !important;
  overflow: visible !important;
}

.webgis-user-menu-mini,
.webgis-user-dropdown .modern-user-menu,
.webgis-user-dropdown .modern-user-menu.show {
  z-index: 1720 !important;
}

/* =========================================================
   LOADING TOMBOL LOGOUT
   ========================================================= */
.logout-button-loading {
  opacity: 0.88 !important;
  cursor: wait !important;
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.logout-button-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(185, 28, 28, 0.28);
  border-top-color: #b91c1c;
  border-radius: 999px;
  animation: logoutButtonSpin 0.75s linear infinite;
  flex: 0 0 auto;
}

.btn-logout .logout-button-spinner {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
}

@keyframes logoutButtonSpin {
  to {
    transform: rotate(360deg);
  }
}

.analysis-auto-check-row,
.analysis-floor-copy-check {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  color: #4b5563;
  cursor: pointer;
}

.analysis-auto-check-row span,
.analysis-floor-copy-check span {
  display: block;
  min-width: 0;
  line-height: 1.35;
}

.analysis-auto-check-row input,
.analysis-floor-copy-check input {
  margin-top: 1px;
  width: 14px;
  height: 14px;
  accent-color: #0f766e;
  flex: 0 0 auto;
}

/* =========================================================
   RAPKAN CHECKBOX PARAMETER ANALISIS
   Untuk "Samakan..." dan "Hitung otomatis..."
   ========================================================= */
.analysis-param-card label.analysis-auto-check-row,
.analysis-param-card label.analysis-floor-copy-check,
.analysis-floor-row.clean label.analysis-floor-copy-check,
label.analysis-auto-check-row,
label.analysis-floor-copy-check {
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 7px !important;
  width: 100% !important;
  margin-top: 7px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  cursor: pointer !important;
}

.analysis-param-card label.analysis-auto-check-row input,
.analysis-param-card label.analysis-floor-copy-check input,
.analysis-floor-row.clean label.analysis-floor-copy-check input,
label.analysis-auto-check-row input,
label.analysis-floor-copy-check input {
  grid-column: 1 !important;
  width: 13px !important;
  height: 13px !important;
  margin: 1px 0 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  accent-color: #0f766e !important;
}

.analysis-param-card label.analysis-auto-check-row span,
.analysis-param-card label.analysis-floor-copy-check span,
.analysis-floor-row.clean label.analysis-floor-copy-check span,
label.analysis-auto-check-row span,
label.analysis-floor-copy-check span {
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  color: #64748b !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.analysis-auto-check-row input,
.analysis-floor-copy-check input {
  width: 14px;
  height: 14px;
  accent-color: #0f766e;
}

.analysis-component-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.analysis-component-modal.active {
  display: flex;
}

.analysis-component-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
}

.analysis-component-modal-card {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 36px));
  max-height: min(680px, calc(100vh - 32px));
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
  border: 1px solid #e5e7eb;
}

.analysis-component-modal-head {
  padding: 16px 18px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.analysis-component-modal-head strong {
  display: block;
  font-size: 15px;
  color: #111827;
}

.analysis-component-modal-head span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.analysis-component-modal-head button {
  border: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}

.analysis-component-modal-body {
  padding: 16px;
  overflow: auto;
  max-height: 560px;
}

.analysis-choice {
  position: relative;
  padding-right: 94px;
}

.analysis-choice.is-loading {
  opacity: 0.96;
  cursor: wait;
}

.analysis-choice.is-muted {
  opacity: 0.52;
  cursor: not-allowed;
}

.analysis-choice-loading-right {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  color: #0f766e;
  white-space: nowrap;
}

.analysis-choice-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 118, 110, 0.24);
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: analysisChoiceSpin 0.75s linear infinite;
  flex: 0 0 auto;
}

@keyframes analysisChoiceSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   CETAK HASIL ANALISIS
   ========================================================= */
.analisis-result-print-summary {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #ffffff;
}

.analisis-result-print-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.analisis-result-print-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: #111827;
}

.analisis-result-print-head p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #64748b;
}

.analisis-result-print-meta {
  display: grid;
  gap: 4px;
  text-align: right;
  font-size: 11px;
  color: #475569;
}

.analisis-result-print-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.analisis-result-print-item {
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.analisis-result-print-item span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.analisis-result-print-item strong {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: #111827;
}

.analisis-result-print-note {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.analisis-result-print-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #111827;
}

.analisis-result-print-note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #475569;
}

@media print {
  .analisis-result-print-summary {
    break-inside: avoid;
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 12px;
  }

  .analisis-result-print-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analisis-result-print-head h2 {
    font-size: 16px;
  }

  .analisis-result-print-head p,
  .analisis-result-print-meta,
  .analisis-result-print-item span,
  .analisis-result-print-item strong,
  .analisis-result-print-note p {
    font-size: 10px;
  }
}

/* =========================================================
   FINAL CHECKBOX ANALISIS - UKURAN NORMAL DAN SEJAJAR
   ========================================================= */
.analysis-floor-row.clean label.analysis-floor-copy-check {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

.analysis-floor-row.clean label.analysis-floor-copy-check input {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  flex: 0 0 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #0f766e !important;
}

.analysis-floor-row.clean label.analysis-floor-copy-check span {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* Checkbox otomatis luas hijau */
.analysis-param-card label.analysis-auto-check-row,
label.analysis-auto-check-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.analysis-param-card label.analysis-auto-check-row input,
label.analysis-auto-check-row input {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  flex: 0 0 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #0f766e !important;
}

.analysis-param-card label.analysis-auto-check-row span,
label.analysis-auto-check-row span {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

/* =========================================================
   PDF HASIL ANALISIS - KHUSUS, BUKAN CETAK PETA REGULER
   ========================================================= */
.rm-analysis-pdf-stage {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 794px;
  min-height: 1123px;
  background: #ffffff;
  color: #111827;
  z-index: -1;
  pointer-events: none;
}

.rm-analysis-pdf-page {
  width: 794px;
  height: 1123px;
  padding: 28px;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}

.rm-analysis-pdf-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid #e5e7eb;
}

.rm-analysis-pdf-logo {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f766e, #2f7892);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  overflow: hidden;
  flex: 0 0 auto;
}

.rm-analysis-pdf-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 7px;
  box-sizing: border-box;
}

.rm-analysis-pdf-title h1 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  color: #111827;
}

.rm-analysis-pdf-title p {
  margin: 4px 0 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
}

.rm-analysis-pdf-meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.rm-analysis-pdf-meta-item,
.rm-analysis-pdf-result-item {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.rm-analysis-pdf-meta-item span,
.rm-analysis-pdf-result-item span {
  display: block;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}

.rm-analysis-pdf-meta-item strong,
.rm-analysis-pdf-result-item strong {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: #111827;
}

.rm-analysis-pdf-map-shell {
  position: relative;
  margin-top: 14px;
  height: 560px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #eef2f7;
}

.rm-analysis-pdf-map {
  width: 100%;
  height: 100%;
}

.rm-analysis-pdf-north {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 54px;
  z-index: 900;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92) !important
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-weight: 900;
  color: #111827;
}

.rm-analysis-pdf-north .arrow {
  font-size: 25px;
  line-height: 1;
}

.rm-analysis-pdf-north .label {
  font-size: 10px;
  line-height: 1;
  margin-top: 1px;
}

.rm-analysis-pdf-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 900;
  width: 235px;
  max-height: 230px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.12);
  padding: 10px 11px;
}

.rm-analysis-pdf-legend-title {
  font-size: 10px;
  font-weight: 900;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 7px;
}

.rm-analysis-pdf-legend-section {
  margin-top: 7px;
}

.rm-analysis-pdf-legend-section:first-of-type {
  margin-top: 0;
}

.rm-analysis-pdf-legend-section strong {
  display: block;
  font-size: 9px;
  color: #475569;
  margin-bottom: 4px;
}

.rm-analysis-pdf-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.25;
  color: #334155;
}

.rm-analysis-pdf-legend-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 2px solid #64748b;
  flex: 0 0 auto;
}

.rm-analysis-pdf-result-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.rm-analysis-pdf-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.rm-analysis-pdf-note strong {
  display: block;
  font-size: 11px;
  margin-bottom: 5px;
  color: #111827;
}

.rm-analysis-pdf-note p {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: #475569;
}

.rm-analysis-pdf-footer {
  margin-top: 12px;
  font-size: 9px;
  line-height: 1.4;
  color: #64748b;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}

/* =========================================================
   LOGO PDF HASIL ANALISIS - GAYA NETRAL
   ========================================================= */
.rm-analysis-pdf-logo {
  background: #f8fafc !important;
  border: 1px solid #d9dee7 !important;
  box-shadow: none !important;
  color: #4b5563 !important;
}

.rm-analysis-pdf-logo img {
  padding: 6px !important;
  object-fit: contain !important;
}

/* =========================================================
   PDF HASIL ANALISIS - TABEL ZONA IRISAN
   ========================================================= */
.rm-analysis-pdf-zone-list {
  margin-top: 10px;
}

.rm-analysis-pdf-section-title {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 900;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rm-analysis-pdf-zone-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5px;
  color: #334155;
}

.rm-analysis-pdf-zone-list th,
.rm-analysis-pdf-zone-list td {
  border: 1px solid #e5e7eb;
  padding: 5px 6px;
  text-align: left;
  vertical-align: top;
}

.rm-analysis-pdf-zone-list th {
  background: #f8fafc;
  color: #475569;
  font-weight: 900;
}

/* =========================================================
   STATUS BADGE PDF HASIL ANALISIS
   ========================================================= */
.rm-analysis-pdf-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 24px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  border: 1px solid transparent !important;
}

.rm-analysis-pdf-status-badge.status-allowed {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}

.rm-analysis-pdf-status-badge.status-limited {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

.rm-analysis-pdf-status-badge.status-denied {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

.rm-analysis-pdf-status-badge.status-unknown {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

/* =========================================================
   RAPKAN OVERLAY PETA PDF ANALISIS
   ========================================================= */
.rm-analysis-pdf-north {
  top: 10px !important;
  right: 10px !important;
  width: 36px !important;
  height: 46px !important;
  border-radius: 12px !important;
}

.rm-analysis-pdf-north .arrow {
  font-size: 22px !important;
}

.rm-analysis-pdf-north .label {
  font-size: 9px !important;
}

.rm-analysis-pdf-legend {
  left: 10px !important;
  bottom: 10px !important;
  width: 210px !important;
  max-height: 190px !important;
  padding: 8px 9px !important;
}

.rm-analysis-pdf-legend-title {
  font-size: 9px !important;
  margin-bottom: 5px !important;
}

.rm-analysis-pdf-legend-section strong {
  font-size: 8.5px !important;
}

.rm-analysis-pdf-legend-row {
  font-size: 8.5px !important;
  gap: 5px !important;
}

.rm-analysis-pdf-legend-swatch {
  width: 11px !important;
  height: 11px !important;
}

/* NORTH ARROW KARTOGRAFIS - PDF HASIL ANALISIS */
.rm-analysis-pdf-north {
  top: 10px !important;
  right: 10px !important;
  width: 48px !important;
  height: 58px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16) !important;
  padding: 3px !important;
}

.rm-analysis-pdf-north svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.rm-analysis-north-text {
  font-size: 16px;
  font-weight: 900;
  fill: #111827;
  font-family: Arial, Helvetica, sans-serif;
}

.rm-analysis-north-dark {
  fill: #111827;
  stroke: #111827;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.rm-analysis-north-light {
  fill: #ffffff;
  stroke: #111827;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

#analisisDownloadBtn {
  background: linear-gradient(135deg, #2563eb, #4f8df5) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22) !important;
}

#analisisDownloadBtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.28) !important;
}

#analisisDownloadBtn:active {
  transform: translateY(1px) scale(0.98) !important;
}

#analisisDownloadBtn.is-loading {
  opacity: 0.9 !important;
  cursor: wait !important;
  pointer-events: none !important;
}

/* KONSISTENSI TOMBOL X PANEL */
.analysis-panel-close,
.webgis-adddata-close,
.webgis-layer-panel-close,
.webgis-print-panel-close,
.webgis-measure-modal-close,
.webgis-measure-close,
.analysis-component-modal-head button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: none !important;
  border-radius: 14px !important;
  background: rgba(243, 244, 246, 0.95) !important;
  color: #374151 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease !important;
}

.analysis-panel-close:hover,
.webgis-adddata-close:hover,
.webgis-layer-panel-close:hover,
.webgis-print-panel-close:hover,
.webgis-measure-modal-close:hover,
.webgis-measure-close:hover,
.analysis-component-modal-head button:hover {
  background: rgba(229, 231, 235, 0.98) !important;
  color: #111827 !important;
  transform: translateY(-1px) !important;
}

.analysis-panel-close:active,
.webgis-adddata-close:active,
.webgis-layer-panel-close:active,
.webgis-print-panel-close:active,
.webgis-measure-modal-close:active,
.webgis-measure-close:active,
.analysis-component-modal-head button:active {
  transform: translateY(1px) scale(0.98) !important;
}

.analysis-panel-close svg,
.webgis-adddata-close svg,
.webgis-layer-panel-close svg,
.webgis-print-panel-close svg,
.webgis-measure-modal-close svg,
.webgis-measure-close svg {
  width: 18px !important;
  height: 18px !important;
}

/* =========================================================
   SAMAKAN KETEBALAN TOMBOL X ANALISIS
   ========================================================= */
.analysis-panel-close {
  font-size: 22px !important;
  font-weight: 500 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1 !important;
}

.analysis-panel-close::before,
.analysis-panel-close::after {
  font-weight: 500 !important;
}

/* =========================================================
   PANEL ANALISIS INTERSECT
   ========================================================= */
.webgis-intersect-shell {
  position: absolute;
  inset: 0;
  z-index: 1280;
  pointer-events: none;
  display: none;
}

.webgis-intersect-shell.is-open {
  display: block;
}

.webgis-intersect-panel {
  position: absolute;
  right: 18px;
  top: 92px;
  width: 390px;
  max-height: calc(100vh - 126px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

.webgis-intersect-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.webgis-intersect-header h3 {
  margin: 0;
  font-size: 17px;
  color: #111827;
}

.webgis-intersect-header p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.webgis-intersect-body {
  padding: 16px;
  overflow: auto;
}

.webgis-intersect-card {
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.webgis-intersect-card label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 900;
  color: #334155;
}

.webgis-intersect-color-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}

.webgis-intersect-color-row input[type="color"] {
  width: 44px;
  height: 38px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}

.webgis-intersect-color-row span {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.webgis-intersect-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 10px;
}

.webgis-intersect-btn {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.webgis-intersect-btn:hover {
  transform: translateY(-1px);
}

.webgis-intersect-btn:active {
  transform: translateY(1px) scale(.98);
}

.webgis-intersect-btn.primary {
  background: linear-gradient(135deg, #0f766e, #0d615b);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.18);
}

.webgis-intersect-btn.secondary {
  background: #f1f5f9;
  color: #334155;
}

.webgis-intersect-note {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  font-size: 12px;
  line-height: 1.55;
  color: #64748b;
}

.webgis-intersect-result {
  margin-top: 14px;
}

.webgis-intersect-empty {
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

.webgis-intersect-summary {
  padding: 13px 14px;
  border-radius: 18px;
  background: #eef5df;
  border: 1px solid #d9e7b3;
  color: #0f766e;
}

.webgis-intersect-summary strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.webgis-intersect-summary span {
  font-size: 12px;
  line-height: 1.5;
}

.webgis-intersect-layer-group {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
}

.webgis-intersect-layer-title {
  padding: 11px 13px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.webgis-intersect-layer-title strong {
  display: block;
  font-size: 13px;
  color: #111827;
}

.webgis-intersect-layer-title span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
}

.webgis-intersect-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  padding: 10px 13px;
  border-top: 1px solid #f1f5f9;
}

.webgis-intersect-row:first-child {
  border-top: 0;
}

.webgis-intersect-swatch {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 2px solid #64748b;
  margin-top: 2px;
}

.webgis-intersect-row-main strong {
  display: block;
  font-size: 12px;
  color: #111827;
}

.webgis-intersect-row-main span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
}

/* =========================================================
   INTERSECT - RAPIKAN TOMBOL DAN COLOR PICKER
   ========================================================= */
.webgis-intersect-color-row {
  grid-template-columns: 46px 1fr !important;
  align-items: center !important;
}

.webgis-intersect-color-row input[type="color"] {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  padding: 3px !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.webgis-intersect-color-row input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}

.webgis-intersect-color-row input[type="color"]::-webkit-color-swatch {
  border: none !important;
  border-radius: 7px !important;
}

.webgis-intersect-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.webgis-intersect-btn {
  border-radius: 12px !important;
  min-height: 42px !important;
}

/* Saat mode gambar intersect, layer dataset tidak menangkap klik */
.webgis-intersect-drawing .leaflet-interactive {
  pointer-events: none !important;
}

.webgis-intersect-btn.danger {
  background: #fff1f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

.webgis-intersect-btn.secondary {
  border: 1px solid #e2e8f0 !important;
}

/* =========================================================
   INTERSECT - MODAL DELINIASI TANPA BLUR BACKDROP
   ========================================================= */
#intersectMeasureModal .analysis-component-modal-backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================
   INTERSECT - ACTIVE SOURCE BUTTON
   ========================================================= */
.webgis-intersect-btn.intersect-source-btn {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.webgis-intersect-btn.intersect-source-btn.is-active {
  background: linear-gradient(135deg, #0f766e, #0d615b) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.18) !important;
}

.webgis-intersect-btn.danger {
  background: #fff1f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  box-shadow: none !important;
}

/* =========================================================
   INTERSECT - CLOSE BUTTON SVG KONSISTEN
   ========================================================= */
#intersectMeasureModal .intersect-modal-close {
  font-size: 0 !important;
  font-weight: normal !important;
}

#intersectMeasureModal .intersect-modal-close svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
}
/* =========================================================
   INTERSECT - SAMAKAN ANIMASI PANEL DENGAN PANEL KANAN LAIN
   ========================================================= */
.webgis-intersect-shell {
  display: block !important;
  pointer-events: none !important;
  transform: translateX(calc(100% + 36px)) !important;
  opacity: 0 !important;
  transition:
    transform .28s ease,
    opacity .28s ease !important;
}

.webgis-intersect-shell.is-open {
  pointer-events: auto !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* =========================================================
   FINAL - TOMBOL X KONSISTEN SEMUA PANEL DAN MODAL
   ========================================================= */
.webgis-layer-panel-close,
.webgis-adddata-close,
.webgis-print-panel-close,
.webgis-measure-modal-close,
.webgis-measure-close,
.analysis-panel-close,
.rm-consistent-panel-close,
.intersect-modal-close,
.analisis-measure-modal-close,
.intersect-measure-modal-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: none !important;
  border-radius: 14px !important;
  background: rgba(243, 244, 246, 0.95) !important;
  color: #374151 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  font-weight: normal !important;
  transition:
    transform .15s ease,
    background .15s ease,
    color .15s ease !important;
}

.webgis-layer-panel-close svg,
.webgis-adddata-close svg,
.webgis-print-panel-close svg,
.webgis-measure-modal-close svg,
.webgis-measure-close svg,
.analysis-panel-close svg,
.rm-consistent-panel-close svg,
.intersect-modal-close svg,
.analisis-measure-modal-close svg,
.intersect-measure-modal-close svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
  flex: 0 0 auto !important;
}

.webgis-layer-panel-close:hover,
.webgis-adddata-close:hover,
.webgis-print-panel-close:hover,
.webgis-measure-modal-close:hover,
.webgis-measure-close:hover,
.analysis-panel-close:hover,
.rm-consistent-panel-close:hover,
.intersect-modal-close:hover,
.analisis-measure-modal-close:hover,
.intersect-measure-modal-close:hover {
  background: rgba(229, 231, 235, 0.98) !important;
  color: #111827 !important;
  transform: translateY(-1px) !important;
}

.webgis-layer-panel-close:active,
.webgis-adddata-close:active,
.webgis-print-panel-close:active,
.webgis-measure-modal-close:active,
.webgis-measure-close:active,
.analysis-panel-close:active,
.rm-consistent-panel-close:active,
.intersect-modal-close:active,
.analisis-measure-modal-close:active,
.intersect-measure-modal-close:active {
  transform: translateY(1px) scale(.98) !important;
}

/* Matikan X berbasis pseudo-element lama agar tidak dobel */
.rm-consistent-panel-close::before,
.rm-consistent-panel-close::after,
.intersect-modal-close::before,
.intersect-modal-close::after,
.analisis-measure-modal-close::before,
.analisis-measure-modal-close::after,
.intersect-measure-modal-close::before,
.intersect-measure-modal-close::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   FIX INTERSECT SHELL - JANGAN BLOKIR TOMBOL PANEL LAIN
   ========================================================= */
.webgis-intersect-shell {
  display: block !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateX(calc(100% + 36px)) !important;
  transition:
    transform .28s ease,
    opacity .28s ease,
    visibility .28s ease !important;
}

.webgis-intersect-shell.is-open {
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.webgis-intersect-panel {
  pointer-events: auto !important;
}
/* =========================================================
   FIX X PANEL INTERSECT - SAMA DENGAN PANEL LAIN
   ========================================================= */
.webgis-intersect-header .webgis-intersect-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: none !important;
  border-radius: 14px !important;
  background: rgba(243, 244, 246, 0.95) !important;
  color: #374151 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.webgis-intersect-header .webgis-intersect-close svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
}

.webgis-intersect-header .webgis-intersect-close:hover {
  background: rgba(229, 231, 235, 0.98) !important;
  color: #111827 !important;
  transform: translateY(-1px) !important;
}

.webgis-intersect-header .webgis-intersect-close:active {
  transform: translateY(1px) scale(.98) !important;
}
/* =========================================================
   ANALYSIS HUB PANEL
   ========================================================= */
.analysis-hub-panel {
  position: absolute;
  top: 92px;
  right: 18px;
  width: 390px;
  max-height: calc(100vh - 126px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  z-index: 1260;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 36px));
  transition:
    transform .28s ease,
    opacity .28s ease;
}

.analysis-hub-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.analysis-hub-content {
  padding: 16px;
  display: grid;
  gap: 12px;
  overflow: auto;
}

.analysis-hub-card {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.analysis-hub-card:hover {
  transform: translateY(-1px);
  border-color: #d9e7b3;
  background: #fbfdf7;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.analysis-hub-card:active {
  transform: translateY(1px) scale(.99);
}

.analysis-hub-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: #eef5df;
  color: #0f766e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.analysis-hub-icon.intersect {
  background: #e0f2fe;
  color: #0369a1;
}

.analysis-hub-icon.ai {
  background: #f3e8ff;
  color: #7e22ce;
}

.analysis-hub-icon svg {
  width: 23px;
  height: 23px;
}

.analysis-hub-text strong {
  display: block;
  font-size: 13px;
  color: #111827;
  margin-bottom: 4px;
}

.analysis-hub-text small {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: #64748b;
}

/* Sembunyikan tombol Intersect lama di toolbar bawah */
.webgis-intersect-toolbar-entry {
  display: none !important;
}
/* =========================================================
   Z-INDEX SUBPANEL DI ATAS ANALYSIS HUB
   ========================================================= */
.analysis-side-panel,
.webgis-intersect-shell {
  z-index: 1280 !important;
}
/* =========================================================
   FIX POSISI TOMBOL X PANEL MENU ANALISIS UTAMA
   ========================================================= */
.analysis-hub-panel .analysis-panel-header {
  position: relative !important;
  padding-right: 76px !important;
}

.analysis-hub-panel .analysis-hub-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 2 !important;
}

.analysis-hub-panel .analysis-panel-header p {
  padding-right: 0 !important;
}

/* =========================================================
   AI RUANG MASLAHAT PANEL
   ========================================================= */
.ai-rm-panel {
  position: absolute;
  top: 92px;
  right: 18px;
  width: 390px;
  max-height: calc(100vh - 126px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  z-index: 1285;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 36px));
  transition:
    transform .28s ease,
    opacity .28s ease;
}

.ai-rm-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.ai-rm-content {
  padding: 16px;
  overflow: auto;
  display: grid;
  gap: 12px;
}

.ai-rm-section,
.ai-rm-status-card {
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #f8fafc;
}

.ai-rm-section label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 900;
  color: #334155;
}

.ai-rm-mode-grid,
.ai-rm-aoi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ai-rm-aoi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-rm-mode-grid button,
.ai-rm-aoi-grid button {
  min-height: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.ai-rm-mode-grid button.active,
.ai-rm-aoi-grid button.active {
  background: linear-gradient(135deg, #7e22ce, #a855f7);
  color: #ffffff;
  border-color: transparent;
}

.ai-rm-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 8px;
}

.ai-rm-btn,
.ai-rm-run-btn {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.ai-rm-btn.primary,
.ai-rm-run-btn {
  background: linear-gradient(135deg, #7e22ce, #a855f7);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(126, 34, 206, 0.2);
}

.ai-rm-btn.secondary {
  background: #f1f5f9;
  color: #334155;
}

.ai-rm-status-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ai-rm-status-card span {
  font-size: 11px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
}

.ai-rm-status-card strong {
  font-size: 12px;
  color: #111827;
}

.ai-rm-status-card p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.ai-rm-status-card p.valid {
  color: #166534;
}

.ai-rm-status-card p.invalid {
  color: #b91c1c;
}

.ai-rm-note,
.ai-rm-empty {
  padding: 12px 13px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  font-size: 12px;
  line-height: 1.55;
  color: #64748b;
}

.ai-rm-result-box {
  display: grid;
  gap: 10px;
}

.ai-rm-result-summary {
  padding: 13px 14px;
  border-radius: 18px;
  background: #f3e8ff;
  border: 1px solid #e9d5ff;
  color: #7e22ce;
}

.ai-rm-result-summary strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.ai-rm-result-summary span {
  font-size: 12px;
}

.ai-rm-result-list {
  display: grid;
  gap: 8px;
}

.ai-rm-result-row {
  padding: 11px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  background: #ffffff;
}

.ai-rm-result-row strong {
  display: block;
  font-size: 12px;
  color: #111827;
}

.ai-rm-result-row span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
}

/* =========================================================
   FIX HORIZONTAL SCROLL WEBGIS
   Panel dinamis tidak boleh memperlebar halaman
   ========================================================= */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.webgis-page,
.webgis-map-stage {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Panel dinamis yang dibuat via JS ditempel ke body,
   jadi gunakan fixed agar tidak memperlebar dokumen */
.analysis-hub-panel,
.ai-rm-panel {
  position: fixed !important;
  right: 18px !important;
  left: auto !important;
  max-width: calc(100vw - 36px) !important;
}

/* Pastikan panel slide-out tidak membuat scrollbar horizontal */
.analysis-hub-panel:not(.active),
.ai-rm-panel:not(.active) {
  pointer-events: none !important;
}

/* Toolbar bawah tetap aman di layar kecil */
.webgis-bottom-toolbar {
  max-width: calc(100vw - 24px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.webgis-bottom-toolbar::-webkit-scrollbar {
  display: none !important;
}
/* =========================================================
   FIX POSISI TOMBOL X PANEL AI RUANG MASLAHAT
   ========================================================= */
.ai-rm-panel .analysis-panel-header {
  position: relative !important;
  padding-right: 76px !important;
}

.ai-rm-panel .ai-rm-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 2 !important;
}

.ai-rm-panel .analysis-panel-header p {
  padding-right: 0 !important;
}

/* =========================================================
   TYPOGRAPHY KONSISTEN PANEL ANALISIS
   ========================================================= */

/* Panel utama "Menu Analisis" disamakan dengan Add Data / Print / Measure */
.analysis-hub-panel .analysis-panel-header h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #111827 !important;
  margin: 0 0 4px 0 !important;
}

.analysis-hub-panel .analysis-panel-header p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
  margin: 0 !important;
}

/* Subpanel Analisis Tata Ruang disamakan dengan Intersect dan AI */
.analysis-side-panel .analysis-panel-header h3,
.ai-rm-panel .analysis-panel-header h3,
.webgis-intersect-header h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  color: #111827 !important;
  margin: 0 0 5px 0 !important;
}

.analysis-side-panel .analysis-panel-header p,
.ai-rm-panel .analysis-panel-header p,
.webgis-intersect-header p {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* Badge kecil pada subpanel tetap halus dan tidak terasa seperti judul utama */
.analysis-side-panel .analysis-panel-badge,
.ai-rm-panel .analysis-panel-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
/* =========================================================
   AI RUANG MASLAHAT - INPUT AOI FILE/DELINIASI
   ========================================================= */
.ai-rm-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ai-rm-btn.danger {
  background: #fff1f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  box-shadow: none !important;
}

.ai-rm-source-btn.secondary {
  border: 1px solid #e2e8f0 !important;
}

.ai-rm-source-btn.is-active,
.ai-rm-source-btn.primary {
  background: linear-gradient(135deg, #7e22ce, #a855f7) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 18px rgba(126, 34, 206, 0.2) !important;
}

/* Modal deliniasi AI tanpa blur belakang agar konsisten dengan modal pilihan lain */
#aiRmMeasureModal .analysis-component-modal-backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* =========================================================
   FIX TOMBOL JALANKAN ANALISIS - PANEL AI RUANG MASLAHAT
   ========================================================= */
.ai-rm-panel .ai-rm-run-btn {
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #7e22ce, #a855f7) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 10px 18px rgba(126, 34, 206, 0.20) !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease !important;
}

.ai-rm-panel .ai-rm-run-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow: 0 14px 24px rgba(126, 34, 206, 0.26) !important;
}

.ai-rm-panel .ai-rm-run-btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

.ai-rm-panel .ai-rm-run-btn:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
/* =========================================================
   FIX SPACING PANEL AI RUANG MASLAHAT
   Setelah tombol File AOI dan Deliniasi ditambahkan
   ========================================================= */
.ai-rm-panel .ai-rm-content {
  display: grid !important;
  gap: 12px !important;
}

.ai-rm-panel .ai-rm-section,
.ai-rm-panel .ai-rm-status-card,
.ai-rm-panel .ai-rm-note,
.ai-rm-panel .ai-rm-result-box,
.ai-rm-panel .ai-rm-run-btn {
  width: 100% !important;
  box-sizing: border-box !important;
}

.ai-rm-panel .ai-rm-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

.ai-rm-panel .ai-rm-btn {
  width: 100% !important;
  min-width: 0 !important;
}

.ai-rm-panel .ai-rm-note {
  margin: 0 !important;
}

.ai-rm-panel .ai-rm-run-btn {
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #7e22ce, #a855f7) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 18px rgba(126, 34, 206, 0.20) !important;
  position: relative !important;
  z-index: 1 !important;
}

.ai-rm-panel .ai-rm-result-box {
  margin-top: 0 !important;
}

/* =========================================================
   AI RUANG MASLAHAT - SAMAKAN UKURAN DENGAN ANALISIS TATA RUANG
   ========================================================= */
.ai-rm-panel {
  width: min(520px, calc(100vw - 36px)) !important;
  max-width: min(520px, calc(100vw - 36px)) !important;
  top: 92px !important;
  right: 18px !important;
  max-height: calc(100vh - 126px) !important;
}

.ai-rm-panel .ai-rm-content {
  gap: 14px !important;
}

.ai-rm-panel .ai-rm-section,
.ai-rm-panel .ai-rm-status-card,
.ai-rm-panel .ai-rm-note,
.ai-rm-panel .ai-rm-result-box {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Karena panel lebih lebar, tombol AOI bisa dibuat lebih lega */
.ai-rm-panel .ai-rm-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ai-rm-panel .ai-rm-btn {
  min-width: 0 !important;
  width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Tetap responsif di layar kecil */
@media (max-width: 620px) {
  .ai-rm-panel {
    top: auto !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 22px 22px 18px 18px !important;
  }

  .ai-rm-panel .ai-rm-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   FIX UKURAN PANEL AI - SAMAKAN DENGAN PANEL ANALISIS
   ========================================================= */
.ai-rm-panel {
  width: 430px !important;
  max-width: calc(100vw - 36px) !important;
  right: 18px !important;
}

/* tombol AOI tetap rapi pada lebar 430px */
.ai-rm-panel .ai-rm-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* mode analisis tetap dua kolom */
.ai-rm-panel .ai-rm-mode-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* AOI polygon/rectangle/circle tetap tiga kolom */
.ai-rm-panel .ai-rm-aoi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* =========================================================
   FIX TINGGI PANEL AI - SAMAKAN DENGAN ANALISIS TATA RUANG
   ========================================================= */
.ai-rm-panel {
  top: 84px !important;
  right: 18px !important;
  bottom: 18px !important;
  height: auto !important;
  max-height: none !important;

  width: min(420px, calc(100vw - 36px)) !important;
  max-width: min(420px, calc(100vw - 36px)) !important;

  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Isi panel AI yang scroll, bukan panel luarnya */
.ai-rm-panel .ai-rm-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Header tetap di atas, isi panel yang bergerak */
.ai-rm-panel .analysis-panel-header {
  flex: 0 0 auto !important;
}

/* Mobile tetap seperti panel bawah */
@media (max-width: 520px) {
  .ai-rm-panel {
    top: auto !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 22px 22px 18px 18px !important;
  }
}

/* =========================================================
   AI RESULT ROW WITH SWATCH
   ========================================================= */
.ai-rm-result-row {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  gap: 8px !important;
  align-items: start !important;
}

.ai-rm-result-row .webgis-intersect-swatch {
  width: 15px !important;
  height: 15px !important;
  border-radius: 4px !important;
  border: 2px solid #64748b;
  margin-top: 2px;
}
/* =========================================================
   FINAL - UKURAN PANEL KANAN SERAGAM
   ========================================================= */
:root {
  --rm-right-panel-width: 420px;
  --rm-right-panel-top: 84px;
  --rm-right-panel-right: 18px;
  --rm-right-panel-bottom: 18px;
}

/* Panel utama kanan yang tinggi penuh */
.analysis-side-panel,
.ai-rm-panel,
.webgis-intersect-panel,
.webgis-adddata-panel,
.webgis-layer-panel,
.webgis-print-panel {
  width: min(var(--rm-right-panel-width), calc(100vw - 36px)) !important;
  max-width: min(var(--rm-right-panel-width), calc(100vw - 36px)) !important;
  box-sizing: border-box !important;
}

/* Panel AI disamakan tinggi dengan Analisis Tata Ruang */
.ai-rm-panel {
  top: var(--rm-right-panel-top) !important;
  right: var(--rm-right-panel-right) !important;
  bottom: var(--rm-right-panel-bottom) !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Panel Intersect juga dibuat setinggi panel kanan lain */
.webgis-intersect-panel {
  top: var(--rm-right-panel-top) !important;
  right: var(--rm-right-panel-right) !important;
  bottom: var(--rm-right-panel-bottom) !important;
  height: auto !important;
  max-height: none !important;
}

/* Panel hub menu analisis: tinggi tetap sesuai desain, hanya lebarnya disamakan */
.analysis-hub-panel {
  width: min(var(--rm-right-panel-width), calc(100vw - 36px)) !important;
  max-width: min(var(--rm-right-panel-width), calc(100vw - 36px)) !important;
}

/* Isi panel yang tinggi penuh harus scroll di dalam */
.ai-rm-panel .ai-rm-content,
.webgis-intersect-panel .webgis-intersect-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Mobile */
@media (max-width: 520px) {
  .analysis-side-panel,
  .ai-rm-panel,
  .webgis-intersect-panel,
  .analysis-hub-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
  }
}
/* =========================================================
   FINAL - SAMAKAN UKURAN PANEL MEASURE DENGAN PANEL KANAN
   ========================================================= */
.webgis-measure-modal-backdrop {
  top: var(--rm-right-panel-top, 84px) !important;
  right: var(--rm-right-panel-right, 18px) !important;
  bottom: var(--rm-right-panel-bottom, 18px) !important;
  height: auto !important;
  max-height: none !important;
}

.webgis-measure-modal {
  width: min(var(--rm-right-panel-width, 420px), calc(100vw - 36px)) !important;
  max-width: min(var(--rm-right-panel-width, 420px), calc(100vw - 36px)) !important;
  height: 100% !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.webgis-measure-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Mobile */
@media (max-width: 520px) {
  .webgis-measure-modal-backdrop {
    top: auto !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    height: auto !important;
    max-height: calc(100vh - 20px) !important;
  }

  .webgis-measure-modal {
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 22px 22px 18px 18px !important;
  }
}

/* =========================================================
   AI ESRI RESULT
   ========================================================= */
.ai-rm-result-summary.danger {
  background: #fee2e2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}

.ai-rm-result-row {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  gap: 8px !important;
  align-items: start !important;
}

.ai-rm-result-row .webgis-intersect-swatch {
  width: 15px !important;
  height: 15px !important;
  border-radius: 4px !important;
  border: 2px solid #64748b !important;
  margin-top: 2px !important;
}

/* =========================================================
   AI RUANG MASLAHAT - WARNA TEMA RUANG MASLAHAT
   ========================================================= */

/* Tombol mode aktif dan AOI aktif */
.ai-rm-mode-grid button.active,
.ai-rm-aoi-grid button.active {
  background: linear-gradient(135deg, #0f766e, #0d615b) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.18) !important;
}

/* Tombol utama AI */
.ai-rm-btn.primary,
.ai-rm-run-btn,
.ai-rm-source-btn.is-active,
.ai-rm-source-btn.primary {
  background: linear-gradient(135deg, #0f766e, #0d615b) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.18) !important;
}

.ai-rm-btn.primary:hover,
.ai-rm-run-btn:hover,
.ai-rm-source-btn.is-active:hover,
.ai-rm-source-btn.primary:hover {
  filter: brightness(1.03) !important;
  box-shadow: 0 14px 24px rgba(15, 118, 110, 0.24) !important;
}

/* Card hasil AI */
.ai-rm-result-summary {
  background: #eef5df !important;
  border-color: #d9e7b3 !important;
  color: #0f766e !important;
}

.ai-rm-basemap-card {
  display: none !important;
}

/* =========================================================
   FIX SPACING PANEL AI RUANG MASLAHAT
   ========================================================= */
.ai-rm-panel .ai-rm-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.ai-rm-panel .ai-rm-section,
.ai-rm-panel .ai-rm-status-card,
.ai-rm-panel .ai-rm-note,
.ai-rm-panel .ai-rm-result-box,
.ai-rm-panel .ai-rm-run-btn {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.ai-rm-panel .ai-rm-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

.ai-rm-panel .ai-rm-btn {
  width: 100% !important;
  min-width: 0 !important;
}

.ai-rm-panel .ai-rm-run-btn {
  min-height: 44px !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #0f766e, #0d615b) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 18px rgba(15, 118, 110, 0.18) !important;
}

.ai-rm-panel .ai-rm-result-box {
  margin-top: 0 !important;
}

/* =========================================================
   FINAL FIX SPACING AI - NOTE / TOMBOL / HASIL
   ========================================================= */
.ai-rm-panel .ai-rm-note + .ai-rm-run-btn {
  margin-top: 14px !important;
}

.ai-rm-panel .ai-rm-run-btn + .ai-rm-result-box {
  margin-top: 14px !important;
}

.ai-rm-panel .ai-rm-actions + input[type="file"] + .ai-rm-status-card,
.ai-rm-panel .ai-rm-actions + input[type="file"] + .ai-rm-status-card + .ai-rm-status-card,
.ai-rm-panel .ai-rm-status-card + .ai-rm-note {
  margin-top: 14px !important;
}

/* Jaga supaya tombol tetap full dan rapi */
.ai-rm-panel .ai-rm-run-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================
   LINDUNGI SAWAH - FORM LAPORAN
   ========================================================= */
.lindungi-sawah-form-wrap {
  margin-top: 20px;
}

.lindungi-sawah-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.lindungi-sawah-card-head {
  margin-bottom: 18px;
}

.lindungi-sawah-card-head h3 {
  margin: 0 0 6px;
  font-size: 21px;
  color: #111827;
}

.lindungi-sawah-card-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #64748b;
}

.lindungi-sawah-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lindungi-sawah-select,
.lindungi-sawah-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 14px;
  outline: none;
  background: #ffffff;
  color: #111827;
  font-family: inherit;
  box-sizing: border-box;
}

.lindungi-sawah-select:focus,
.lindungi-sawah-textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.10);
}

.lindungi-sawah-textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

.lindungi-sawah-photo-preview {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.lindungi-sawah-photo-item {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
}

.lindungi-sawah-photo-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.lindungi-sawah-photo-item span {
  display: block;
  padding: 8px 10px;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lindungi-sawah-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.lindungi-sawah-actions .btn-primary,
.lindungi-sawah-actions .btn-secondary-outline {
  width: auto;
  min-width: 160px;
  margin-top: 0;
}

.lindungi-sawah-info {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 16px;
  background: #eef5df;
  border: 1px solid #d9e7b3;
  color: #0f766e;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .lindungi-sawah-grid {
    grid-template-columns: 1fr;
  }

  .lindungi-sawah-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lindungi-sawah-actions .btn-primary,
  .lindungi-sawah-actions .btn-secondary-outline {
    width: 100%;
  }
}
/* =========================================================
   LINDUNGI SAWAH - AOI CARD
   ========================================================= */
.lindungi-sawah-aoi-card {
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.lindungi-sawah-aoi-head {
  margin-bottom: 12px;
}

.lindungi-sawah-aoi-head strong {
  display: block;
  font-size: 14px;
  color: #111827;
  margin-bottom: 4px;
}

.lindungi-sawah-aoi-head span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.lindungi-sawah-aoi-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.lindungi-sawah-aoi-actions .btn-secondary-outline {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  font-size: 12px;
}

.lindungi-sawah-aoi-status {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}
/* =========================================================
   HEADER MODERN STICKY - LINDUNGI SAWAH / HALAMAN SUBMENU
   ========================================================= */
.modern-dashboard-page .modern-topbar {
  position: sticky !important;
  top: 12px !important;
  z-index: 1200 !important;
}

/* Logo di header bisa diklik dan punya animasi seperti tombol */
.modern-brand-logo-button {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease !important;
}

.modern-brand-logo-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
}

.modern-brand-logo-button:active {
  transform: translateY(1px) scale(0.98) !important;
}

.modern-brand-logo-button .app-logo {
  margin-bottom: 0 !important;
}
/* =========================================================
   HEADER MODERN STICKY - LINDUNGI SAWAH / HALAMAN SUBMENU
   ========================================================= */
.modern-dashboard-page .modern-topbar {
  position: sticky !important;
  top: 12px !important;
  z-index: 1200 !important;
}

/* Logo di header bisa diklik dan punya animasi seperti tombol */
.modern-brand-logo-button {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 18px !important;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease !important;
}

.modern-brand-logo-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
}

.modern-brand-logo-button:active {
  transform: translateY(1px) scale(0.98) !important;
}

.modern-brand-logo-button .app-logo {
  margin-bottom: 0 !important;
}
/* =========================================================
   FINAL FIX - HEADER LOGO & PROFIL TETAP DI ATAS
   Berlaku untuk dashboard dan semua halaman dengan modern-topbar
   ========================================================= */
.modern-dashboard-page .modern-topbar {
  position: fixed !important;
  top: 24px !important;
  left: 50% !important;
  right: auto !important;
  width: calc(100% - 48px) !important;
  max-width: 1280px !important;
  transform: translateX(-50%) !important;
  z-index: 2500 !important;
  margin: 0 !important;
}

/* Karena header fixed keluar dari flow, konten utama diberi jarak dari atas */
.modern-dashboard-page .modern-dashboard-main {
  padding-top: 108px !important;
}

/* Pastikan dropdown profil tetap di atas konten */
.modern-dashboard-page .modern-topbar-right,
.modern-dashboard-page .modern-user-dropdown,
.modern-dashboard-page .modern-user-menu {
  z-index: 2600 !important;
}

/* Mobile */
@media (max-width: 760px) {
  .modern-dashboard-page .modern-topbar {
    top: 12px !important;
    width: calc(100% - 24px) !important;
  }

  .modern-dashboard-page .modern-dashboard-main {
    padding-top: 148px !important;
  }
}

/* =========================================================
   LINDUNGI SAWAH - DROPDOWN LOGOUT SAJA & HERO COMPACT
   ========================================================= */
.lindungi-only-user-menu {
  width: 160px;
  min-width: 160px;
}

.lindungi-only-user-menu .modern-user-menu-item {
  padding: 12px 14px;
  border-radius: 12px;
}

/* Biar card hero Lindungi Sawah mengikuti ukuran compact seperti Profil,
   tetapi tetap memakai warna/pattern hijau sawah yang sudah ada. */
.feature-hero-sawah.feature-hero-compact .feature-hero-content {
  max-width: none;
}

@media (max-width: 640px) {
  .lindungi-only-user-menu {
    width: 100%;
    min-width: 0;
    right: 0;
  }
}

/* =========================================================
   LINDUNGI SAWAH - FLOW FORM AWAL
   ========================================================= */
.lindungi-auto-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lindungi-auto-label span {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.lindungi-sawah-show-map-wrap {
  margin-top: 2px;
}

.lindungi-sawah-show-map-btn {
  width: 100%;
  justify-content: center;
}

.lindungi-sawah-after-map-fields {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.lindungi-aoi-icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.lindungi-btn-svg {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lindungi-btn-svg svg {
  width: 17px;
  height: 17px;
  display: block;
}

.lindungi-sawah-map-data-status {
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
}
/* =========================================================
   LINDUNGI SAWAH - FORM AWAL 2 KOLOM
   ========================================================= */
.lindungi-sawah-card > .lindungi-sawah-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.lindungi-sawah-card > .lindungi-sawah-grid > .form-group:not(.profile-form-group-full) {
  grid-column: auto;
}

#lsShowMapActionWrap,
#lsAfterMapFields {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .lindungi-sawah-card > .lindungi-sawah-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LINDUNGI SAWAH - TAHAP 2 ALUR FORM
   ========================================================= */
.lindungi-sawah-show-map-wrap {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.lindungi-sawah-show-map-btn {
  width: 100%;
  justify-content: center;
}

.lindungi-sawah-after-map-fields {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.lindungi-sawah-map-data-status {
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
}

/* =========================================================
   LINDUNGI SAWAH - PILIH DELINIASI 1X24 JAM
   ========================================================= */
.lindungi-sawah-measure-select-wrap {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
}

.lindungi-sawah-measure-select-wrap label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

/* =========================================================
   LINDUNGI SAWAH - ANALISIS AWAL SEDERHANA
   ========================================================= */
.lindungi-sawah-pre-analysis {
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe3ea;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
}

.lindungi-sawah-pre-analysis strong {
  color: #111827;
}

.lindungi-pre-analysis-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lindungi-pre-analysis-item {
  padding: 10px 11px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.lindungi-pre-analysis-item span {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.lindungi-pre-analysis-item b {
  display: block;
  font-size: 12px;
  color: #111827;
}

@media (max-width: 720px) {
  .lindungi-pre-analysis-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LINDUNGI SAWAH - PREVIEW PETA DASAR
   ========================================================= */
.lindungi-sawah-map-preview-wrap {
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #dbe3ea;
  background: #f8fafc;
}

.lindungi-sawah-map-preview {
  width: 100%;
  height: 380px;
}

@media (max-width: 720px) {
  .lindungi-sawah-map-preview {
    height: 320px;
  }
}

/* =========================================================
   LINDUNGI SAWAH - KONTROL DI MUKA PETA
   ========================================================= */
.ls-map-toolbar-control,
.ls-map-search-control {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
  border: 1px solid #dbe3ea;
  overflow: hidden;
}

.ls-map-toolbar-inner {
  display: flex;
  gap: 8px;
  padding: 8px;
}

.ls-map-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe3ea;
  background: #ffffff;
  color: #334155;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ls-map-tool-btn:hover {
  background: #f8fafc;
}

.ls-map-tool-btn.is-danger {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff7f7;
}

.ls-map-tool-btn.is-danger:hover {
  background: #fee2e2;
}

.ls-map-tool-btn.is-hidden {
  display: none;
}

.ls-map-search-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.ls-map-search-input {
  width: 220px;
  height: 34px;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 12px;
  color: #334155;
  outline: none;
  background: #ffffff;
}

.ls-map-search-input:focus {
  border-color: #94a3b8;
}

.ls-map-search-btn {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ls-map-search-btn:hover {
  background: #f8fafc;
}

@media (max-width: 720px) {
  .ls-map-search-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ls-map-search-input {
    width: 180px;
    max-width: 100%;
  }

  .ls-map-toolbar-inner {
    flex-direction: column;
  }
}

/* =========================================================
   LINDUNGI SAWAH - KONTROL PETA SATU KOLOM
   ========================================================= */
.ls-map-main-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.ls-map-search-box {
  position: relative;
  width: 260px;
  background: #ffffff;
  border: 1px solid #dbe3ea;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
  padding: 8px;
}

.ls-map-search-input {
  width: 100%;
  height: 34px;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 12px;
  color: #334155;
  outline: none;
  background: #ffffff;
  box-sizing: border-box;
}

.ls-map-search-input:focus {
  border-color: #94a3b8;
}

.ls-map-search-results {
  position: absolute;
  z-index: 10000;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dbe3ea;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  padding: 6px;
}

.ls-map-search-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #334155;
  cursor: pointer;
}

button.ls-map-search-item:hover {
  background: #f1f5f9;
}

.ls-map-tools-column {
  width: 42px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ls-map-icon-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe3ea;
  background: #ffffff;
  color: #334155;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.13);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.ls-map-icon-btn:hover {
  background: #f8fafc;
}

.ls-map-icon-btn svg {
  width: 19px;
  height: 19px;
  display: block;
}

.ls-map-danger-btn {
  color: #dc2626;
}

.ls-map-icon-btn.is-active {
  color: #0f766e;
  border-color: #b9dcd7;
  background: #f4f9e8;
}

.ls-map-icon-btn.is-hidden {
  display: none;
}

@media (max-width: 720px) {
  .ls-map-search-box {
    width: 210px;
  }

  .ls-map-icon-btn {
    width: 38px;
    height: 38px;
  }
}
/* =========================================================
   LINDUNGI SAWAH - POSISI KONTROL PETA FIX
   ========================================================= */
.lindungi-sawah-map-preview-wrap .leaflet-top.leaflet-left {
  top: 10px !important;
  left: 10px !important;
}

.lindungi-sawah-map-preview-wrap .leaflet-left .leaflet-control {
  margin-left: 0 !important;
}

.lindungi-sawah-map-preview-wrap .leaflet-top .leaflet-control {
  margin-top: 0 !important;
}

.lindungi-sawah-map-preview-wrap .ls-map-main-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.lindungi-sawah-map-preview-wrap .ls-map-search-box {
  position: relative !important;
  width: 260px !important;
  max-width: calc(100vw - 80px) !important;
  padding: 7px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #dbe3ea !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16) !important;
}

.lindungi-sawah-map-preview-wrap .ls-map-search-input {
  width: 100% !important;
  height: 34px !important;
  box-sizing: border-box !important;
}

.lindungi-sawah-map-preview-wrap .ls-map-tools-column {
  width: 42px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.lindungi-sawah-map-preview-wrap .ls-map-icon-btn {
  width: 42px !important;
  height: 42px !important;
}

.lindungi-sawah-map-preview-wrap .ls-map-search-results {
  z-index: 10000 !important;
}
/* =========================================================
   LINDUNGI SAWAH - HAPUS FOTO PREVIEW
   ========================================================= */
.lindungi-sawah-photo-item {
  position: relative;
}

.lindungi-sawah-photo-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
}

.lindungi-sawah-photo-remove:hover {
  background: #dc2626;
}

/* =========================================================
   LINDUNGI SAWAH - STATUS ANALISIS AWAL
   ========================================================= */
.lindungi-status-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.2;
}

.lindungi-status-pill.is-safe {
  background: #eff6ff;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe;
}

.lindungi-status-pill.is-hit {
  background: #fef2f2;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
}

.lindungi-status-pill.is-neutral {
  background: #f8fafc;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
}
/* =========================================================
   LINDUNGI SAWAH - LOCK INPUT SEBELUM GEOJSON SIAP
   ========================================================= */
.lindungi-aoi-icon-btn:disabled,
.lindungi-aoi-icon-btn.is-disabled,
.ls-map-icon-btn:disabled,
.ls-map-icon-btn.is-disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
}

.ls-geojson-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ls-geojson-spinner {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  border-top-color: #0f766e;
  display: inline-block;
  animation: lsGeojsonSpin 0.75s linear infinite;
}

@keyframes lsGeojsonSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   LAPOR PELANGGARAN - FORM DASAR
   ========================================================= */
.lapor-pelanggaran-form-wrap {
  margin-top: 18px;
}

.lapor-pelanggaran-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

.lapor-pelanggaran-card-head {
  margin-bottom: 18px;
}

.lapor-pelanggaran-card-head h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

.lapor-pelanggaran-card-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}

.lapor-pelanggaran-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lapor-pelanggaran-select,
.lapor-pelanggaran-textarea {
  width: 100%;
}

.lapor-pelanggaran-textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  background: #ffffff;
  color: #111827;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
}

.lapor-pelanggaran-textarea:focus {
  border-color: #245a73;
  box-shadow: 0 0 0 4px rgba(123, 100, 32, 0.12);
}

.lapor-auto-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lapor-auto-label span {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.lapor-pelanggaran-note {
  padding: 12px 13px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .lapor-pelanggaran-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LAPOR PELANGGARAN - TOPBAR, LOGOUT MINI, HERO COMPACT
   ========================================================= */
.lapor-user-menu-mini {
  width: 160px !important;
  min-width: 160px !important;
}

.lapor-user-menu-mini .modern-user-menu-item {
  padding: 12px 14px !important;
  border-radius: 12px !important;
}

/* Pastikan hero Lapor Pelanggaran mengikuti ukuran compact seperti Lindungi Sawah */
.feature-hero-lapor.feature-hero-compact .feature-hero-content {
  max-width: none;
}
/* =========================================================
   LAPOR PELANGGARAN - HERO SENADA DASHBOARD CARD
   ========================================================= */
.feature-hero-lapor {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #10293d 0%, #245a73 52%, #2f7892 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 34px rgba(95, 77, 18, 0.22) !important;
}

.feature-hero-lapor::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -26px;
  height: 92px;
  border-radius: 50%;
  background: rgba(52, 39, 6, 0.30);
  pointer-events: none;
  z-index: 1;
}

.feature-hero-lapor::before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.75) 0 18%,
      transparent 18% 28%,
      rgba(255,255,255,0.60) 28% 42%,
      transparent 42% 54%,
      rgba(255,255,255,0.55) 54% 72%,
      transparent 72% 100%
    ),
    linear-gradient(180deg,
      transparent 0 48%,
      rgba(255,255,255,0.75) 48% 58%,
      transparent 58% 100%
    );
  transform: rotate(-6deg);
}

.feature-hero-lapor .feature-hero-pattern {
  opacity: 0.82;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.13) 0 1px,
      transparent 1px 24px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.08) 0 1px,
      transparent 1px 22px
    ),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,0.18), transparent 22%);
  background-size: 220px 100%, 100% 100%, 100% 100%;
  background-position: bottom left, center, center;
}

.feature-hero-lapor .feature-hero-content {
  position: relative;
  z-index: 2;
  max-width: none;
}

.feature-hero-lapor .feature-hero-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.feature-hero-lapor h1,
.feature-hero-lapor p {
  color: #ffffff !important;
}

.feature-hero-lapor p {
  opacity: 0.92;
}

/* =========================================================
   LINDUNGI SAWAH - HERO SENADA DASHBOARD CARD
   ========================================================= */
.feature-hero-sawah {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #10293d 0%, #245a73 52%, #2f7892 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 34px rgba(16, 41, 61, 0.22) !important;
}

.feature-hero-sawah::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -28px;
  height: 96px;
  border-radius: 50%;
  background: rgba(31, 48, 0, 0.26);
  pointer-events: none;
  z-index: 1;
}

.feature-hero-sawah::before {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,0.85) 0 7px, transparent 8px),
    radial-gradient(circle at 62% 48%, rgba(255,255,255,0.70) 0 8px, transparent 9px),
    radial-gradient(circle at 42% 66%, rgba(255,255,255,0.62) 0 7px, transparent 8px),
    linear-gradient(135deg, transparent 0 44%, rgba(255,255,255,0.65) 45% 49%, transparent 50% 100%);
  transform: rotate(-10deg);
}

.feature-hero-sawah .feature-hero-pattern {
  opacity: 0.9;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,0.12) 0 1px,
      transparent 1px 26px
    ),
    repeating-linear-gradient(
      25deg,
      rgba(255,255,255,0.08) 0 1px,
      transparent 1px 22px
    ),
    radial-gradient(circle at 84% 20%, rgba(255,255,255,0.18), transparent 22%);
  background-size: 260px 100%, 220px 100%, 100% 100%;
  background-position: bottom left, bottom left, center;
}

.feature-hero-sawah .feature-hero-content {
  position: relative;
  z-index: 2;
  max-width: none;
}

.feature-hero-sawah .feature-hero-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.feature-hero-sawah h1,
.feature-hero-sawah p {
  color: #ffffff !important;
}

.feature-hero-sawah p {
  opacity: 0.92;
}
/* =========================================================
   LAPOR PELANGGARAN - DROPDOWN SERAGAM DENGAN LINDUNGI SAWAH
   ========================================================= */
.lapor-pelanggaran-select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 0 42px 0 14px;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  background-color: #ffffff;
  color: #111827;
  font-family: inherit;
  box-sizing: border-box;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

.lapor-pelanggaran-select:hover {
  border-color: #b6beca;
  background-color: #ffffff;
}

.lapor-pelanggaran-select:focus {
  border-color: #245a73;
  box-shadow: 0 0 0 4px rgba(123, 100, 32, 0.12);
}

.lapor-pelanggaran-select:disabled {
  background-color: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 1;
}

.lindungi-sawah-select:disabled {
  background-color: #f8fafc !important;
  color: #94a3b8 !important;
  border-color: #d1d5db !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.lindungi-sawah-select:disabled:hover {
  cursor: not-allowed !important;
}

.lapor-pelanggaran-select option {
  color: #111827;
}

/* =========================================================
   LAPOR PELANGGARAN - ALUR LOKASI & FOTO
   ========================================================= */
.lapor-pelanggaran-show-map-wrap,
.lapor-pelanggaran-after-map-fields,
.lapor-pelanggaran-actions {
  grid-column: 1 / -1;
}

.lapor-pelanggaran-show-map-btn {
  width: 100%;
  justify-content: center;
}

.lapor-pelanggaran-aoi-card {
  border: 1px solid #dbe3ea;
  background: #f8fafc;
  border-radius: 18px;
  padding: 14px;
}

.lapor-pelanggaran-aoi-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lapor-pelanggaran-aoi-head strong {
  display: block;
  font-size: 14px;
  color: #111827;
  margin-bottom: 4px;
}

.lapor-pelanggaran-aoi-head span {
  display: block;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.lapor-pelanggaran-aoi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lapor-aoi-icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.lapor-btn-svg {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lapor-btn-svg svg {
  width: 17px;
  height: 17px;
  display: block;
}

.lapor-pelanggaran-aoi-status {
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe3ea;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
}

.lapor-pelanggaran-photo-preview {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.lapor-pelanggaran-photo-item {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.lapor-pelanggaran-photo-item img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.lapor-pelanggaran-photo-item span {
  display: block;
  padding: 8px 9px;
  font-size: 11px;
  line-height: 1.4;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lapor-pelanggaran-photo-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lapor-pelanggaran-photo-remove:hover {
  background: #dc2626;
}

/* =========================================================
   LAPOR PELANGGARAN - WADAH PETA
   ========================================================= */
.lapor-pelanggaran-map-preview-wrap {
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #dbe3ea;
  background: #f8fafc;
}

.lapor-pelanggaran-map-preview {
  width: 100%;
  height: 380px;
}

@media (max-width: 720px) {
  .lapor-pelanggaran-map-preview {
    height: 320px;
  }
}

.lapor-aoi-icon-btn.is-active {
  border-color: #f97316;
  background: #fff7ed;
  color: #c2410c;
}

.lp-map-pin-wrap {
  background: transparent;
  border: none;
}

.lp-map-pin {
  width: 36px;
  height: 36px;
  position: relative;
  transform: translateY(-2px);
}

.lp-map-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.22);
  animation: lpMapPulse 1.45s ease-out infinite;
}

.lp-map-pin span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #f97316;
  border: 4px solid #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.25);
}

.lp-map-pin span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 4px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.24);
}

@keyframes lpMapPulse {
  0% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(0.72);
  }

  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

.lapor-aoi-icon-btn.is-active {
  border-color: #f97316;
  background: #fff7ed;
  color: #c2410c;
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.18);
}

.lapor-aoi-icon-btn.is-active {
  border-color: #f97316;
  background: #fff7ed;
  color: #c2410c;
  box-shadow: 0 12px 26px rgba(249, 115, 22, 0.18);
}

.lp-map-pin-wrap {
  background: transparent;
  border: none;
}

.lp-map-pin {
  width: 36px;
  height: 36px;
  position: relative;
  transform: translateY(-2px);
}

.lp-map-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.22);
  animation: lpMapPulse 1.45s ease-out infinite;
}

.lp-map-pin span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #f97316;
  border: 4px solid #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.25);
}

.lp-map-pin span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 4px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.24);
}

@keyframes lpMapPulse {
  0% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(0.72);
  }

  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

.lapor-pelanggaran-map-preview-wrap {
  position: relative;
  overflow: hidden;
}

.lapor-pelanggaran-map-preview-wrap.is-loading::after {
  content: "Memuat peta lokasi...";
  position: absolute;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.86);
  color: #0f766e;
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(2px);
}

.lapor-pelanggaran-map-preview-wrap.is-loading::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% - 34px);
  z-index: 1000;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 999px;
  border: 3px solid rgba(15, 118, 110, 0.18);
  border-top-color: #0f766e;
  animation: lpMapLoadingSpin 0.75s linear infinite;
}

@keyframes lpMapLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

.lapor-pelanggaran-measure-select-wrap {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
}

.lapor-pelanggaran-measure-select-wrap label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.lp-map-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 48px));
}

.lp-map-search-wrap {
  position: relative;
  width: 310px;
  max-width: calc(100vw - 70px);
}

.lp-map-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.75);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  outline: none;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
}

.lp-map-search-input:focus {
  border-color: #0f766e;
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.20);
}

.lp-map-search-results {
  position: absolute;
  z-index: 1200;
  top: 44px;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid #dbe3ea;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
}

.lp-map-search-item {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.lp-map-search-item:hover {
  background: #f8fafc;
  color: #0f766e;
}

.lp-map-tools {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  width: max-content;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.15);
}

.lp-map-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lp-map-icon-btn svg {
  width: 17px;
  height: 17px;
}

.lp-map-icon-btn:hover {
  border-color: #0f766e;
  color: #0f766e;
  background: #f7fee7;
}

.lp-map-icon-btn.is-active {
  border-color: #f97316;
  color: #c2410c;
  background: #fff7ed;
}

.lp-map-icon-btn.is-disabled,
.lp-map-icon-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.lp-map-danger-btn:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
}

.lp-map-icon-btn.is-hidden {
  display: none;
}

@media (max-width: 720px) {
  .lp-map-search-wrap {
    width: 270px;
  }

  .lp-map-tools {
    flex-wrap: wrap;
  }
}

/* =========================================================
   LAPOR PELANGGARAN - SAMAKAN TAMPILAN DENGAN LINDUNGI SAWAH
   ========================================================= */
.lapor-pelanggaran-aoi-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.lapor-pelanggaran-aoi-actions .lapor-aoi-icon-btn {
  min-height: 44px;
  padding: 0 14px;
}

.lapor-pelanggaran-map-preview-wrap .leaflet-top.leaflet-left {
  top: 10px !important;
  left: 10px !important;
}

.lapor-pelanggaran-map-preview-wrap .leaflet-left .leaflet-control {
  margin-left: 0 !important;
}

.lapor-pelanggaran-map-preview-wrap .leaflet-top .leaflet-control {
  margin-top: 0 !important;
}

.lapor-pelanggaran-map-preview-wrap .lp-map-toolbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: min(310px, calc(100vw - 48px)) !important;
}

.lapor-pelanggaran-map-preview-wrap .lp-map-search-wrap {
  position: relative !important;
  width: 260px !important;
  max-width: calc(100vw - 80px) !important;
  padding: 7px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1px solid #dbe3ea !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16) !important;
}

.lapor-pelanggaran-map-preview-wrap .lp-map-search-input {
  width: 100% !important;
  height: 34px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.lapor-pelanggaran-map-preview-wrap .lp-map-tools {
  width: 42px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.lapor-pelanggaran-map-preview-wrap .lp-map-icon-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.13) !important;
}

/* Sembunyikan tombol reset agar susunan sama seperti Lindungi Sawah */
.lapor-pelanggaran-map-preview-wrap .lp-map-tools > .lp-map-icon-btn:nth-child(3) {
  display: none !important;
}

/* Tombol hapus hanya muncul kalau sudah ada area */
#lpMapClearBtn.is-disabled,
.lp-map-icon-btn.is-hidden {
  display: none !important;
}

@media (max-width: 720px) {
  .lapor-pelanggaran-map-preview-wrap .lp-map-search-wrap {
    width: 210px !important;
  }

  .lapor-pelanggaran-map-preview-wrap .lp-map-icon-btn {
    width: 38px !important;
    height: 38px !important;
  }
}
/* =========================================================
   LAPOR PELANGGARAN - TOMBOL AOI FULL 1 BARIS
   ========================================================= */
.lapor-pelanggaran-aoi-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.lapor-pelanggaran-aoi-actions .lapor-aoi-icon-btn {
  width: 100% !important;
  min-height: 44px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Tablet: jadi 2 kolom agar tetap rapi */
@media (max-width: 900px) {
  .lapor-pelanggaran-aoi-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* HP kecil: jadi 1 kolom */
@media (max-width: 520px) {
  .lapor-pelanggaran-aoi-actions {
    grid-template-columns: 1fr !important;
  }

  .lapor-pelanggaran-aoi-actions .lapor-aoi-icon-btn {
    white-space: normal !important;
  }
}
/* =========================================================
   LAPOR PELANGGARAN - DROPDOWN DELINIASI DI BAWAH TOMBOL
   ========================================================= */
.lapor-pelanggaran-measure-select-wrap {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid #dbe3ea;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.lapor-pelanggaran-measure-select-wrap label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 800;
  color: #10293d;
}

.lapor-pelanggaran-measure-select-wrap select {
  width: 100%;
}
/* =========================================================
   LAPOR PELANGGARAN - STATUS LOAD RTRW/RDTR
   ========================================================= */
.lapor-pelanggaran-map-data-status {
  width: 100%;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #dbe3ea;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
}

.lapor-pelanggaran-map-data-status.is-loading {
  border-color: #d9e7bd;
  background: #f8fbef;
  color: #10293d;
}

.lapor-pelanggaran-map-data-status.is-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.lapor-pelanggaran-map-data-status.is-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.lapor-pelanggaran-map-data-status.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.lp-map-data-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lp-map-data-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 118, 110, 0.25);
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: lpMapDataSpin 0.8s linear infinite;
}

@keyframes lpMapDataSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   LAPOR PELANGGARAN - MODE GAMBAR POLYGON DI ATAS LAYER
   ========================================================= */
#lpMapPreview.lp-polygon-draw-active {
  cursor: crosshair !important;
}

#lpMapPreview.lp-polygon-draw-active .leaflet-lp-dataset-pane,
#lpMapPreview.lp-polygon-draw-active .leaflet-lp-dataset-pane *,
#lpMapPreview.lp-polygon-draw-active .leaflet-lp-dataset-pane path {
  pointer-events: none !important;
}

.lapor-pelanggaran-map-preview-wrap .leaflet-lp-dataset-pane {
  z-index: 390 !important;
}

/* =========================================================
   LAPOR PELANGGARAN - HASIL ANALISIS RTRW/RDTR
   ========================================================= */
.lapor-pelanggaran-pre-analysis {
  width: 100%;
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #dbe3ea;
  background: #f8fafc;
  color: #334155;
  box-sizing: border-box;
}

.lapor-pelanggaran-pre-analysis.is-loading {
  border-color: #d9e7bd;
  background: #f8fbef;
  color: #10293d;
}

.lapor-pelanggaran-pre-analysis.is-safe {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.lapor-pelanggaran-pre-analysis.is-hit {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.lp-analysis-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.lp-analysis-head strong {
  font-size: 14px;
  font-weight: 900;
  color: inherit;
}

.lp-analysis-head span {
  font-size: 12px;
  line-height: 1.5;
  color: inherit;
  opacity: 0.88;
  text-align: right;
}

.lp-analysis-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.lp-analysis-summary-grid div {
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.lp-analysis-summary-grid span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.78;
}

.lp-analysis-summary-grid strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
}

.lp-analysis-list {
  display: grid;
  gap: 8px;
}

.lp-analysis-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.lp-analysis-row strong,
.lp-analysis-row span,
.lp-analysis-row small {
  display: block;
}

.lp-analysis-row strong {
  font-size: 13px;
  font-weight: 900;
}

.lp-analysis-row span {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
}

.lp-analysis-row small {
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
}

.lp-analysis-row > div:last-child {
  text-align: right;
  white-space: nowrap;
}

.lp-analysis-more {
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 820px) {
  .lp-analysis-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-analysis-head {
    display: block;
  }

  .lp-analysis-head span {
    display: block;
    margin-top: 5px;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .lp-analysis-summary-grid {
    grid-template-columns: 1fr;
  }

  .lp-analysis-row {
    grid-template-columns: 1fr;
  }

  .lp-analysis-row > div:last-child {
    text-align: left;
  }
}

/* =========================================================
   LAPOR PELANGGARAN - ANALISIS AWAL MODEL LINDUNGI SAWAH
   ========================================================= */
.lapor-pelanggaran-pre-analysis {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe3ea;
  color: #0f172a;
}

.lapor-analysis-head {
  margin-bottom: 12px;
}

.lapor-analysis-head strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}

.lapor-analysis-head span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #334155;
}

.lapor-analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lapor-analysis-item {
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.lapor-analysis-item > span {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  color: #385a8a;
}

.lapor-analysis-item strong {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: #020617;
  line-height: 1.45;
}

.lapor-analysis-item strong span:not(.lapor-status-pill) {
  display: block;
  margin-top: 2px;
  font-weight: 700;
  color: #334155;
}

.lapor-status-pill {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.lapor-status-pill.is-hit {
  background: #fef2f2;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
}

.lapor-status-pill.is-safe {
  background: #eff6ff;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe;
}

.lapor-status-pill.is-neutral {
  background: #f8fafc;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
}

.lapor-analysis-zone-list {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #cbd5e1;
}

.lapor-analysis-zone-list > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
}

.lapor-analysis-zone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.lapor-analysis-zone-row + .lapor-analysis-zone-row {
  margin-top: 7px;
}

.lapor-analysis-zone-row b,
.lapor-analysis-zone-row span,
.lapor-analysis-zone-row small {
  display: block;
}

.lapor-analysis-zone-row b {
  font-size: 12px;
  color: #0f172a;
}

.lapor-analysis-zone-row span {
  margin-top: 3px;
  font-size: 12px;
  color: #334155;
}

.lapor-analysis-zone-row small {
  margin-top: 3px;
  font-size: 11px;
  color: #64748b;
}

.lapor-analysis-zone-row > div:last-child {
  text-align: right;
  white-space: nowrap;
}

.lapor-analysis-more {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  text-align: center;
}

@media (max-width: 820px) {
  .lapor-analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .lapor-analysis-grid,
  .lapor-analysis-zone-row {
    grid-template-columns: 1fr;
  }

  .lapor-analysis-zone-row > div:last-child {
    text-align: left;
  }
}

#lpSubmitActionWrap .field-hint {
  display: block;
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
  color: #64748b;
}

@media (max-width: 640px) {
  #lpSubmitActionWrap #lpSubmitButton {
    width: 100% !important;
    max-width: none;
  }
}
/* =========================================================
   LAPOR PELANGGARAN - TOMBOL SELANJUTNYA DATA AWAL
   ========================================================= */
.lapor-pelanggaran-show-map-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 6px;
  text-align: right;
}

.lapor-pelanggaran-show-map-wrap .lapor-pelanggaran-show-map-btn {
  width: auto;
  min-width: 220px;
  max-width: 280px;
  padding-left: 26px;
  padding-right: 26px;
  margin-top: 4px;
}

.lapor-pelanggaran-show-map-wrap .field-hint {
  display: block;
  margin-top: 9px;
  text-align: right;
}

@media (max-width: 640px) {
  .lapor-pelanggaran-show-map-wrap {
    align-items: stretch;
    text-align: left;
  }

  .lapor-pelanggaran-show-map-wrap .lapor-pelanggaran-show-map-btn {
    width: 100%;
    max-width: none;
  }

  .lapor-pelanggaran-show-map-wrap .field-hint {
    text-align: left;
  }
}
/* Jarak hint di bawah Detail Alamat */
.lp-detail-alamat-hint {
  display: block;
  margin-top: 12px;
  line-height: 1.55;
}
/* =========================================================
   LAPOR PELANGGARAN - CUSTOM DROPDOWN WILAYAH
   ========================================================= */
.lp-native-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

.lp-custom-select {
  position: relative;
  width: 100%;
}

.lp-custom-select-trigger {
  width: 100%;
  min-height: 46px;
  padding: 0 42px 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}

.lp-custom-select-trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.18s ease;
}

.lp-custom-select.is-open .lp-custom-select-trigger {
  border-color: #245a73;
  box-shadow: 0 0 0 4px rgba(123, 100, 32, 0.12);
}

.lp-custom-select.is-open .lp-custom-select-trigger::after {
  transform: translateY(-35%) rotate(225deg);
}

.lp-custom-select.is-disabled .lp-custom-select-trigger {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

.lp-custom-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 3000;
  display: none;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #dbe3ea;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.lp-custom-select.is-open .lp-custom-select-menu {
  display: block;
}

.lp-custom-select-option {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #111827;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
}

.lp-custom-select-option:hover {
  background: #eef5df;
  color: #10293d;
}

.lp-custom-select-option.is-selected {
  background: #e7f0d2;
  color: #10293d;
  font-weight: 800;
}

.lp-custom-select-option.is-placeholder {
  color: #64748b;
}

.lp-custom-select-option:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  background: transparent;
}
/* =========================================================
   LAPOR PELANGGARAN - SEARCHABLE CUSTOM DROPDOWN
   ========================================================= */
.lp-custom-select-search-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 4px 8px;
  background: #ffffff;
}

.lp-custom-select-search {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 11px;
  background: #f8fafc;
  color: #111827;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.lp-custom-select-search:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
  background: #ffffff;
}

.lp-custom-select-search::placeholder {
  color: #94a3b8;
}

.lp-custom-select-options {
  display: grid;
  gap: 3px;
}

.lp-custom-select-empty {
  padding: 10px 11px;
  border-radius: 11px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
  display: none;
}

.lp-custom-select-menu.has-no-result .lp-custom-select-empty {
  display: block;
}
/* =========================================================
   LAPOR PELANGGARAN - INPUT ANALISIS DISABLED SAAT PETA LOADING
   ========================================================= */
.lapor-aoi-icon-btn.is-disabled,
.lp-map-icon-btn.is-disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.lapor-aoi-icon-btn:disabled,
.lp-map-icon-btn:disabled {
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  pointer-events: auto !important;
}

.lapor-pelanggaran-map-preview-wrap.lp-analysis-not-ready .lp-map-tools {
  opacity: 0.72;
}
/* =========================================================
   LAPOR PELANGGARAN - SEARCH PETA FONT NORMAL
   ========================================================= */
#lpMapSearchInput,
.lapor-pelanggaran-map-preview-wrap .lp-map-search-input {
  font-weight: 400 !important;
}
#lpMapSearchInput::placeholder,
.lapor-pelanggaran-map-preview-wrap .lp-map-search-input::placeholder {
  font-weight: 400 !important;
}
/* =========================================================
   LAPOR PELANGGARAN - LOADING DI CUSTOM DROPDOWN DELINIASI
   ========================================================= */
.lp-custom-select.is-loading .lp-custom-select-trigger {
  padding-left: 38px;
  color: #64748b;
  background: #f8fafc;
}

.lp-custom-select.is-loading .lp-custom-select-trigger::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 118, 110, 0.22);
  border-top-color: #0f766e;
  border-radius: 999px;
  transform: translateY(-50%);
  animation: lpSelectLoadingSpin 0.75s linear infinite;
}

.lp-custom-select.is-loading .lp-custom-select-trigger::after {
  opacity: 0.35;
}

.lp-custom-select-loading-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border-radius: 11px;
  background: #f8fbef;
  color: #10293d;
  font-size: 12px;
  font-weight: 700;
}

.lp-custom-select-loading-note::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 118, 110, 0.22);
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: lpSelectLoadingSpin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes lpSelectLoadingSpin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.lp-custom-select-loading-note::before {
  animation-name: lpSelectLoadingSpinSimple;
}

@keyframes lpSelectLoadingSpinSimple {
  to {
    transform: rotate(360deg);
  }
}
/* =========================================================
   LAPOR PELANGGARAN - WARNA KESIMPULAN KESESUAIAN
   ========================================================= */
.lapor-kesesuaian-pill {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950 !important;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.lapor-kesesuaian-pill.is-violation {
  background: #fef2f2;
  color: #dc2626 !important;
  border: 1px solid #fecaca;
}

.lapor-kesesuaian-pill.is-compliant {
  background: #f0fdf4;
  color: #16a34a !important;
  border: 1px solid #bbf7d0;
}

.lapor-kesesuaian-pill.is-warning {
  background: #fffbeb;
  color: #b45309 !important;
  border: 1px solid #fde68a;
}

.lapor-kesesuaian-pill.is-loading {
  background: #eff6ff;
  color: #2563eb !important;
  border: 1px solid #bfdbfe;
}

.lapor-kesesuaian-pill.is-neutral {
  background: #f8fafc;
  color: #475569 !important;
  border: 1px solid #e2e8f0;
}

/* =========================================================
   LAPOR PELANGGARAN - INPUT KETENTUAN BANGUNAN
   ========================================================= */
.lapor-building-analysis {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #dbe3ea;
  background: #ffffff;
}

.lp-building-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.lp-building-head strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 4px;
  color: #0f172a;
}

.lp-building-head span {
  display: block;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.lp-building-head em {
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  color: #10293d;
  background: #f8fbef;
  border: 1px solid #d9e7bd;
  border-radius: 999px;
  padding: 7px 11px;
  white-space: nowrap;
}

.lp-building-grid {
  display: grid;
  gap: 14px;
}

.lp-building-card {
  padding: 14px;
  border: 1px solid #dbe3ea;
  border-radius: 18px;
  background: #f8fafc;
}

.lp-building-card-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}

.lp-building-list {
  display: grid;
  gap: 10px;
}

.lp-building-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe3ea;
}

.lp-building-row-main {
  min-width: 0;
}

.lp-building-subcard {
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe3ea;
}

.lp-building-subcard-head {
  margin-bottom: 10px;
}

.lp-building-subcard-head strong {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}

.lp-building-floor-list {
  display: grid;
  gap: 10px;
}

.lp-building-floor-card {
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.lp-building-floor-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.lp-building-floor-top strong {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
}

.lp-building-analysis label:not(.lp-building-check) {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 900;
  color: #334155;
}

.lp-building-analysis input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 12px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  outline: none;
}

.lp-building-analysis input[type="number"]:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}

.lp-building-analysis input[disabled] {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.lp-building-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  line-height: 1.5;
  cursor: pointer;
}

.lp-building-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: #0f766e;
  flex-shrink: 0;
}

.lp-building-check-main {
  margin-bottom: 14px;
}

.lp-building-add-btn {
  margin-top: 12px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #cfd8e3;
  background: #ffffff;
  color: #10293d;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.lp-building-add-btn:hover {
  background: #f8fbef;
  border-color: #a8cecc;
}

.lp-building-danger-btn {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.lp-building-danger-btn-small {
  min-height: 32px;
  font-size: 11px;
  padding: 0 10px;
}

.lp-building-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.lp-building-summary div {
  padding: 11px;
  border-radius: 14px;
  background: #f8fbef;
  border: 1px solid #d9e7bd;
}

.lp-building-summary span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #4b5563;
}

.lp-building-summary strong {
  display: block;
  font-size: 12px;
  font-weight: 950;
  color: #0f172a;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .lp-building-head {
    flex-direction: column;
  }

  .lp-building-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lp-building-row,
  .lp-building-floor-top,
  .lp-building-summary {
    grid-template-columns: 1fr;
    display: grid;
  }

  .lp-building-danger-btn,
  .lp-building-danger-btn-small,
  .lp-building-add-btn {
    width: 100%;
  }
}
/* =========================================================
   LAPOR PELANGGARAN - INPUT KETENTUAN BANGUNAN
   ========================================================= */
.lapor-building-analysis {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #dbe3ea;
  background: #ffffff;
}

.lp-building-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.lp-building-head strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 4px;
  color: #0f172a;
}

.lp-building-head span {
  display: block;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.lp-building-head em {
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  color: #10293d;
  background: #f8fbef;
  border: 1px solid #d9e7bd;
  border-radius: 999px;
  padding: 7px 11px;
  white-space: nowrap;
}

.lp-building-grid {
  display: grid;
  gap: 14px;
}

.lp-building-card {
  padding: 14px;
  border: 1px solid #dbe3ea;
  border-radius: 18px;
  background: #f8fafc;
}

.lp-building-card-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}

.lp-building-list {
  display: grid;
  gap: 10px;
}

.lp-building-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe3ea;
}

.lp-building-row-main {
  min-width: 0;
}

.lp-building-subcard {
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dbe3ea;
}

.lp-building-subcard-head {
  margin-bottom: 10px;
}

.lp-building-subcard-head strong {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}

.lp-building-floor-list {
  display: grid;
  gap: 10px;
}

.lp-building-floor-card {
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.lp-building-floor-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.lp-building-floor-top strong {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
}

.lp-building-analysis label:not(.lp-building-check) {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 900;
  color: #334155;
}

.lp-building-analysis input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #cfd8e3;
  border-radius: 12px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  outline: none;
}

.lp-building-analysis input[type="number"]:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}

.lp-building-analysis input[disabled] {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.lp-building-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  line-height: 1.5;
  cursor: pointer;
}

.lp-building-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: #0f766e;
  flex-shrink: 0;
}

.lp-building-check-main {
  margin-bottom: 14px;
}

.lp-building-add-btn {
  margin-top: 12px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #cfd8e3;
  background: #ffffff;
  color: #10293d;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.lp-building-add-btn:hover {
  background: #f8fbef;
  border-color: #a8cecc;
}

.lp-building-danger-btn {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.lp-building-danger-btn-small {
  min-height: 32px;
  font-size: 11px;
  padding: 0 10px;
}

.lp-building-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.lp-building-summary div {
  padding: 11px;
  border-radius: 14px;
  background: #f8fbef;
  border: 1px solid #d9e7bd;
}

.lp-building-summary span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #4b5563;
}

.lp-building-summary strong {
  display: block;
  font-size: 12px;
  font-weight: 950;
  color: #0f172a;
  line-height: 1.45;
}

@media (max-width: 820px) {
  .lp-building-head {
    flex-direction: column;
  }

  .lp-building-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .lp-building-row,
  .lp-building-floor-top,
  .lp-building-summary {
    grid-template-columns: 1fr;
    display: grid;
  }

  .lp-building-danger-btn,
  .lp-building-danger-btn-small,
  .lp-building-add-btn {
    width: 100%;
  }
}

/* =========================================================
   LAPOR PELANGGARAN - FIX CHECKBOX INPUT BANGUNAN
   ========================================================= */
.lp-building-check {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}

.lp-building-check input[type="checkbox"] {
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 2px 0 0 0 !important;
  accent-color: #0f766e !important;
  justify-self: start !important;
  flex: none !important;
}

.lp-building-check span {
  display: block !important;
  min-width: 0 !important;
  line-height: 1.5 !important;
}
/* =========================================================
   LAPOR PELANGGARAN - DASAR / KETERANGAN ANALISIS RAPI
   ========================================================= */
.lapor-analysis-item-wide {
  grid-column: 1 / -1;
}

.lapor-keterangan-rich {
  display: block !important;
  line-height: 1.6 !important;
}

.lapor-keterangan-eval-list {
  display: grid;
  gap: 6px;
}

.lapor-keterangan-eval-line {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}

.lapor-keterangan-eval-line.is-violation {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.lapor-keterangan-eval-line.is-compliant {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a;
}

.lapor-keterangan-eval-line.is-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.lapor-keterangan-eval-line.is-neutral {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

.lapor-keterangan-dasar {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed #cbd5e1;
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.55;
}
/* =========================================================
   LAPOR PELANGGARAN - SUBMIT ACTION POJOK KANAN
   ========================================================= */
#lpSubmitActionWrap.lapor-pelanggaran-actions {
  margin-top: 18px;
  text-align: right;
}

#lpSubmitActionWrap #lpSubmitButton {
  width: auto !important;
  min-width: 240px;
  max-width: 320px;
  min-height: 48px;
  padding: 0 28px;
  margin: 0 0 0 auto;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lp-submit-helper-hint {
  display: block;
  margin-top: 6px;
  color: #10293d;
}

@media (max-width: 640px) {
  #lpSubmitActionWrap.lapor-pelanggaran-actions {
    text-align: left;
  }

  #lpSubmitActionWrap #lpSubmitButton {
    width: 100% !important;
    max-width: none;
  }
}
/* =========================================================
   LAPOR PELANGGARAN - RAPATKAN TOMBOL KIRIM
   ========================================================= */
#lpSubmitActionWrap.lapor-pelanggaran-actions,
#lpSubmitActionWrap.profile-form-group-full {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  text-align: right;
}

#lpSubmitActionWrap #lpSubmitButton {
  margin-top: 0 !important;
}
/* =========================================================
   LAPOR PELANGGARAN - TOMBOL INPUT GEOMETRY KDB/KDH
   ========================================================= */
.lp-building-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.lp-building-mini-action {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #cfd8e3;
  background: #ffffff;
  color: #10293d;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.lp-building-mini-action:hover {
  background: #f8fbef;
  border-color: #a8cecc;
}

.lp-building-mini-action span {
  font-size: 13px;
  line-height: 1;
}

.lp-building-component-measure-wrap {
  margin-top: 14px;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid #dbe3ea;
  background: #f8fafc;
}

.lp-building-component-measure-wrap label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 900;
  color: #334155;
}

@media (max-width: 640px) {
  .lp-building-row-actions {
    justify-content: stretch;
  }

  .lp-building-mini-action,
  .lp-building-row-actions .lp-building-danger-btn {
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   LAPOR PELANGGARAN - SVG TOMBOL KDB/KDH
   ========================================================= */
.lp-building-mini-action {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid #cfd8e3;
  background: #ffffff;
  color: #10293d;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lp-building-action-svg {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
}

.lp-building-mini-action:hover {
  background: #f8fbef;
  border-color: #a8cecc;
  color: #10293d;
}
/* =========================================================
   LAPOR PELANGGARAN - RAPIKAN TOMBOL GEOMETRY KDB/KDH
   ========================================================= */
.lp-building-subcard-head-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.lp-building-subcard-head-actions strong {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.lp-building-row-actions-full {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.lp-building-row-actions-full .lp-building-mini-action {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

.lp-building-danger-btn-small {
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

.lp-building-kdb-card,
.lp-building-kdh-card {
  display: block !important;
}

@media (max-width: 640px) {
  .lp-building-subcard-head-actions {
    align-items: stretch !important;
  }

  .lp-building-row-actions-full {
    grid-template-columns: 1fr !important;
  }

  .lp-building-danger-btn-small {
    width: auto !important;
  }
}
/* =========================================================
   LAPOR PELANGGARAN - DASAR TERPISAH
   ========================================================= */
.lapor-analysis-dasar-text {
  display: block !important;
  line-height: 1.6 !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  white-space: normal !important;
  word-break: break-word;
}

/* =========================================================
   LINDUNGI SAWAH - CUSTOM SEARCHABLE DROPDOWN
   ========================================================= */
.ls-native-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
}

.ls-custom-select {
  position: relative;
  width: 100%;
}

.ls-custom-select-trigger {
  width: 100%;
  min-height: 48px;
  padding: 0 44px 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.ls-custom-select-trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.18s ease;
}

.ls-custom-select.is-open .ls-custom-select-trigger {
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.10);
}

.ls-custom-select.is-open .ls-custom-select-trigger::after {
  transform: translateY(-35%) rotate(225deg);
}

.ls-custom-select.is-disabled .ls-custom-select-trigger {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

.ls-custom-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 3200;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #dbe3ea;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.ls-custom-select.is-open .ls-custom-select-menu {
  display: block;
}

.ls-custom-select-search-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 4px 8px;
  background: #ffffff;
}

.ls-custom-select-search {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 11px;
  background: #f8fafc;
  color: #111827;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.ls-custom-select-search:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
  background: #ffffff;
}

.ls-custom-select-options {
  display: grid;
  gap: 3px;
}

.ls-custom-select-option {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #111827;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
}

.ls-custom-select-option:hover {
  background: #eef5df;
  color: #10293d;
}

.ls-custom-select-option.is-selected {
  background: #e7f0d2;
  color: #10293d;
  font-weight: 800;
}

.ls-custom-select-option.is-placeholder {
  color: #64748b;
}

.ls-custom-select-option:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  background: transparent;
}

.ls-custom-select-empty {
  display: none;
  padding: 10px 11px;
  border-radius: 11px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.ls-custom-select-menu.has-no-result .ls-custom-select-empty {
  display: block;
}
/* =========================================================
   LINDUNGI SAWAH - LOADING DAN ERROR CUSTOM DROPDOWN
   ========================================================= */
.ls-custom-select.is-loading .ls-custom-select-trigger {
  padding-left: 40px !important;
  color: #64748b !important;
  background: #f8fafc !important;
}

.ls-custom-select.is-loading .ls-custom-select-trigger::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 118, 110, 0.22);
  border-top-color: #0f766e;
  border-radius: 999px;
  transform: translateY(-50%);
  animation: lsSelectLoadingSpin 0.75s linear infinite;
}

.ls-custom-select-loading-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px;
  border-radius: 11px;
  background: #f8fbef;
  color: #10293d;
  font-size: 12px;
  font-weight: 800;
}

.ls-custom-select-loading-note::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 118, 110, 0.22);
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: lsSelectLoadingSpinSimple 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes lsSelectLoadingSpin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes lsSelectLoadingSpinSimple {
  to {
    transform: rotate(360deg);
  }
}

.ls-custom-select.is-error .ls-custom-select-trigger,
.lindungi-sawah-select.input-error,
.lindungi-sawah-card input.input-error,
.lindungi-sawah-card textarea.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}
/* =========================================================
   LINDUNGI SAWAH - TOMBOL SELANJUTNYA
   ========================================================= */
.lindungi-sawah-show-map-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 6px;
  text-align: right;
}

.lindungi-sawah-show-map-wrap .lindungi-sawah-show-map-btn {
  width: auto;
  min-width: 220px;
  max-width: 280px;
  min-height: 48px;
  padding-left: 26px;
  padding-right: 26px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .lindungi-sawah-show-map-wrap {
    align-items: stretch;
    text-align: left;
  }

  .lindungi-sawah-show-map-wrap .lindungi-sawah-show-map-btn {
    width: 100%;
    max-width: none;
  }
}
/* =========================================================
   VALIDASI MERAH - RINCIAN PELANGGARAN DAN FOTO
   ========================================================= */
#lpUraianPelanggaran.input-error,
#lsDetailPelanggaran.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}

#lpFotoInput.input-error,
#lsFotoInput.input-error {
  border: 1px solid #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10) !important;
  border-radius: 14px !important;
  background: #fff7f7 !important;
}
/* =========================================================
   LINDUNGI SAWAH - STATUS LOAD LSD/LP2B MODEL LAPOR
   ========================================================= */
.lindungi-sawah-map-data-status {
  width: 100%;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #dbe3ea;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  line-height: 1.6;
}

.lindungi-sawah-map-data-status.is-loading {
  border-color: #d9e7bd;
  background: #f8fbef;
  color: #10293d;
}

.lindungi-sawah-map-data-status.is-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.lindungi-sawah-map-data-status.is-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.lindungi-sawah-map-data-status.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.ls-map-data-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ls-map-data-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15, 118, 110, 0.25);
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: lsMapDataSpin 0.8s linear infinite;
}

@keyframes lsMapDataSpin {
  to {
    transform: rotate(360deg);
  }
}
/* =========================================================
   LINDUNGI SAWAH - SUBMIT ACTION POJOK KANAN
   ========================================================= */
/* =========================================================
   LINDUNGI SAWAH - SUBMIT ACTION POJOK KANAN
   ========================================================= */
#lsSubmitActionWrap.lindungi-sawah-actions,
#lsSubmitActionWrap.profile-form-group-full {
  grid-column: 1 / -1 !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  text-align: right !important;
}

/* Jangan pakai display:flex !important di wrapper.
   Display tombol submit dikontrol oleh JS. */
#lsSubmitActionWrap #lsSubmitButton,
#lsSubmitActionWrap .btn-primary {
  width: auto !important;
  min-width: 240px !important;
  max-width: 320px !important;
  min-height: 48px !important;
  padding: 0 28px !important;
  margin: 0 0 0 auto !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 640px) {
  #lsSubmitActionWrap.lindungi-sawah-actions,
  #lsSubmitActionWrap.profile-form-group-full {
    justify-content: stretch !important;
    text-align: left !important;
  }

  #lsSubmitActionWrap #lsSubmitButton,
  #lsSubmitActionWrap .btn-primary {
    width: 100% !important;
    max-width: none !important;
  }
}
/* =========================================================
   FIX HERO PETA - SAMAKAN DENGAN CARD PETA INFORMASI
   Berlaku untuk Profil Saya karena Profil sudah memakai
   class: feature-hero feature-hero-peta
   ========================================================= */
.feature-hero-peta {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #1f4668 0%, #2b5c86 52%, #3d78a8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 34px rgba(31, 70, 104, 0.22) !important;
}

.feature-hero-peta::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -26px;
  height: 92px;
  border-radius: 50%;
  background: rgba(9, 28, 52, 0.26);
  pointer-events: none;
  z-index: 1;
}

.feature-hero-peta::before {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 170px;
  height: 170px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(rgba(255,255,255,0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.55) 1px, transparent 1px),
    radial-gradient(circle at 62% 38%, rgba(255,255,255,0.78), transparent 14%);
  background-size: 22px 22px, 22px 22px, 100% 100%;
  border-radius: 28px;
  transform: rotate(8deg);
}

.feature-hero-peta .feature-hero-pattern {
  opacity: 0.30 !important;
  background:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px),
    radial-gradient(circle at 78% 24%, rgba(255,255,255,0.18), transparent 18%),
    radial-gradient(circle at 28% 70%, rgba(255,255,255,0.14), transparent 16%) !important;
  background-size: 26px 26px, 26px 26px, 100% 100%, 100% 100% !important;
  background-position: center !important;
}

.feature-hero-peta .feature-hero-content {
  position: relative;
  z-index: 2;
}

.feature-hero-peta .feature-hero-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.feature-hero-peta h1,
.feature-hero-peta p {
  color: #ffffff !important;
}

/* =========================================================
   LAPORAN SAYA
   ========================================================= */
.laporan-saya-page .modern-dashboard-main {
  gap: 0;
}

.laporan-saya-hero {
  margin-bottom: 20px;
}

.laporan-saya-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.laporan-saya-summary-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.laporan-saya-summary-card span {
  display: block;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.laporan-saya-summary-card strong {
  display: block;
  color: #111827;
  font-size: 28px;
  line-height: 1;
}

.laporan-saya-panel {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.laporan-saya-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.laporan-saya-panel-head h3 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #111827;
}

.laporan-saya-panel-head p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

.laporan-saya-refresh-btn {
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  background: #0f766e;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
}

.laporan-saya-filter-row {
  display: grid;
  grid-template-columns: 1fr 190px 190px;
  gap: 10px;
  margin-bottom: 16px;
}

.laporan-saya-search-box input,
.laporan-saya-select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 0 14px;
  outline: none;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.laporan-saya-search-box input:focus,
.laporan-saya-select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}

.laporan-saya-list {
  display: grid;
  gap: 12px;
}

.laporan-saya-item {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.laporan-saya-item-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.laporan-saya-type-badge,
.laporan-saya-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.laporan-saya-type-badge.lapor-pelanggaran {
  background: #f8f0d8;
  color: #7b4f00;
}

.laporan-saya-type-badge.lindungi-sawah {
  background: #eef5df;
  color: #0f766e;
}

.laporan-saya-status-badge.menunggu {
  background: #fff7ed;
  color: #c2410c;
}

.laporan-saya-status-badge.diproses {
  background: #eff6ff;
  color: #1d4ed8;
}

.laporan-saya-status-badge.selesai {
  background: #ecfdf5;
  color: #047857;
}

.laporan-saya-status-badge.ditolak {
  background: #fef2f2;
  color: #b91c1c;
}

.laporan-saya-status-badge.umum {
  background: #f1f5f9;
  color: #475569;
}

.laporan-saya-item h4 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 17px;
  line-height: 1.35;
}

.laporan-saya-desc {
  margin: 0 0 12px;
  color: #475569;
  font-size: 13px;
  line-height: 1.7;
}

.laporan-saya-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-bottom: 12px;
}

.laporan-saya-meta {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px 12px;
}

.laporan-saya-meta span {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.laporan-saya-meta strong {
  display: block;
  color: #111827;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.laporan-saya-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.laporan-saya-action-btn {
  border: 1px solid #dbe3ea;
  background: #ffffff;
  color: #334155;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.laporan-saya-action-btn:hover {
  background: #f8fafc;
}

.laporan-saya-action-btn.primary {
  border-color: rgba(15, 118, 110, 0.25);
  background: #eef5df;
  color: #0f766e;
}

.laporan-saya-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
  padding: 22px;
}

.laporan-saya-state strong {
  display: block;
  color: #111827;
  margin-bottom: 4px;
}

.laporan-saya-state p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.laporan-saya-state-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.laporan-saya-state-empty {
  border-color: #dbe3ea;
  background: #f8fafc;
}

.laporan-saya-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(15, 118, 110, 0.20);
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: laporanSayaSpin 0.8s linear infinite;
}

@keyframes laporanSayaSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .laporan-saya-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .laporan-saya-filter-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .laporan-saya-summary-grid {
    grid-template-columns: 1fr;
  }

  .laporan-saya-panel-head {
    flex-direction: column;
  }

  .laporan-saya-refresh-btn {
    width: 100%;
  }

  .laporan-saya-item-top {
    flex-direction: column;
  }

  .laporan-saya-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   DETAIL MODAL + SEARCHABLE FILTER LAPORAN SAYA
   ========================================================= */

.laporan-saya-filter-field {
  min-width: 0;
}

.laporan-saya-native-select.laporan-saya-select-hidden {
  display: none !important;
}

.laporan-filter-custom-select {
  position: relative;
  width: 100%;
  font-family: inherit;
}

.laporan-filter-custom-trigger {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  padding: 0 42px 0 14px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.laporan-filter-custom-trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.18s ease;
}

.laporan-filter-custom-select.is-open .laporan-filter-custom-trigger {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}

.laporan-filter-custom-select.is-open .laporan-filter-custom-trigger::after {
  transform: translateY(-35%) rotate(225deg);
}

.laporan-filter-custom-menu {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: #ffffff;
  border: 1px solid #dbe3ea;
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
  padding: 10px;
  display: none;
}

.laporan-filter-custom-select.is-open .laporan-filter-custom-menu {
  display: block;
}

.laporan-filter-custom-search {
  width: 100%;
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 0 12px;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.laporan-filter-custom-search:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08);
}

.laporan-filter-custom-options {
  max-height: 210px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}

.laporan-filter-custom-option {
  width: 100%;
  border: none;
  background: #ffffff;
  color: #334155;
  text-align: left;
  padding: 10px 11px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}

.laporan-filter-custom-option:hover {
  background: #f1f5f9;
}

.laporan-filter-custom-option.is-selected {
  background: #eef5df;
  color: #0f766e;
}

.laporan-filter-custom-empty {
  display: none;
  padding: 12px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}

.laporan-filter-custom-select.is-empty .laporan-filter-custom-empty {
  display: block;
}

.laporan-saya-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.48);
  padding: 24px;
  overflow-y: auto;
}

.laporan-saya-modal {
  width: min(760px, 100%);
  margin: 40px auto;
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.laporan-saya-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #10293d 0%, #0d615b 100%);
  color: #ffffff;
}

.laporan-saya-modal-label {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 800;
}

.laporan-saya-modal-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

.laporan-saya-modal-close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.laporan-saya-modal-body {
  padding: 22px 24px;
}

.laporan-saya-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.laporan-saya-detail-item {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
  padding: 12px 14px;
}

.laporan-saya-detail-item.full {
  grid-column: 1 / -1;
}

.laporan-saya-detail-item span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.laporan-saya-detail-item strong,
.laporan-saya-detail-item p {
  display: block;
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.laporan-saya-detail-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.laporan-saya-detail-photos a {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 12px;
  background: #eef5df;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.laporan-saya-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid #e5e7eb;
}

@media (max-width: 640px) {
  .laporan-saya-modal-backdrop {
    padding: 14px;
  }

  .laporan-saya-modal {
    margin: 20px auto;
    border-radius: 20px;
  }

  .laporan-saya-detail-grid {
    grid-template-columns: 1fr;
  }

  .laporan-saya-modal-head {
    padding: 18px;
  }

  .laporan-saya-modal-body {
    padding: 18px;
  }
}

/* =========================================================
   MODAL PETA LAPORAN SAYA
   ========================================================= */

.laporan-saya-map-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.56);
  padding: 24px;
  overflow-y: auto;
}

.laporan-saya-map-modal {
  width: min(980px, 100%);
  margin: 34px auto;
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
  overflow: hidden;
}

.laporan-saya-map-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #1f4668 0%, #2b5c86 52%, #3d78a8 100%);
  color: #ffffff;
}

.laporan-saya-map-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

.laporan-saya-map-body {
  padding: 0;
  background: #0f172a;
}

.laporan-saya-map-canvas {
  width: 100%;
  height: min(68vh, 620px);
  min-height: 420px;
  background: #0f172a;
}

/* Peta dibuat kosong: tanpa zoom, atribusi, dan tombol Leaflet */
.laporan-saya-map-canvas .leaflet-control-container {
  display: none !important;
}

.laporan-saya-map-canvas .leaflet-pane,
.laporan-saya-map-canvas .leaflet-tile,
.laporan-saya-map-canvas .leaflet-marker-icon,
.laporan-saya-map-canvas .leaflet-marker-shadow,
.laporan-saya-map-canvas .leaflet-tile-pane,
.laporan-saya-map-canvas .leaflet-overlay-pane,
.laporan-saya-map-canvas .leaflet-shadow-pane,
.laporan-saya-map-canvas .leaflet-marker-pane,
.laporan-saya-map-canvas .leaflet-tooltip-pane,
.laporan-saya-map-canvas .leaflet-popup-pane {
  z-index: auto;
}

@media (max-width: 640px) {
  .laporan-saya-map-backdrop {
    padding: 12px;
  }

  .laporan-saya-map-modal {
    margin: 18px auto;
    border-radius: 20px;
  }

  .laporan-saya-map-head {
    padding: 18px;
  }

  .laporan-saya-map-canvas {
    height: 70vh;
    min-height: 360px;
  }
}
.laporan-saya-detail-section {
  grid-column: 1 / -1;
  margin: 8px 0 -2px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.laporan-saya-detail-section h4 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}
/* =========================================================
   LOGIN INTERNAL PEGAWAI / ADMIN
   ========================================================= */

.login-page {
  position: relative;
}

.internal-login-shortcut {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #10293d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.internal-login-shortcut:hover {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.internal-login-back {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 50;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #10293d;
  font-size: 22px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
}

.internal-login-page .login-left {
  background:
    linear-gradient(135deg, rgba(31, 70, 104, 0.92), rgba(16, 41, 61, 0.86)),
    var(--login-left-bg, transparent);
}

.internal-login-card {
  border-top: 5px solid #10293d;
}

.internal-login-badge {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 640px) {
  .internal-login-shortcut,
  .internal-login-back {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
}
/* =========================================================
   RAPIIKAN LOGIN INTERNAL
   ========================================================= */

.internal-login-card .login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.internal-login-card .remember-me {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.internal-login-card .remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #0f766e;
  cursor: pointer;
  flex: 0 0 auto;
}

.internal-login-card .remember-me span {
  display: inline-block;
  margin: 0;
}

/* Supaya button kecil seperti link, bukan button default browser */
.internal-login-card .link-button,
.internal-login-footer-row .link-button {
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: #0f766e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.internal-login-card .link-button:hover,
.internal-login-footer-row .link-button:hover {
  color: #0d615b;
  text-decoration: underline;
}

.internal-login-card .link-button:focus-visible,
.internal-login-footer-row .link-button:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16) !important;
}

/* Footer bawah */
.internal-login-card .login-card-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.internal-login-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

.internal-login-footer-row span {
  color: #475569;
}

/* Sedikit rapikan header text */
.internal-login-card .login-card-header p {
  margin-top: 8px;
  color: #64748b;
  line-height: 1.7;
}

/* Rapikan field biar konsisten */
.internal-login-card .form-group {
  margin-bottom: 16px;
}

.internal-login-card .form-group label {
  display: inline-block;
  margin-bottom: 8px;
  color: #1e293b;
  font-size: 14px;
  font-weight: 800;
}

.internal-login-card .form-group input[type="email"],
.internal-login-card .form-group input[type="password"],
.internal-login-card .form-group input[type="text"] {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  padding: 0 16px;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
  box-sizing: border-box;
  font-family: inherit;
}

.internal-login-card .form-group input:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.10);
}

/* Password wrap */
.internal-login-card .password-input-wrap {
  position: relative;
}

.internal-login-card .password-input-wrap input {
  padding-right: 50px !important;
}

.internal-login-card .password-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.internal-login-card .password-toggle:hover {
  color: #334155;
}

/* Tombol utama */
.internal-login-card .btn-primary {
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f766e 0%, #245a73 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.internal-login-card .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(15, 118, 110, 0.28);
}

/* Responsif */
@media (max-width: 480px) {
  .internal-login-card .login-options {
    align-items: flex-start;
    gap: 10px;
  }

  .internal-login-card .login-options .link-button {
    margin-left: auto !important;
  }

  .internal-login-footer-row {
    flex-direction: row;
    gap: 4px 6px;
  }
}
/* =========================================================
   PENYESUAIAN LOGIN INTERNAL
   ========================================================= */

.internal-login-card .internal-login-options-single {
  justify-content: flex-start;
  margin-top: 12px;
  margin-bottom: 10px;
}

.internal-forgot-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  margin-bottom: 2px;
}

.internal-forgot-row .link-button {
  appearance: none;
  -webkit-appearance: none;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: #0f766e;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.internal-forgot-row .link-button:hover {
  color: #0d615b;
  text-decoration: underline;
}

/* Kalau CSS tombol panah masih ada, ini memastikan tidak tampil */
.internal-login-back {
  display: none !important;
}
/* Samakan warna "Ingat saya" login internal dengan login masyarakat */
.internal-login-card .remember-me {
  color: #4b5563 !important;
  font-size: 13px;
  font-weight: 600;
}

.internal-login-card .remember-me span {
  color: #4b5563 !important;
}
/* =========================================================
   DASHBOARD PEGAWAI
   ========================================================= */

.pegawai-dashboard-page {
  background: #f5f7fb;
}

.pegawai-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 34px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #1f4668 0%, #2b5c86 52%, #10293d 100%);
  color: #ffffff;
  box-shadow: 0 22px 48px rgba(31, 70, 104, 0.20);
}

.pegawai-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.pegawai-hero-badge {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.pegawai-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}

.pegawai-hero p {
  margin: 0;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.90);
  font-size: 15px;
  line-height: 1.8;
}

.pegawai-hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background:
    linear-gradient(rgba(255,255,255,0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.30) 1px, transparent 1px);
  background-size: 30px 30px;
}

.pegawai-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.pegawai-summary-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.pegawai-summary-card span {
  display: block;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.pegawai-summary-card strong {
  display: block;
  margin-bottom: 8px;
  color: #111827;
  font-size: 32px;
  line-height: 1;
}

.pegawai-summary-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.pegawai-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.pegawai-main-panel,
.pegawai-menu-panel {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.pegawai-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.pegawai-panel-head h3,
.pegawai-menu-panel h3 {
  margin: 0 0 5px;
  color: #111827;
  font-size: 20px;
}

.pegawai-panel-head p,
.pegawai-menu-panel p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.pegawai-refresh-btn {
  border: none;
  border-radius: 14px;
  padding: 11px 14px;
  background: #0f766e;
  color: #ffffff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
}

.pegawai-dashboard-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 130px;
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
  padding: 20px;
}

.pegawai-dashboard-state p {
  margin: 0;
  font-size: 13px;
}

.pegawai-dashboard-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.pegawai-dashboard-error strong {
  display: block;
  color: #991b1b;
}

.pegawai-dashboard-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(15, 118, 110, 0.20);
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: pegawaiDashboardSpin 0.8s linear infinite;
}

@keyframes pegawaiDashboardSpin {
  to {
    transform: rotate(360deg);
  }
}

.pegawai-latest-list {
  display: grid;
  gap: 12px;
}

.pegawai-report-item {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 15px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
}

.pegawai-report-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pegawai-report-type,
.pegawai-report-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.pegawai-report-type.pelanggaran {
  background: #f8f0d8;
  color: #7b4f00;
}

.pegawai-report-type.sawah {
  background: #eef5df;
  color: #0f766e;
}

.pegawai-report-status.menunggu {
  background: #fff7ed;
  color: #c2410c;
}

.pegawai-report-status.diproses {
  background: #eff6ff;
  color: #1d4ed8;
}

.pegawai-report-status.selesai {
  background: #ecfdf5;
  color: #047857;
}

.pegawai-report-status.ditolak {
  background: #fef2f2;
  color: #b91c1c;
}

.pegawai-report-status.umum {
  background: #f1f5f9;
  color: #475569;
}

.pegawai-report-item h4 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 16px;
  line-height: 1.4;
}

.pegawai-report-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.pegawai-report-meta strong {
  color: #111827;
}

.pegawai-empty-list {
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  background: #f8fafc;
  padding: 24px;
  text-align: center;
}

.pegawai-empty-list strong {
  display: block;
  margin-bottom: 5px;
  color: #111827;
}

.pegawai-empty-list p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.pegawai-menu-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.pegawai-menu-card {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background: #ffffff;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pegawai-menu-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 118, 110, 0.25);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.pegawai-menu-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: #eef5df;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pegawai-menu-icon.blue {
  background: #eff6ff;
  color: #1d4ed8;
}

.pegawai-menu-icon.orange {
  background: #fff7ed;
  color: #c2410c;
}

.pegawai-menu-icon.dark {
  background: #f1f5f9;
  color: #334155;
}

.pegawai-menu-card strong {
  display: block;
  margin-bottom: 4px;
  color: #111827;
  font-size: 14px;
}

.pegawai-menu-card small {
  display: block;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .pegawai-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pegawai-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pegawai-hero {
    padding: 24px;
    border-radius: 24px;
  }

  .pegawai-summary-grid {
    grid-template-columns: 1fr;
  }

  .pegawai-panel-head {
    flex-direction: column;
  }

  .pegawai-refresh-btn {
    width: 100%;
  }

  .pegawai-report-top {
    flex-direction: column;
  }

  .pegawai-report-meta {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TINDAK LANJUT LAPORAN PEGAWAI
   ========================================================= */

.pegawai-followup-page {
  background: #f5f7fb;
}

.pegawai-followup-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 34px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #1f4668 0%, #2b5c86 52%, #10293d 100%);
  color: #ffffff;
  box-shadow: 0 22px 48px rgba(31, 70, 104, 0.20);
}

.pegawai-followup-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.pegawai-followup-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}

.pegawai-followup-hero p {
  margin: 0;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.90);
  font-size: 15px;
  line-height: 1.8;
}

.pegawai-followup-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.pegawai-followup-summary-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.pegawai-followup-summary-card span {
  display: block;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.pegawai-followup-summary-card strong {
  display: block;
  color: #111827;
  font-size: 32px;
  line-height: 1;
}

.pegawai-followup-panel {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.pegawai-followup-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.pegawai-followup-panel-head h3 {
  margin: 0 0 5px;
  color: #111827;
  font-size: 20px;
}

.pegawai-followup-panel-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.pegawai-followup-refresh-btn,
.pegawai-followup-save-btn {
  border: none;
  border-radius: 14px;
  padding: 11px 14px;
  background: #0f766e;
  color: #ffffff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
}

.pegawai-followup-filter-row {
  display: grid;
  grid-template-columns: 1fr 190px 190px;
  gap: 10px;
  margin-bottom: 16px;
}

.pegawai-followup-input,
.pegawai-followup-select,
.pegawai-followup-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  background: #ffffff;
  color: #111827;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.pegawai-followup-input,
.pegawai-followup-select {
  min-height: 46px;
  padding: 0 14px;
}

.pegawai-followup-textarea {
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
}

.pegawai-followup-input:focus,
.pegawai-followup-select:focus,
.pegawai-followup-textarea:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}

.pegawai-followup-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 130px;
  border: 1px dashed #d1d5db;
  border-radius: 18px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
  padding: 20px;
}

.pegawai-followup-state p {
  margin: 0;
  font-size: 13px;
}

.pegawai-followup-state strong {
  display: block;
  color: #111827;
}

.pegawai-followup-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.pegawai-followup-list {
  display: grid;
  gap: 12px;
}

.pegawai-followup-item {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 15px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
}

.pegawai-followup-item-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pegawai-followup-type,
.pegawai-followup-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.pegawai-followup-type.pelanggaran {
  background: #f8f0d8;
  color: #7b4f00;
}

.pegawai-followup-type.sawah {
  background: #eef5df;
  color: #0f766e;
}

.pegawai-followup-status.menunggu {
  background: #fff7ed;
  color: #c2410c;
}

.pegawai-followup-status.diproses {
  background: #eff6ff;
  color: #1d4ed8;
}

.pegawai-followup-status.selesai {
  background: #ecfdf5;
  color: #047857;
}

.pegawai-followup-status.ditolak {
  background: #fef2f2;
  color: #b91c1c;
}

.pegawai-followup-status.umum {
  background: #f1f5f9;
  color: #475569;
}

.pegawai-followup-item h4 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 17px;
  line-height: 1.4;
}

.pegawai-followup-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.pegawai-followup-meta-grid div {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px;
}

.pegawai-followup-meta-grid span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.pegawai-followup-meta-grid strong {
  color: #111827;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.pegawai-followup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pegawai-followup-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe3ea;
  background: #ffffff;
  color: #334155;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.pegawai-followup-action.primary {
  border-color: rgba(15, 118, 110, 0.25);
  background: #eef5df;
  color: #0f766e;
}

.pegawai-followup-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.50);
  padding: 24px;
  overflow-y: auto;
}

.pegawai-followup-modal {
  width: min(860px, 100%);
  margin: 34px auto;
  background: #ffffff;
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
  overflow: hidden;
}

.pegawai-followup-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #1f4668 0%, #2b5c86 52%, #10293d 100%);
  color: #ffffff;
}

.pegawai-followup-modal-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

.pegawai-followup-modal-close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.pegawai-followup-modal-body {
  padding: 22px 24px;
}

.pegawai-followup-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pegawai-followup-detail-item {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
  padding: 12px 14px;
}

.pegawai-followup-detail-item.full {
  grid-column: 1 / -1;
}

.pegawai-followup-detail-item span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.pegawai-followup-detail-item strong {
  display: block;
  color: #111827;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.pegawai-followup-update-box {
  display: grid;
  gap: 10px;
  padding: 18px 24px 24px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

.pegawai-followup-update-box label {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 1024px) {
  .pegawai-followup-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pegawai-followup-filter-row {
    grid-template-columns: 1fr;
  }

  .pegawai-followup-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pegawai-followup-hero {
    padding: 24px;
    border-radius: 24px;
  }

  .pegawai-followup-summary-grid {
    grid-template-columns: 1fr;
  }

  .pegawai-followup-panel-head {
    flex-direction: column;
  }

  .pegawai-followup-refresh-btn {
    width: 100%;
  }

  .pegawai-followup-item-top {
    flex-direction: column;
  }

  .pegawai-followup-meta-grid,
  .pegawai-followup-detail-grid {
    grid-template-columns: 1fr;
  }

  .pegawai-followup-modal-backdrop {
    padding: 12px;
  }

  .pegawai-followup-modal {
    margin: 18px auto;
    border-radius: 20px;
  }
}
.internal-forgot-links {
  margin-top: 16px;
}

.internal-forgot-links p {
  margin: 0;
}
/* =========================================================
   FINAL FIX - LOGIN INTERNAL SAMA DENGAN LOGIN MASYARAKAT
   ========================================================= */

.internal-login-card #internalLoginButton.btn-primary {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  margin-top: 8px !important;
  border: none !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0f766e 0%, #245a73 100%) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.16) !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.internal-login-card #internalLoginButton.btn-primary .btn-text {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.internal-login-card #internalLoginButton.btn-primary:hover {
  transform: translateY(-1px) !important;
  opacity: 0.98 !important;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.16) !important;
}

.internal-login-card #internalLoginButton.btn-primary.is-loading {
  opacity: 0.92 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* =========================================================
   FINAL FIX - HERO DASHBOARD PEGAWAI SAMA UKURAN DENGAN DASHBOARD MASYARAKAT
   ========================================================= */

.pegawai-dashboard-page .pegawai-hero {
  border-radius: 30px !important;
  padding: 34px 32px !important;
  margin-bottom: 28px !important;
}

.pegawai-dashboard-page .pegawai-hero-content {
  max-width: 1080px !important;
}

.pegawai-dashboard-page .pegawai-hero-badge {
  padding: 8px 14px !important;
  margin-bottom: 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.pegawai-dashboard-page .pegawai-hero h1 {
  margin: 0 0 14px !important;
  font-size: 34px !important;
  line-height: 1.2 !important;
}

.pegawai-dashboard-page .pegawai-hero p {
  margin: 0 !important;
  max-width: 1080px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

@media (max-width: 900px) {
  .pegawai-dashboard-page .pegawai-hero {
    padding: 28px 24px !important;
  }

  .pegawai-dashboard-page .pegawai-hero h1 {
    font-size: 28px !important;
  }
}
.pegawai-menu-list a.pegawai-menu-card {
  color: inherit !important;
  text-decoration: none !important;
}
.rm-menu-item-with-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.rm-notif-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.28);
}
.rm-menu-item-with-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.rm-notif-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.28);
}
.rm-user-trigger-with-badge {
  position: relative !important;
}

.rm-topbar-notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 16px rgba(239, 68, 68, 0.32);
  z-index: 5;
}

.rm-menu-item-with-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.rm-notif-badge {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.28);
}

.pegawai-menu-list a.pegawai-menu-card {
  color: inherit !important;
  text-decoration: none !important;
}

/* =========================================================
   PETA PELAPORAN PEGAWAI
   ========================================================= */

.rm-report-map-page .modern-user-dropdown {
  pointer-events: auto;
}

.rm-report-map-panel-head span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rm-report-map-panel-head h3 {
  margin: 10px 0 4px;
  font-size: 20px;
  color: #111827;
}

.rm-report-map-panel-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.rm-report-map-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.rm-report-map-summary div {
  padding: 10px 8px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rm-report-map-summary span {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 4px;
}

.rm-report-map-summary strong {
  display: block;
  font-size: 18px;
  color: #111827;
}

.rm-report-map-filter {
  display: grid;
  gap: 9px;
}

.rm-report-map-filter input,
.rm-report-map-filter select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dbe3ea;
  border-radius: 14px;
  padding: 9px 11px;
  font-size: 12px;
  color: #111827;
  background: #ffffff;
  outline: none;
}

.rm-report-map-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rm-report-map-actions {
  display: flex;
  gap: 8px;
}

.rm-report-map-actions button {
  flex: 1;
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.rm-report-map-actions button.subtle {
  background: #f1f5f9;
  color: #334155;
}

.rm-report-map-state {
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.rm-report-map-state.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.rm-report-map-item {
  padding: 13px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.rm-report-map-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.rm-report-map-item-top span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.rm-report-map-item-top span.pelanggaran {
  background: #fff7ed;
  color: #c2410c;
}

.rm-report-map-item-top span.sawah {
  background: #ecfdf5;
  color: #15803d;
}

.rm-report-map-item-top strong {
  font-size: 10px;
  color: #334155;
  background: #f1f5f9;
  padding: 5px 8px;
  border-radius: 999px;
}

.rm-report-map-item h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #111827;
}

.rm-report-map-item p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.rm-report-map-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 10px;
}

.rm-report-map-item-actions {
  display: flex;
  gap: 8px;
}

.rm-report-map-item-actions button {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 8px 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.rm-report-map-item-actions button.primary {
  background: #0f766e;
  color: #ffffff;
}


.rm-report-map-legend strong {
  color: #111827;
}

.rm-report-map-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rm-report-map-legend i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}

.rm-report-map-legend i.pelanggaran {
  background: #f97316;
}

.rm-report-map-legend i.sawah {
  background: #22c55e;
}

.rm-report-popup {
  min-width: 220px;
}

.rm-report-popup strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.rm-report-popup p {
  margin: 4px 0;
  font-size: 12px;
}

.rm-report-popup button {
  width: 100%;
  margin-top: 8px;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 820px) {
  .rm-report-map-panel {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: 58vh;
  }

  .rm-report-map-legend {
    display: none;
  }
}
/* =========================================================
   PETA PELAPORAN - COPY PETA INFORMASI + MONITORING PANEL
   ========================================================= */

.rm-report-monitor-panel {
  width: 390px;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 178px);
  margin-top: 10px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rm-report-monitor-head span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rm-report-monitor-head h3 {
  margin: 10px 0 4px;
  font-size: 20px;
  color: #111827;
}

.rm-report-monitor-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.rm-report-monitor-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.rm-report-monitor-summary div {
  padding: 10px 8px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rm-report-monitor-summary span {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 4px;
}

.rm-report-monitor-summary strong {
  display: block;
  font-size: 18px;
  color: #111827;
}

.rm-report-monitor-filter {
  display: grid;
  gap: 9px;
}

.rm-report-monitor-filter input,
.rm-report-monitor-filter select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dbe3ea;
  border-radius: 14px;
  padding: 9px 11px;
  font-size: 12px;
  color: #111827;
  background: #ffffff;
  outline: none;
}

.rm-report-monitor-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rm-report-monitor-actions {
  display: flex;
  gap: 8px;
}

.rm-report-monitor-actions button {
  flex: 1;
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.rm-report-monitor-actions button.subtle {
  background: #f1f5f9;
  color: #334155;
}

.rm-report-monitor-state {
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.rm-report-monitor-state.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.rm-report-monitor-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.rm-report-monitor-item {
  padding: 13px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.rm-report-monitor-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.rm-report-monitor-item-top span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.rm-report-monitor-item-top span.pelanggaran {
  background: #fff7ed;
  color: #c2410c;
}

.rm-report-monitor-item-top span.sawah {
  background: #ecfdf5;
  color: #15803d;
}

.rm-report-monitor-item-top strong {
  font-size: 10px;
  color: #334155;
  background: #f1f5f9;
  padding: 5px 8px;
  border-radius: 999px;
}

.rm-report-monitor-item h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #111827;
}

.rm-report-monitor-item p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.rm-report-monitor-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 10px;
}

.rm-report-monitor-item-actions {
  display: flex;
  gap: 8px;
}

.rm-report-monitor-item-actions button {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 8px 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.rm-report-monitor-item-actions button.primary {
  background: #0f766e;
  color: #ffffff;
}

.rm-report-popup {
  min-width: 220px;
}

.rm-report-popup strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.rm-report-popup p {
  margin: 4px 0;
  font-size: 12px;
}

.rm-report-popup button {
  width: 100%;
  margin-top: 8px;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 820px) {
  .rm-report-monitor-panel {
    width: calc(100vw - 36px);
    max-height: 54vh;
  }
}

/* =========================================================
   PETA PELAPORAN - PANEL MONITORING LAPORAN MASUK DI SEBELAH KANAN
   ========================================================= */
.rm-report-monitor-panel-right {
  position: fixed;
  top: 92px; /* Menyesuaikan dengan header, 92px */
  right: 18px;
  z-index: 900;
  width: min(var(--rm-right-panel-width), calc(100vw - 36px)) !important;
  max-width: calc(100vw - 36px);
  height: calc(100vh - 178px) !important;  /* Sesuaikan tinggi panel agar sama dengan panel lain */
  margin-top: 10px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;  /* Memastikan ada scroll jika tinggi panel melebihi */
}

.rm-report-monitor-head span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rm-report-monitor-head h3 {
  margin: 10px 0 4px;
  font-size: 20px;
  color: #111827;
}

.rm-report-monitor-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.rm-report-monitor-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.rm-report-monitor-summary div {
  padding: 10px 8px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.rm-report-monitor-summary span {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 4px;
}

.rm-report-monitor-summary strong {
  display: block;
  font-size: 18px;
  color: #111827;
}

.rm-report-monitor-filter {
  display: grid;
  gap: 9px;
}

.rm-report-monitor-filter input,
.rm-report-monitor-filter select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #dbe3ea;
  border-radius: 14px;
  padding: 9px 11px;
  font-size: 12px;
  color: #111827;
  background: #ffffff;
  outline: none;
}

.rm-report-monitor-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rm-report-monitor-actions {
  display: flex;
  gap: 8px;
}

.rm-report-monitor-actions button {
  flex: 1;
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.rm-report-monitor-actions button.subtle {
  background: #f1f5f9;
  color: #334155;
}

.rm-report-monitor-state {
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.rm-report-monitor-state.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.rm-report-monitor-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.rm-report-monitor-item {
  padding: 13px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.rm-report-monitor-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.rm-report-monitor-item-top span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.rm-report-monitor-item-top span.pelanggaran {
  background: #fff7ed;
  color: #c2410c;
}

.rm-report-monitor-item-top span.sawah {
  background: #ecfdf5;
  color: #15803d;
}

.rm-report-monitor-item-top strong {
  font-size: 10px;
  color: #334155;
  background: #f1f5f9;
  padding: 5px 8px;
  border-radius: 999px;
}

.rm-report-monitor-item h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #111827;
}

.rm-report-monitor-item p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.rm-report-monitor-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 10px;
}

.rm-report-monitor-item-actions {
  display: flex;
  gap: 8px;
}

.rm-report-monitor-item-actions button {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 8px 10px;
  background: #f1f5f9;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.rm-report-monitor-item-actions button.primary {
  background: #0f766e;
  color: #ffffff;
}

.rm-report-popup {
  min-width: 220px;
}

.rm-report-popup strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.rm-report-popup p {
  margin: 4px 0;
  font-size: 12px;
}

.rm-report-popup button {
  width: 100%;
  margin-top: 8px;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 820px) {
  .rm-report-monitor-panel-right {
    width: calc(100vw - 36px);
    max-height: 54vh;
  }
}
@media (max-width: 820px) {
  .rm-report-monitor-panel-right {
    top: 84px; /* Menyesuaikan dengan header */
    width: 100vw !important;  /* Full width di layar kecil */
    max-width: 100vw !important;
    margin-top: 16px;
    height: auto !important;
    max-height: 60vh;  /* Maksimal tinggi */
  }
}

/* =========================================================
   FINAL FIX - PANEL LAPORAN MASUK SAMA PERSIS DENGAN ADD DATA
   ========================================================= */

.rm-report-monitor-panel-right {
  position: absolute !important;
  top: var(--rm-right-panel-top, 84px) !important;
  right: var(--rm-right-panel-right, 18px) !important;
  bottom: var(--rm-right-panel-bottom, 18px) !important;
  left: auto !important;

  width: min(var(--rm-right-panel-width, 420px), calc(100vw - 36px)) !important;
  max-width: min(var(--rm-right-panel-width, 420px), calc(100vw - 36px)) !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;

  padding: 18px !important;
  border-radius: 26px !important;

  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 20px 48px rgba(15,23,42,0.14) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow: hidden !important;

  z-index: 1276 !important;
  box-sizing: border-box !important;
}

/* Judul disamakan dengan Add Data */
.rm-report-monitor-panel-right .rm-report-monitor-head {
  flex-shrink: 0 !important;
}

.rm-report-monitor-panel-right .rm-report-monitor-head h3 {
  margin: 10px 0 4px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #111827 !important;
}

.rm-report-monitor-panel-right .rm-report-monitor-head p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
}

/* Area tetap, daftar laporan yang scroll */
.rm-report-monitor-panel-right .rm-report-monitor-summary,
.rm-report-monitor-panel-right .rm-report-monitor-filter,
.rm-report-monitor-panel-right .rm-report-monitor-state {
  flex-shrink: 0 !important;
}

.rm-report-monitor-panel-right .rm-report-monitor-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

/* Mobile mengikuti pola panel kanan */
@media (max-width: 520px) {
  .rm-report-monitor-panel-right {
    left: 10px !important;
    right: 10px !important;
    top: var(--rm-right-panel-top, 84px) !important;
    bottom: var(--rm-right-panel-bottom, 18px) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* =========================================================
   FINAL FIX - PANEL LAPORAN MASUK SAMA DENGAN ADD DATA
   ========================================================= */

.rm-report-monitor-panel-right {
  position: absolute !important;

  top: var(--rm-right-panel-top, 84px) !important;
  right: var(--rm-right-panel-right, 18px) !important;
  bottom: var(--rm-right-panel-bottom, 18px) !important;
  left: auto !important;

  width: min(var(--rm-right-panel-width, 420px), calc(100vw - 36px)) !important;
  max-width: min(var(--rm-right-panel-width, 420px), calc(100vw - 36px)) !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;

  padding: 18px !important;
  border-radius: 26px !important;

  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  overflow: hidden !important;

  z-index: 1274 !important;
  box-sizing: border-box !important;
}

.rm-report-monitor-panel-right .rm-report-monitor-head,
.rm-report-monitor-panel-right .rm-report-monitor-summary,
.rm-report-monitor-panel-right .rm-report-monitor-filter,
.rm-report-monitor-panel-right .rm-report-monitor-state {
  flex-shrink: 0 !important;
}

.rm-report-monitor-panel-right .rm-report-monitor-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

/* =========================================================
   FINAL - AUTO MINIMIZE PANEL LAPORAN SAAT PANEL KANAN LAIN AKTIF
   ========================================================= */

.rm-report-monitor-panel-right {
  z-index: 1274 !important;
  transition:
    width .24s ease,
    height .24s ease,
    top .24s ease,
    bottom .24s ease,
    transform .24s ease,
    opacity .18s ease,
    box-shadow .24s ease !important;
}

.rm-report-monitor-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.rm-report-monitor-minimize-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: none !important;
  border-radius: 14px !important;
  background: rgba(243, 244, 246, 0.95) !important;
  color: #374151 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.rm-report-monitor-minimize-btn:hover {
  background: rgba(229, 231, 235, 0.98) !important;
  transform: translateY(-1px) !important;
}

/* Saat minimize, panel jadi kartu kecil di kanan bawah */
.rm-report-monitor-panel-right.is-minimized {
  top: auto !important;
  right: var(--rm-right-panel-right, 18px) !important;
  bottom: var(--rm-right-panel-bottom, 18px) !important;

  width: min(300px, calc(100vw - 36px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 14px !important;
  gap: 0 !important;
  overflow: visible !important;
  cursor: pointer !important;

  z-index: 1240 !important;
}

/* Sembunyikan isi panel saat minimize */
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-summary,
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-filter,
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-state,
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-list {
  display: none !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head {
  margin: 0 !important;
  align-items: center !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head span {
  font-size: 10px !important;
  padding: 6px 9px !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head h3 {
  margin: 7px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head p {
  display: none !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-minimize-btn {
  font-size: 20px !important;
}

@media (max-width: 520px) {
  .rm-report-monitor-panel-right.is-minimized {
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    width: min(280px, calc(100vw - 20px)) !important;
  }
}

/* =========================================================
   FINAL STABLE - PANEL LAPORAN MASUK TIDAK MEMBLOK PANEL LAIN
   ========================================================= */

/* Mode kecil saat panel lain dibuka */
.rm-report-monitor-panel-right.is-minimized {
  top: var(--rm-right-panel-top, 84px) !important;
  right: var(--rm-right-panel-right, 18px) !important;
  bottom: auto !important;
  left: auto !important;

  width: min(300px, calc(100vw - 36px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 14px !important;
  gap: 0 !important;
  overflow: visible !important;

  z-index: 1235 !important;
  cursor: default !important;
}

/* Sembunyikan isi ketika minimize */
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-summary,
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-filter,
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-state,
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-list {
  display: none !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head {
  margin: 0 !important;
  align-items: center !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head p {
  display: none !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head h3 {
  margin: 7px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.rm-report-monitor-minimize-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: none !important;
  border-radius: 14px !important;
  background: rgba(243, 244, 246, 0.95) !important;
  color: #374151 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.rm-report-monitor-minimize-btn:hover {
  background: rgba(229, 231, 235, 0.98) !important;
}

/* =========================================================
   LOADING BUTTON - SIMPAN TINDAK LANJUT
   ========================================================= */

.pegawai-followup-save-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  position: relative !important;
}

.pegawai-followup-save-btn.is-loading {
  opacity: 0.92 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.pegawai-followup-save-btn .btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: buttonSpin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Icon tab Add Data - Peta Informasi */
.webgis-adddata-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

.webgis-adddata-tab .rm-adddata-tab-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.webgis-adddata-tab .rm-adddata-tab-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.webgis-adddata-tab .rm-adddata-tab-text {
  display: inline-block;
  font-size: 0.92em;
  font-weight: inherit;
}

@media (max-width: 520px) {
  .webgis-adddata-tab {
    gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .webgis-adddata-tab .rm-adddata-tab-icon,
  .webgis-adddata-tab .rm-adddata-tab-icon svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .webgis-adddata-tab .rm-adddata-tab-text {
    font-size: 0.84em;
  }
}

/* Lebarkan tombol Project Measures agar teks tidak mepet */
.webgis-adddata-tab[data-tab="measure"] {
  min-width: 155px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (max-width: 520px) {
  .webgis-adddata-tab[data-tab="measure"] {
    min-width: 138px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Searchable dropdown Add Data - Peta Informasi */
.webgis-adddata-form-group .ls-custom-select {
  width: 100%;
}

.webgis-adddata-form-group .ls-custom-select-trigger {
  min-height: 48px;
  border-radius: 16px;
  border-color: #e5e7eb;
  background: rgba(255,255,255,.95);
}

.webgis-adddata-form-group .ls-custom-select-menu {
  z-index: 9999;
}

.webgis-adddata-form-group .ls-custom-select-label {
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Searchable dropdown Cetak Peta - Peta Informasi */
.webgis-print-form-group .ls-custom-select {
  width: 100%;
}

.webgis-print-form-group .ls-custom-select-trigger {
  min-height: 48px;
  border-radius: 16px;
  border-color: #e5e7eb;
  background: rgba(255,255,255,.96);
}

.webgis-print-form-group .ls-custom-select-menu {
  z-index: 10050;
}

.webgis-print-form-group .ls-custom-select-label {
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webgis-print-form-group .ls-custom-select-search {
  font-size: 13px;
}

/* Validasi judul cetak */
#printMapTitleInput.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
  background: #fffafa !important;
}

/* Loading kecil Project Measures - Add Data */
.webgis-adddata-loading-inline {
  min-height: 86px;
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.55);
  background: rgba(248, 250, 252, 0.92);
  color: #4b5563;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

.webgis-adddata-mini-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(15, 118, 110, 0.18);
  border-top-color: #0f766e;
  display: inline-block;
  animation: webgisAddDataSpin 0.75s linear infinite;
}

@keyframes webgisAddDataSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Tombol sumber input Analisis Intersect */
.webgis-intersect-source-btn,
.intersect-source-btn,
button[data-intersect-source] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

.rm-intersect-btn-text {
  display: inline-block;
  font-size: 0.94em;
  font-weight: inherit;
}

.rm-intersect-btn-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rm-intersect-btn-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

@media (max-width: 520px) {
  .webgis-intersect-source-btn,
  .intersect-source-btn,
  button[data-intersect-source] {
    gap: 6px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .rm-intersect-btn-text {
    font-size: 0.86em;
  }

  .rm-intersect-btn-icon,
  .rm-intersect-btn-icon svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}

/* SVG tombol AOI - AI Ruang Maslahat */
.ai-rm-aoi-grid button,
.ai-rm-source-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.ai-rm-aoi-btn-text {
  display: inline-block;
  font-size: 0.94em;
  font-weight: inherit;
}

.ai-rm-aoi-btn-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-rm-aoi-btn-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Karena tombol Gambar AOI dihapus, tombol sumber AOI dibuat lebih lega */
.ai-rm-panel .ai-rm-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ai-rm-panel .ai-rm-actions .ai-rm-btn.danger {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .ai-rm-aoi-grid button,
  .ai-rm-source-btn {
    gap: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .ai-rm-aoi-btn-text {
    font-size: 0.84em;
  }

  .ai-rm-aoi-btn-icon,
  .ai-rm-aoi-btn-icon svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}

/* Searchable dropdown Analisis Tata Ruang */
.analysis-form .ls-custom-select {
  width: 100%;
}

.analysis-form .ls-custom-select-trigger {
  min-height: 48px;
  border-radius: 16px;
  border-color: #e5e7eb;
  background: rgba(255, 255, 255, 0.96);
}

.analysis-form .ls-custom-select-menu {
  z-index: 10060;
}

.analysis-form .ls-custom-select-label {
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-form .ls-custom-select-search {
  font-size: 13px;
}

.analysis-form .ls-custom-select.is-disabled,
.analysis-form .ls-custom-select[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}
/* Tombol Pilih Jenis Analisis */
.analysis-type-button,
.analysis-option-button,
button[data-analysis-type] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  text-align: center !important;
}

.rm-analysis-type-text {
  display: inline-block;
  font-size: 0.93em;
  font-weight: inherit;
}

.rm-analysis-type-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rm-analysis-type-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (max-width: 520px) {
  .analysis-type-button,
  .analysis-option-button,
  button[data-analysis-type] {
    gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .rm-analysis-type-text {
    font-size: 0.86em;
  }

  .rm-analysis-type-icon,
  .rm-analysis-type-icon svg {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}
/* Perapihan card tombol jenis analisis */
.analysis-type-button,
.analysis-option-button,
button[data-analysis-type] {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  padding: 16px 18px !important;
  min-height: 88px !important;
  border-radius: 18px !important;
}

.rm-analysis-type-content {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rm-analysis-type-title-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1.25;
}

.rm-analysis-type-title {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  color: #1f3b5f;
  line-height: 1.25;
}

.rm-analysis-type-desc {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #58708c;
  line-height: 1.45;
}

.rm-analysis-type-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: #3d5875;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rm-analysis-type-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

@media (max-width: 520px) {
  .analysis-type-button,
  .analysis-option-button,
  button[data-analysis-type] {
    padding: 14px 15px !important;
    min-height: 82px !important;
  }

  .rm-analysis-type-title {
    font-size: 14px;
  }

  .rm-analysis-type-desc {
    font-size: 12.5px;
  }
}

/* Tombol metode input Analisis Tata Ruang */
.rm-analysis-input-choice {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  white-space: normal !important;
  padding: 14px 16px !important;
  min-height: 76px !important;
  border-radius: 18px !important;
}

.rm-analysis-input-content {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rm-analysis-input-title-row {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.25;
}

.rm-analysis-input-title {
  display: inline-block;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #1f3b5f;
  line-height: 1.25;
}

.rm-analysis-input-desc {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #58708c;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-analysis-input-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #3d5875;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rm-analysis-input-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (max-width: 520px) {
  .rm-analysis-input-choice {
    padding: 13px 14px !important;
    min-height: 72px !important;
  }

  .rm-analysis-input-title {
    font-size: 13.5px;
  }

  .rm-analysis-input-desc {
    font-size: 11.8px;
  }

  .rm-analysis-input-icon,
  .rm-analysis-input-icon svg {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}

/* =========================================================
   Ringkasan Eksekutif - penyempurnaan tampilan
   ========================================================= */

.rm-executive-top-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

.pegawai-dashboard-page .pegawai-hero {
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.pegawai-dashboard-page .pegawai-summary-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.09), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.075);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pegawai-dashboard-page .pegawai-summary-card::after {
  content: "";
  position: absolute;
  right: -22px;
  top: -22px;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.08);
}

.pegawai-dashboard-page .pegawai-summary-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.26);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}

.pegawai-dashboard-page .pegawai-summary-card span {
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
}

.pegawai-dashboard-page .pegawai-summary-card strong {
  position: relative;
  z-index: 1;
  color: #1f3b5f;
}

.pegawai-dashboard-page .pegawai-summary-card p {
  position: relative;
  z-index: 1;
  color: #64748b;
}

.pegawai-dashboard-page .pegawai-main-panel,
.pegawai-dashboard-page .pegawai-menu-panel {
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08);
}

.pegawai-dashboard-page .pegawai-panel-head h3 {
  color: #1f3b5f;
}

.pegawai-dashboard-page .pegawai-panel-head p {
  color: #64748b;
}

.rm-executive-quick-list a.pegawai-menu-card,
.pegawai-menu-list a.pegawai-menu-card {
  text-decoration: none !important;
  color: inherit;
}

.rm-executive-quick-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rm-executive-quick-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

#ringkasanEksekutifLatestReports .pegawai-latest-card {
  border: 1px solid rgba(226, 232, 240, 0.92);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-radius: 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#ringkasanEksekutifLatestReports .pegawai-latest-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.24);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10);
}

#ringkasanEksekutifLatestReports .pegawai-latest-card strong {
  color: #1f3b5f;
}

#ringkasanEksekutifLatestReports .pegawai-latest-card p {
  color: #52677f;
}

#ringkasanEksekutifLatestReports .pegawai-latest-card small {
  color: #7b8794;
}

/* =========================================================
   FINAL - Ringkasan Eksekutif lebih rapi
   ========================================================= */

/* Jarak khusus agar hero tidak tertutup fixed header */

/* Header lebih compact karena tombol Kembali dihapus */
.rm-executive-page .modern-topbar {
  min-height: 112px !important;
}

/* Kalau masih ada tombol kembali lama, sembunyikan */
.rm-executive-page .modern-topbar-right > .pegawai-refresh-btn,
.rm-executive-page #ringkasanBackDashboardLink {
  display: none !important;
}

/* Rapikan hero supaya tidak nempel header */
.rm-executive-page .pegawai-hero {
  margin-top: 10px !important;
  margin-bottom: 24px !important;
  border-radius: 28px !important;
  padding: 36px 34px !important;
  box-shadow: 0 20px 48px rgba(31, 70, 104, 0.18) !important;
}

.rm-executive-page .pegawai-hero h1 {
  font-size: 34px !important;
  line-height: 1.18 !important;
}

.rm-executive-page .pegawai-hero p {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Panel laporan terbaru */
.rm-executive-page .pegawai-main-panel {
  border-radius: 26px !important;
  padding: 22px !important;
}

.rm-executive-page .pegawai-panel-head {
  align-items: center !important;
  margin-bottom: 14px !important;
}

.rm-executive-page .pegawai-panel-head h3 {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #16365c !important;
}

.rm-executive-page .pegawai-panel-head p {
  margin-top: 5px !important;
  font-size: 13px !important;
  color: #64748b !important;
}

/* List laporan terbaru */
.rm-executive-page #ringkasanEksekutifLatestReports {
  display: grid !important;
  gap: 12px !important;
}

/* Card laporan terbaru profesional */
.rm-executive-latest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.055), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 15px 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.rm-executive-latest-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.24);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.rm-executive-latest-left {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  flex: 1;
}

.rm-executive-latest-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rm-executive-latest-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}

.rm-executive-latest-icon.pelanggaran {
  background: #eff6ff;
  color: #1d4ed8;
}

.rm-executive-latest-icon.sawah {
  background: #eef5df;
  color: #0f766e;
}

.rm-executive-latest-main {
  min-width: 0;
  flex: 1;
}

.rm-executive-latest-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 5px;
}

.rm-executive-latest-title-row strong {
  display: block;
  min-width: 0;
  color: #0f2748;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-executive-latest-type {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
}

.rm-executive-latest-type.pelanggaran {
  background: #eff6ff;
  color: #1d4ed8;
}

.rm-executive-latest-type.sawah {
  background: #eef5df;
  color: #0f766e;
}

.rm-executive-latest-location {
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-executive-latest-meta {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.rm-executive-latest-status {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Empty state laporan terbaru */
.rm-executive-empty-state {
  min-height: 120px;
  align-items: center;
  justify-content: center;
}

.rm-executive-empty-state strong {
  display: block;
  margin-bottom: 5px;
  color: #0f2748;
  font-weight: 900;
}

/* Mobile */
@media (max-width: 760px) {
  .rm-executive-page .modern-dashboard-main {
    padding-top: 166px !important;
  }

  .rm-executive-page .pegawai-hero {
    margin-top: 6px !important;
    padding: 28px 22px !important;
  }

  .rm-executive-latest-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .rm-executive-latest-status {
    align-self: flex-start;
  }

  .rm-executive-latest-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .rm-executive-latest-title-row strong,
  .rm-executive-latest-location {
    white-space: normal;
  }
}

/* =========================================================
   GLOBAL - Jarak aman header dan hero semua halaman
   ========================================================= */

.modern-dashboard-page {
  --rm-header-safe-space: 132px;
}

/* Semua halaman modern diberi ruang dari fixed/top header */
.modern-dashboard-page .modern-dashboard-main {
  padding-top: var(--rm-header-safe-space) !important;
}

/* Hero jangan terlalu mepet dengan header */
.modern-dashboard-page .pegawai-hero,
.modern-dashboard-page .masyarakat-hero,
.modern-dashboard-page .dashboard-hero,
.modern-dashboard-page .modern-hero {
  margin-top: 10px !important;
  margin-bottom: 24px !important;
}

/* Topbar dibuat stabil dan tidak terlalu menekan konten */
.modern-dashboard-page .modern-topbar {
  min-height: 112px !important;
  z-index: 1000 !important;
}

/* Brand header lebih rapi */
.modern-dashboard-page .modern-brand-text h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  color: #111827 !important;
}

.modern-dashboard-page .modern-brand-text p {
  margin: 5px 0 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: #64748b !important;
}

/* Khusus mobile: header biasanya lebih tinggi */
@media (max-width: 760px) {
  .modern-dashboard-page {
    --rm-header-safe-space: 166px;
  }

  .modern-dashboard-page .pegawai-hero,
  .modern-dashboard-page .masyarakat-hero,
  .modern-dashboard-page .dashboard-hero,
  .modern-dashboard-page .modern-hero {
    margin-top: 6px !important;
  }
}

/* =========================================================
   Admin Panel - Tahap 1
   ========================================================= */

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

.rm-admin-card {
  position: relative;
  min-height: 168px;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 20px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.075);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.rm-admin-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: #eff6ff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rm-admin-card-icon svg {
  width: 23px;
  height: 23px;
}

.rm-admin-card-icon.green {
  background: #eef5df;
  color: #0f766e;
}

.rm-admin-card-icon.orange {
  background: #fff7ed;
  color: #c2410c;
}

.rm-admin-card-icon.blue {
  background: #eff6ff;
  color: #1d4ed8;
}

.rm-admin-card-icon.purple {
  background: #f5f3ff;
  color: #6d28d9;
}

.rm-admin-card-icon.slate {
  background: #f1f5f9;
  color: #475569;
}

.rm-admin-card strong {
  display: block;
  color: #0f2748;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.rm-admin-card small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.rm-admin-card em {
  margin-top: auto;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(148, 163, 184, 0.14);
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.rm-admin-card.is-disabled {
  opacity: 0.9;
}

.rm-admin-menu-card {
  border-color: rgba(109, 40, 217, 0.24) !important;
}

@media (max-width: 980px) {
  .rm-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .rm-admin-page .modern-dashboard-main {
    padding-top: 166px !important;
  }

  .rm-admin-grid {
    grid-template-columns: 1fr;
  }

  .rm-admin-card {
    min-height: 150px;
  }
}

/* =========================================================
   Admin Panel - Manajemen Pengguna
   ========================================================= */

.rm-admin-card-button {
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(109, 40, 217, 0.22);
}

.rm-admin-card-button:hover {
  transform: translateY(-2px);
  border-color: rgba(109, 40, 217, 0.34);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.11);
}

.rm-admin-module-container {
  margin-top: 20px;
}

.rm-admin-module-empty,
.rm-admin-module-card {
  border-radius: 26px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.075);
  padding: 22px;
}

.rm-admin-module-empty {
  color: #64748b;
}

.rm-admin-module-empty strong {
  display: block;
  color: #0f2748;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}

.rm-admin-module-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.rm-admin-module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.rm-admin-module-kicker {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 10px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 8px;
}

.rm-admin-module-head h3 {
  margin: 0;
  color: #0f2748;
  font-size: 22px;
  font-weight: 900;
}

.rm-admin-module-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.rm-admin-module-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.rm-admin-small-btn {
  border: 0;
  border-radius: 13px;
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.rm-admin-small-btn.primary {
  background: #0f766e;
  color: #ffffff;
}

.rm-admin-small-btn.secondary {
  background: #f1f5f9;
  color: #334155;
}

.rm-admin-create-panel {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 22px;
  background: #fbfdff;
  padding: 16px;
  margin-bottom: 16px;
}

.rm-admin-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rm-admin-create-head strong {
  color: #0f2748;
  font-weight: 900;
}

.rm-admin-create-head button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 20px;
  cursor: pointer;
}

.rm-admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.rm-admin-form-grid label {
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.rm-admin-form-grid input,
.rm-admin-form-grid select,
.rm-admin-table-select {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 9px 11px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.rm-admin-form-grid input:focus,
.rm-admin-form-grid select:focus,
.rm-admin-table-select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.13);
}

.rm-admin-create-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.rm-admin-create-foot small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.rm-admin-loading {
  min-height: 72px;
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.55);
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 14px;
}

.rm-admin-mini-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(15, 118, 110, 0.18);
  border-top-color: #0f766e;
  display: inline-block;
  animation: rmAdminSpin 0.75s linear infinite;
}

@keyframes rmAdminSpin {
  to {
    transform: rotate(360deg);
  }
}

.rm-admin-user-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
}

.rm-admin-user-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
  background: #ffffff;
}

.rm-admin-user-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.rm-admin-user-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.rm-admin-user-cell strong {
  display: block;
  color: #0f2748;
  font-size: 13.5px;
  font-weight: 900;
}

.rm-admin-user-cell small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.rm-admin-user-cell em {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.rm-admin-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
}

.rm-admin-badge.success {
  background: #ecfdf5;
  color: #047857;
}

.rm-admin-badge.warning {
  background: #fff7ed;
  color: #c2410c;
}

.rm-admin-muted {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .rm-admin-module-head,
  .rm-admin-create-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .rm-admin-module-actions {
    justify-content: flex-start;
  }

  .rm-admin-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FINAL - Admin Panel sama dengan Dashboard Masyarakat
   ========================================================= */

.rm-admin-page .modern-dashboard-main {
  max-width: 1280px;
  margin: 0 auto;
}

.rm-admin-page .modern-topbar {
  z-index: 1000;
}

.rm-admin-page .rm-admin-hero {
  margin-bottom: 28px !important;
}

.rm-admin-page .rm-admin-hero p {
  white-space: normal !important;
}

.rm-admin-page .rm-admin-module-container {
  scroll-margin-top: 132px;
}

.rm-admin-page .modern-user-dropdown {
  pointer-events: auto;
}

@media (max-width: 760px) {
  .rm-admin-page .rm-admin-hero p {
    white-space: normal !important;
  }

  .rm-admin-page .rm-admin-module-container {
    scroll-margin-top: 166px;
  }
}

.rm-admin-search-panel {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 22px;
  background: #fbfdff;
  padding: 16px;
  margin-bottom: 16px;
}

.rm-admin-search-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.rm-admin-search-grid label {
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.rm-admin-search-grid input,
.rm-admin-search-grid select {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 9px 11px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  margin-top: 6px;
}

.rm-admin-search-grid input:focus,
.rm-admin-search-grid select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.13);
}

.rm-admin-workarea-info,
.rm-admin-workarea-preview,
.rm-admin-form-note {
  margin-top: 12px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  padding: 11px 12px;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 800;
}

.rm-admin-workarea-info strong {
  color: #0f2748;
  margin-right: 6px;
}

.rm-admin-workarea-info span,
.rm-admin-workarea-preview span,
.rm-admin-form-note span {
  display: inline-flex;
  margin: 3px 4px 3px 0;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.rm-admin-state-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.rm-admin-state-empty {
  background: #f8fafc;
}

.rm-admin-state-error {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

@media (max-width: 760px) {
  .rm-admin-search-grid {
    grid-template-columns: 1fr;
  }
}

.rm-combo {
  position: relative;
  width: 100%;
}

.rm-combo-trigger {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 9px 11px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  outline: none;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.rm-combo-trigger:hover {
  border-color: rgba(15, 118, 110, 0.45);
  background: #fbfdf7;
}

.rm-combo[data-open="true"] .rm-combo-trigger {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.13);
}

.rm-combo-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-combo-icon {
  flex: 0 0 auto;
  color: #64748b;
  transition: transform 0.18s ease;
}

.rm-combo[data-open="true"] .rm-combo-icon {
  transform: rotate(180deg);
}

.rm-combo-panel {
  position: absolute;
  z-index: 10000;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);
  display: none;
}

.rm-combo[data-open="true"] .rm-combo-panel {
  display: block;
}

.rm-combo-search {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  margin: 0 0 8px;
}

.rm-combo-search:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
  background: #ffffff;
}

.rm-combo-options {
  max-height: 210px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
}

.rm-combo-option {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  padding: 9px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.rm-combo-option:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.rm-combo-option.is-active {
  background: #eef5df;
  color: #0f766e;
}

.rm-combo-empty {
  padding: 10px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.rm-admin-workarea-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rm-admin-workarea-info strong {
  color: #0f2748;
  margin-right: 4px;
}

.rm-admin-workarea-info span,
.rm-admin-workarea-preview span,
.rm-admin-form-note span {
  display: inline-flex;
  margin: 2px 4px 2px 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.rm-admin-small-btn.is-loading {
  cursor: wait;
  opacity: 0.85;
  pointer-events: none;
}

.rm-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-top-color: #ffffff;
  border-radius: 999px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
  animation: rmSpin 0.75s linear infinite;
}

@keyframes rmSpin {
  to {
    transform: rotate(360deg);
  }
}

.rm-admin-spatial-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.rm-admin-spatial-form,
.rm-admin-spatial-list {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  padding: 16px;
}

.rm-admin-spatial-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.rm-admin-spatial-form-head strong {
  color: #0f2748;
  font-size: 16px;
  font-weight: 950;
}

.rm-admin-full-label {
  display: block;
  margin-top: 12px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.rm-admin-full-label textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  padding: 11px 12px;
  margin-top: 6px;
  resize: vertical;
  outline: none;
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
}

.rm-admin-spatial-upload {
  margin-top: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 20px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rm-admin-spatial-upload strong {
  display: block;
  color: #0f2748;
  font-weight: 950;
}

.rm-admin-spatial-upload p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
}

.rm-admin-upload-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 14px;
  background: #0f766e;
  color: #ffffff;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
}

.rm-admin-spatial-file-info {
  margin-top: 12px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  padding: 11px 12px;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 800;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rm-admin-spatial-file-info strong {
  color: #0f2748;
}

.rm-admin-spatial-file-info span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.rm-admin-search-grid.spatial {
  grid-template-columns: 180px minmax(0, 1fr) auto;
}

@media (max-width: 980px) {
  .rm-admin-spatial-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .rm-admin-spatial-upload {
    align-items: stretch;
    flex-direction: column;
  }

  .rm-admin-upload-btn {
    text-align: center;
  }

  .rm-admin-search-grid.spatial {
    grid-template-columns: 1fr;
  }
}

.rm-admin-style-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.rm-admin-style-form,
.rm-admin-style-preview {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  padding: 16px;
}

.rm-admin-style-info {
  margin-top: 12px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  padding: 11px 12px;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 800;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rm-admin-style-info strong {
  color: #0f2748;
}

.rm-admin-style-info span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.rm-admin-style-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.rm-admin-style-template {
  margin-top: 14px;
  border-radius: 16px;
  background: #fbfdff;
  border: 1px dashed #cbd5e1;
  padding: 12px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 800;
}

.rm-admin-style-template strong {
  color: #0f2748;
}

.rm-admin-style-template code {
  display: inline-flex;
  margin: 0 5px;
  padding: 4px 8px;
  border-radius: 10px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
}

.rm-style-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 850;
  color: #334155;
}

.rm-style-color-chip i {
  width: 18px;
  height: 18px;
  display: inline-block;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

@media (max-width: 980px) {
  .rm-admin-style-layout {
    grid-template-columns: 1fr;
  }
}

.rm-admin-style-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.rm-admin-style-top-grid label {
  display: block;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.rm-admin-style-top-grid input[type="text"] {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 9px 11px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  margin-top: 6px;
}

.rm-admin-style-top-grid input[type="text"]:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.13);
}

.rm-style-paste-card {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fbfdff;
  padding: 14px;
}

.rm-style-paste-title {
  margin-bottom: 12px;
}

.rm-style-paste-title strong {
  display: block;
  color: #0f2748;
  font-size: 14px;
  font-weight: 950;
}

.rm-style-paste-title p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 750;
}

.rm-style-fixed-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.rm-style-fixed-columns span {
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 8px 9px;
}

.rm-style-fixed-columns strong {
  display: block;
  color: #0f766e;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.rm-style-fixed-columns em {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.rm-style-paste-card textarea {
  width: 100%;
  min-height: 230px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #ffffff;
  padding: 12px;
  color: #0f172a;
  font-family: Consolas, Monaco, monospace;
  font-size: 12px;
  line-height: 1.65;
  resize: vertical;
  outline: none;
}

.rm-style-paste-card textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.rm-icon-action-btn {
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #eef5df;
  color: #0f766e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  font-weight: 950;
}

.rm-icon-action-btn:hover {
  background: #0f766e;
  color: #ffffff;
}

.rm-icon-action-btn.success {
  background: #dcfce7;
  color: #166534;
}

.rm-icon-action-btn.danger {
  background: #fee2e2;
  color: #991b1b;
}

.rm-style-edit-input {
  width: 100%;
  min-width: 110px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  outline: none;
}

.rm-style-edit-input.small {
  min-width: 72px;
}

.rm-style-edit-input.color {
  min-width: 95px;
}

.rm-style-edit-input:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.rm-style-edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

tr.is-editing {
  background: #fbfdff;
}

@media (max-width: 980px) {
  .rm-admin-style-top-grid {
    grid-template-columns: 1fr;
  }

  .rm-style-fixed-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .rm-style-fixed-columns {
    grid-template-columns: 1fr;
  }
}
.rm-admin-mini-spinner.only {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(15, 118, 110, 0.22);
  border-top-color: #0f766e;
  border-radius: 999px;
  display: inline-block;
  animation: rmSpin 0.75s linear infinite;
}

.rm-style-paste-card {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fbfdff;
  padding: 14px;
}

.rm-style-paste-title {
  margin-bottom: 12px;
}

.rm-style-paste-title strong {
  display: block;
  color: #0f2748;
  font-size: 14px;
  font-weight: 950;
}

.rm-style-paste-title p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 750;
}

.rm-style-sheet {
  border: 1px solid #dbe3ea;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}

.rm-style-sheet-head {
  display: grid;
  grid-template-columns: 0.8fr 1.45fr 1fr 1fr 0.8fr 0.9fr;
  background: #eef5df;
  border-bottom: 1px solid #dbe3ea;
}

.rm-style-sheet-head div {
  min-height: 48px;
  padding: 7px 8px;
  border-right: 1px solid #dbe3ea;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rm-style-sheet-head div:last-child {
  border-right: 0;
}

.rm-style-sheet-head strong {
  color: #10293d;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rm-style-sheet-head em {
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0.88;
}

.rm-style-sheet textarea {
  width: 100%;
  min-height: 250px;
  border: 0;
  border-radius: 0;
  padding: 10px 8px;
  color: #0f172a;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 12px;
  line-height: 32px;
  resize: vertical;
  outline: none;
  tab-size: 18;

  background-image:
    linear-gradient(to right, transparent calc(13.3% - 1px), #e5e7eb calc(13.3% - 1px), #e5e7eb 13.3%, transparent 13.3%),
    linear-gradient(to right, transparent calc(37.5% - 1px), #e5e7eb calc(37.5% - 1px), #e5e7eb 37.5%, transparent 37.5%),
    linear-gradient(to right, transparent calc(54.1% - 1px), #e5e7eb calc(54.1% - 1px), #e5e7eb 54.1%, transparent 54.1%),
    linear-gradient(to right, transparent calc(70.7% - 1px), #e5e7eb calc(70.7% - 1px), #e5e7eb 70.7%, transparent 70.7%),
    linear-gradient(to right, transparent calc(84% - 1px), #e5e7eb calc(84% - 1px), #e5e7eb 84%, transparent 84%),
    repeating-linear-gradient(
      to bottom,
      #ffffff 0,
      #ffffff 31px,
      #e5e7eb 31px,
      #e5e7eb 32px
    );
}

.rm-style-sheet textarea:focus {
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.22);
}

.rm-admin-style-layout {
  display: grid;
  grid-template-columns: minmax(430px, 0.95fr) minmax(520px, 1.05fr);
  gap: 18px;
  align-items: start;
}

.rm-admin-style-form,
.rm-admin-style-preview {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  padding: 16px;
  min-width: 0;
}

@media (max-width: 1120px) {
  .rm-admin-style-layout {
    grid-template-columns: 1fr;
  }
}

.rm-admin-mini-spinner.only {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(15, 118, 110, 0.22);
  border-top-color: #0f766e;
  border-radius: 999px;
  display: inline-block;
  animation: rmSpin 0.75s linear infinite;
}

.rm-admin-style-info.is-loading {
  justify-content: center;
  min-height: 48px;
}

.rm-style-paste-card {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #fbfdff;
  padding: 14px;
}

.rm-style-paste-title {
  margin-bottom: 12px;
}

.rm-style-paste-title strong {
  display: block;
  color: #0f2748;
  font-size: 14px;
  font-weight: 950;
}

.rm-style-paste-title p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 750;
}

.rm-style-sheet-scroller {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dbe3ea;
  border-radius: 16px;
  background: #ffffff;
}

.rm-style-sheet-table {
  width: max-content;
  min-width: 630px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.rm-style-sheet-table th {
  background: #eef5df;
  border-right: 1px solid #dbe3ea;
  border-bottom: 1px solid #dbe3ea;
  padding: 6px 7px;
  text-align: left;
  vertical-align: middle;
  height: 44px;
}

.rm-style-sheet-table th:last-child {
  border-right: 0;
}

.rm-style-sheet-table th strong {
  display: block;
  color: #10293d;
  font-size: 9.5px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rm-style-sheet-table th em {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.rm-style-sheet-table td {
  height: 32px;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 5px 7px;
  color: #0f172a;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 11.5px;
  line-height: 1.3;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-style-sheet-table td:last-child {
  border-right: 0;
}

.rm-style-sheet-table tr:last-child td {
  border-bottom: 0;
}

.rm-style-sheet-table td:focus {
  background: #fff7ed;
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.28);
}

.rm-style-sheet-table td:hover {
  background: #fbfdff;
}

.rm-admin-style-preview .rm-admin-user-table th:last-child,
.rm-admin-style-preview .rm-admin-user-table td:last-child {
  width: 58px;
  min-width: 58px;
  text-align: center;
}

.rm-admin-style-preview .rm-icon-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.rm-admin-rule-layout {
  display: grid;
  grid-template-columns: minmax(500px, 0.95fr) minmax(520px, 1.05fr);
  gap: 18px;
  align-items: start;
}

.rm-admin-rule-form,
.rm-admin-rule-preview {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  padding: 16px;
  min-width: 0;
}

.rm-rule-sheet-table {
  width: max-content;
  min-width: 828px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.rm-rule-sheet-table th {
  background: #eef5df;
  border-right: 1px solid #dbe3ea;
  border-bottom: 1px solid #dbe3ea;
  padding: 6px 7px;
  text-align: left;
  vertical-align: middle;
  height: 44px;
}

.rm-rule-sheet-table th:last-child {
  border-right: 0;
}

.rm-rule-sheet-table th strong {
  display: block;
  color: #10293d;
  font-size: 9.5px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rm-rule-sheet-table th em {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.rm-rule-sheet-table td {
  height: 32px;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 5px 7px;
  color: #0f172a;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 11.5px;
  line-height: 1.3;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-rule-sheet-table td:last-child {
  border-right: 0;
}

.rm-rule-sheet-table tr:last-child td {
  border-bottom: 0;
}

.rm-rule-sheet-table td:focus {
  background: #fff7ed;
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.28);
}

.rm-admin-rule-preview .rm-admin-user-table th:last-child,
.rm-admin-rule-preview .rm-admin-user-table td:last-child {
  width: 58px;
  min-width: 58px;
  text-align: center;
}

@media (max-width: 1120px) {
  .rm-admin-rule-layout {
    grid-template-columns: 1fr;
  }
}

.rm-admin-readonly-field {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  padding: 9px 11px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  outline: none;
  margin-top: 6px;
  display: flex;
  align-items: center;
}

.rm-admin-spatial-form .rm-admin-form-grid {
  align-items: end;
}

.rm-admin-spatial-form .rm-admin-form-grid label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.rm-admin-spatial-form .rm-combo-trigger,
.rm-admin-spatial-form input,
.rm-admin-spatial-form .rm-admin-readonly-field {
  min-height: 42px;
}

.rm-admin-spatial-layout {
  grid-template-columns: minmax(420px, 0.92fr) minmax(500px, 1.08fr);
}

.rm-admin-spatial-form {
  min-width: 0;
}

.rm-admin-spatial-form .rm-admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.rm-admin-spatial-form .rm-admin-form-grid label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #0f2748;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
}

.rm-admin-spatial-form .rm-admin-form-grid input,
.rm-admin-spatial-form .rm-admin-readonly-field,
.rm-admin-spatial-form .rm-combo-trigger {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 14px;
}

.rm-admin-spatial-form .rm-admin-form-grid input {
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-admin-readonly-field {
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  padding: 9px 11px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rm-admin-readonly-field.is-empty {
  color: #64748b;
}

.rm-admin-spatial-form .rm-admin-full-label {
  margin-top: 12px;
}

.rm-admin-spatial-form .rm-admin-full-label textarea {
  min-height: 68px;
  font-family: inherit;
}

@media (max-width: 1080px) {
  .rm-admin-spatial-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .rm-admin-spatial-form .rm-admin-form-grid {
    grid-template-columns: 1fr;
  }
}

.rm-admin-readonly-field.is-loading {
  gap: 8px;
  color: #64748b;
}

.rm-admin-readonly-field.is-loading .rm-admin-mini-spinner {
  flex: 0 0 auto;
}

#adminModuleContainer.is-saving button:disabled,
#adminModuleContainer.is-saving input:disabled,
#adminModuleContainer.is-saving textarea:disabled,
#adminModuleContainer.is-saving select:disabled,
#adminModuleContainer.is-saving .is-disabled {
  cursor: not-allowed !important;
  opacity: 0.58;
}

#adminModuleContainer.is-saving .rm-admin-upload-btn.is-disabled,
#adminModuleContainer.is-saving .rm-combo-trigger.is-disabled {
  cursor: not-allowed !important;
  opacity: 0.58;
}

#adminModuleContainer.is-saving .is-disabled * {
  cursor: not-allowed !important;
}
.rm-admin-form-grid label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.rm-admin-form-grid input,
.rm-admin-form-grid select,
.rm-admin-form-grid .rm-combo-trigger {
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  margin-top: 6px;
}

.rm-admin-create-panel .rm-admin-create-workarea-box {
  width: 100%;
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 8px 11px;
}

.rm-admin-create-panel .rm-admin-create-workarea-box span {
  margin-top: 0;
  margin-bottom: 0;
}

.rm-admin-small-btn.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: wait !important;
  opacity: 0.9;
  pointer-events: none;
}

.rm-btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #ffffff;
  animation: rmAdminSpin 0.75s linear infinite;
  flex: 0 0 auto;
}

.rm-admin-create-panel.is-saving button:disabled,
.rm-admin-create-panel.is-saving input:disabled,
.rm-admin-user-table tr.is-saving button:disabled,
.rm-admin-user-table tr.is-saving input:disabled,
.rm-admin-user-table tr.is-saving .is-disabled {
  cursor: not-allowed !important;
  opacity: 0.62;
}

.rm-admin-user-table tr.is-saving {
  opacity: 0.88;
}

.rm-admin-preview-filter {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
}

.rm-admin-preview-filter label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.rm-admin-preview-filter input[type="text"] {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

.rm-admin-preview-filter input[type="text"]:focus {
  border-color: rgba(15, 118, 110, 0.72);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.rm-admin-preview-count {
  align-self: center;
  justify-self: end;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.rm-admin-empty-cell {
  padding: 18px !important;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 760px) {
  .rm-admin-preview-filter {
    grid-template-columns: 1fr;
  }

  .rm-admin-preview-count {
    justify-self: start;
  }
}

.rm-admin-log-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.92);
}

.rm-admin-log-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.rm-admin-log-toolbar input[type="text"] {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 12px;
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

.rm-admin-log-toolbar input[type="text"]:focus {
  border-color: rgba(15, 118, 110, 0.72);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.rm-admin-log-summary {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: #f8fafc;
}

.rm-admin-log-table td small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}

.rm-admin-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef5df;
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
}

.rm-admin-role-badge.muted {
  background: #f1f5f9;
  color: #64748b;
}

.rm-admin-log-ref {
  display: inline-block;
  max-width: 220px;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 820px) {
  .rm-admin-log-toolbar {
    grid-template-columns: 1fr;
  }
}

.rm-admin-log-table {
  table-layout: fixed;
  width: 100%;
  font-size: 13px;
  color: #334155;
}

.rm-admin-log-table th {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
}

.rm-admin-log-table td {
  vertical-align: top;
  padding: 12px 10px;
  line-height: 1.45;
  font-size: 13px;
}

.rm-admin-log-table th:nth-child(1),
.rm-admin-log-table td:nth-child(1) {
  width: 150px;
}

.rm-admin-log-table th:nth-child(2),
.rm-admin-log-table td:nth-child(2) {
  width: 170px;
}

.rm-admin-log-table th:nth-child(3),
.rm-admin-log-table td:nth-child(3) {
  width: 92px;
}

.rm-admin-log-table th:nth-child(4),
.rm-admin-log-table td:nth-child(4) {
  width: 160px;
}

.rm-admin-log-table th:nth-child(5),
.rm-admin-log-table td:nth-child(5) {
  width: 150px;
}

.rm-log-primary {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
}

.rm-log-secondary {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 500;
  color: #64748b;
  word-break: break-word;
}

.rm-log-ref {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 650;
  color: #334155;
  word-break: break-word;
}

.rm-log-note {
  font-size: 12.8px;
  line-height: 1.5;
  color: #334155;
  word-break: break-word;
}

.rm-admin-log-table .rm-admin-role-badge {
  min-width: 62px;
  height: 26px;
  padding: 0 9px;
  font-size: 10.8px;
  font-weight: 800;
  line-height: 1;
}

.rm-admin-log-table tr:hover td {
  background: rgba(248, 250, 252, 0.9);
}

/* =========================================================
   ADMIN DATA CONTENT TYPOGRAPHY
   Fokus merapikan isi data preview/tabel/detail,
   bukan card menu utama admin.
========================================================= */

/* Area isi modul admin */
#adminModuleContainer,
#adminModuleContainer * {
  box-sizing: border-box;
}

/* Semua tabel data admin: user, data spasial, style, rule, kegiatan, log */
#adminModuleContainer table,
#adminModuleContainer .rm-admin-user-table,
#adminModuleContainer .rm-style-sheet-table,
#adminModuleContainer .rm-rule-sheet-table,
#adminModuleContainer .rm-admin-log-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12.8px;
  line-height: 1.45;
  color: #334155;
}

/* Header tabel */
#adminModuleContainer table th,
#adminModuleContainer .rm-admin-user-table th,
#adminModuleContainer .rm-style-sheet-table th,
#adminModuleContainer .rm-rule-sheet-table th,
#adminModuleContainer .rm-admin-log-table th {
  padding: 10px 9px;
  font-size: 11.3px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  vertical-align: middle;
  white-space: nowrap;
}

/* Isi tabel */
#adminModuleContainer table td,
#adminModuleContainer .rm-admin-user-table td,
#adminModuleContainer .rm-style-sheet-table td,
#adminModuleContainer .rm-rule-sheet-table td,
#adminModuleContainer .rm-admin-log-table td {
  padding: 10px 9px;
  font-size: 12.8px;
  line-height: 1.45;
  font-weight: 500;
  color: #334155;
  vertical-align: top;
}

/* Teks utama di dalam tabel */
#adminModuleContainer table td strong,
#adminModuleContainer .rm-admin-user-table td strong,
#adminModuleContainer .rm-style-sheet-table td strong,
#adminModuleContainer .rm-rule-sheet-table td strong,
#adminModuleContainer .rm-admin-log-table td strong {
  display: inline-block;
  font-size: 12.9px;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
}

/* Teks kecil/detail di dalam tabel */
#adminModuleContainer table td small,
#adminModuleContainer .rm-admin-user-table td small,
#adminModuleContainer .rm-style-sheet-table td small,
#adminModuleContainer .rm-rule-sheet-table td small,
#adminModuleContainer .rm-admin-log-table td small {
  display: block;
  margin-top: 3px;
  font-size: 11.4px;
  line-height: 1.35;
  font-weight: 500;
  color: #64748b;
}

/* Header tabel paste yang punya strong + em */
#adminModuleContainer .rm-style-sheet-table th strong,
#adminModuleContainer .rm-rule-sheet-table th strong {
  display: block;
  margin: 0 0 3px;
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.02em;
}

#adminModuleContainer .rm-style-sheet-table th em,
#adminModuleContainer .rm-rule-sheet-table th em {
  display: block;
  margin: 0;
  font-size: 10.7px;
  line-height: 1.25;
  font-style: normal;
  font-weight: 500;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
}

/* Sel editable untuk paste Excel/Sheet */
#adminModuleContainer td[contenteditable="true"] {
  min-height: 34px;
  font-size: 12.8px;
  line-height: 1.45;
  font-weight: 500;
  color: #334155;
  outline: none;
}

#adminModuleContainer td[contenteditable="true"]:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.18);
}

/* Info box detail dataset/style/rule */
#adminModuleContainer .rm-admin-style-info,
#adminModuleContainer .rm-admin-loading,
#adminModuleContainer .rm-admin-log-summary,
#adminModuleContainer .rm-admin-style-template,
#adminModuleContainer .rm-style-paste-title p {
  font-size: 12.6px;
  line-height: 1.55;
  font-weight: 500;
  color: #64748b;
}

#adminModuleContainer .rm-admin-style-info strong,
#adminModuleContainer .rm-style-paste-title strong {
  font-size: 13.2px;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
}

/* Filter preview di Style Peta, Rule Tata Ruang, Referensi Kegiatan, Log */
#adminModuleContainer .rm-admin-preview-filter,
#adminModuleContainer .rm-admin-log-toolbar {
  font-family: Arial, Helvetica, sans-serif;
}

#adminModuleContainer .rm-admin-preview-filter label,
#adminModuleContainer .rm-admin-log-toolbar label,
#adminModuleContainer .rm-admin-style-top-grid label,
#adminModuleContainer .rm-admin-form-grid label {
  font-size: 11.8px;
  line-height: 1.35;
  font-weight: 700;
  color: #475569;
}

#adminModuleContainer .rm-admin-preview-filter input[type="text"],
#adminModuleContainer .rm-admin-log-toolbar input[type="text"],
#adminModuleContainer .rm-admin-style-top-grid input,
#adminModuleContainer .rm-admin-style-top-grid select,
#adminModuleContainer .rm-admin-form-grid input,
#adminModuleContainer .rm-admin-form-grid select,
#adminModuleContainer .rm-style-edit-input {
  font-size: 12.8px;
  line-height: 1.35;
  font-weight: 500;
  color: #0f172a;
}

/* Searchable dropdown di dalam modul */
#adminModuleContainer .rm-combo-trigger,
#adminModuleContainer .rm-combo-option,
#adminModuleContainer .rm-combo-search {
  font-size: 12.8px !important;
  line-height: 1.35;
  font-weight: 600;
}

#adminModuleContainer .rm-combo-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tombol kecil di dalam tabel */
#adminModuleContainer .rm-admin-small-btn,
#adminModuleContainer .rm-icon-action-btn,
#adminModuleContainer .rm-admin-icon-btn {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

/* Chip warna style peta */
#adminModuleContainer .rm-style-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.2px;
  line-height: 1.35;
  font-weight: 600;
  color: #334155;
}

#adminModuleContainer .rm-style-color-chip i {
  flex: 0 0 auto;
}

/* Log Aktivitas */
#adminModuleContainer .rm-admin-log-table {
  table-layout: fixed;
}

#adminModuleContainer .rm-admin-log-table td {
  font-size: 12.7px;
  line-height: 1.45;
}

#adminModuleContainer .rm-log-primary {
  font-size: 12.9px;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
}

#adminModuleContainer .rm-log-secondary {
  margin-top: 3px;
  font-size: 11.3px;
  line-height: 1.35;
  font-weight: 500;
  color: #64748b;
  word-break: break-word;
}

#adminModuleContainer .rm-log-ref,
#adminModuleContainer .rm-log-note {
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
  color: #334155;
  word-break: break-word;
}

/* Badge role/status kecil di tabel */
#adminModuleContainer .rm-admin-role-badge {
  min-height: 24px;
  padding: 0 8px;
  font-size: 10.7px;
  line-height: 1;
  font-weight: 800;
}

/* Data kosong */
#adminModuleContainer .rm-admin-empty-cell {
  padding: 18px 12px !important;
  text-align: center;
  font-size: 12.8px;
  line-height: 1.45;
  font-weight: 500;
  color: #64748b;
}

/* Biar teks panjang tidak merusak tabel */
#adminModuleContainer table td,
#adminModuleContainer table th {
  overflow-wrap: anywhere;
}

/* Hover tabel lebih halus */
#adminModuleContainer .rm-admin-user-table tbody tr:hover td,
#adminModuleContainer .rm-style-sheet-table tbody tr:hover td,
#adminModuleContainer .rm-rule-sheet-table tbody tr:hover td,
#adminModuleContainer .rm-admin-log-table tbody tr:hover td {
  background: rgba(248, 250, 252, 0.82);
}

.rm-report-monitor-filter .ls-custom-select {
  width: 100%;
}

.rm-report-monitor-filter .ls-custom-select-trigger {
  min-height: 40px;
  border-radius: 14px;
  border-color: #dbe3ea;
  background: #ffffff;
  font-size: 12px;
  padding: 9px 34px 9px 11px;
}

.rm-report-monitor-filter .ls-custom-select-menu {
  z-index: 10050;
}

.rm-report-monitor-filter .ls-custom-select-label {
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-report-monitor-filter .ls-custom-select-search {
  font-size: 12px;
}

/* =========================================================
   PATCH - MINIMIZE MONITORING LAPORAN HANYA TAMPILKAN BADGE
   ========================================================= */

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head h3 {
  display: none !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head p {
  display: none !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head {
  margin: 0 !important;
  align-items: center !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head > div {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head span {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.rm-report-monitor-panel-right.is-minimized {
  width: auto !important;
  min-width: 230px !important;
  max-width: calc(100vw - 36px) !important;
  padding: 14px 16px !important;
}

/* =========================================================
   PATCH - MONITORING LAPORAN BUTTON UX
   ========================================================= */

.rm-report-monitor-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.rm-report-monitor-actions button,
.rm-report-monitor-item-actions button,
.rm-report-popup button,
.rm-report-monitor-minimize-btn {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    opacity .18s ease !important;
}

/* Tombol utama: Terapkan dan Tindak Lanjut */
.rm-report-monitor-actions button.primary,
.rm-report-monitor-actions button:not(.subtle),
.rm-report-monitor-item-actions button.primary,
.rm-report-popup button {
  background: linear-gradient(135deg, #0f766e 0%, #0d615b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(15, 118, 110, 0.15) !important;
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.18) !important;
}

/* Tombol Reset dibuat lebih terlihat */
.rm-report-monitor-actions button.subtle {
  background: #ffffff !important;
  color: #0f766e !important;
  border: 1px solid rgba(15, 118, 110, 0.32) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

/* Tombol Zoom */
.rm-report-monitor-item-actions button:not(.primary) {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #dbe3ea !important;
}

/* Efek saat kursor diarahkan */
.rm-report-monitor-actions button:hover,
.rm-report-monitor-item-actions button:hover,
.rm-report-popup button:hover,
.rm-report-monitor-minimize-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16) !important;
}

.rm-report-monitor-actions button.primary:hover,
.rm-report-monitor-actions button:not(.subtle):hover,
.rm-report-monitor-item-actions button.primary:hover,
.rm-report-popup button:hover {
  background: linear-gradient(135deg, #10293d 0%, #0d615b 100%) !important;
}

.rm-report-monitor-actions button.subtle:hover {
  background: #eef5df !important;
  border-color: rgba(15, 118, 110, 0.55) !important;
  color: #10293d !important;
}

.rm-report-monitor-item-actions button:not(.primary):hover {
  background: #eef2f7 !important;
  border-color: #cbd5e1 !important;
}

/* Efek klik */
.rm-report-monitor-actions button:active,
.rm-report-monitor-item-actions button:active,
.rm-report-popup button:active,
.rm-report-monitor-minimize-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Loading kecil di tombol */
.rm-report-monitor-actions button.is-loading,
.rm-report-monitor-item-actions button.is-loading,
.rm-report-popup button.is-loading {
  pointer-events: none !important;
  opacity: 0.92 !important;
  cursor: not-allowed !important;
}

.rm-report-monitor-actions button.is-loading,
.rm-report-monitor-item-actions button.is-loading {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.rm-btn-spinner {
  width: 13px !important;
  height: 13px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  border-top-color: #ffffff !important;
  display: inline-block !important;
  animation: rmButtonSpin .75s linear infinite !important;
  flex: 0 0 auto !important;
}

.rm-report-monitor-actions button.subtle .rm-btn-spinner,
.rm-report-monitor-item-actions button:not(.primary) .rm-btn-spinner {
  border-color: rgba(15, 118, 110, 0.25) !important;
  border-top-color: #0f766e !important;
}

@keyframes rmButtonSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Tetap: saat minimized, hanya badge Monitoring Laporan */
.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head h3 {
  display: none !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head p {
  display: none !important;
}

.rm-report-monitor-panel-right.is-minimized .rm-report-monitor-head > div {
  display: flex !important;
  align-items: center !important;
}

/* =========================================================
   PATCH - ADMIN MODULE AUTO SCROLL TARGET
   ========================================================= */

.rm-admin-module-container.is-scroll-target .rm-admin-module-card,
.rm-admin-module-container.is-scroll-target .rm-admin-module-empty {
  animation: rmAdminModuleFocusPulse 0.75s ease;
}

@keyframes rmAdminModuleFocusPulse {
  0% {
    transform: translateY(8px);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.075);
  }

  45% {
    transform: translateY(0);
    box-shadow: 0 22px 54px rgba(15, 118, 110, 0.16);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.075);
  }
}

/* =========================================================
   PATCH - ADMIN USER TABLE ALIGNMENT
   Rapikan Role, Status, Wilayah Kerja, Login Terakhir, Aksi
   ========================================================= */

#adminUsersTableWrap .rm-admin-user-table {
  table-layout: fixed !important;
  min-width: 1080px !important;
}

/* Lebar kolom dibuat konsisten */
#adminUsersTableWrap .rm-admin-user-table th:nth-child(1),
#adminUsersTableWrap .rm-admin-user-table td:nth-child(1) {
  width: 240px !important;
}

#adminUsersTableWrap .rm-admin-user-table th:nth-child(2),
#adminUsersTableWrap .rm-admin-user-table td:nth-child(2) {
  width: 175px !important;
}

#adminUsersTableWrap .rm-admin-user-table th:nth-child(3),
#adminUsersTableWrap .rm-admin-user-table td:nth-child(3) {
  width: 160px !important;
}

#adminUsersTableWrap .rm-admin-user-table th:nth-child(4),
#adminUsersTableWrap .rm-admin-user-table td:nth-child(4) {
  width: 290px !important;
}

#adminUsersTableWrap .rm-admin-user-table th:nth-child(5),
#adminUsersTableWrap .rm-admin-user-table td:nth-child(5) {
  width: 165px !important;
}

#adminUsersTableWrap .rm-admin-user-table th:nth-child(6),
#adminUsersTableWrap .rm-admin-user-table td:nth-child(6) {
  width: 120px !important;
  text-align: center !important;
}

/* Semua isi baris disejajarkan di tengah vertikal */
#adminUsersTableWrap .rm-admin-user-table td {
  vertical-align: middle !important;
}

/* Role dan Status combo dibuat tinggi seragam */
#adminUsersTableWrap .rm-admin-user-table .rm-combo,
#adminUsersTableWrap .rm-admin-user-table .rm-combo-trigger {
  width: 100% !important;
}

#adminUsersTableWrap .rm-admin-user-table .rm-combo-trigger {
  min-height: 42px !important;
  height: 42px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
}

/* Wilayah kerja: hilangkan margin-top yang bikin turun */
#adminUsersTableWrap .rm-admin-workarea-preview {
  margin-top: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  padding: 8px 11px !important;
}

/* Chip wilayah kerja sejajar di tengah */
#adminUsersTableWrap .rm-admin-workarea-preview span {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Login terakhir saja yang selalu dibuat sejajar */
#adminUsersTableWrap .rm-admin-user-table td:nth-child(5) .rm-admin-muted {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
}

/* Teks "Tidak diperlukan" khusus kolom Wilayah Kerja */
#adminUsersTableWrap .rm-admin-user-table [id^="adminNoWorkArea-"] {
  align-items: center !important;
  min-height: 42px !important;
}

/* Jangan paksa tampil kalau JS sedang menyembunyikan untuk role Pegawai/Admin */
#adminUsersTableWrap .rm-admin-user-table [id^="adminNoWorkArea-"][style*="display:none"] {
  display: none !important;
}

/* Saat role Masyarakat, JS mengosongkan display sehingga teks ini baru tampil */
#adminUsersTableWrap .rm-admin-user-table [id^="adminNoWorkArea-"]:not([style*="display:none"]) {
  display: inline-flex !important;
}

/* Tombol Simpan dibuat sejajar dan sama tinggi dengan combo */
#adminUsersTableWrap .rm-admin-small-btn {
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Header kolom Aksi ikut center */
#adminUsersTableWrap .rm-admin-user-table th:nth-child(6) {
  text-align: center !important;
}

/* =========================================================
   PATCH FIX - ADMIN WILAYAH KERJA HIDE BY ROLE
   ========================================================= */

#adminUsersTableWrap .rm-admin-workarea-preview.is-hidden,
#adminUsersTableWrap .admin-no-workarea.is-hidden,
#adminUsersTableWrap [id^="adminNoWorkArea-"].is-hidden {
  display: none !important;
}

#adminUsersTableWrap .rm-admin-workarea-preview:not(.is-hidden) {
  margin-top: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  padding: 8px 11px !important;
}

#adminUsersTableWrap .admin-no-workarea:not(.is-hidden),
#adminUsersTableWrap [id^="adminNoWorkArea-"]:not(.is-hidden) {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
}

/* Login terakhir tetap sejajar, tapi jangan ganggu kolom Wilayah Kerja */
#adminUsersTableWrap .rm-admin-user-table td:nth-child(5) .rm-admin-muted {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
}

/* =========================================================
   FIX FINAL - ADMIN WILAYAH KERJA TIDAK BOLEH TAMPIL DOBEL
   ========================================================= */

#adminUsersTableWrap .rm-admin-workarea-preview.is-hidden,
#adminUsersTableWrap .admin-no-workarea.is-hidden,
#adminUsersTableWrap [id^="adminNoWorkArea-"].is-hidden {
  display: none !important;
}

#adminUsersTableWrap .rm-admin-workarea-preview:not(.is-hidden) {
  margin-top: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  padding: 8px 11px !important;
}

#adminUsersTableWrap .admin-no-workarea:not(.is-hidden),
#adminUsersTableWrap [id^="adminNoWorkArea-"]:not(.is-hidden) {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 42px !important;
}

/* =========================================================
   PATCH - ADMIN BUTTON & CARD MICRO INTERACTION
   Efek hover, klik, focus, disabled untuk tombol menu admin
   ========================================================= */

/* Base animasi untuk semua tombol di area admin */
.rm-admin-page .rm-admin-small-btn,
.rm-admin-page .rm-admin-card-button,
.rm-admin-page .rm-admin-create-head button,
.rm-admin-page .rm-admin-module-actions button,
.rm-admin-page .rm-admin-style-actions button,
.rm-admin-page .rm-admin-preview-filter button,
.rm-admin-page .rm-admin-user-table button {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateY(0) scale(1) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease !important;
  will-change: transform, box-shadow !important;
}

/* Tombol umum admin yang belum punya warna khusus */
.rm-admin-page .rm-admin-small-btn:not(.primary):not(.secondary):not(.danger) {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #dbe3ea !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

/* Tombol utama */
.rm-admin-page .rm-admin-small-btn.primary {
  background: linear-gradient(135deg, #0f766e 0%, #0d615b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(15, 118, 110, 0.18) !important;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18) !important;
}

/* Tombol secondary */
.rm-admin-page .rm-admin-small-btn.secondary {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #dbe3ea !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

/* Tombol danger jika nanti ada */
.rm-admin-page .rm-admin-small-btn.danger {
  background: #fff1f2 !important;
  color: #be123c !important;
  border: 1px solid rgba(244, 63, 94, 0.22) !important;
  box-shadow: 0 8px 18px rgba(190, 18, 60, 0.08) !important;
}

/* Hover semua tombol admin */
.rm-admin-page .rm-admin-small-btn:not(:disabled):hover,
.rm-admin-page .rm-admin-create-head button:not(:disabled):hover,
.rm-admin-page .rm-admin-module-actions button:not(:disabled):hover,
.rm-admin-page .rm-admin-style-actions button:not(:disabled):hover,
.rm-admin-page .rm-admin-preview-filter button:not(:disabled):hover,
.rm-admin-page .rm-admin-user-table button:not(:disabled):hover {
  transform: translateY(-2px) scale(1.015) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14) !important;
}

/* Hover primary lebih hidup */
.rm-admin-page .rm-admin-small-btn.primary:not(:disabled):hover {
  background: linear-gradient(135deg, #10293d 0%, #0d615b 100%) !important;
  box-shadow: 0 16px 34px rgba(15, 118, 110, 0.24) !important;
}

/* Hover tombol biasa */
.rm-admin-page .rm-admin-small-btn:not(.primary):not(.danger):not(:disabled):hover {
  background: #eef5df !important;
  color: #10293d !important;
  border-color: rgba(15, 118, 110, 0.28) !important;
}

/* Hover danger */
.rm-admin-page .rm-admin-small-btn.danger:not(:disabled):hover {
  background: #ffe4e6 !important;
  color: #9f1239 !important;
  border-color: rgba(244, 63, 94, 0.34) !important;
}

/* Efek klik */
.rm-admin-page .rm-admin-small-btn:not(:disabled):active,
.rm-admin-page .rm-admin-create-head button:not(:disabled):active,
.rm-admin-page .rm-admin-module-actions button:not(:disabled):active,
.rm-admin-page .rm-admin-style-actions button:not(:disabled):active,
.rm-admin-page .rm-admin-preview-filter button:not(:disabled):active,
.rm-admin-page .rm-admin-user-table button:not(:disabled):active {
  transform: translateY(0) scale(0.965) !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, 0.12) !important;
}

/* Efek focus keyboard */
.rm-admin-page .rm-admin-small-btn:focus-visible,
.rm-admin-page .rm-admin-card-button:focus-visible,
.rm-admin-page .rm-admin-create-head button:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(15, 118, 110, 0.16),
    0 14px 30px rgba(15, 23, 42, 0.14) !important;
}

/* Disabled/loading jangan ikut hover */
.rm-admin-page .rm-admin-small-btn:disabled,
.rm-admin-page .rm-admin-small-btn.is-loading,
.rm-admin-page .rm-admin-create-head button:disabled {
  opacity: 0.72 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(0.08) !important;
  box-shadow: none !important;
}

/* Card menu admin dibuat lebih interaktif */
.rm-admin-page .rm-admin-card-button {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease !important;
}

.rm-admin-page .rm-admin-card-button:not(.is-disabled):hover {
  transform: translateY(-4px) !important;
  border-color: rgba(15, 118, 110, 0.34) !important;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.14) !important;
  background:
    radial-gradient(circle at top right, rgba(15, 118, 110, 0.14), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfff4 100%) !important;
}

.rm-admin-page .rm-admin-card-button:not(.is-disabled):active {
  transform: translateY(-1px) scale(0.985) !important;
  box-shadow: 0 13px 30px rgba(15, 23, 42, 0.12) !important;
}

/* Icon card ikut bergerak sedikit saat hover */
.rm-admin-page .rm-admin-card-button .rm-admin-card-icon {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease !important;
}

.rm-admin-page .rm-admin-card-button:not(.is-disabled):hover .rm-admin-card-icon {
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12) !important;
}

/* Tombol close panel tambah user */
.rm-admin-page .rm-admin-create-head button {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

.rm-admin-page .rm-admin-create-head button:not(:disabled):hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

/* Ripple halus saat hover */
.rm-admin-page .rm-admin-small-btn::after,
.rm-admin-page .rm-admin-card-button::after,
.rm-admin-page .rm-admin-create-head button::after {
  content: "" !important;
  position: absolute !important;
  inset: auto auto 50% 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.26) !important;
  transform: translate(-50%, 50%) !important;
  transition: width 0.28s ease, height 0.28s ease, opacity 0.28s ease !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

.rm-admin-page .rm-admin-small-btn:not(:disabled):hover::after,
.rm-admin-page .rm-admin-card-button:not(.is-disabled):hover::after,
.rm-admin-page .rm-admin-create-head button:not(:disabled):hover::after {
  width: 180px !important;
  height: 180px !important;
  opacity: 1 !important;
}

/* Kurangi animasi untuk pengguna yang memilih reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rm-admin-page .rm-admin-small-btn,
  .rm-admin-page .rm-admin-card-button,
  .rm-admin-page .rm-admin-create-head button,
  .rm-admin-page .rm-admin-card-button .rm-admin-card-icon {
    transition: none !important;
  }

  .rm-admin-page .rm-admin-small-btn:hover,
  .rm-admin-page .rm-admin-card-button:hover,
  .rm-admin-page .rm-admin-create-head button:hover,
  .rm-admin-page .rm-admin-small-btn:active,
  .rm-admin-page .rm-admin-card-button:active,
  .rm-admin-page .rm-admin-create-head button:active {
    transform: none !important;
  }
}

/* =========================================================
   PATCH - LINK BUKU PANDUAN DI HALAMAN LOGIN
   ========================================================= */

.login-guide-link-wrap {
  margin-top: 22px;
  display: flex;
  justify-content: flex-start;
}

.login-guide-link {
  align-self: flex-start;
}

.login-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.login-guide-link:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.login-guide-link:active {
  transform: translateY(0) scale(0.98);
}

.login-guide-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f766e;
  background: #ffffff;
  flex: 0 0 auto;
}

.login-guide-icon svg {
  width: 21px;
  height: 21px;
}

.login-guide-link span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.login-guide-link strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.login-guide-link small {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 768px) {
  .login-guide-link-wrap {
    margin-top: 16px;
    justify-content: flex-start;
  }

  .login-guide-link {
    padding: 10px 13px;
    border-radius: 16px;
  }

  .login-guide-icon {
    width: 34px;
    height: 34px;
  }
}

/* RAPIN KEMBALI DROPDOWN USER MENU SETELAH ITEM DIUBAH JADI <a> */
.modern-user-menu {
  padding: 10px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14) !important;
}

/* Samakan tampilan <a> dan <button> di dropdown */
.modern-user-menu .modern-user-menu-item,
.modern-user-menu a.modern-user-menu-item,
.modern-user-menu button.modern-user-menu-item {
  width: 100% !important;
  min-height: 38px !important;
  padding: 10px 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;

  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;

  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Hilangkan underline pada semua kondisi link */
.modern-user-menu a.modern-user-menu-item:link,
.modern-user-menu a.modern-user-menu-item:visited,
.modern-user-menu a.modern-user-menu-item:hover,
.modern-user-menu a.modern-user-menu-item:active,
.modern-user-menu a.modern-user-menu-item * {
  text-decoration: none !important;
}

/* Hover lebih rapi */
.modern-user-menu .modern-user-menu-item:hover {
  background: rgba(15, 118, 110, 0.08) !important;
  color: #0f766e !important;
}

/* Item dengan badge, misalnya Laporan Saya */
.modern-user-menu .rm-menu-item-with-badge {
  justify-content: space-between !important;
}

/* Logout tetap merah */
.modern-user-menu .modern-user-menu-item.danger,
.modern-user-menu button.modern-user-menu-item.danger {
  color: #dc2626 !important;
}

.modern-user-menu .modern-user-menu-item.danger:hover,
.modern-user-menu button.modern-user-menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #b91c1c !important;
}

.modern-user-menu-item.is-active {
  background: rgba(15, 118, 110, 0.10) !important;
  color: #0f766e !important;
  font-weight: 700 !important;
}

.modern-user-menu-item.is-active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #0f766e;
  flex: 0 0 auto;
}

/* =========================================================
   FINAL STANDARD - USER DROPDOWN SERAGAM SEMUA HALAMAN
   Dashboard, Profil, Laporan Saya, Ubah Sandi, Lapor Pelanggaran
   ========================================================= */

/* Wrapper dropdown */
.modern-user-dropdown,
.subpage-user-dropdown {
  position: relative !important;
}

/* Standarkan ukuran kotak menu */
.modern-user-menu,
.profile-topbar .profile-only-user-menu,
.subpage-user-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;

  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;

  padding: 10px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14) !important;

  box-sizing: border-box !important;
  z-index: 9999 !important;
}

/* Kondisi default tertutup */
.modern-user-menu {
  display: none !important;
}

/* Kondisi terbuka dashboard / halaman modern */
.modern-user-menu.show {
  display: block !important;
}

/* Kondisi terbuka kalau masih ada struktur subpage lama */
.subpage-user-dropdown.open .subpage-user-menu {
  display: block !important;
}

/* Samakan ukuran item: button dan anchor */
.modern-user-menu .modern-user-menu-item,
.modern-user-menu a.modern-user-menu-item,
.modern-user-menu button.modern-user-menu-item,
.profile-only-user-menu .modern-user-menu-item,
.profile-only-user-menu a.modern-user-menu-item,
.profile-only-user-menu button.modern-user-menu-item,
.subpage-user-menu .modern-user-menu-item,
.subpage-user-menu a.modern-user-menu-item,
.subpage-user-menu button.modern-user-menu-item {
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  padding: 0 14px !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;

  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-decoration: none !important;

  cursor: pointer !important;
  box-sizing: border-box !important;
  appearance: none !important;
}

/* Hilangkan style bawaan link */
.modern-user-menu a.modern-user-menu-item,
.profile-only-user-menu a.modern-user-menu-item,
.subpage-user-menu a.modern-user-menu-item {
  color: #111827 !important;
  text-decoration: none !important;
}

.modern-user-menu a.modern-user-menu-item:link,
.modern-user-menu a.modern-user-menu-item:visited,
.modern-user-menu a.modern-user-menu-item:hover,
.modern-user-menu a.modern-user-menu-item:active,
.profile-only-user-menu a.modern-user-menu-item:link,
.profile-only-user-menu a.modern-user-menu-item:visited,
.profile-only-user-menu a.modern-user-menu-item:hover,
.profile-only-user-menu a.modern-user-menu-item:active,
.subpage-user-menu a.modern-user-menu-item:link,
.subpage-user-menu a.modern-user-menu-item:visited,
.subpage-user-menu a.modern-user-menu-item:hover,
.subpage-user-menu a.modern-user-menu-item:active {
  color: inherit !important;
  text-decoration: none !important;
}

/* Hover */
.modern-user-menu .modern-user-menu-item:hover,
.profile-only-user-menu .modern-user-menu-item:hover,
.subpage-user-menu .modern-user-menu-item:hover {
  background: rgba(15, 118, 110, 0.08) !important;
  color: #0f766e !important;
}

/* Item aktif */
.modern-user-menu-item.is-active {
  background: rgba(15, 118, 110, 0.10) !important;
  color: #0f766e !important;
  font-weight: 700 !important;
}

/* Laporan Saya dengan badge */
.modern-user-menu .rm-menu-item-with-badge,
.profile-only-user-menu .rm-menu-item-with-badge,
.subpage-user-menu .rm-menu-item-with-badge {
  justify-content: space-between !important;
}

/* Logout */
.modern-user-menu .modern-user-menu-item.danger,
.profile-only-user-menu .modern-user-menu-item.danger,
.subpage-user-menu .modern-user-menu-item.danger {
  color: #dc2626 !important;
}

.modern-user-menu .modern-user-menu-item.danger:hover,
.profile-only-user-menu .modern-user-menu-item.danger:hover,
.subpage-user-menu .modern-user-menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #b91c1c !important;
}

/* Mobile */
@media (max-width: 640px) {
  .modern-user-menu,
  .profile-topbar .profile-only-user-menu,
  .subpage-user-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    right: 0 !important;
  }
}

/* =========================================================
   FINAL STANDARD - USER PROFILE TRIGGER + DROPDOWN WIDTH
   Semua halaman dibuat konsisten
   ========================================================= */

/* Wrapper user dropdown */
.modern-user-dropdown,
.subpage-user-dropdown {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

/* Profil kecil / tombol user di topbar */
.modern-user-trigger,
.subpage-user-trigger {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  box-sizing: border-box !important;
}

/* Area teks nama dan role */
.modern-user-trigger .modern-user-info,
.subpage-user-trigger .modern-user-info,
.modern-user-trigger .user-info,
.subpage-user-trigger .user-info {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Nama user tidak boleh membuat card melebar */
#userNameText,
.modern-user-trigger #userNameText,
.subpage-user-trigger #userNameText {
  display: block !important;
  max-width: 135px !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Role user juga aman */
#userRoleText,
.modern-user-trigger #userRoleText,
.subpage-user-trigger #userRoleText {
  display: block !important;
  max-width: 135px !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Dropdown harus sama dengan profil kecil */
.modern-user-menu,
.profile-topbar .profile-only-user-menu,
.subpage-user-menu {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  box-sizing: border-box !important;
}

/* Mobile tetap fleksibel */
@media (max-width: 640px) {
  .modern-user-dropdown,
  .subpage-user-dropdown,
  .modern-user-trigger,
  .subpage-user-trigger,
  .modern-user-menu,
  .profile-topbar .profile-only-user-menu,
  .subpage-user-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #userNameText,
  #userRoleText {
    max-width: 100% !important;
  }
}

/* =========================================================
   OVERRIDE - USER PROFILE TRIGGER + DROPDOWN WIDTH 240PX
   ========================================================= */

.modern-user-dropdown,
.subpage-user-dropdown {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

.modern-user-trigger,
.subpage-user-trigger {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

/* Nama user */
#userNameText,
.modern-user-trigger #userNameText,
.subpage-user-trigger #userNameText {
  max-width: 155px !important;
}

/* Role user */
#userRoleText,
.modern-user-trigger #userRoleText,
.subpage-user-trigger #userRoleText {
  max-width: 155px !important;
}

/* Card dropdown */
.modern-user-menu,
.profile-topbar .profile-only-user-menu,
.subpage-user-menu {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

/* =========================================================
   FIX - ROLE TEXT USER PROFILE KECIL DI SEMUA HALAMAN
   ========================================================= */

.modern-user-trigger .modern-user-meta {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.modern-user-trigger #userRoleText,
.subpage-user-trigger #userRoleText {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  height: auto !important;
  max-height: none !important;

  margin: 2px 0 0 !important;
  padding: 0 !important;

  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #64748b !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* =========================================================
   FIX - USER TRIGGER TEXT TIDAK MENABRAK CHEVRON
   Khusus agar nama panjang aman di Peta Informasi/Peta Pelaporan
   ========================================================= */

.modern-user-trigger,
.subpage-user-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Avatar jangan ikut mengecil */
.modern-user-trigger .modern-user-avatar,
.subpage-user-trigger .modern-user-avatar,
.modern-user-trigger .user-avatar,
.subpage-user-trigger .user-avatar,
.modern-user-trigger #userInitial,
.subpage-user-trigger #userInitial {
  flex: 0 0 44px !important;
}

/* Area nama + role wajib fleksibel dan boleh dipotong */
.modern-user-trigger .modern-user-meta,
.subpage-user-trigger .modern-user-meta,
.modern-user-trigger .modern-user-info,
.subpage-user-trigger .modern-user-info,
.modern-user-trigger .user-info,
.subpage-user-trigger .user-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

/* Nama jangan melebar sampai nabrak ikon */
.modern-user-trigger #userNameText,
.subpage-user-trigger #userNameText {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Role juga ikut dipotong rapi */
.modern-user-trigger #userRoleText,
.subpage-user-trigger #userRoleText {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Chevron / ikon dropdown harus punya ruang tetap */
.modern-user-trigger .modern-user-chevron,
.subpage-user-trigger .modern-user-chevron,
.modern-user-trigger .dropdown-chevron,
.subpage-user-trigger .dropdown-chevron,
.modern-user-trigger .user-dropdown-icon,
.subpage-user-trigger .user-dropdown-icon,
.modern-user-trigger > svg:last-child,
.subpage-user-trigger > svg:last-child {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: auto !important;
}

/* =========================================================
   FINAL FIX - AVATAR INITIAL CENTER + SOFT PROFILE COLORS
   ========================================================= */

.modern-user-avatar,
.subpage-user-avatar,
.webgis-user-avatar-mini {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex: 0 0 44px !important;
}

/* Inisial di dalam avatar */
#userInitial,
.modern-user-avatar #userInitial,
.subpage-user-avatar #userInitial,
.webgis-user-avatar-mini #userInitial {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Foto profil kalau tersedia */
.modern-user-avatar img,
.subpage-user-avatar img,
.webgis-user-avatar-mini img,
#userAvatarImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 999px !important;
}

/* Jangan tampilkan img kalau src kosong, supaya alt "Foto Profil" tidak muncul */
#userAvatarImage[src=""],
#userAvatarImage:not([src]),
.modern-user-avatar img[src=""],
.subpage-user-avatar img[src=""],
.webgis-user-avatar-mini img[src=""] {
  display: none !important;
}

#userInitial,
.modern-user-avatar #userInitial,
.subpage-user-avatar #userInitial,
.webgis-user-avatar-mini #userInitial {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   FINAL FIX - PROFILE PAGE AVATAR SOFT INITIAL
   ========================================================= */

.profile-photo,
#profilePhotoPreview {
  width: 108px !important;
  height: 108px !important;
  min-width: 108px !important;
  min-height: 108px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  background: #E0F2FE !important;
  color: #075985 !important;
}

/* Inisial besar di halaman Profil */
#profilePhotoInitial {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 999px !important;
  background: transparent !important;

  color: inherit !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;

  box-sizing: border-box !important;
}

/* Foto profil besar kalau user upload foto */
#profilePhotoImage {
  width: 100% !important;
  height: 100% !important;

  display: none;
  object-fit: cover !important;
  border-radius: 999px !important;
}

/* Kalau src kosong, jangan tampilkan alt text */
#profilePhotoImage[src=""],
#profilePhotoImage:not([src]) {
  display: none !important;
}

/* =========================================================
   FINAL FIX - FOTO PROFIL CENTERED DI AVATAR KECIL & PROFIL
   ========================================================= */

/* Avatar kecil di topbar/dropdown semua halaman */
.modern-user-avatar,
.subpage-user-avatar,
.webgis-user-avatar-mini,
#userAvatarBox {
  position: relative !important;

  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 999px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex: 0 0 44px !important;
}

/* Foto di avatar kecil wajib menutup seluruh lingkaran */
.modern-user-avatar img,
.subpage-user-avatar img,
.webgis-user-avatar-mini img,
#userAvatarImage {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: block;
  object-fit: cover !important;
  object-position: center center !important;

  border-radius: 999px !important;
  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
  box-sizing: border-box !important;
}

/* Jangan tampilkan gambar kosong agar alt text tidak muncul */
#userAvatarImage[src=""],
#userAvatarImage:not([src]),
.modern-user-avatar img[src=""],
.subpage-user-avatar img[src=""],
.webgis-user-avatar-mini img[src=""] {
  display: none !important;
}

/* Inisial tetap center ketika tidak ada foto */
#userInitial,
.modern-user-avatar #userInitial,
.subpage-user-avatar #userInitial,
.webgis-user-avatar-mini #userInitial {
  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Avatar besar di halaman Profil Saya */
.profile-photo,
#profilePhotoPreview {
  position: relative !important;

  width: 108px !important;
  height: 108px !important;
  min-width: 108px !important;
  min-height: 108px !important;
  max-width: 108px !important;
  max-height: 108px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 auto !important;

  border-radius: 999px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Foto besar wajib menutup penuh lingkaran */
#profilePhotoImage {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: block;
  object-fit: cover !important;
  object-position: center center !important;

  border-radius: 999px !important;
  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
  box-sizing: border-box !important;
}

/* Foto besar kosong jangan tampil */
#profilePhotoImage[src=""],
#profilePhotoImage:not([src]) {
  display: none !important;
}

/* Inisial besar tetap center ketika belum ada foto */
#profilePhotoInitial {
  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: transparent !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;

  box-sizing: border-box !important;
}

/* =========================================================
   FINAL FIX - HIDE INITIAL WHEN PROFILE PHOTO EXISTS
   ========================================================= */

/* Avatar kecil: kalau ada foto, inisial harus hilang */
.modern-user-avatar.has-photo #userInitial,
.subpage-user-avatar.has-photo #userInitial,
.webgis-user-avatar-mini.has-photo #userInitial,
#userAvatarBox.has-photo #userInitial {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Avatar besar halaman Profil Saya: kalau ada foto, inisial harus hilang */
.profile-photo.has-photo #profilePhotoInitial,
#profilePhotoPreview.has-photo #profilePhotoInitial {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Foto tetap di atas dan mengisi penuh */
.modern-user-avatar.has-photo img,
.subpage-user-avatar.has-photo img,
.webgis-user-avatar-mini.has-photo img,
#userAvatarBox.has-photo img,
#profilePhotoPreview.has-photo #profilePhotoImage {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  border-radius: 999px !important;
}

/* =========================================================
   PROFILE PHOTO DELETE BUTTON
   ========================================================= */

.profile-photo-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.profile-photo-edit-btn {
  right: 0 !important;
  bottom: 4px !important;
}

.profile-photo-delete-btn {
  position: absolute !important;
  left: 0 !important;
  bottom: 4px !important;
  z-index: 5 !important;

  width: 34px !important;
  height: 34px !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(220, 38, 38, 0.18) !important;
  border-radius: 999px !important;

  background: #ffffff !important;
  color: #dc2626 !important;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;

  cursor: pointer !important;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

.profile-photo-delete-btn:hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px rgba(220, 38, 38, 0.20) !important;
}

.profile-photo-delete-btn:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.profile-photo-delete-btn.is-loading svg {
  animation: rmDeletePulse 0.75s ease-in-out infinite alternate;
}

@keyframes rmDeletePulse {
  from {
    opacity: 0.45;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   PROFILE PHOTO ACTION BUTTONS - CAMERA + DELETE
   ========================================================= */

.profile-photo-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Input file tetap ada, tapi tersembunyi secara aman */
.profile-photo-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  left: -9999px !important;
}

/* Base tombol kamera dan hapus */
.profile-photo-action-btn {
  position: absolute !important;
  z-index: 30 !important;

  width: 36px !important;
  height: 36px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;

  background: #ffffff !important;
  color: #334155 !important;

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  overflow: hidden !important;
  isolation: isolate !important;

  transform: translateY(0) scale(1);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease !important;
}

.profile-photo-action-btn svg {
  position: relative;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Ripple halus saat klik */
.profile-photo-action-btn::after {
  content: "";
  position: absolute;
  inset: 50%;
  z-index: 1;

  width: 8px;
  height: 8px;
  border-radius: 999px;

  background: currentColor;
  opacity: 0;

  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}

.profile-photo-action-btn.is-tapping::after,
.profile-photo-action-btn:active::after {
  animation: rmProfileActionRipple 0.38s ease-out;
}

@keyframes rmProfileActionRipple {
  0% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(7);
  }
}

/* Tombol kamera kanan bawah */
.profile-photo-edit-btn {
  right: 0 !important;
  bottom: 4px !important;

  color: #0f766e !important;
  border-color: rgba(15, 118, 110, 0.18) !important;
}

.profile-photo-edit-btn:hover {
  background: #eef5df !important;
  color: #10293d !important;
  border-color: rgba(15, 118, 110, 0.28) !important;
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.18) !important;
}

.profile-photo-edit-btn:hover svg {
  transform: scale(1.08);
}

.profile-photo-edit-btn:active,
.profile-photo-edit-btn.is-tapping {
  transform: translateY(1px) scale(0.94) !important;
}

/* Tombol hapus kiri bawah */
.profile-photo-delete-btn {
  left: 0 !important;
  bottom: 4px !important;

  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.18) !important;
}

.profile-photo-delete-btn:hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: rgba(220, 38, 38, 0.28) !important;
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 14px 30px rgba(220, 38, 38, 0.20) !important;
}

.profile-photo-delete-btn:hover svg {
  transform: scale(1.08);
}

.profile-photo-delete-btn:active,
.profile-photo-delete-btn.is-tapping {
  transform: translateY(1px) scale(0.94) !important;
}

.profile-photo-action-btn:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.profile-photo-action-btn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.28) !important;
  outline-offset: 3px !important;
}

/* =========================================================
   PROFILE PHOTO ACTION VISIBILITY
   Tombol kamera & hapus hanya muncul saat Edit Profil aktif
   ========================================================= */

#profilePhotoEditButton,
#deleteProfilePhotoButton,
.profile-photo-edit-btn,
.profile-photo-delete-btn {
  display: none !important;
}

#profilePhotoEditButton.is-visible,
#deleteProfilePhotoButton.is-visible,
.profile-photo-edit-btn.is-visible,
.profile-photo-delete-btn.is-visible {
  display: inline-flex !important;
}

/* =========================================================
   CUSTOM CONFIRM MODAL - DELETE PROFILE PHOTO
   ========================================================= */

.rm-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 18px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(5px);
}

.rm-confirm-backdrop.is-open {
  display: flex;
}

.rm-confirm-card {
  width: min(420px, 100%);
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);

  padding: 22px;
  box-sizing: border-box;

  animation: rmConfirmIn 0.18s ease-out;
}

@keyframes rmConfirmIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rm-confirm-icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;
}

.rm-confirm-icon.danger {
  background: #fee2e2;
  color: #dc2626;
}

.rm-confirm-content h3 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.rm-confirm-content p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.rm-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  margin-top: 22px;
}

.rm-confirm-btn {
  min-height: 38px;
  padding: 0 15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 999px;
  border: 1px solid transparent;

  font-size: 13px;
  font-weight: 800;
  cursor: pointer;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.rm-confirm-btn:hover {
  transform: translateY(-1px);
}

.rm-confirm-btn.ghost {
  background: #f8fafc;
  color: #334155;
  border-color: rgba(15, 23, 42, 0.08);
}

.rm-confirm-btn.ghost:hover {
  background: #eef2f7;
}

.rm-confirm-btn.danger {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(220, 38, 38, 0.24);
}

.rm-confirm-btn.danger:hover {
  background: #b91c1c;
}

.rm-confirm-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.rm-confirm-btn .btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #ffffff;
  animation: rmConfirmSpin 0.75s linear infinite;
}

@keyframes rmConfirmSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 520px) {
  .rm-confirm-card {
    padding: 20px;
    border-radius: 20px;
  }

  .rm-confirm-actions {
    flex-direction: column-reverse;
  }

  .rm-confirm-btn {
    width: 100%;
  }
}

/* =========================================================
   PAGE TRANSITION LOADING OVERLAY
   ========================================================= */

.rm-page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 18px;
  background: rgba(248, 250, 252, 0.58);
  backdrop-filter: blur(5px);
  box-sizing: border-box;
}

.rm-page-transition-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 44px;
  padding: 0 18px;

  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);

  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;

  animation: rmPageTransitionIn 0.16s ease-out;
}

.rm-page-transition-spinner {
  width: 16px;
  height: 16px;

  border-radius: 999px;
  border: 2px solid rgba(15, 118, 110, 0.18);
  border-top-color: #0f766e;

  animation: rmPageTransitionSpin 0.75s linear infinite;
}

@keyframes rmPageTransitionSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rmPageTransitionIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   TOAST HARUS TETAP TERLIHAT DI ATAS PAGE LOADING OVERLAY
   ========================================================= */

.rm-page-transition-overlay {
  z-index: 999800 !important;
}

.toast-container {
  z-index: 1000002 !important;
  pointer-events: none !important;
}

.toast-container .toast {
  position: relative !important;
  z-index: 1000003 !important;
  pointer-events: auto !important;
}

.rm-page-transition-overlay {
  z-index: 999800 !important;
}

.toast-container {
  z-index: 1000002 !important;
  pointer-events: none !important;
}

.toast-container .toast {
  position: relative !important;
  z-index: 1000003 !important;
  pointer-events: auto !important;
}

.rm-page-transition-overlay {
  z-index: 999800 !important;
}

.toast-container {
  z-index: 1000002 !important;
  pointer-events: none !important;
}

.toast-container .toast {
  position: relative !important;
  z-index: 1000003 !important;
  pointer-events: auto !important;
}

/* =========================================================
   USER DROPDOWN MENU ICONS
   Profil Saya, Laporan Saya, Ubah Sandi, Logout
   ========================================================= */

.modern-user-menu .modern-user-menu-item.rm-user-menu-item-with-icon,
.profile-only-user-menu .modern-user-menu-item.rm-user-menu-item-with-icon,
.subpage-user-menu .modern-user-menu-item.rm-user-menu-item-with-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.rm-user-menu-left {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
}

.rm-user-menu-icon {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  flex: 0 0 17px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

.rm-user-menu-label {
  min-width: 0 !important;
  display: inline-block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Jangan tampilkan titik active lama kalau item sudah punya SVG */
.modern-user-menu-item.rm-user-menu-item-with-icon.is-active::before {
  display: none !important;
  content: none !important;
}

/* Laporan Saya tetap rapi dengan badge */
.rm-user-menu-item-with-icon.rm-menu-item-with-badge,
.modern-user-menu .rm-user-menu-item-with-icon.rm-menu-item-with-badge {
  justify-content: space-between !important;
}

.rm-user-menu-item-with-icon .rm-notif-badge {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

/* Logout tetap merah */
.rm-user-menu-item-with-icon.rm-user-menu-item-logout,
.rm-user-menu-item-with-icon.danger {
  color: #dc2626 !important;
}

.rm-user-menu-item-with-icon.rm-user-menu-item-logout:hover,
.rm-user-menu-item-with-icon.danger:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #b91c1c !important;
}

/* Active state tetap mengikuti warna hijau aplikasi */
.rm-user-menu-item-with-icon.is-active {
  background: rgba(15, 118, 110, 0.10) !important;
  color: #0f766e !important;
}

.rm-user-menu-item-with-icon.is-active .rm-user-menu-icon {
  color: #0f766e !important;
}

/* =========================================================
   STAGE 5.14 — NATIONAL ADMIN CONSOLE
   Unified Command Center visual language (navy / teal / neutral)
   ========================================================= */
html.rm-admin-console {
  --rm514-navy: #10293d;
  --rm514-blue: #245a73;
  --rm514-teal: #0f766e;
  --rm514-teal-dark: #0d615b;
  --rm514-paper: #f7fafb;
  --rm514-line: #dde7ed;
  --rm514-muted: #6d7f8c;
  --rm514-soft: #eef5f6;
}

html.rm-admin-console body,
html.rm-admin-console .modern-dashboard-main,
html.rm-admin-console .rm-admin-module-container {
  background: var(--rm514-paper) !important;
  color: var(--rm514-navy) !important;
}

html.rm-admin-console .rm-admin-module-card {
  border: 1px solid var(--rm514-line) !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(13, 39, 58, .055) !important;
}

html.rm-admin-console .rm-admin-module-kicker,
html.rm-admin-console .rm-v514-scope-banner strong {
  color: var(--rm514-teal-dark) !important;
}

html.rm-admin-console .rm-admin-module-kicker {
  background: #eaf5f3 !important;
  border: 1px solid #d7ebe7 !important;
}

html.rm-admin-console .rm-admin-module-head h3,
html.rm-admin-console .rm-admin-spatial-form-head strong,
html.rm-admin-console .rm-admin-create-head strong,
html.rm-admin-console .rm-admin-style-form strong {
  color: var(--rm514-navy) !important;
}

html.rm-admin-console .rm-admin-module-head p,
html.rm-admin-console .rm-admin-muted,
html.rm-admin-console .rm-admin-form-note,
html.rm-admin-console .rm-admin-create-foot small,
html.rm-admin-console .rm-admin-create-head small {
  color: var(--rm514-muted) !important;
}

html.rm-admin-console .rm-admin-small-btn,
html.rm-admin-console .rm-admin-upload-btn {
  border-color: #d8e4e9 !important;
  background: #fff !important;
  color: #365365 !important;
  box-shadow: none !important;
}

html.rm-admin-console .rm-admin-small-btn:hover,
html.rm-admin-console .rm-admin-upload-btn:hover {
  border-color: #a9c7cc !important;
  background: #f4f9f9 !important;
  color: var(--rm514-teal-dark) !important;
}

html.rm-admin-console .rm-admin-small-btn.primary,
html.rm-admin-console .rm-admin-create-foot .rm-admin-small-btn.primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--rm514-teal), var(--rm514-blue)) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(15, 118, 110, .16) !important;
}

html.rm-admin-console .rm-admin-small-btn.primary:hover {
  background: linear-gradient(135deg, #0d6b64, #214f66) !important;
  color: #fff !important;
}

html.rm-admin-console .rm-admin-search-panel,
html.rm-admin-console .rm-admin-create-panel,
html.rm-admin-console .rm-admin-spatial-form,
html.rm-admin-console .rm-admin-spatial-list,
html.rm-admin-console .rm-admin-style-form,
html.rm-admin-console .rm-admin-style-preview,
html.rm-admin-console .rm-style-paste-card,
html.rm-admin-console .rm-admin-rule-form,
html.rm-admin-console .rm-admin-rule-preview {
  border-color: #e1eaee !important;
  background: #fafcfd !important;
  box-shadow: none !important;
}

html.rm-admin-console #adminModuleContainer input,
html.rm-admin-console #adminModuleContainer textarea,
html.rm-admin-console #adminModuleContainer select,
html.rm-admin-console #adminModuleContainer .rm-combo-trigger,
html.rm-admin-console #adminModuleContainer .rm-admin-readonly-field {
  border-color: #d9e4e9 !important;
  background: #fff !important;
  color: #17384c !important;
  box-shadow: none !important;
}

html.rm-admin-console #adminModuleContainer input:focus,
html.rm-admin-console #adminModuleContainer textarea:focus,
html.rm-admin-console #adminModuleContainer select:focus,
html.rm-admin-console #adminModuleContainer .rm-combo-trigger:focus {
  border-color: #6aacaa !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .09) !important;
  outline: none !important;
}

html.rm-admin-console .rm-combo-panel {
  border-color: #dce7eb !important;
  box-shadow: 0 18px 38px rgba(13, 39, 58, .14) !important;
}

html.rm-admin-console .rm-combo-option.is-active,
html.rm-admin-console .rm-combo-option:hover {
  background: #eaf5f3 !important;
  color: var(--rm514-teal-dark) !important;
}

html.rm-admin-console .rm-admin-user-table-wrap {
  border: 1px solid var(--rm514-line) !important;
  background: #fff !important;
}

html.rm-admin-console .rm-admin-user-table th {
  background: #f2f6f8 !important;
  color: #4c6473 !important;
  border-bottom-color: #dfe8ec !important;
}

html.rm-admin-console .rm-admin-user-table td {
  color: #29485b !important;
  border-bottom-color: #edf2f4 !important;
  background: #fff !important;
}

html.rm-admin-console .rm-admin-user-table tbody tr:hover td {
  background: #f8fbfb !important;
}

html.rm-admin-console .rm-admin-user-cell strong { color: var(--rm514-navy) !important; }
html.rm-admin-console .rm-admin-user-cell small { color: #617987 !important; }
html.rm-admin-console .rm-admin-user-cell em { color: #94a4ae !important; }

html.rm-admin-console .rm-admin-loading,
html.rm-admin-console .rm-admin-spatial-file-info,
html.rm-admin-console .rm-admin-style-info {
  border-color: #dce7eb !important;
  background: #f7fafb !important;
  color: #617987 !important;
}

html.rm-admin-console .rm-admin-mini-spinner,
html.rm-admin-console .rm-btn-spinner {
  border-color: rgba(15, 118, 110, .18) !important;
  border-top-color: var(--rm514-teal) !important;
}

html.rm-admin-console .rm-admin-spatial-upload {
  border-color: #cfe1e4 !important;
  background: linear-gradient(180deg, #f7fbfb, #f3f8f9) !important;
}

html.rm-admin-console .rm-admin-spatial-upload strong { color: var(--rm514-navy) !important; }
html.rm-admin-console .rm-admin-spatial-upload p { color: #667f8c !important; }

html.rm-admin-console .rm-v514-module-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

html.rm-admin-console .rm-v514-scope-banner {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid #d8e9e6;
  border-radius: 12px;
  background: #f2f9f8;
  color: #476773;
  font-size: 11px;
  line-height: 1.55;
}

html.rm-admin-console .rm-v514-scope-banner span {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d7e8e5;
  color: var(--rm514-teal-dark);
  font-weight: 800;
}

html.rm-admin-console .rm-v514-toolbar {
  padding: 13px !important;
  margin-bottom: 14px !important;
}

html.rm-admin-console .rm-v514-user-filter-grid {
  grid-template-columns: minmax(140px,.8fr) minmax(190px,1.25fr) minmax(145px,.8fr) minmax(130px,.7fr) auto !important;
  align-items: end !important;
}

html.rm-admin-console .rm-v514-create-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
}

html.rm-admin-console .rm-v514-scope-span {
  grid-column: 1 / -1;
}

html.rm-admin-console .rm-v514-field-label,
html.rm-admin-console .rm-v514-scope-field > span {
  display: block;
  margin-bottom: 6px;
  color: #4b6372;
  font-size: 10px;
  font-weight: 800;
}

html.rm-admin-console .rm-v514-scope-picker {
  display: grid;
  grid-template-columns: minmax(150px,.8fr) minmax(180px,1fr) minmax(220px,1.2fr);
  gap: 9px;
  min-width: 390px;
}

html.rm-admin-console .rm-v514-scope-field { min-width: 0; }
html.rm-admin-console .rm-v514-scope-field select {
  width: 100%;
  min-height: 38px;
  padding: 8px 31px 8px 10px;
  border: 1px solid #d9e4e9;
  border-radius: 9px;
  background: #fff;
  color: #1d4356;
  font-size: 10.5px;
  font-weight: 700;
}

html.rm-admin-console .rm-v514-scope-loading,
html.rm-admin-console .rm-v514-scope-error {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed #cedde2;
  border-radius: 9px;
  background: #f8fbfc;
  color: #6c818d;
  font-size: 10px;
  font-weight: 700;
}

html.rm-admin-console .rm-v514-area-box {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html.rm-admin-console .rm-v514-area-box .rm-v514-scope-picker {
  min-width: 0;
  grid-template-columns: minmax(140px,.8fr) minmax(170px,1fr) minmax(190px,1.15fr);
}

html.rm-admin-console .rm-v514-table-wrap {
  overflow-x: auto !important;
}

html.rm-admin-console .rm-v514-table td:nth-child(4) {
  min-width: 410px;
}

html.rm-admin-console .rm-v514-table .rm-v514-scope-picker {
  min-width: 390px;
  grid-template-columns: minmax(125px,.75fr) minmax(145px,.9fr) minmax(170px,1fr);
}

html.rm-admin-console .rm-v514-table .rm-v514-scope-field > span {
  display: none;
}

html.rm-admin-console .rm-v514-table .rm-v514-scope-field select {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 9.8px;
}

html.rm-admin-console .is-hidden { display: none !important; }

/* remove old green/purple/orange accents from administration workspace */
html.rm-admin-console .rm-admin-card-icon.green,
html.rm-admin-console .rm-admin-card-icon.orange,
html.rm-admin-console .rm-admin-card-icon.blue,
html.rm-admin-console .rm-admin-card-icon.purple,
html.rm-admin-console .rm-admin-card-icon.slate {
  background: #eaf5f3 !important;
  color: var(--rm514-teal-dark) !important;
}

html.rm-admin-console .rm-page-transition-spinner {
  border-color: rgba(15,118,110,.18) !important;
  border-top-color: var(--rm514-teal) !important;
}

@media (max-width: 1120px) {
  html.rm-admin-console .rm-v514-user-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  html.rm-admin-console .rm-v514-user-filter-grid .rm-admin-small-btn { min-height: 39px; }
  html.rm-admin-console .rm-v514-scope-picker { grid-template-columns: 1fr 1fr; min-width: 0; }
  html.rm-admin-console .rm-v514-scope-field[data-kab-field] { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  html.rm-admin-console .rm-v514-module-head { flex-direction: column !important; }
  html.rm-admin-console .rm-v514-user-filter-grid,
  html.rm-admin-console .rm-v514-create-grid,
  html.rm-admin-console .rm-v514-scope-picker,
  html.rm-admin-console .rm-v514-area-box .rm-v514-scope-picker {
    grid-template-columns: 1fr !important;
  }
  html.rm-admin-console .rm-v514-scope-field[data-kab-field] { grid-column: auto; }
  html.rm-admin-console .rm-v514-table td:nth-child(4) { min-width: 320px; }
}

/* Stage 5.14 compact audit log */
html.rm-admin-console #adminModuleContainer .rm-admin-log-insights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:13px;border-bottom:1px solid #e5ecef;background:#f8fbfc}
html.rm-admin-console #adminModuleContainer .rm-admin-log-insights article{padding:12px 13px;border:1px solid #e0e9ed;border-radius:12px;background:#fff;box-shadow:0 5px 14px rgba(13,39,58,.035)}
html.rm-admin-console #adminModuleContainer .rm-admin-log-insights span{display:block;color:#758894;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
html.rm-admin-console #adminModuleContainer .rm-admin-log-insights strong{display:block;margin-top:5px;color:#10293d;font-size:17px;letter-spacing:-.02em}
html.rm-admin-console #adminModuleContainer .rm-admin-log-summary{padding:10px 13px;border-bottom:1px solid #edf2f4;color:#70838f;font-size:9.8px;background:#fff}
html.rm-admin-console #adminModuleContainer .rm-log-user{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;min-width:180px}
html.rm-admin-console #adminModuleContainer .rm-log-primary{color:#17384c;font-size:10.5px;font-weight:800;line-height:1.35}
html.rm-admin-console #adminModuleContainer .rm-log-secondary{margin-top:3px;color:#82939d;font-size:9px;line-height:1.35}
html.rm-admin-console #adminModuleContainer .rm-log-id{margin-top:4px;color:#9aa8b0;font-size:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
html.rm-admin-console #adminModuleContainer .rm-log-activity-badge{display:inline-flex;padding:4px 7px;border-radius:999px;border:1px solid #dce8eb;background:#f3f7f8;color:#45606f;font-size:8.5px;font-weight:900;white-space:nowrap}
html.rm-admin-console #adminModuleContainer .rm-log-activity-badge.security{background:#fff3ed;border-color:#f5d9ca;color:#a94b1f}
html.rm-admin-console #adminModuleContainer .rm-log-activity-badge.people{background:#f0f4fa;border-color:#d9e3f0;color:#315e87}
html.rm-admin-console #adminModuleContainer .rm-log-activity-badge.data{background:#eaf5f3;border-color:#d2e8e4;color:#0d615b}
html.rm-admin-console #adminModuleContainer .rm-log-activity-badge.analysis{background:#eef5f9;border-color:#d7e5ed;color:#245a73}
html.rm-admin-console #adminModuleContainer .rm-log-note{max-width:520px;color:#405a69;font-size:10px;line-height:1.5;white-space:normal}
html.rm-admin-console #adminModuleContainer .rm-log-reference{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
html.rm-admin-console #adminModuleContainer .rm-log-ref-type,html.rm-admin-console #adminModuleContainer .rm-log-ref-id,html.rm-admin-console #adminModuleContainer .rm-log-ref-empty{display:inline-flex;padding:3px 6px;border-radius:6px;background:#f3f6f8;color:#71838e;font-size:8px;font-weight:800}
html.rm-admin-console #adminModuleContainer .rm-admin-role-badge{display:inline-flex;padding:3px 6px;border-radius:999px;background:#eaf5f3;color:#0d615b;font-size:8px;font-weight:900}
@media(max-width:900px){html.rm-admin-console #adminModuleContainer .rm-admin-log-insights{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){html.rm-admin-console #adminModuleContainer .rm-admin-log-insights{grid-template-columns:1fr}}

/* Stage 5.14 — standalone admin routes use the same Command Center palette */
html.rm-admin-console .rm-admin-page .pegawai-hero {
  background: linear-gradient(135deg, #10293d 0%, #245a73 58%, #0f766e 100%) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 22px 52px rgba(16,41,61,.18) !important;
}
html.rm-admin-console .rm-admin-page .rm-admin-card,
html.rm-admin-console .rm-admin-page .rm-admin-card-button {
  border-color: #dde7ed !important;
  background: linear-gradient(180deg,#ffffff 0%,#f9fbfc 100%) !important;
  box-shadow: 0 12px 30px rgba(13,39,58,.06) !important;
}
html.rm-admin-console .rm-admin-page .rm-admin-card-button:not(.is-disabled):hover {
  border-color: #9cc7c2 !important;
  background: radial-gradient(circle at top right,rgba(15,118,110,.10),transparent 38%),linear-gradient(180deg,#ffffff 0%,#f5faf9 100%) !important;
  box-shadow: 0 20px 46px rgba(13,39,58,.12) !important;
}
html.rm-admin-console .rm-admin-page .rm-admin-card em {
  background: #eef5f6 !important;
  color: #526c79 !important;
}
html.rm-admin-console .rm-admin-page .rm-admin-card-button:focus-visible,
html.rm-admin-console .rm-admin-page .rm-admin-small-btn:focus-visible,
html.rm-admin-console .rm-admin-page .rm-admin-create-head button:focus-visible {
  box-shadow: 0 0 0 4px rgba(15,118,110,.13),0 14px 30px rgba(13,39,58,.12) !important;
}

/* Stage 5.16 — Dataset Drive, muat awal, aksi ikon, dan skala custom. */
.rm516-autoload-control{display:flex!important;align-items:center;gap:11px;margin:15px 0 4px;padding:11px 12px;border:1px solid #dcebe7;border-radius:12px;background:#f4faf8;cursor:pointer}
.rm516-autoload-control input,.rm516-table-toggle input{width:17px!important;height:17px!important;min-height:17px!important;margin:0;accent-color:#0f766e;cursor:pointer}
.rm516-autoload-control span{min-width:0}.rm516-autoload-control strong,.rm516-autoload-control small{display:block}.rm516-autoload-control strong{color:#173b42;font-size:10.8px}.rm516-autoload-control small{margin-top:3px;color:#6c808b;font-size:9px}
.rm516-storage-badge,.rm516-status-badge{display:inline-flex;align-items:center;width:max-content;margin-top:5px;padding:3px 7px;border-radius:999px;font-size:8.2px;font-weight:800;white-space:nowrap}.rm516-storage-badge.drive,.rm516-status-badge.active{background:#e9f6f0;color:#13643d}.rm516-storage-badge.legacy{background:#fff2e0;color:#a45708}.rm516-storage-badge.unknown,.rm516-status-badge.inactive{background:#f1f4f6;color:#687986}
.rm516-table-toggle{display:inline-flex!important;align-items:center;gap:7px;white-space:nowrap;font-size:10px;font-weight:700;color:#405867}.rm516-table-toggle input:disabled{cursor:not-allowed;opacity:.55}
.rm516-dataset-actions{display:flex;align-items:center;gap:4px}.rm516-dataset-actions .rm-icon-action-btn{width:31px;height:31px}.rm516-migrate-action{color:#0f766e!important}.rm516-dataset-actions .rm-icon-action-btn:disabled{opacity:.5;cursor:wait}
#adminSpatialStatus{width:100%;min-height:39px;padding:0 11px;border:1px solid #dce6ea;border-radius:10px;background:#fff;color:#203c4c;font:inherit}
#adminStyleTableBody td:last-child{white-space:nowrap}
.rm-print-custom-scale{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;margin-top:10px;padding:10px 11px;border:1px solid #dce7eb;border-radius:11px;background:#f7fafb}.rm-print-custom-scale[hidden]{display:none!important}.rm-print-custom-scale-prefix{color:#425967;font-size:12px;font-weight:800}.rm-print-custom-scale input{min-height:36px!important}.rm-print-custom-scale small{grid-column:1/-1;color:#6d7f8c;font-size:10px}