/* ==========================================================================
   SMART LPMPP — Global Stylesheet
   ========================================================================== */

#app {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

body {
  margin: 0;
  display: block;
  place-items: unset;
}

/* ==========================================================================
   1. APP LAYOUT  (root: .shell)
   ========================================================================== */
@scope (.shell) {
  :scope {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    background: #f4f5f7;
    font-family: 'Inter', system-ui, sans-serif;
  }
  :scope.collapsed {
    grid-template-columns: 76px 1fr;
  }

  /* --- Sidebar --- */
  .sidebar {
    background: #14152b;
    color: #c9cad9;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  :scope.collapsed .sidebar {
    padding: 20px 10px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 18px;
  }
  :scope.collapsed .brand {
    justify-content: center;
    padding: 6px 0 18px;
  }
  .brand-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }
  .brand-name {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }
  :scope.collapsed .brand-name,
  :scope.collapsed .nav-group-title,
  :scope.collapsed .nav-item span:last-child,
  :scope.collapsed .collapse-btn span:last-child {
    display: none;
  }

  .nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .nav-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 0 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    min-width: 0;
  }
  .nav-group:first-child {
    border-top: none;
    padding-top: 0;
  }
  :scope.collapsed .nav-group {
    padding: 8px 0;
  }
  .nav-group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #6c6e8a;
    padding: 0 10px 4px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #c9cad9;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    transition: background 0.15s;
  }
  .nav-item span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :scope.collapsed .nav-item {
    justify-content: center;
    gap: 0;
    padding: 10px;
  }
  .nav-item:hover {
    background: #1e1f3a;
    color: #fff;
  }
  .nav-item.active {
    background: #26264a;
    color: #fff;
    border-left: 3px solid #f2743a;
    padding-left: 7px;
  }
  :scope.collapsed .nav-item.active {
    padding-left: 10px;
    border-left: none;
    box-shadow: inset 3px 0 0 #f2743a;
  }
  .nav-item.soon {
    opacity: 0.5;
  }
  .nav-item.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
  }
  .nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    flex-shrink: 0;
  }
  .nav-icon svg {
    width: 100%;
    height: 100%;
  }

  .collapse-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    margin-top: 12px;
    border: none;
    background: transparent;
    color: #8688a3;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
  }
  :scope.collapsed .collapse-btn {
    justify-content: center;
    gap: 0;
  }
  .collapse-btn:hover {
    background: #1e1f3a;
    color: #fff;
  }

  /* --- Main --- */
  .main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .topbar {
    height: 64px;
    background: #fff;
    border-bottom: 1px solid #e8e9ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
  }
  .breadcrumb {
    font-size: 14.5px;
    color: #9a9bb0;
  }
  .breadcrumb span:first-child {
    font-weight: 700;
    color: #14152b;
  }
  .crumb-sep {
    margin: 0 8px;
    color: #c7c8d6;
  }
  .crumb-current {
    color: #14152b;
    font-weight: 500;
  }
  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #6c6e8a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .icon-btn:hover {
    background: #f4f5f7;
  }
  .icon-btn svg {
    width: 19px;
    height: 19px;
  }
  .user-menu {
    position: relative;
  }
  .avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #6c5ce7;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
  }
  .user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px;
    z-index: 20;
  }
  .user-dropdown-info {
    padding: 4px 8px 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
  }
  .user-dropdown-name {
    font-weight: 600;
    font-size: 14px;
    color: #14152b;
  }
  .user-dropdown-nip {
    font-size: 12px;
    color: #888;
  }
  .user-dropdown-logout {
    width: 100%;
    text-align: left;
    padding: 8px;
    border: none;
    background: none;
    color: #e74c3c;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
  }
  .user-dropdown-logout:hover {
    background: #fdf1f0;
  }

  .content {
    flex: 1;
    min-width: 0;
    padding: 28px 32px 48px;
    overflow-y: auto;
  }

  @media (max-width: 860px) {
    :scope,
    :scope.collapsed {
      grid-template-columns: 1fr;
    }
    .sidebar {
      display: none;
    }
  }
}

/* ==========================================================================
   2. DASHBOARD VIEW  (root: .dashboard)
   ========================================================================== */
@scope (.dashboard) {
  :scope {
    padding: 48px;
    font-family: 'Inter', system-ui, sans-serif;
  }
}

/* ==========================================================================
   3. AJUKAN PERMINTAAN ATK 
   ========================================================================== */
@scope (.ns-ajukan-atk) {
  .page-head {
    margin-bottom: 24px;
  }
  .page-head h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
      sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #14152b;
    margin: 0 0 6px;
  }
  .subtitle {
    font-size: 14.5px;
    color: #6d6e82;
    margin: 0;
  }

  .head-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .card {
    background: #fff;
    border: 1px solid #edeef3;
    border-radius: 16px;
    padding: 24px 28px 28px;
    box-shadow: 0 1px 2px rgba(20, 21, 43, 0.03);
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #6d6e82;
  }

  .date-display {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e3ea;
    border-radius: 10px;
    padding: 10px 14px;
    background: #fff;
    min-width: 190px;
    font-size: 14px;
    color: #14152b;
    font-weight: 500;
  }
  .date-display svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  .btn {
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s, background 0.15s;
  }
  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .btn-primary {
    background: #f2711c;
    color: #fff;
  }
  .btn-primary:hover:not(:disabled) {
    filter: brightness(1.05);
  }
  .btn-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  .btn-add svg {
    width: 14px;
    height: 14px;
  }
  .btn-ghost {
    background: #fff;
    color: #4c4d63;
    border: 1px solid #e2e3ea;
  }
  .btn-ghost:hover:not(:disabled) {
    background: #f7f7fa;
  }

  .field-error {
    font-size: 13px;
    color: #e5484d;
    margin: 0 0 14px;
  }

  .table-wrap {
    overflow-x: auto;
    border: 1px solid #edeef3;
    border-radius: 12px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
  }
  thead th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #9a9bb0;
    background: #f9f9fb;
    padding: 12px 16px;
    border-bottom: 1px solid #edeef3;
    white-space: nowrap;
  }
  tbody td {
    padding: 13px 16px;
    font-size: 14px;
    color: #2c2d43;
    border-bottom: 1px solid #f2f2f6;
    white-space: nowrap;
  }
  tbody tr:last-child td {
    border-bottom: none;
  }
  .col-no {
    width: 40px;
    color: #9a9bb0;
  }
  .col-num {
    text-align: right;
  }
  .col-aksi {
    text-align: center;
    width: 56px;
  }
  .icon-btn-delete {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f6d5d5;
    border-radius: 8px;
    background: #fdf2f2;
    color: #e5484d;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .icon-btn-delete:hover {
    background: #fbe1e1;
    border-color: #e5484d;
  }
  .icon-btn-delete svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .mono {
    color: #6d6e82;
    font-variant-numeric: tabular-nums;
  }
  .nama {
    font-weight: 600;
    color: #14152b;
    white-space: normal;
    min-width: 180px;
  }
  .subtotal {
    font-weight: 600;
    color: #14152b;
  }
  .text-danger {
    color: #e5484d;
    font-weight: 600;
  }

  .empty-row td {
    padding: 0;
  }
  .empty-state {
    padding: 36px 16px;
    text-align: center;
    color: #9a9bb0;
    font-size: 14px;
    white-space: normal;
  }
  .empty-state strong {
    color: #6d6e82;
  }

  tfoot td {
    padding: 13px 16px;
    font-size: 14px;
    border-top: 1px solid #edeef3;
  }
  .total-label {
    text-align: right;
    font-weight: 600;
    color: #6d6e82;
  }
  .total-value {
    font-weight: 700;
    color: #14152b;
  }

  .catatan-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4c4d63;
    margin: 20px 0 10px;
    cursor: pointer;
    user-select: none;
  }
  .catatan-toggle input {
    width: 16px;
    height: 16px;
    accent-color: #6c5ce7;
  }

  .catatan-box {
    width: 100%;
    border: 1px solid #e2e3ea;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #14152b;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
  }
  .catatan-box:focus {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
  }
  .catatan-box-disabled {
    height: 46px;
    background: #fafafc;
  }

  .btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    background: none;
    border: none;
    color: #6c5ce7;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
  }
  .btn-clear:hover {
    text-decoration: underline;
  }
  .btn-clear svg {
    width: 16px;
    height: 16px;
  }

  .submit-error {
    color: #e5484d;
    font-size: 13.5px;
    margin: 16px 0 0;
    text-align: right;
  }

  .footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
  }

  @media (max-width: 640px) {
    .head-actions {
      justify-content: space-between;
    }
    .head-actions .field {
      flex: 1;
    }
  }
}

/* ==========================================================================
   4. LOGIN VIEW  (root: .login-screen)
   ========================================================================== */
@scope (.login-screen) {
  :scope {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(420px, 1fr);
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    text-align: left;
  }

  :scope * {
    text-align: left;
  }

  /* ---------- Panel kiri ---------- */
  .brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 64px;
    background: #0b0b0d;
    color: #f5f5f5;
    overflow: hidden;
  }

  .brand-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
  }

  .brand-glow--orange {
    width: 620px;
    height: 620px;
    top: -220px;
    right: -220px;
    background: radial-gradient(circle, rgba(217, 119, 87, 0.35) 0%, rgba(217, 119, 87, 0) 70%);
  }

  .brand-glow--violet {
    width: 520px;
    height: 520px;
    bottom: -200px;
    left: -200px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.3) 0%, rgba(124, 58, 237, 0) 70%);
  }

  .brand-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    z-index: 1;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .brand-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .brand-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: #a3a3a8;
    max-width: 460px;
  }

  .brand-hero {
    position: relative;
    z-index: 1;
    max-width: 620px;
  }

  .brand-headline {
    margin: 0 0 16px;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
  }

  .brand-description {
    margin: 0 0 28px;
    font-size: 16px;
    color: #b5b5ba;
  }

  .brand-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .brand-tag {
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 13px;
    color: #e5e5e8;
  }

  .brand-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #7a7a80;
  }

  .brand-footer-icon {
    font-size: 14px;
  }

  /* ---------- Panel kanan ---------- */
  .form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #ffffff;
  }

  .form-card {
    width: 100%;
    max-width: 420px;
  }

  .form-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: #17171a;
  }

  .form-subtitle {
    margin: 0 0 28px;
    font-size: 14px;
    color: #6b6b70;
  }

  .google-button-wrap {
    position: relative;
    width: 100%;
  }

  .google-button-real {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    opacity: 0.01;
  }
  .google-button-wrap.is-pending .google-button-real {
    pointer-events: none;
  }

  .google-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #dcdce0;
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    color: #26262a;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .google-button span:not(.google-badge) {
    white-space: nowrap;
  }

  .google-button:hover:not(:disabled) {
    background: #fafafa;
    border-color: #c7c7cc;
  }

  .google-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.4);
  }

  .google-icon {
    width: 18px;
    height: 18px;
  }

  .google-badge {
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0f0f3;
    color: #8a8a90;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
  }

  .divider-line {
    flex: 1;
    height: 1px;
    background: #e5e5ea;
  }

  .divider-label {
    font-size: 12px;
    color: #9a9aa0;
  }

  .credentials-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .field-label {
    font-size: 13px;
    font-weight: 700;
    color: #26262a;
  }

  .field-input {
    padding: 11px 14px;
    border: 1px solid #dcdce0;
    border-radius: 10px;
    font-size: 14px;
    color: #17171a;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .field-input::placeholder {
    color: #b0b0b6;
  }

  .field-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
  }

  .field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #3f3f45;
    cursor: pointer;
  }

  .checkbox-input {
    width: 16px;
    height: 16px;
    accent-color: #7c3aed;
    cursor: pointer;
  }

  .forgot-link {
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
    text-decoration: none;
  }

  .forgot-link:hover {
    text-decoration: underline;
  }

  .form-error {
    margin: 0;
    font-size: 13px;
    color: #dc2626;
  }

  .submit-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border: none;
    border-radius: 10px;
    background: #f97316;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
  }

  .submit-button:hover:not(:disabled) {
    background: #ea6a0e;
  }

  .submit-button:active:not(:disabled) {
    transform: translateY(1px);
  }

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

  .submit-button:focus-visible,
  .google-button:focus-visible,
  .field-input:focus-visible,
  .forgot-link:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    :scope {
      grid-template-columns: 1fr;
    }

    .brand-panel {
      padding: 32px;
      min-height: 320px;
    }

    .brand-headline {
      font-size: 32px;
    }

    .form-panel {
      padding: 32px 24px 48px;
    }
  }
}

/* ==========================================================================
   5. PERMINTAAN ATK — daftar/list page 
   ========================================================================== */
@scope (.ns-permintaan-atk) {
  .page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
  }
  .page-head h1 {
    font-size: 26px;
    font-weight: 700;
    color: #14152b;
    margin: 0 0 6px;
  }
  .subtitle {
    color: #7b7d92;
    font-size: 14.5px;
    margin: 0;
    max-width: 560px;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f2743a;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
  }
  .btn-primary:hover {
    background: #de6329;
  }
  .btn-primary .plus {
    font-size: 16px;
    line-height: 1;
  }

  .toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  .stat-pills {
    display: flex;
    gap: 12px;
  }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    border: 1px solid #e8e9ee;
    color: #4c4d63;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
  }
  .pill:hover:not(.pill-active) {
    background: #f7f7fa;
  }
  .pill-active {
    background: #6c5ce7;
    border-color: #6c5ce7;
    color: #fff;
  }
  .pill-count {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12.5px;
  }
  .pill-count-muted {
    background: #f0f0f4;
    color: #4c4d63;
  }

  .search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e8e9ee;
    border-radius: 10px;
    padding: 9px 14px;
    min-width: 220px;
    color: #9a9bb0;
  }
  .search-box svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  .search-box input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #14152b;
    width: 100%;
    font-family: inherit;
  }
  .search-box input::placeholder {
    color: #b3b4c4;
  }

  .tabs {
    display: flex;
    gap: 26px;
    border-bottom: 1px solid #e8e9ee;
    margin-bottom: 4px;
  }
  .tab {
    border: none;
    background: none;
    padding: 10px 2px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: #9a9bb0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2.5px solid transparent;
  }
  .tab.active {
    color: #14152b;
    border-bottom-color: #f2743a;
  }
  .tab-count {
    font-size: 12px;
    color: #9a9bb0;
  }
  .tab.active .tab-count {
    color: #f2743a;
  }

  .list-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #edeef2;
    overflow: hidden;
    margin-top: 18px;
  }
  .state-msg {
    padding: 40px 20px;
    text-align: center;
    color: #9a9bb0;
    font-size: 14px;
  }
  .state-msg.error {
    color: #d9483a;
  }

  .row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f1f5;
    cursor: pointer;
    text-align: left;
    font: inherit;
  }
  .row:last-child {
    border-bottom: none;
  }
  .row:hover {
    background: #fafafc;
  }

  .row-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f4f5f7;
    color: #6c6e8a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .row-icon svg {
    width: 17px;
    height: 17px;
  }

  .row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .row-title {
    font-size: 15px;
    font-weight: 700;
    color: #14152b;
  }
  .row-code {
    font-weight: 500;
    color: #a4a5b8;
    font-size: 12.5px;
    margin-left: 8px;
  }
  .row-meta {
    font-size: 13px;
    color: #9a9bb0;
  }

  .row-status {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .badge-diajukan {
    background: #e8f1ff;
    color: #2f7fe0;
  }
  .badge-diproses {
    background: #eee9fd;
    color: #7b52e0;
  }
  .badge-verifikasi {
    background: #fef1e2;
    color: #d9832a;
  }
  .badge-selesai {
    background: #e6f8ee;
    color: #23a35a;
  }
  .badge-ditolak {
    background: #fde9e8;
    color: #d9483a;
  }

  .row-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  @media (max-width: 720px) {
    .page-head {
      flex-direction: column;
    }
    .row {
      flex-wrap: wrap;
    }
    .row-status,
    .row-avatar {
      margin-left: 50px;
    }
  }
}

/* ==========================================================================
   6. DETAIL PERMINTAAN ATK  
   ========================================================================== */
@scope (.ns-detail-atk) {
  .state-message {
    padding: 60px 0;
    text-align: center;
    color: #6d6e82;
    font-size: 14.5px;
  }
  .state-error {
    color: #e5484d;
  }

  .top-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .btn {
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
      sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .btn svg {
    width: 15px;
    height: 15px;
  }
  .btn-back {
    background: #6c5ce7;
    color: #fff;
  }
  .btn-back:hover {
    filter: brightness(1.05);
  }
  .btn-primary {
    background: #f2711c;
    color: #fff;
  }
  .btn-primary:hover {
    filter: brightness(1.05);
  }
  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .action-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .btn-danger {
    background: #fdeceb;
    color: #e5484d;
  }
  .btn-danger:hover {
    background: #fbdedc;
  }
  .btn-ghost {
    background: transparent;
    color: #6d6e82;
    border: 1px solid #e2e3ea;
  }
  .btn-ghost:hover {
    background: #f4f5f7;
  }

  .tolak-form {
    border-color: #f6d5d5;
    background: #fffaf9;
  }
  .tolak-form-title {
    font-size: 15px;
    font-weight: 700;
    color: #14152b;
    margin: 0 0 12px;
  }
  .tolak-form textarea {
    width: 100%;
    border: 1px solid #e2e3ea;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #14152b;
    resize: vertical;
    box-sizing: border-box;
  }
  .tolak-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
  }

  .page-head {
    margin-bottom: 24px;
  }
  .page-head h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
      sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #14152b;
    margin: 0 0 8px;
  }
  .page-head-meta {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .code {
    font-size: 14px;
    color: #9a9bb0;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
  }
  .badge-diajukan {
    background: #e8f0fe;
    color: #2563eb;
  }
  .badge-diproses {
    background: #f1ecff;
    color: #6c5ce7;
  }
  .badge-verifikasi {
    background: #fff1e0;
    color: #d9760e;
  }
  .badge-selesai {
    background: #e7f8ee;
    color: #16a34a;
  }
  .badge-ditolak {
    background: #fdeceb;
    color: #e5484d;
  }

  .card {
    background: #fff;
    border: 1px solid #edeef3;
    border-radius: 16px;
    padding: 24px 28px 28px;
    box-shadow: 0 1px 2px rgba(20, 21, 43, 0.03);
    margin-bottom: 20px;
  }

  /* Alasan Ditolak */
  .alasan-ditolak-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fdeceb;
    border-color: #f6c9c7;
  }
  .alasan-ditolak-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f8d7d5;
    color: #e5484d;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .alasan-ditolak-icon svg {
    width: 18px;
    height: 18px;
  }
  .alasan-ditolak-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #e5484d;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .alasan-ditolak-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #14152b;
  }

  /* Stepper */
  .stepper-card {
    padding: 32px 40px;
  }
  .stepper {
    display: flex;
  }
  .stepper-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
  }
  .stepper-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e2e3ea;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
  .stepper-circle.done {
    background: #2563eb;
  }
  .stepper-circle svg {
    width: 18px;
    height: 18px;
  }
  .stepper-line {
    position: absolute;
    top: 22px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #e2e3ea;
    z-index: 0;
  }
  .stepper-line.done {
    background: #2563eb;
  }
  .stepper-label {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #9a9bb0;
  }
  .stepper-label.done {
    color: #2563eb;
  }
  .stepper-date {
    margin-top: 4px;
    font-size: 13px;
    color: #6d6e82;
  }

  /* Card head (daftar barang) */
  .card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .card-head h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
      sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #14152b;
    margin: 0;
  }
  .riwayat-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
      sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #14152b;
    margin: 0 0 18px;
  }

  .tanggal-line {
    font-size: 13.5px;
    color: #6d6e82;
    margin: 4px 0 0;
  }

  .table-wrap {
    overflow-x: auto;
    border: 1px solid #edeef3;
    border-radius: 12px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
  }
  thead th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #9a9bb0;
    background: #f9f9fb;
    padding: 12px 16px;
    border-bottom: 1px solid #edeef3;
    white-space: nowrap;
  }
  tbody td {
    padding: 13px 16px;
    font-size: 14px;
    color: #2c2d43;
    border-bottom: 1px solid #f2f2f6;
    white-space: nowrap;
  }
  tbody tr:last-child td {
    border-bottom: none;
  }
  .col-no {
    width: 40px;
    color: #9a9bb0;
  }
  .col-num {
    text-align: right;
  }
  .col-center {
    text-align: center;
  }
  .mono {
    color: #6d6e82;
    font-variant-numeric: tabular-nums;
  }
  .nama {
    font-weight: 600;
    color: #14152b;
    white-space: normal;
    min-width: 160px;
  }
  .subtotal {
    font-weight: 600;
    color: #14152b;
  }

  tfoot td {
    padding: 13px 16px;
    font-size: 14px;
    border-top: 1px solid #edeef3;
  }
  .total-label {
    text-align: right;
    font-weight: 600;
    color: #6d6e82;
  }
  .total-value {
    font-weight: 700;
    color: #14152b;
  }

  .catatan-section {
    margin-top: 20px;
  }
  .catatan-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #4c4d63;
    margin-bottom: 10px;
  }
  .catatan-underline {
    width: 100%;
    border-bottom: 1px solid #d8d9e2;
    padding-bottom: 10px;
    font-size: 14px;
    color: #14152b;
    min-height: 20px;
    box-sizing: border-box;
  }

  @media print {
    .top-actions {
      display: none;
    }
  }
}

/* ==========================================================================
   7. VERIFIKASI VIEW  
   ========================================================================== */
@scope (.verify-page) {
  :scope {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f5f7;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  .verify-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(20, 21, 43, 0.08);
  }
  .logo {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
  }
  h1 {
    font-size: 20px;
    font-weight: 700;
    color: #14152b;
    margin: 0 0 4px;
  }
  .subtitle {
    font-size: 13px;
    color: #9a9bb0;
    margin: 0 0 24px;
  }
  .state {
    padding: 24px 0;
    color: #6d6e82;
    font-size: 14px;
  }
  .state-error {
    color: #e5484d;
  }
  .icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 auto 12px;
  }
  .icon-ok {
    background: #23a35a;
  }
  .icon-error {
    background: #e5484d;
  }
  .result-title {
    font-size: 16px;
    font-weight: 700;
    color: #14152b;
    margin: 0 0 20px;
  }
  .detail-list {
    text-align: left;
    margin: 0 0 20px;
  }
  .detail-list dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #9a9bb0;
    margin-top: 12px;
  }
  .detail-list dt:first-child {
    margin-top: 0;
  }
  .detail-list dd {
    font-size: 14px;
    color: #14152b;
    margin: 2px 0 0;
  }
  .disclaimer {
    font-size: 12px;
    color: #9a9bb0;
    line-height: 1.5;
    border-top: 1px solid #f1f1f5;
    padding-top: 16px;
    margin: 0;
  }
}