/*
  SN GROUP - ENTERPRISE UI DESIGN SYSTEM
  Global visual refinement only.
  No business logic, database or PDF changes.
*/

:root {
  --sn-primary:#2563eb;
  --sn-primary-hover:#1d4ed8;
  --sn-primary-soft:#eff6ff;

  --sn-bg:#f6f8fb;
  --sn-surface:#ffffff;
  --sn-surface-alt:#f8fafc;

  --sn-text:#1e293b;
  --sn-text-muted:#64748b;
  --sn-border:#e2e8f0;

  --sn-success:#15803d;
  --sn-warning:#b45309;
  --sn-danger:#b91c1c;

  --sn-radius-sm:7px;
  --sn-radius-md:10px;
  --sn-radius-lg:12px;

  --sn-space-1:4px;
  --sn-space-2:8px;
  --sn-space-3:12px;
  --sn-space-4:16px;
  --sn-space-5:20px;
  --sn-space-6:24px;

  --sn-font:"SF Pro Text","SF Pro Display",
    -apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,Arial,sans-serif;

  --sn-shadow:0 2px 10px rgba(15,23,42,.035);
}

@media screen {

  html {
    font-family:var(--sn-font);
    -webkit-text-size-adjust:100%;
  }

  body {
    font-family:var(--sn-font);
    color:var(--sn-text);
    font-size:14px;
    line-height:1.5;
  }

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

  /* TYPOGRAPHY */
  h1,h2,h3,h4,h5,h6 {
    font-family:var(--sn-font);
    color:var(--sn-text);
    line-height:1.3;
    letter-spacing:-.015em;
  }

  h1 {font-weight:650}
  h2,h3 {font-weight:600}

  /* FORM ELEMENTS */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-family:var(--sn-font);
    font-size:13px;
    line-height:1.4;
    color:var(--sn-text);
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select {
    max-width:100%;
    min-height:38px;
  }

  textarea {
    max-width:100%;
    min-height:72px;
    resize:vertical;
  }

  input::placeholder,
  textarea::placeholder {
    color:#94a3b8;
    opacity:1;
  }

  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline:2px solid rgba(37,99,235,.35);
    outline-offset:1px;
  }

  button {
    font-family:var(--sn-font);
    line-height:1.25;
  }

  button:focus-visible,
  a:focus-visible {
    outline:2px solid var(--sn-primary);
    outline-offset:2px;
  }

  button:disabled {
    cursor:not-allowed;
    opacity:.55;
  }

  /* CHECKBOX & RADIO */
  input[type="checkbox"],
  input[type="radio"] {
    accent-color:var(--sn-primary);
    vertical-align:middle;
  }

  /* COMMON TABLE COMPONENTS */
  table {
    font-family:var(--sn-font);
    font-variant-numeric:tabular-nums;
  }

  th,td {
    vertical-align:middle;
  }

  th {
    font-weight:600;
  }

  /* Layout safety: preserve internal scrolling */
  .table-responsive,
  .table-wrapper,
  .table-container {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Avoid clipped icons inside buttons */
  button svg,
  a svg {
    flex-shrink:0;
    vertical-align:middle;
  }

  /* SN SITE: CONTROL & TABLE TYPOGRAPHY */
  #snSiteApp {
    font-family:var(--sn-font);
    font-size:13px;
    line-height:1.45;
    color:var(--sn-text);
  }

  #snSiteApp .snsite-head h1 {
    font-size:22px;
    font-weight:650;
    line-height:1.3;
  }

  #snSiteApp .snsite-muted {
    font-size:12px;
    line-height:1.5;
  }

  #snSiteApp .snsite-card {
    border:1px solid var(--sn-border);
    border-radius:var(--sn-radius-lg);
    box-shadow:var(--sn-shadow);
  }

  #snSiteApp .snsite-btn,
  #snSiteApp .snsite-tab {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    gap:7px;
    min-height:34px;
    padding:7px 12px;
    border-radius:8px;
    font-family:var(--sn-font);
    font-size:12px;
    font-weight:600;
    line-height:1.3;
    white-space:nowrap;
  }

  #snSiteApp .snsite-btn:hover:not(:disabled) {
    filter:brightness(.97);
  }

  #snSiteApp .snsite-btn:active:not(:disabled) {
    transform:translateY(1px);
  }

  #snSiteApp .snsite-field label {
    font-size:12px;
    font-weight:600;
    line-height:1.4;
  }

  #snSiteApp .snsite-grid {
    gap:12px;
  }

  #snSiteApp .snsite-field {
    gap:6px;
  }

  #snSiteApp input:not([type="checkbox"]),
  #snSiteApp select,
  #snSiteApp textarea {
    font-size:13px;
    line-height:1.4;
  }

  /* INPUT RO TABLE - do not alter cell navigation */
  #snSiteApp #snSiteInput .snsite-table {
    font-size:12px;
  }

  #snSiteApp #snSiteInput .snsite-table th {
    font-size:11px;
    font-weight:600;
  }

  /* HISTORY TABLE */
  #snSiteApp #snSiteRiwayat .snsite-table {
    font-family:var(--sn-font);
    font-size:12px;
    line-height:1.4;
  }

  #snSiteApp #snSiteRiwayat .snsite-table th {
    font-family:var(--sn-font);
    font-size:11px;
    font-weight:600;
    vertical-align:middle;
  }

  #snSiteApp #snSiteRiwayat .snsite-table td {
    font-family:var(--sn-font);
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    vertical-align:middle;
  }

  /* Item, vendor, note: wrap like Excel */
  #snSiteApp #snSiteRiwayat
  .snsite-table tbody tr:not(.snsite-group)
  td:nth-child(5),
  #snSiteApp #snSiteRiwayat
  .snsite-table tbody tr:not(.snsite-group)
  td:nth-child(6),
  #snSiteApp #snSiteRiwayat
  .snsite-table tbody tr:not(.snsite-group)
  td:nth-child(7) {
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
    line-height:1.45;
  }

  #snSiteApp #snSiteRiwayat
  .snsite-table .snsite-actions {
    display:inline-flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    gap:5px;
  }

  #snSiteApp #snSiteRiwayat
  .snsite-actions .snsite-btn {
    min-height:28px;
    height:28px;
    padding:4px 9px;
    font-size:11px;
  }

  #snSiteApp .snsite-badge {
    font-family:var(--sn-font);
    font-size:11px;
    font-weight:600;
  }

  #snSiteApp .snsite-table-scroll {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  #snSiteApp #snSiteRiwayat
  .snsite-table .snsite-money {
    text-align:right;
    white-space:nowrap;
  }

  /* Excel filter popup */
  .snxl-menu {
    font-family:var(--sn-font);
  }

  /* MODAL VIEWPORT SAFETY */
  [role="dialog"],
  dialog,
  .modal-content {
    max-width:calc(100vw - 24px);
  }
}

/* IPAD / TABLET */
@media screen and (min-width:768px) and (max-width:1023px) {
  #snSiteApp .snsite-wrap {
    width:100%;
    max-width:100%;
    padding:18px;
  }

  #snSiteApp .snsite-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #snSiteApp .snsite-summary {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  #snSiteApp .snsite-tools {
    flex-wrap:wrap;
    gap:10px;
  }

  #snSiteApp .snsite-tools .snsite-field {
    min-width:150px;
  }
}

/* MOBILE */
@media screen and (max-width:767px) {
  #snSiteApp .snsite-wrap {
    width:100%;
    max-width:100%;
    padding:16px 12px;
  }

  #snSiteApp .snsite-head h1 {
    font-size:19px;
  }

  #snSiteApp .snsite-card {
    padding:12px;
  }

  #snSiteApp .snsite-grid {
    grid-template-columns:1fr;
    gap:10px;
  }

  #snSiteApp .snsite-summary {
    grid-template-columns:1fr;
    gap:8px;
  }

  #snSiteApp .snsite-tools {
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #snSiteApp .snsite-tools
  .snsite-field {
    min-width:0;
  }

  #snSiteApp .snsite-tools
  .snsite-field:last-child {
    grid-column:1 / -1;
  }

  #snSiteApp .snsite-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
  }

  #snSiteApp .snsite-table-scroll {
    max-width:100%;
    overflow-x:auto;
  }

  #snSiteApp .snsite-table {
    width:max-content;
    min-width:1200px;
  }

  #snSiteApp input:not([type="checkbox"]),
  #snSiteApp select,
  #snSiteApp textarea {
    font-size:16px;
  }

  #snSiteApp .snsite-btn {
    font-size:12px;
  }
}

@media (prefers-reduced-motion:reduce) {
  button {
    transition:none!important;
    animation:none!important;
  }
}