/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* ==========================================================================
   AUTHLAYOUT - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

/* Page container & header overrides */
.page-container[b-a0oa9y6eim] {
  width: 100%;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MAINLAYOUT - SCOPED COMPONENT STYLES
   United Tractors WMS Design System
   ========================================================================== */

.ut-shell-root[b-hrr8zwj2p0] {
  min-height: 100vh;
  background: linear-gradient(rgba(245, 244, 240, 0.82), rgba(245, 244, 240, 0.82)), url('/images/bg/ut.png') center center / 140% no-repeat fixed;
}

.main-wrapper[b-hrr8zwj2p0] {
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .main-wrapper[b-hrr8zwj2p0] {
    padding-bottom: 0;
  }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NAVMENU - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

/* Page container & header overrides */
.page-container[b-7iw3dh12gq] {
  width: 100%;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-s8t33h2lj0],
.components-reconnect-repeated-attempt-visible[b-s8t33h2lj0],
.components-reconnect-failed-visible[b-s8t33h2lj0],
.components-pause-visible[b-s8t33h2lj0],
.components-resume-failed-visible[b-s8t33h2lj0],
.components-rejoining-animation[b-s8t33h2lj0] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-s8t33h2lj0],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-s8t33h2lj0],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-s8t33h2lj0],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-s8t33h2lj0],
#components-reconnect-modal.components-reconnect-retrying[b-s8t33h2lj0],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-s8t33h2lj0],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-s8t33h2lj0],
#components-reconnect-modal.components-reconnect-failed[b-s8t33h2lj0],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-s8t33h2lj0] {
    display: block;
}


#components-reconnect-modal[b-s8t33h2lj0] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-s8t33h2lj0 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-s8t33h2lj0 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-s8t33h2lj0 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-s8t33h2lj0]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-s8t33h2lj0 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-s8t33h2lj0 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-s8t33h2lj0 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-s8t33h2lj0 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-s8t33h2lj0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-s8t33h2lj0] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-s8t33h2lj0] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-s8t33h2lj0] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-s8t33h2lj0] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-s8t33h2lj0] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-s8t33h2lj0] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-s8t33h2lj0 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-s8t33h2lj0] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-s8t33h2lj0 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Shared/Feedback/LoadingOverlay.razor.rz.scp.css */
/* ==========================================================================
   LOADING OVERLAY - SCOPED STYLES
   United Tractors WMS Design System
   ========================================================================== */

.loading-overlay-backdrop[b-sh93k0ikec] {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s ease;
  z-index: 999999 !important;
}

.loading-overlay-card[b-sh93k0ikec] {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 20rem;
  width: 100%;
  text-align: center;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  margin: 0 1rem;
}

.loading-overlay-spinner[b-sh93k0ikec] {
  width: 3rem;
  height: 3rem;
  border: 4px solid var(--ut-gold, #e8a000);
  border-top-color: transparent;
  border-radius: 9999px;
  animation: loadingSpin-b-sh93k0ikec 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes loadingSpin-b-sh93k0ikec {
  to { transform: rotate(360deg); }
}

.loading-overlay-msg[b-sh93k0ikec] {
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

.loading-overlay-sub[b-sh93k0ikec] {
  font-size: 0.75rem;
  color: #8a8880;
  margin: 0;
}
/* /Components/Views/Admin/ApprovalDashboard/ApprovalDashboard.razor.rz.scp.css */
/* Restored to Tailwind CSS */
/* /Components/Views/Admin/ApprovalDetail/ApprovalDetail.razor.rz.scp.css */
/* ==========================================================================
   APPROVAL DETAIL - SCOPED COMPONENT STYLES
   ========================================================================== */

.approval-detail-page[b-55nu98wpxv] {
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  padding: 1.5rem 1rem 6rem;
  font-family: inherit;
  background-color: var(--ut-gray, #f5f4f0);
}

@media (min-width: 768px) {
  .approval-detail-page[b-55nu98wpxv] {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 3rem;
  }
}

.detail-container[b-55nu98wpxv] {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* Back Button */
.back-btn[b-55nu98wpxv] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ut-muted, #8a8880);
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.back-btn:hover[b-55nu98wpxv] {
  color: var(--ut-dark, #1a1a1a);
}

.back-icon[b-55nu98wpxv] {
  width: 1rem;
  height: 1rem;
}

/* Empty / Loading State */
.detail-empty-box[b-55nu98wpxv] {
  background-color: #ffffff;
  padding: 3rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--ut-muted, #8a8880);
}

/* Main Detail Card */
.detail-card[b-55nu98wpxv] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .detail-card[b-55nu98wpxv] {
    padding: 1.5rem;
  }
}

/* Header */
.detail-header[b-55nu98wpxv] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0ede5;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .detail-header[b-55nu98wpxv] {
    flex-direction: row;
    align-items: center;
  }
}

.detail-header-meta[b-55nu98wpxv] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.detail-req-id[b-55nu98wpxv] {
  padding: 0.25rem 0.625rem;
  background-color: var(--ut-dark, #1a1a1a);
  color: var(--ut-yellow, #ffcc00);
  border: 1px solid var(--ut-dark, #1a1a1a);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.detail-title[b-55nu98wpxv] {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

@media (min-width: 640px) {
  .detail-title[b-55nu98wpxv] {
    font-size: 1.25rem;
  }
}

.detail-count-badge[b-55nu98wpxv] {
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 900;
  flex-shrink: 0;
}

.detail-created-at[b-55nu98wpxv] {
  font-size: 0.75rem;
  color: var(--ut-muted, #8a8880);
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Info Grid (Applicant Details) */
.info-grid[b-55nu98wpxv] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .info-grid[b-55nu98wpxv] {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .info-grid[b-55nu98wpxv]::-webkit-scrollbar {
    display: none;
  }
}

.info-card[b-55nu98wpxv] {
  background-color: #f9f9f8;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 640px) {
  .info-card[b-55nu98wpxv] {
    border-radius: 1rem;
    padding: 1rem;
    flex-shrink: 0;
    width: 160px;
    scroll-snap-align: start;
  }
}

@media (min-width: 768px) {
  .info-card[b-55nu98wpxv] {
    width: 180px;
  }
}

.info-card-notes[b-55nu98wpxv] {
  grid-column: span 2;
  background-color: #fffbeb;
  border-color: #fef3c7;
}

@media (min-width: 640px) {
  .info-card-notes[b-55nu98wpxv] {
    grid-column: span 1;
    width: 240px;
  }
}

.info-label[b-55nu98wpxv] {
  font-size: 0.5rem;
  color: var(--ut-muted, #8a8880);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
}

@media (min-width: 640px) {
  .info-label[b-55nu98wpxv] {
    font-size: 0.625rem;
  }
}

.info-value[b-55nu98wpxv] {
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.2;
}

@media (min-width: 640px) {
  .info-value[b-55nu98wpxv] {
    font-size: 0.875rem;
  }
}

.info-subvalue[b-55nu98wpxv] {
  font-size: 0.5rem;
  color: var(--ut-muted, #8a8880);
  font-weight: 600;
  margin-top: 0.125rem;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .info-subvalue[b-55nu98wpxv] {
    font-size: 0.625rem;
  }
}

.info-date-highlight[b-55nu98wpxv] {
  color: var(--ut-gold, #e8a000);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
}

.info-notes-quote[b-55nu98wpxv] {
  font-size: 0.625rem;
  font-style: italic;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .info-notes-quote[b-55nu98wpxv] {
    font-size: 0.75rem;
  }
}

/* Timeline Components */
.desktop-timeline[b-55nu98wpxv] {
  display: none;
}
.mobile-timeline[b-55nu98wpxv] {
  display: block;
}

@media (min-width: 1024px) {
  .desktop-timeline[b-55nu98wpxv] {
    display: block;
  }
  .mobile-timeline[b-55nu98wpxv] {
    display: none;
  }
}

.timeline-box[b-55nu98wpxv] {
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 1rem;
  padding: 1.25rem;
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
}

.timeline-title[b-55nu98wpxv] {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--ut-dark, #1a1a1a);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0ede5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.timeline-scroll-wrapper[b-55nu98wpxv] {
  overflow-x: auto;
  padding-bottom: 1rem;
}

.timeline-horizontal-track[b-55nu98wpxv] {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 700px;
  width: 100%;
  padding: 0 1rem;
  margin-top: 0.5rem;
}

.timeline-connecting-line[b-55nu98wpxv] {
  position: absolute;
  top: 11px;
  left: 80px;
  right: 80px;
  height: 2px;
  background-color: #d1d5db;
  z-index: 0;
}

.timeline-step-col[b-55nu98wpxv] {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 8rem;
  flex-shrink: 0;
}

.timeline-dot-circle[b-55nu98wpxv] {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  z-index: 10;
  margin-bottom: 0.625rem;
}

.timeline-dot-circle.done[b-55nu98wpxv] {
  border-color: var(--ut-success, #1a7a30);
}

.timeline-dot-circle.active[b-55nu98wpxv] {
  border-color: #2563eb;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.timeline-dot-circle.warning[b-55nu98wpxv] {
  border-color: #e11d48;
}

.timeline-step-content[b-55nu98wpxv] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.timeline-step-name[b-55nu98wpxv] {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
  width: 100%;
}

.timeline-step-desc[b-55nu98wpxv] {
  font-size: 0.625rem;
  color: #9ca3af;
  line-height: 1.2;
  margin-top: 0.25rem;
}

.timeline-step-time[b-55nu98wpxv] {
  font-size: 0.5625rem;
  color: #9ca3af;
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

/* Mobile Timeline */
.timeline-vertical-track[b-55nu98wpxv] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0.5rem 0;
  padding-left: 0.5rem;
}

.timeline-vertical-line[b-55nu98wpxv] {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 15px;
  width: 2px;
  background-color: #d1d5db;
  z-index: 0;
}

.timeline-vertical-step[b-55nu98wpxv] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
}

/* Items List Section */
.items-section-header[b-55nu98wpxv] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #f0ede5;
  padding-bottom: 0.5rem;
}

.items-section-title[b-55nu98wpxv] {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--ut-dark, #1a1a1a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.select-all-label[b-55nu98wpxv] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease;
}

.select-all-label:hover[b-55nu98wpxv] {
  background-color: #f9f9f8;
}

.select-all-checkbox[b-55nu98wpxv] {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  cursor: pointer;
}

.select-all-text[b-55nu98wpxv] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #374151;
}

/* Items List */
.items-list-box[b-55nu98wpxv] {
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.item-row[b-55nu98wpxv] {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid #f0ede5;
  transition: background-color 0.15s ease;
}

.item-row:last-child[b-55nu98wpxv] {
  border-bottom: none;
}

@media (min-width: 640px) {
  .item-row[b-55nu98wpxv] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.item-row.selected[b-55nu98wpxv] {
  background-color: rgba(254, 243, 199, 0.35);
}

.item-left[b-55nu98wpxv] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.item-checkbox[b-55nu98wpxv] {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  flex-shrink: 0;
  cursor: pointer;
}

.item-thumb[b-55nu98wpxv] {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-thumb-img[b-55nu98wpxv] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.item-thumb-img:hover[b-55nu98wpxv] {
  opacity: 0.85;
}

.item-title-btn[b-55nu98wpxv] {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--ut-dark, #1a1a1a);
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.15s ease;
}

.item-title-btn:hover[b-55nu98wpxv] {
  color: var(--ut-gold, #e8a000);
  text-decoration: underline;
}

.item-meta-row[b-55nu98wpxv] {
  font-size: 0.625rem;
  color: var(--ut-muted, #8a8880);
  font-weight: 600;
  margin-top: 0.125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.item-notes-text[b-55nu98wpxv] {
  font-size: 0.625rem;
  color: #92400e;
  font-style: italic;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Single Item Actions */
.item-actions-group[b-55nu98wpxv] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-action-revise[b-55nu98wpxv] {
  padding: 0.375rem 0.75rem;
  border: 1px solid #fde68a;
  background-color: transparent;
  color: #d97706;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action-revise:hover[b-55nu98wpxv] {
  background-color: #fef3c7;
}

.btn-action-reject[b-55nu98wpxv] {
  padding: 0.375rem 0.75rem;
  border: 1px solid #fecdd3;
  background-color: transparent;
  color: var(--ut-danger, #d94040);
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action-reject:hover[b-55nu98wpxv] {
  background-color: #fff1f2;
}

.btn-action-approve[b-55nu98wpxv] {
  padding: 0.375rem 0.75rem;
  border: none;
  background-color: var(--ut-success, #1a7a30);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action-approve:hover[b-55nu98wpxv] {
  background-color: #156526;
}

/* Bottom Batch Bar */
.batch-bar[b-55nu98wpxv] {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #f9f9f8;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.batch-count-text[b-55nu98wpxv] {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #4b5563;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .batch-count-text[b-55nu98wpxv] {
    font-size: 0.75rem;
  }
}

.batch-buttons-group[b-55nu98wpxv] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

@media (min-width: 480px) {
  .batch-buttons-group[b-55nu98wpxv] {
    gap: 0.75rem;
  }
}

.btn-batch-revise[b-55nu98wpxv] {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 0.5rem;
  border: 1px solid #fde68a;
  color: #d97706;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-batch-revise:hover:not(:disabled)[b-55nu98wpxv] {
  background-color: #fef3c7;
}

.btn-batch-reject[b-55nu98wpxv] {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 0.5rem;
  border: 1px solid #fecdd3;
  color: var(--ut-danger, #d94040);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-batch-reject:hover:not(:disabled)[b-55nu98wpxv] {
  background-color: #fff1f2;
}

.btn-batch-approve[b-55nu98wpxv] {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 0.5rem;
  border: none;
  background-color: var(--ut-success, #1a7a30);
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
}

.btn-batch-approve:hover:not(:disabled)[b-55nu98wpxv] {
  background-color: #156526;
}

.btn-batch-disabled[b-55nu98wpxv] {
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  background-color: #f3f4f6 !important;
  cursor: not-allowed !important;
}

/* Modal Overlay & Card */
.modal-overlay[b-55nu98wpxv] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
}

@media (min-width: 640px) {
  .modal-overlay[b-55nu98wpxv] {
    align-items: center;
    padding: 1rem;
  }
}

.modal-sheet[b-55nu98wpxv] {
  background-color: #ffffff;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
  .modal-sheet[b-55nu98wpxv] {
    border-radius: 1rem;
    max-width: 28rem;
  }
}

.modal-handle[b-55nu98wpxv] {
  width: 3rem;
  height: 0.375rem;
  background-color: #d1d5db;
  border-radius: 9999px;
  margin: 0.75rem auto;
}

@media (min-width: 640px) {
  .modal-handle[b-55nu98wpxv] {
    display: none;
  }
}

.modal-header-row[b-55nu98wpxv] {
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.modal-icon-badge[b-55nu98wpxv] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid currentColor;
}

.modal-body-area[b-55nu98wpxv] {
  padding: 0 1.25rem 1rem;
}

.modal-textarea[b-55nu98wpxv] {
  width: 100%;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: border-color 0.15s ease;
}

.modal-textarea:focus[b-55nu98wpxv] {
  border-color: var(--ut-info, #1a6b8a);
}

.modal-footer-row[b-55nu98wpxv] {
  padding: 1rem;
  background-color: #faf9f5;
  border-top: 1px solid var(--ut-border, #e5e3dc);
  display: flex;
  gap: 0.75rem;
}
/* /Components/Views/Admin/Categories/Categories.razor.rz.scp.css */
/* ==========================================================================
   MASTER DATA - CATEGORIES SPECIALIZED CSS
   ========================================================================== */

.md-page[b-krrt925jrg] {
  padding: 2rem 0;
  min-height: 100vh;
}

.md-container[b-krrt925jrg] {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .md-container[b-krrt925jrg] {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .md-container[b-krrt925jrg] {
    padding: 0 2rem;
  }
}

/* Header */
.md-header[b-krrt925jrg] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.md-title[b-krrt925jrg] {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.2;
  margin: 0;
}

/* Alerts */
.md-alert[b-krrt925jrg] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  font-size: 0.875rem;
}

.md-alert--success[b-krrt925jrg] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
}

.md-alert--danger[b-krrt925jrg] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
}

.md-alert-icon[b-krrt925jrg] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Card Form (Add/Create) */
.md-card[b-krrt925jrg] {
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-card-header[b-krrt925jrg] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
}

.md-card-title[b-krrt925jrg] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.md-card-subtitle[b-krrt925jrg] {
  font-size: 0.72rem;
  color: #8a8880;
  margin: 0.125rem 0 0;
}

.md-card-body[b-krrt925jrg] {
  padding: 1.25rem 1.5rem;
}

.md-form-row[b-krrt925jrg] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .md-form-row[b-krrt925jrg] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.md-form-group[b-krrt925jrg] {
  flex: 1;
  width: 100%;
}

.md-label[b-krrt925jrg] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.md-label .required[b-krrt925jrg] {
  color: var(--ut-danger, #d94040);
}

.md-label .optional[b-krrt925jrg] {
  color: #9ca3af;
  font-weight: 400;
  text-transform: none;
}

.md-input[b-krrt925jrg] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-md, 0.5rem);
  outline: none;
  transition: all 0.15s ease;
  color: var(--ut-dark, #1a1a1a);
}

.md-input:focus[b-krrt925jrg] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.md-btn-submit[b-krrt925jrg] {
  padding: 0.5rem 1.25rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.md-btn-submit:hover[b-krrt925jrg] {
  background-color: #d49300;
}

.md-btn-submit:active[b-krrt925jrg] {
  transform: scale(0.97);
}

.md-hint[b-krrt925jrg] {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Table Container */
.md-table-card[b-krrt925jrg] {
  background-color: transparent;
}

@media (min-width: 768px) {
  .md-table-card[b-krrt925jrg] {
    background-color: #ffffff;
    border-radius: var(--ut-radius-lg, 0.75rem);
    border: 1px solid var(--ut-border-color, #e5e3dc);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
}

.md-table-wrap[b-krrt925jrg] {
  display: none;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .md-table-wrap[b-krrt925jrg] {
    display: block;
  }
}

.md-table[b-krrt925jrg] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.md-table thead tr[b-krrt925jrg] {
  background-color: var(--ut-dark, #1a1a1a);
}

.md-th[b-krrt925jrg] {
  padding: 0.875rem 1.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c8c5bc;
  white-space: nowrap;
}

.md-th--num[b-krrt925jrg] {
  width: 3rem;
}

.md-th--actions[b-krrt925jrg] {
  width: 8rem;
}

.md-tbody tr[b-krrt925jrg] {
  border-bottom: 1px solid #f0ede5;
  transition: background-color 0.1s ease;
}

.md-tbody tr:hover:not(.md-edit-row)[b-krrt925jrg] {
  background-color: #faf9f5;
}

.md-td[b-krrt925jrg] {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.md-td--num[b-krrt925jrg] {
  color: #9ca3af;
}

.md-td--name[b-krrt925jrg] {
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  white-space: nowrap;
}

.md-td--desc[b-krrt925jrg] {
  color: #4b5563;
}

.md-badge-count[b-krrt925jrg] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.md-badge-count:hover[b-krrt925jrg] {
  background-color: var(--ut-success, #1a7a30);
  color: #ffffff;
}

.md-actions-wrap[b-krrt925jrg] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.md-btn-edit[b-krrt925jrg] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3a3835;
  padding: 0.375rem 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-btn-edit:hover[b-krrt925jrg] {
  color: var(--ut-dark, #1a1a1a);
  background-color: #f0ede5;
}

.md-btn-delete[b-krrt925jrg] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-danger, #d94040);
  padding: 0.375rem 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-btn-delete:hover[b-krrt925jrg] {
  background-color: #fee2e2;
  color: #b83535;
}

/* Edit Inline Form */
.md-edit-row[b-krrt925jrg] {
  background-color: #faf9f5;
}

.md-edit-row td[b-krrt925jrg] {
  padding: 1rem 1.5rem;
}

.md-edit-form[b-krrt925jrg] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .md-edit-form[b-krrt925jrg] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.md-edit-actions[b-krrt925jrg] {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .md-edit-actions[b-krrt925jrg] {
    width: auto;
  }
}

.md-btn-save[b-krrt925jrg] {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
  .md-btn-save[b-krrt925jrg] {
    flex: none;
  }
}

.md-btn-save:hover[b-krrt925jrg] {
  background-color: #d49300;
}

.md-btn-cancel[b-krrt925jrg] {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
  .md-btn-cancel[b-krrt925jrg] {
    flex: none;
  }
}

.md-btn-cancel:hover[b-krrt925jrg] {
  background-color: #f0ede5;
}

/* Mobile Cards View */
.md-mobile-list[b-krrt925jrg] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .md-mobile-list[b-krrt925jrg] {
    display: none;
  }
}

.md-mobile-card[b-krrt925jrg] {
  padding: 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-mobile-header[b-krrt925jrg] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.md-mobile-num[b-krrt925jrg] {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 700;
}

.md-mobile-name[b-krrt925jrg] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  margin: 0.125rem 0 0;
}

.md-mobile-desc[b-krrt925jrg] {
  font-size: 0.75rem;
  color: #4b5563;
  margin: 0 0 1rem;
}

.md-mobile-actions[b-krrt925jrg] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0ede5;
}

.md-mobile-actions .md-btn-edit[b-krrt925jrg],
.md-mobile-actions .md-btn-delete[b-krrt925jrg] {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
}

.md-mobile-edit-card[b-krrt925jrg] {
  padding: 1.25rem;
  background-color: #faf9f5;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Pagination */
.md-pagination[b-krrt925jrg] {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-pagination-info[b-krrt925jrg] {
  font-size: 0.75rem;
  color: #8a8880;
}

.md-pagination-nav[b-krrt925jrg] {
  display: flex;
  gap: 0.5rem;
}

.md-pagination-btn[b-krrt925jrg] {
  padding: 0.25rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-sm, 0.25rem);
  font-size: 0.875rem;
  cursor: pointer;
}

.md-pagination-btn:disabled[b-krrt925jrg] {
  opacity: 0.5;
  cursor: not-allowed;
}

.md-pagination-btn:hover:not(:disabled)[b-krrt925jrg] {
  background-color: #f9fafb;
}
/* /Components/Views/Admin/CorpuAssets/CorpuAssets.razor.rz.scp.css */
/* ==========================================================================
   CORPUASSETS - COMPONENT SCOPED STYLES
   ========================================================================== */

/* Page Layout */
.corpu-page-container[b-hiei8k4453] {
  padding: 1rem;
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: fadeIn 0.3s ease-out;
}

@media (min-width: 640px) {
  .corpu-page-container[b-hiei8k4453] {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .corpu-page-container[b-hiei8k4453] {
    padding: 2rem;
  }
}

/* Page Header Card */
.corpu-header-card[b-hiei8k4453] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--ut-white, #ffffff);
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
  .corpu-header-card[b-hiei8k4453] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.corpu-header-title-wrap[b-hiei8k4453] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.corpu-badge-pill[b-hiei8k4453] {
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background-color: rgba(232, 160, 0, 0.1);
  color: var(--ut-gold, #e8a000);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(232, 160, 0, 0.2);
}

.corpu-header-title[b-hiei8k4453] {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ut-dark, #1a1a1a);
  letter-spacing: -0.02em;
  margin: 0;
}

@media (min-width: 640px) {
  .corpu-header-title[b-hiei8k4453] {
    font-size: 1.5rem;
  }
}

.corpu-header-subtitle[b-hiei8k4453] {
  font-size: 0.8125rem;
  color: #6b665e;
  margin: 0.25rem 0 0 0;
}

.corpu-header-actions[b-hiei8k4453] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn-csv-import[b-hiei8k4453] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background-color: #f3f4f6;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-csv-import:hover[b-hiei8k4453] {
  background-color: #e5e7eb;
}

.btn-add-asset[b-hiei8k4453] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add-asset:hover[b-hiei8k4453] {
  background-color: #c98d00;
}

.btn-add-asset:active[b-hiei8k4453] {
  transform: scale(0.97);
}

/* Alert Boxes */
.alert-box[b-hiei8k4453] {
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alert-danger[b-hiei8k4453] {
  background-color: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
}

.alert-success[b-hiei8k4453] {
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

.alert-dismiss-btn[b-hiei8k4453] {
  font-weight: 700;
  margin-left: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Stat Cards Grid */
.corpu-stats-grid[b-hiei8k4453] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .corpu-stats-grid[b-hiei8k4453] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.corpu-stat-card[b-hiei8k4453] {
  background-color: var(--ut-white, #ffffff);
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.corpu-stat-label[b-hiei8k4453] {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8880;
}

.corpu-stat-label.stat-emerald[b-hiei8k4453] {
  color: #059669;
}

.corpu-stat-label.stat-blue[b-hiei8k4453] {
  color: #2563eb;
}

.corpu-stat-label.stat-rose[b-hiei8k4453] {
  color: #e11d48;
}

.corpu-stat-value[b-hiei8k4453] {
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--ut-dark, #1a1a1a);
  margin-top: 0.25rem;
}

.corpu-stat-value.stat-emerald[b-hiei8k4453] {
  color: #047857;
}

.corpu-stat-value.stat-blue[b-hiei8k4453] {
  color: #1d4ed8;
}

.corpu-stat-value.stat-rose[b-hiei8k4453] {
  color: #be123c;
}

/* Search & Filters Bar */
.corpu-filter-card[b-hiei8k4453] {
  background-color: var(--ut-white, #ffffff);
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .corpu-filter-card[b-hiei8k4453] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.corpu-search-container[b-hiei8k4453] {
  position: relative;
  flex: 1;
}

.corpu-search-icon[b-hiei8k4453] {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #9ca3af;
  pointer-events: none;
}

.corpu-search-input[b-hiei8k4453] {
  width: 100%;
  padding-left: 2.5rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #fafbfb;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ut-dark, #1a1a1a);
  outline: none;
  transition: border-color 0.2s;
}

.corpu-search-input:focus[b-hiei8k4453] {
  border-color: var(--ut-gold, #e8a000);
}

.corpu-filter-group[b-hiei8k4453] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.corpu-select[b-hiei8k4453] {
  padding: 0.5rem 0.75rem;
  background-color: #fafbfb;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5a5855;
  outline: none;
  transition: border-color 0.2s;
}

.corpu-select:focus[b-hiei8k4453] {
  border-color: var(--ut-gold, #e8a000);
}

/* Asset Table Container */
.corpu-table-card[b-hiei8k4453] {
  background-color: var(--ut-white, #ffffff);
  border-radius: 1rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.corpu-empty-state[b-hiei8k4453],
.corpu-loading-state[b-hiei8k4453] {
  padding: 3rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

.corpu-spinner[b-hiei8k4453] {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 4px solid var(--ut-gold, #e8a000);
  border-top-color: transparent;
  border-radius: 9999px;
  animation: spin-b-hiei8k4453 1s linear infinite;
  margin-bottom: 0.5rem;
}

@keyframes spin-b-hiei8k4453 {
  to { transform: rotate(360deg); }
}

.corpu-table-responsive[b-hiei8k4453] {
  overflow-x: auto;
}

.corpu-table[b-hiei8k4453] {
  width: 100%;
  text-align: left;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

.corpu-thead-row[b-hiei8k4453] {
  background-color: #fafbfb;
  border-bottom: 1px solid var(--ut-border, #e5e3dc);
  color: #8a8880;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-size: 10px;
  user-select: none;
}

.corpu-th-sortable[b-hiei8k4453] {
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.corpu-th-sortable:hover[b-hiei8k4453] {
  background-color: #f3f4f6;
}

.th-inner-flex[b-hiei8k4453] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.sort-icon[b-hiei8k4453] {
  color: var(--ut-gold, #e8a000);
  font-weight: 700;
}

.corpu-th-plain[b-hiei8k4453] {
  padding: 0.875rem 1rem;
}

.corpu-th-right[b-hiei8k4453] {
  padding: 0.875rem 1rem;
  text-align: right;
}

.corpu-tr-row[b-hiei8k4453] {
  border-bottom: 1px solid #f0ede5;
  transition: background-color 0.15s ease;
}

.corpu-tr-row:hover[b-hiei8k4453] {
  background-color: #fcfbf9;
}

.corpu-td[b-hiei8k4453] {
  padding: 0.875rem 1rem;
  vertical-align: middle;
}

.corpu-td-right[b-hiei8k4453] {
  padding: 0.875rem 1rem;
  text-align: right;
  vertical-align: middle;
}

.asset-title[b-hiei8k4453] {
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
}

.asset-code-sub[b-hiei8k4453] {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #8a8880;
}

.category-tag[b-hiei8k4453] {
  padding: 0.25rem 0.625rem;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #374151;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 11px;
}

/* Badges */
.badge-condition[b-hiei8k4453] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 10px;
}

.badge-condition.cond-baik[b-hiei8k4453] {
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.badge-condition.cond-ringan[b-hiei8k4453] {
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.badge-condition.cond-berat[b-hiei8k4453] {
  background-color: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

.badge-status[b-hiei8k4453] {
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-weight: 800;
  font-size: 11px;
}

.badge-status.status-tersedia[b-hiei8k4453] {
  background-color: #d1fae5;
  color: #065f46;
}

.badge-status.status-dipinjamkan[b-hiei8k4453] {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge-status.status-maintenance[b-hiei8k4453] {
  background-color: #ffe4e6;
  color: #9f1239;
}

.location-flex[b-hiei8k4453] {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a5855;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.holder-name[b-hiei8k4453] {
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
}

.holder-sub[b-hiei8k4453] {
  font-size: 10px;
  color: #8a8880;
}

.holder-manual-tag[b-hiei8k4453] {
  padding: 0.125rem 0.375rem;
  font-size: 9px;
  font-weight: 700;
  border-radius: 0.25rem;
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* Action Buttons inside Table */
.table-action-group[b-hiei8k4453] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.btn-tbl-history[b-hiei8k4453] {
  padding: 0.375rem 0.625rem;
  background-color: #f5f4f0;
  color: #5a5855;
  font-size: 11px;
  font-weight: 700;
  border-radius: 0.5rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-tbl-history:hover[b-hiei8k4453] {
  background-color: #e8e5df;
}

.btn-tbl-edit[b-hiei8k4453] {
  padding: 0.375rem 0.625rem;
  background-color: #f3f4f6;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-tbl-edit:hover[b-hiei8k4453] {
  background-color: #e5e7eb;
}

.btn-tbl-assign[b-hiei8k4453] {
  padding: 0.375rem 0.75rem;
  background-color: #1a7a30;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-tbl-assign:hover[b-hiei8k4453] {
  opacity: 0.9;
}

.btn-tbl-return[b-hiei8k4453] {
  padding: 0.375rem 0.75rem;
  background-color: #2563eb;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-tbl-return:hover[b-hiei8k4453] {
  opacity: 0.9;
}

/* Modals */
.modal-overlay[b-hiei8k4453] {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

.modal-dialog[b-hiei8k4453] {
  background-color: var(--ut-white, #ffffff);
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ut-border, #e5e3dc);
  width: 100%;
  max-width: 32rem;
  overflow: hidden;
}

.modal-dialog-large[b-hiei8k4453] {
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.modal-header[b-hiei8k4453] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fafbfb;
  flex-shrink: 0;
}

.modal-title[b-hiei8k4453] {
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  font-size: 1rem;
  margin: 0;
}

.modal-close-btn[b-hiei8k4453] {
  color: #9ca3af;
  font-weight: 700;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
}

.modal-close-btn:hover[b-hiei8k4453] {
  color: #4b5563;
}

.modal-body[b-hiei8k4453] {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.modal-footer[b-hiei8k4453] {
  padding: 1rem 1.5rem;
  border-top: 1px solid #f0ede5;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background-color: #fafbfb;
  flex-shrink: 0;
}

/* Form Controls in Modal */
.form-field[b-hiei8k4453] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-label[b-hiei8k4453] {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5a5855;
  margin-bottom: 0.25rem;
}

.form-input-text[b-hiei8k4453],
.form-input-select[b-hiei8k4453],
.form-input-textarea[b-hiei8k4453] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ut-dark, #1a1a1a);
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.form-input-text:focus[b-hiei8k4453],
.form-input-select:focus[b-hiei8k4453],
.form-input-textarea:focus[b-hiei8k4453] {
  border-color: var(--ut-gold, #e8a000);
}

.form-grid-2[b-hiei8k4453] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.btn-modal-cancel[b-hiei8k4453] {
  padding: 0.5rem 1rem;
  background-color: #f3f4f6;
  color: #374151;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-modal-cancel:hover[b-hiei8k4453] {
  background-color: #e5e7eb;
}

.btn-modal-save[b-hiei8k4453] {
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-modal-save:hover[b-hiei8k4453] {
  background-color: #c98d00;
}

.btn-modal-green[b-hiei8k4453] {
  padding: 0.5rem 1rem;
  background-color: #1a7a30;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-modal-green:hover:not(:disabled)[b-hiei8k4453] {
  opacity: 0.9;
}

.btn-modal-green:disabled[b-hiei8k4453] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-modal-blue[b-hiei8k4453] {
  padding: 0.5rem 1rem;
  background-color: #2563eb;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-modal-blue:hover[b-hiei8k4453] {
  opacity: 0.9;
}

/* History Timeline inside Modal */
.timeline-container[b-hiei8k4453] {
  position: relative;
  border-left: 2px solid #e5e7eb;
  margin-left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timeline-item[b-hiei8k4453] {
  margin-left: 1.5rem;
  position: relative;
}

.timeline-dot[b-hiei8k4453] {
  position: absolute;
  left: -1.9375rem;
  top: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background-color: #d1d5db;
}

.timeline-dot.dot-active[b-hiei8k4453] {
  background-color: #3b82f6;
  border: 2px solid #ffffff;
}

.timeline-card[b-hiei8k4453] {
  background-color: #fafbfb;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.timeline-header-flex[b-hiei8k4453] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.timeline-holder-title[b-hiei8k4453] {
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.timeline-status-badge[b-hiei8k4453] {
  padding: 0.125rem 0.5rem;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9999px;
}

.timeline-status-badge.badge-active[b-hiei8k4453] {
  background-color: #dbeafe;
  color: #1e40af;
}

.timeline-status-badge.badge-finished[b-hiei8k4453] {
  background-color: #f3f4f6;
  color: #374151;
}

.timeline-time-info[b-hiei8k4453] {
  font-size: 11px;
  color: #6b665e;
}

.timeline-return-info[b-hiei8k4453] {
  font-size: 11px;
  color: #047857;
  font-weight: 500;
}

.timeline-notes-box[b-hiei8k4453] {
  font-size: 0.75rem;
  color: #4b5563;
  background-color: #ffffff;
  padding: 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  margin-top: 0.5rem;
  font-style: italic;
}
/* /Components/Views/Admin/CreateProduct/CreateProduct.razor.rz.scp.css */
/* ==========================================================================
   CREATE PRODUCT - SPECIALIZED COMPONENT STYLES
   Scoped styles for Admin Product Creation
   ========================================================================== */

/* Layout & Container */
.product-page-container[b-q4jzkqwakl] {
    padding: 1.5rem 1rem 3rem 1rem;
    max-width: 56rem; /* 896px */
    margin: 0 auto;
}

@media (min-width: 640px) {
    .product-page-container[b-q4jzkqwakl] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Page Header */
.product-page-header[b-q4jzkqwakl] {
    background: transparent;
    padding: 1rem 0 1.5rem 0;
}

.product-page-title[b-q4jzkqwakl] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ut-dark, #1a1a1a);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.product-page-title .brand-accent[b-q4jzkqwakl] {
    color: var(--ut-gold, #e8a000);
}

.product-page-date[b-q4jzkqwakl] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #a09e99;
    margin-top: 0.25rem;
}

/* Form Card */
.form-card[b-q4jzkqwakl] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.form-card-header[b-q4jzkqwakl] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-back[b-q4jzkqwakl] {
    padding: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.btn-back:hover[b-q4jzkqwakl] {
    color: #111827;
    background-color: #f9fafb;
}

.card-title-group h3[b-q4jzkqwakl] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.card-title-group p[b-q4jzkqwakl] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.125rem 0 0 0;
}

.card-title-group .required-tag[b-q4jzkqwakl] {
    color: #ef4444;
    font-weight: 600;
}

.form-card-body[b-q4jzkqwakl] {
    padding: 1.5rem;
}

/* Alert Box */
.form-alert-error[b-q4jzkqwakl] {
    margin-bottom: 1.5rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

/* Form Groups & Grid */
.form-stack[b-q4jzkqwakl] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row-2[b-q4jzkqwakl] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .form-row-2[b-q4jzkqwakl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-row-3[b-q4jzkqwakl] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .form-row-3[b-q4jzkqwakl] {
        grid-template-columns: 2fr 1fr;
    }
}

.form-group[b-q4jzkqwakl] {
    display: flex;
    flex-direction: column;
}

.form-label[b-q4jzkqwakl] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}

.form-label .required[b-q4jzkqwakl] {
    color: #ef4444;
}

[b-q4jzkqwakl] .form-input,
[b-q4jzkqwakl] .form-select,
[b-q4jzkqwakl] .form-textarea,
.form-input[b-q4jzkqwakl],
.form-select[b-q4jzkqwakl],
.form-textarea[b-q4jzkqwakl] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    color: #111827;
    outline: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-sizing: border-box;
}

[b-q4jzkqwakl] .form-input:hover,
[b-q4jzkqwakl] .form-select:hover,
[b-q4jzkqwakl] .form-textarea:hover,
.form-input:hover[b-q4jzkqwakl],
.form-select:hover[b-q4jzkqwakl],
.form-textarea:hover[b-q4jzkqwakl] {
    border-color: #9ca3af;
}

[b-q4jzkqwakl] .form-input:focus,
[b-q4jzkqwakl] .form-select:focus,
[b-q4jzkqwakl] .form-textarea:focus,
.form-input:focus[b-q4jzkqwakl],
.form-select:focus[b-q4jzkqwakl],
.form-textarea:focus[b-q4jzkqwakl] {
    background-color: #ffffff;
    border-color: var(--ut-gold, #e8a000);
    box-shadow: 0 0 0 3px rgba(232, 160, 0, 0.2);
}

[b-q4jzkqwakl] .form-textarea,
.form-textarea[b-q4jzkqwakl] {
    border-radius: 0.5rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 5.5rem;
}

.form-hint[b-q4jzkqwakl] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

[b-q4jzkqwakl] .validation-error,
.validation-error[b-q4jzkqwakl] {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
    font-weight: 500;
}

/* SKU Input Group */
.sku-input-group[b-q4jzkqwakl] {
    display: flex;
    gap: 0.5rem;
}

[b-q4jzkqwakl] .sku-input-group .form-input,
.sku-input-group .form-input[b-q4jzkqwakl] {
    flex: 1;
}

.btn-scan[b-q4jzkqwakl] {
    padding: 0.5rem 1rem;
    background-color: #111827;
    color: #ffffff;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.btn-scan:hover[b-q4jzkqwakl] {
    background-color: #1f2937;
}

.btn-stop-scan[b-q4jzkqwakl] {
    padding: 0.5rem 1rem;
    background-color: #e5e7eb;
    color: #1f2937;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.btn-stop-scan:hover[b-q4jzkqwakl] {
    background-color: #d1d5db;
}

/* Scanner Container */
.scanner-viewport[b-q4jzkqwakl] {
    position: relative;
    background-color: #000000;
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    padding-top: 60%;
    margin-top: 0.75rem;
}

.scanner-video[b-q4jzkqwakl] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-target-box[b-q4jzkqwakl] {
    position: absolute;
    inset: 0;
    margin: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.375rem;
    pointer-events: none;
}

/* Unit Selection */
.unit-custom-wrapper[b-q4jzkqwakl] {
    position: relative;
    margin-top: 0.25rem;
}

[b-q4jzkqwakl] .unit-custom-wrapper .form-input,
.unit-custom-wrapper .form-input[b-q4jzkqwakl] {
    padding-right: 2.5rem;
}

.unit-cancel-btn[b-q4jzkqwakl] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    color: #9ca3af;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.unit-cancel-btn:hover[b-q4jzkqwakl] {
    color: #4b5563;
}

/* Checkbox field */
.checkbox-field[b-q4jzkqwakl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    width: max-content;
}

.checkbox-input[b-q4jzkqwakl] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    accent-color: var(--ut-gold, #e8a000);
    cursor: pointer;
}

.checkbox-label[b-q4jzkqwakl] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.checkbox-sublabel[b-q4jzkqwakl] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 400;
}

/* File Upload & Previews */
[b-q4jzkqwakl] .file-upload-input,
.file-upload-input[b-q4jzkqwakl] {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    color: #6b7280;
    cursor: pointer;
}

[b-q4jzkqwakl] .file-upload-input::file-selector-button,
.file-upload-input[b-q4jzkqwakl]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #f9fafb;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-q4jzkqwakl] .file-upload-input::file-selector-button:hover,
.file-upload-input[b-q4jzkqwakl]::file-selector-button:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
}

.preview-grid[b-q4jzkqwakl] {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preview-thumbnail[b-q4jzkqwakl] {
    width: 4rem;
    height: 4rem;
    border-radius: 0.375rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background-color: #f9fafb;
}

.preview-thumbnail img[b-q4jzkqwakl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stock Info Card */
.stock-info-card[b-q4jzkqwakl] {
    padding: 1rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.stock-info-title[b-q4jzkqwakl] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Variants Section */
.variants-container[b-q4jzkqwakl] {
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.variants-header-bar[b-q4jzkqwakl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.variants-header-bar h4[b-q4jzkqwakl] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.variants-header-bar p[b-q4jzkqwakl] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.125rem 0 0 0;
}

.btn-add-variant[b-q4jzkqwakl] {
    padding: 0.5rem 1rem;
    background-color: var(--ut-gold, #e8a000);
    color: #ffffff;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease;
}

.btn-add-variant:hover[b-q4jzkqwakl] {
    background-color: #d69300;
}

.variant-card[b-q4jzkqwakl] {
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    margin-bottom: 1rem;
}

.variant-card-header[b-q4jzkqwakl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.variant-group-title[b-q4jzkqwakl] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.btn-remove-group[b-q4jzkqwakl] {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-remove-group:hover[b-q4jzkqwakl] {
    color: #b91c1c;
}

.variant-card-grid[b-q4jzkqwakl] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .variant-card-grid[b-q4jzkqwakl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.variant-image-preview-box[b-q4jzkqwakl] {
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-image-preview-box img[b-q4jzkqwakl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.variant-image-placeholder[b-q4jzkqwakl] {
    color: #d1d5db;
}

.variant-sizes-list[b-q4jzkqwakl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.variant-size-row[b-q4jzkqwakl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

[b-q4jzkqwakl] .size-stock-input,
.size-stock-input[b-q4jzkqwakl] {
    width: 5.5rem !important;
    min-width: 5.5rem !important;
    max-width: 5.5rem !important;
    flex: 0 0 5.5rem !important;
}

[b-q4jzkqwakl] .size-name-input,
.size-name-input[b-q4jzkqwakl] {
    flex: 1 1 auto !important;
    min-width: 4.5rem !important;
}

.btn-remove-size[b-q4jzkqwakl] {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.btn-remove-size:hover[b-q4jzkqwakl] {
    color: #b91c1c;
}

.btn-add-size[b-q4jzkqwakl] {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ut-gold, #e8a000);
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-add-size:hover[b-q4jzkqwakl] {
    color: #d69300;
}

/* Form Actions */
.form-actions-bar[b-q4jzkqwakl] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid #f3f4f6;
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}

.btn-cancel[b-q4jzkqwakl] {
    padding: 0.5rem 1rem;
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-cancel:hover[b-q4jzkqwakl] {
    background-color: #f9fafb;
}

.btn-submit[b-q4jzkqwakl] {
    padding: 0.625rem 1.25rem;
    background-color: var(--ut-gold, #e8a000);
    color: #ffffff;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 8.75rem;
    transition: background-color 0.15s ease;
}

.btn-submit:hover:not(:disabled)[b-q4jzkqwakl] {
    background-color: #d69300;
}

.btn-submit:disabled[b-q4jzkqwakl] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Loading Spinner */
.form-loading-state[b-q4jzkqwakl] {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-spinner[b-q4jzkqwakl] {
    animation: spin-b-q4jzkqwakl 1s linear infinite;
    border-radius: 9999px;
    height: 2rem;
    width: 2rem;
    border-bottom: 2px solid var(--ut-gold, #e8a000);
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    margin-bottom: 1rem;
}

@keyframes spin-b-q4jzkqwakl {
    to { transform: rotate(360deg); }
}
/* /Components/Views/Admin/DamagedGoods/DamagedGoods.razor.rz.scp.css */
/* ==========================================================================
   DAMAGED GOODS - SPECIALIZED COMPONENT STYLES
   Scoped styles for Barang Rusak & Hilang (Admin)
   ========================================================================== */

.damaged-goods-container[b-3dvdkad78r] {
    padding: 2rem 1rem;
    min-height: 100vh;
    max-width: 80rem; /* 1280px */
    margin: 0 auto;
}

@media (min-width: 640px) {
    .damaged-goods-container[b-3dvdkad78r] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Page Header */
.page-header-row[b-3dvdkad78r] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .page-header-row[b-3dvdkad78r] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.page-header-title[b-3dvdkad78r] {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--ut-dark, #1a1a1a);
    line-height: 1.25;
    margin: 0;
}

.page-header-desc[b-3dvdkad78r] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0 0 0;
}

/* Filter Card */
.filters-card[b-3dvdkad78r] {
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e3dc;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .filters-card[b-3dvdkad78r] {
        flex-direction: row;
        align-items: flex-end;
    }
}

.filter-search-group[b-3dvdkad78r] {
    flex: 1;
    width: 100%;
}

.filter-select-group[b-3dvdkad78r] {
    width: 100%;
}

@media (min-width: 768px) {
    .filter-select-group[b-3dvdkad78r] {
        width: 12rem;
    }
}

.filter-label[b-3dvdkad78r] {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a8880;
    margin-bottom: 0.375rem;
}

.search-input-wrapper[b-3dvdkad78r] {
    position: relative;
    width: 100%;
}

.search-input-icon[b-3dvdkad78r] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    pointer-events: none;
}

.filter-search-input[b-3dvdkad78r] {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    background-color: #ffffff;
    border: 1px solid #e5e3dc;
    border-radius: 0.5rem;
    color: #1a1a1a;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.filter-search-input:focus[b-3dvdkad78r],
.filter-select:focus[b-3dvdkad78r] {
    border-color: var(--ut-gold, #e8a000);
    box-shadow: 0 0 0 1px var(--ut-gold, #e8a000);
}

.filter-select[b-3dvdkad78r] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid #e5e3dc;
    border-radius: 0.5rem;
    color: #1a1a1a;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

/* Loading & Empty State */
.loading-box[b-3dvdkad78r] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e3dc;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.loading-spinner[b-3dvdkad78r] {
    animation: spin-b-3dvdkad78r 1s linear infinite;
    border-radius: 9999px;
    height: 2rem;
    width: 2rem;
    border-bottom: 2px solid var(--ut-gold, #e8a000);
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
}

@keyframes spin-b-3dvdkad78r {
    to { transform: rotate(360deg); }
}

.empty-state-box[b-3dvdkad78r] {
    padding: 4rem 1.5rem;
    text-align: center;
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e3dc;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.empty-state-icon[b-3dvdkad78r] {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem auto;
    color: #d1d5db;
}

.empty-state-title[b-3dvdkad78r] {
    color: #1f2937;
    font-weight: 500;
    margin: 0 0 0.25rem 0;
}

.empty-state-desc[b-3dvdkad78r] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* Data Table Wrapper */
.table-card[b-3dvdkad78r] {
    background-color: transparent;
}

@media (min-width: 768px) {
    .table-card[b-3dvdkad78r] {
        background-color: #ffffff;
        border-radius: 0.75rem;
        border: 1px solid #e5e3dc;
        overflow: hidden;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }
}

.table-responsive[b-3dvdkad78r] {
    display: none;
    overflow-x: auto;
}

@media (min-width: 768px) {
    .table-responsive[b-3dvdkad78r] {
        display: block;
    }
}

.data-table[b-3dvdkad78r] {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.data-table thead tr[b-3dvdkad78r] {
    background-color: #1a1a1a;
}

.data-table th[b-3dvdkad78r] {
    padding: 0.875rem 1.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #c8c5bc;
}

.data-table td[b-3dvdkad78r] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0ede5;
}

.data-table tbody tr:hover[b-3dvdkad78r] {
    background-color: #faf9f5;
}

.product-name-cell[b-3dvdkad78r] {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 0.875rem;
}

.applicant-name[b-3dvdkad78r] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1a1a1a;
}

.applicant-nrp[b-3dvdkad78r] {
    font-size: 0.75rem;
    color: #6b7280;
}

.qty-val[b-3dvdkad78r] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* Badges */
.badge-status[b-3dvdkad78r] {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 0.375rem;
    text-transform: uppercase;
    display: inline-block;
}

.badge-status.is-lost[b-3dvdkad78r] {
    background-color: #fef0f0;
    border: 1px solid #f8c0c0;
    color: #d94040;
}

.badge-status.is-damaged[b-3dvdkad78r] {
    background-color: #fff7e6;
    border: 1px solid #ffe099;
    color: #cc7a00;
}

.reason-text[b-3dvdkad78r] {
    font-size: 0.875rem;
    color: #4b5563;
    max-width: 18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-text[b-3dvdkad78r] {
    font-size: 0.875rem;
    color: #4b5563;
}

.btn-icon-action[b-3dvdkad78r] {
    padding: 0.375rem;
    color: #6b7280;
    background-color: #ffffff;
    border: 1px solid #e5e3dc;
    border-radius: 0.25rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.btn-icon-action:hover[b-3dvdkad78r] {
    color: var(--ut-gold, #e8a000);
    background-color: #faf9f5;
}

/* Mobile Card View */
.mobile-cards-list[b-3dvdkad78r] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .mobile-cards-list[b-3dvdkad78r] {
        display: none;
    }
}

.mobile-data-card[b-3dvdkad78r] {
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid #e5e3dc;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.mobile-card-head[b-3dvdkad78r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.mobile-product-title[b-3dvdkad78r] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.mobile-applicant-info[b-3dvdkad78r] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.mobile-card-grid[b-3dvdkad78r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    border-top: 1px solid #f0ede5;
    padding-top: 0.75rem;
}

.mobile-card-label[b-3dvdkad78r] {
    font-size: 0.625rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-card-value[b-3dvdkad78r] {
    color: #374151;
    margin-top: 0.125rem;
}

.mobile-reason-box[b-3dvdkad78r] {
    font-size: 0.875rem;
    border-top: 1px solid #f0ede5;
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.mobile-card-footer[b-3dvdkad78r] {
    border-top: 1px solid #f0ede5;
    padding-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.btn-view-photo-mobile[b-3dvdkad78r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #3a3835;
    border-radius: 0.25rem;
    background-color: #ffffff;
    border: 1px solid #e5e3dc;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-view-photo-mobile:hover[b-3dvdkad78r] {
    color: #1a1a1a;
    background-color: #f0ede5;
}

/* Pagination Bar */
.pagination-bar[b-3dvdkad78r] {
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
    .pagination-bar[b-3dvdkad78r] {
        margin-top: 0;
        border-top: 1px solid #e5e3dc;
        border-radius: 0;
        box-shadow: none;
    }
}

.pagination-text[b-3dvdkad78r] {
    font-size: 0.75rem;
    color: #8a8880;
}

.pagination-btn-group[b-3dvdkad78r] {
    display: flex;
    gap: 0.5rem;
}

.btn-page[b-3dvdkad78r] {
    padding: 0.25rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid #e5e3dc;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-page:hover:not(:disabled)[b-3dvdkad78r] {
    background-color: #f9fafb;
}

.btn-page:disabled[b-3dvdkad78r] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Photo Modal */
.modal-overlay[b-3dvdkad78r] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}

.modal-dialog-photo[b-3dvdkad78r] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 42rem;
    width: 100%;
    overflow: hidden;
}

.modal-head-photo[b-3dvdkad78r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e5e3dc;
    background-color: #faf9f5;
}

.modal-head-photo h3[b-3dvdkad78r] {
    color: #1a1a1a;
    font-weight: 700;
    margin: 0;
    font-size: 1rem;
}

.btn-modal-close-icon[b-3dvdkad78r] {
    color: #9ca3af;
    background-color: #ffffff;
    border: 1px solid #e5e3dc;
    border-radius: 0.25rem;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-modal-close-icon:hover[b-3dvdkad78r] {
    color: #374151;
    background-color: #f9fafb;
}

.modal-body-photo[b-3dvdkad78r] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9fafb;
    min-height: 300px;
}

.btn-pdf-link[b-3dvdkad78r] {
    padding: 0.625rem 1.25rem;
    background-color: #dc2626;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn-pdf-link:hover[b-3dvdkad78r] {
    background-color: #b91c1c;
}

.modal-photo-img[b-3dvdkad78r] {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    object-fit: contain;
}
/* /Components/Views/Admin/Divisions/Divisions.razor.rz.scp.css */
/* ==========================================================================
   MASTER DATA - DIVISIONS SPECIALIZED CSS
   ========================================================================== */

.md-page[b-p4rd8yh619] {
  padding: 2rem 0;
  min-height: 100vh;
}

.md-container[b-p4rd8yh619] {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .md-container[b-p4rd8yh619] {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .md-container[b-p4rd8yh619] {
    padding: 0 2rem;
  }
}

/* Header */
.md-header[b-p4rd8yh619] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.md-title[b-p4rd8yh619] {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.2;
  margin: 0;
}

/* Alerts */
.md-alert[b-p4rd8yh619] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  font-size: 0.875rem;
}

.md-alert--success[b-p4rd8yh619] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
}

.md-alert--danger[b-p4rd8yh619] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
}

.md-alert-icon[b-p4rd8yh619] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Card Form (Add/Create) */
.md-card[b-p4rd8yh619] {
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  margin-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-card-header[b-p4rd8yh619] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
}

.md-card-title[b-p4rd8yh619] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.md-card-subtitle[b-p4rd8yh619] {
  font-size: 0.72rem;
  color: #8a8880;
  margin: 0.125rem 0 0;
}

.md-card-body[b-p4rd8yh619] {
  padding: 1.25rem 1.5rem;
}

.md-form-row[b-p4rd8yh619] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .md-form-row[b-p4rd8yh619] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.md-form-group[b-p4rd8yh619] {
  flex: 1;
  width: 100%;
}

.md-label[b-p4rd8yh619] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.md-label .required[b-p4rd8yh619] {
  color: var(--ut-danger, #d94040);
}

.md-label .optional[b-p4rd8yh619] {
  color: #9ca3af;
  font-weight: 400;
  text-transform: none;
}

.md-input[b-p4rd8yh619] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-md, 0.5rem);
  outline: none;
  transition: all 0.15s ease;
  color: var(--ut-dark, #1a1a1a);
}

.md-input:focus[b-p4rd8yh619] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.md-btn-submit[b-p4rd8yh619] {
  padding: 0.5rem 1.25rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.md-btn-submit:hover[b-p4rd8yh619] {
  background-color: #d49300;
}

.md-btn-submit:active[b-p4rd8yh619] {
  transform: scale(0.97);
}

.md-hint[b-p4rd8yh619] {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Table Container */
.md-table-card[b-p4rd8yh619] {
  background-color: transparent;
}

@media (min-width: 768px) {
  .md-table-card[b-p4rd8yh619] {
    background-color: #ffffff;
    border-radius: var(--ut-radius-lg, 0.75rem);
    border: 1px solid var(--ut-border-color, #e5e3dc);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
}

.md-table-wrap[b-p4rd8yh619] {
  display: none;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .md-table-wrap[b-p4rd8yh619] {
    display: block;
  }
}

.md-table[b-p4rd8yh619] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.md-table thead tr[b-p4rd8yh619] {
  background-color: var(--ut-dark, #1a1a1a);
}

.md-th[b-p4rd8yh619] {
  padding: 0.875rem 1.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c8c5bc;
  white-space: nowrap;
}

.md-th--num[b-p4rd8yh619] {
  width: 3rem;
}

.md-th--actions[b-p4rd8yh619] {
  width: 8rem;
}

.md-tbody tr[b-p4rd8yh619] {
  border-bottom: 1px solid #f0ede5;
  transition: background-color 0.1s ease;
}

.md-tbody tr:hover:not(.md-edit-row)[b-p4rd8yh619] {
  background-color: #faf9f5;
}

.md-td[b-p4rd8yh619] {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.md-td--num[b-p4rd8yh619] {
  color: #9ca3af;
}

.md-td--name[b-p4rd8yh619] {
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  white-space: nowrap;
}

.md-td--desc[b-p4rd8yh619] {
  color: #4b5563;
}

.md-badge-count[b-p4rd8yh619] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.md-badge-count:hover[b-p4rd8yh619] {
  background-color: var(--ut-success, #1a7a30);
  color: #ffffff;
}

.md-actions-wrap[b-p4rd8yh619] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.md-btn-edit[b-p4rd8yh619] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3a3835;
  padding: 0.375rem 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-btn-edit:hover[b-p4rd8yh619] {
  color: var(--ut-dark, #1a1a1a);
  background-color: #f0ede5;
}

.md-btn-delete[b-p4rd8yh619] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-danger, #d94040);
  padding: 0.375rem 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-btn-delete:hover[b-p4rd8yh619] {
  background-color: #fee2e2;
  color: #b83535;
}

/* Edit Inline Form */
.md-edit-row[b-p4rd8yh619] {
  background-color: #faf9f5;
}

.md-edit-row td[b-p4rd8yh619] {
  padding: 1rem 1.5rem;
}

.md-edit-form[b-p4rd8yh619] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .md-edit-form[b-p4rd8yh619] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.md-edit-actions[b-p4rd8yh619] {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .md-edit-actions[b-p4rd8yh619] {
    width: auto;
  }
}

.md-btn-save[b-p4rd8yh619] {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
  .md-btn-save[b-p4rd8yh619] {
    flex: none;
  }
}

.md-btn-save:hover[b-p4rd8yh619] {
  background-color: #d49300;
}

.md-btn-cancel[b-p4rd8yh619] {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
  .md-btn-cancel[b-p4rd8yh619] {
    flex: none;
  }
}

.md-btn-cancel:hover[b-p4rd8yh619] {
  background-color: #f0ede5;
}

/* Mobile Cards View */
.md-mobile-list[b-p4rd8yh619] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .md-mobile-list[b-p4rd8yh619] {
    display: none;
  }
}

.md-mobile-card[b-p4rd8yh619] {
  padding: 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-mobile-header[b-p4rd8yh619] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.md-mobile-num[b-p4rd8yh619] {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 700;
}

.md-mobile-name[b-p4rd8yh619] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  margin: 0.125rem 0 0;
}

.md-mobile-desc[b-p4rd8yh619] {
  font-size: 0.75rem;
  color: #4b5563;
  margin: 0 0 1rem;
}

.md-mobile-actions[b-p4rd8yh619] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0ede5;
}

.md-mobile-actions .md-btn-edit[b-p4rd8yh619],
.md-mobile-actions .md-btn-delete[b-p4rd8yh619] {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
}

.md-mobile-edit-card[b-p4rd8yh619] {
  padding: 1.25rem;
  background-color: #faf9f5;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Pagination */
.md-pagination[b-p4rd8yh619] {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-pagination-info[b-p4rd8yh619] {
  font-size: 0.75rem;
  color: #8a8880;
}

.md-pagination-nav[b-p4rd8yh619] {
  display: flex;
  gap: 0.5rem;
}

.md-pagination-btn[b-p4rd8yh619] {
  padding: 0.25rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-sm, 0.25rem);
  font-size: 0.875rem;
  cursor: pointer;
}

.md-pagination-btn:disabled[b-p4rd8yh619] {
  opacity: 0.5;
  cursor: not-allowed;
}

.md-pagination-btn:hover:not(:disabled)[b-p4rd8yh619] {
  background-color: #f9fafb;
}
/* /Components/Views/Admin/EditProduct/EditProduct.razor.rz.scp.css */
/* ==========================================================================
   EDIT PRODUCT - SPECIALIZED COMPONENT STYLES
   Scoped styles for Admin Product Editing
   ========================================================================== */

/* Layout & Container */
.product-page-container[b-wm80pb9tyn] {
    padding: 1.5rem 1rem 3rem 1rem;
    max-width: 48rem; /* 768px */
    margin: 0 auto;
}

@media (min-width: 640px) {
    .product-page-container[b-wm80pb9tyn] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Page Header */
.product-page-header[b-wm80pb9tyn] {
    background: transparent;
    padding: 1rem 0 1.5rem 0;
}

.product-page-title[b-wm80pb9tyn] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ut-dark, #1a1a1a);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.product-page-title .brand-accent[b-wm80pb9tyn] {
    color: var(--ut-gold, #e8a000);
}

.product-page-date[b-wm80pb9tyn] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #a09e99;
    margin-top: 0.25rem;
}

/* Loading & Empty States */
.product-loading-box[b-wm80pb9tyn] {
    padding: 2.5rem;
    text-align: center;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-spinner[b-wm80pb9tyn] {
    animation: spin-b-wm80pb9tyn 1s linear infinite;
    border-radius: 9999px;
    height: 2rem;
    width: 2rem;
    border-bottom: 2px solid var(--ut-gold, #e8a000);
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    margin-bottom: 1rem;
}

@keyframes spin-b-wm80pb9tyn {
    to { transform: rotate(360deg); }
}

.product-not-found-card[b-wm80pb9tyn] {
    padding: 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.product-not-found-card h3[b-wm80pb9tyn] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.25rem 0;
}

.product-not-found-card p[b-wm80pb9tyn] {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1.5rem 0;
}

/* Form Card */
.form-card[b-wm80pb9tyn] {
    background: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.form-card-header[b-wm80pb9tyn] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-back[b-wm80pb9tyn] {
    padding: 0.5rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.btn-back:hover[b-wm80pb9tyn] {
    color: #111827;
    background-color: #f9fafb;
}

.card-title-group h3[b-wm80pb9tyn] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.card-title-group p[b-wm80pb9tyn] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.125rem 0 0 0;
}

.card-title-group .required-tag[b-wm80pb9tyn] {
    color: #ef4444;
    font-weight: 600;
}

.form-card-body[b-wm80pb9tyn] {
    padding: 1.5rem;
}

/* Alert Box */
.form-alert-error[b-wm80pb9tyn] {
    margin-bottom: 1.5rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

/* Form Groups & Grid */
.form-stack[b-wm80pb9tyn] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row-2[b-wm80pb9tyn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .form-row-2[b-wm80pb9tyn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form-row-3[b-wm80pb9tyn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .form-row-3[b-wm80pb9tyn] {
        grid-template-columns: 2fr 1fr;
    }
}

.form-group[b-wm80pb9tyn] {
    display: flex;
    flex-direction: column;
}

.form-label[b-wm80pb9tyn] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}

.form-label .required[b-wm80pb9tyn] {
    color: #ef4444;
}

[b-wm80pb9tyn] .form-input,
[b-wm80pb9tyn] .form-select,
[b-wm80pb9tyn] .form-textarea,
.form-input[b-wm80pb9tyn],
.form-select[b-wm80pb9tyn],
.form-textarea[b-wm80pb9tyn] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    color: #111827;
    outline: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    box-sizing: border-box;
}

[b-wm80pb9tyn] .form-input:hover,
[b-wm80pb9tyn] .form-select:hover,
[b-wm80pb9tyn] .form-textarea:hover,
.form-input:hover[b-wm80pb9tyn],
.form-select:hover[b-wm80pb9tyn],
.form-textarea:hover[b-wm80pb9tyn] {
    border-color: #9ca3af;
}

[b-wm80pb9tyn] .form-input:focus,
[b-wm80pb9tyn] .form-select:focus,
[b-wm80pb9tyn] .form-textarea:focus,
.form-input:focus[b-wm80pb9tyn],
.form-select:focus[b-wm80pb9tyn],
.form-textarea:focus[b-wm80pb9tyn] {
    background-color: #ffffff;
    border-color: var(--ut-gold, #e8a000);
    box-shadow: 0 0 0 3px rgba(232, 160, 0, 0.2);
}

[b-wm80pb9tyn] .form-textarea,
.form-textarea[b-wm80pb9tyn] {
    border-radius: 0.5rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 5.5rem;
}

.form-hint[b-wm80pb9tyn] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

[b-wm80pb9tyn] .validation-error,
.validation-error[b-wm80pb9tyn] {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
    font-weight: 500;
}

/* SKU Barcode Trigger */
.sku-label-row[b-wm80pb9tyn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.btn-view-barcode[b-wm80pb9tyn] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background-color: #faf9f5;
    border: 1px solid #e5e3dc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-view-barcode:hover[b-wm80pb9tyn] {
    color: var(--ut-gold, #e8a000);
    background-color: #fef3c7;
}

/* Unit Selection */
.unit-custom-wrapper[b-wm80pb9tyn] {
    position: relative;
    margin-top: 0.25rem;
}

[b-wm80pb9tyn] .unit-custom-wrapper .form-input,
.unit-custom-wrapper .form-input[b-wm80pb9tyn] {
    padding-right: 2.5rem;
}

.unit-cancel-btn[b-wm80pb9tyn] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    color: #9ca3af;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.unit-cancel-btn:hover[b-wm80pb9tyn] {
    color: #4b5563;
}

/* Checkbox Card */
.checkbox-card[b-wm80pb9tyn] {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-card-label[b-wm80pb9tyn] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
}

.checkbox-input[b-wm80pb9tyn] {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    accent-color: var(--ut-gold, #e8a000);
    cursor: pointer;
    margin-top: 0.125rem;
}

.checkbox-text-group[b-wm80pb9tyn] {
    display: flex;
    flex-direction: column;
}

.checkbox-main-text[b-wm80pb9tyn] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1a1a1a;
    transition: color 0.15s ease;
}

.checkbox-card-label:hover .checkbox-main-text[b-wm80pb9tyn] {
    color: var(--ut-gold, #e8a000);
}

.checkbox-sub-text[b-wm80pb9tyn] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 400;
    margin-top: 0.125rem;
}

/* Position & Product Image Elements */
[b-wm80pb9tyn] .file-upload-input,
.file-upload-input[b-wm80pb9tyn] {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    color: #6b7280;
    cursor: pointer;
}

[b-wm80pb9tyn] .file-upload-input::file-selector-button,
.file-upload-input[b-wm80pb9tyn]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #f9fafb;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

[b-wm80pb9tyn] .file-upload-input::file-selector-button:hover,
.file-upload-input[b-wm80pb9tyn]::file-selector-button:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
}

.position-image-row[b-wm80pb9tyn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.existing-images-row[b-wm80pb9tyn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.image-preview-badge-box[b-wm80pb9tyn] {
    position: relative;
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background-color: #f9fafb;
    flex-shrink: 0;
}

.image-preview-badge-box img[b-wm80pb9tyn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-remove-image-corner[b-wm80pb9tyn] {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: rgba(17, 24, 39, 0.75);
    color: #ffffff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-remove-image-corner:hover[b-wm80pb9tyn] {
    background-color: #111827;
}

/* Stock Info Card */
.stock-info-card[b-wm80pb9tyn] {
    padding: 1rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.stock-info-title[b-wm80pb9tyn] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Variants Section */
.variants-container[b-wm80pb9tyn] {
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.variants-header-bar[b-wm80pb9tyn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.variants-header-bar h4[b-wm80pb9tyn] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.variants-header-bar p[b-wm80pb9tyn] {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0.125rem 0 0 0;
}

.btn-add-variant[b-wm80pb9tyn] {
    padding: 0.5rem 1rem;
    background-color: var(--ut-gold, #e8a000);
    color: #ffffff;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease;
}

.btn-add-variant:hover[b-wm80pb9tyn] {
    background-color: #d69300;
}

.variant-card[b-wm80pb9tyn] {
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    margin-bottom: 1rem;
}

.variant-card-header[b-wm80pb9tyn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.variant-group-title[b-wm80pb9tyn] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.btn-remove-group[b-wm80pb9tyn] {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-remove-group:hover[b-wm80pb9tyn] {
    color: #b91c1c;
}

.variant-card-grid[b-wm80pb9tyn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .variant-card-grid[b-wm80pb9tyn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.variant-image-preview-box[b-wm80pb9tyn] {
    width: 5rem;
    height: 5rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-image-preview-box img[b-wm80pb9tyn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.variant-image-placeholder[b-wm80pb9tyn] {
    color: #d1d5db;
}

.variant-sizes-list[b-wm80pb9tyn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.variant-size-row[b-wm80pb9tyn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

[b-wm80pb9tyn] .size-stock-input,
.size-stock-input[b-wm80pb9tyn] {
    width: 5.5rem !important;
    min-width: 5.5rem !important;
    max-width: 5.5rem !important;
    flex: 0 0 5.5rem !important;
}

[b-wm80pb9tyn] .size-name-input,
.size-name-input[b-wm80pb9tyn] {
    flex: 1 1 auto !important;
    min-width: 4.5rem !important;
}

.hide-size-checkbox-label[b-wm80pb9tyn] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.hide-size-tag[b-wm80pb9tyn] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.hide-size-tag.is-hidden[b-wm80pb9tyn] {
    color: #ef4444;
}

.hide-size-tag.is-visible[b-wm80pb9tyn] {
    color: #9ca3af;
}

.btn-remove-size[b-wm80pb9tyn] {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.btn-remove-size:hover[b-wm80pb9tyn] {
    color: #b91c1c;
}

.btn-add-size[b-wm80pb9tyn] {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ut-gold, #e8a000);
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-add-size:hover[b-wm80pb9tyn] {
    color: #d69300;
}

/* Form Actions */
.form-actions-bar[b-wm80pb9tyn] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid #f3f4f6;
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}

.btn-cancel[b-wm80pb9tyn] {
    padding: 0.5rem 1rem;
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-cancel:hover[b-wm80pb9tyn] {
    background-color: #f9fafb;
}

.btn-submit-update[b-wm80pb9tyn] {
    padding: 0.5rem 1.25rem;
    background-color: #111827;
    color: #ffffff;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 8rem;
    transition: background-color 0.15s ease;
}

.btn-submit-update:hover:not(:disabled)[b-wm80pb9tyn] {
    background-color: #1f2937;
}

.btn-submit-update:disabled[b-wm80pb9tyn] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Barcode Modal */
.modal-overlay[b-wm80pb9tyn] {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.modal-dialog[b-wm80pb9tyn] {
    position: relative;
    width: 100%;
    max-width: 36rem; /* 576px */
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .modal-dialog[b-wm80pb9tyn] {
        padding: 2rem;
    }
}

.modal-header-row[b-wm80pb9tyn] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 1.25rem;
}

.modal-title-group h3[b-wm80pb9tyn] {
    font-weight: 700;
    color: #111827;
    font-size: 1.125rem;
    margin: 0;
}

.modal-title-group p[b-wm80pb9tyn] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0.125rem 0 0 0;
}

.modal-title-group p .sku-text[b-wm80pb9tyn] {
    font-weight: 600;
    color: #374151;
}

.btn-modal-close[b-wm80pb9tyn] {
    color: #9ca3af;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
    padding: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-modal-close:hover[b-wm80pb9tyn] {
    color: #374151;
    background-color: #e5e7eb;
}

.barcode-canvas-box[b-wm80pb9tyn] {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
    min-height: 220px;
}

.barcode-render-img[b-wm80pb9tyn] {
    max-width: 100%;
    height: 10rem;
    object-fit: contain;
    margin-bottom: 1rem;
    background-color: #ffffff;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

@media (min-width: 640px) {
    .barcode-render-img[b-wm80pb9tyn] {
        height: 12rem;
    }
}

.barcode-render-img:hover[b-wm80pb9tyn] {
    transform: scale(1.05);
}

.barcode-sku-badge[b-wm80pb9tyn] {
    font-size: 1.125rem;
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.1em;
    background-color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.barcode-type-pill[b-wm80pb9tyn] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    margin-top: 0.5rem;
    background-color: rgba(229, 231, 235, 0.6);
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
}

.modal-footer-row[b-wm80pb9tyn] {
    margin-top: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.btn-modal-dismiss[b-wm80pb9tyn] {
    padding: 0.625rem 1.25rem;
    background-color: #111827;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-modal-dismiss:hover[b-wm80pb9tyn] {
    background-color: #1f2937;
}
/* /Components/Views/Admin/Locations/Locations.razor.rz.scp.css */
/* ==========================================================================
   MASTER DATA - LOCATIONS SPECIALIZED CSS
   ========================================================================== */

.md-page[b-cwxrwgwpyn] {
  padding: 2rem 0;
  min-height: 100vh;
}

.md-container[b-cwxrwgwpyn] {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .md-container[b-cwxrwgwpyn] {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .md-container[b-cwxrwgwpyn] {
    padding: 0 2rem;
  }
}

/* Header */
.md-header[b-cwxrwgwpyn] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.md-title[b-cwxrwgwpyn] {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.2;
  margin: 0;
}

/* Alerts */
.md-alert[b-cwxrwgwpyn] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  font-size: 0.875rem;
}

.md-alert--success[b-cwxrwgwpyn] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
}

.md-alert--danger[b-cwxrwgwpyn] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
}

.md-alert-icon[b-cwxrwgwpyn] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Card Form (Add/Create) */
.md-card[b-cwxrwgwpyn] {
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-card-header[b-cwxrwgwpyn] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
}

.md-card-title[b-cwxrwgwpyn] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.md-card-subtitle[b-cwxrwgwpyn] {
  font-size: 0.72rem;
  color: #8a8880;
  margin: 0.125rem 0 0;
}

.md-card-body[b-cwxrwgwpyn] {
  padding: 1.25rem 1.5rem;
}

.md-form-row[b-cwxrwgwpyn] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .md-form-row[b-cwxrwgwpyn] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.md-form-group[b-cwxrwgwpyn] {
  flex: 1;
  width: 100%;
}

.md-label[b-cwxrwgwpyn] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.md-label .required[b-cwxrwgwpyn] {
  color: var(--ut-danger, #d94040);
}

.md-label .optional[b-cwxrwgwpyn] {
  color: #9ca3af;
  font-weight: 400;
  text-transform: none;
}

.md-input[b-cwxrwgwpyn] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-md, 0.5rem);
  outline: none;
  transition: all 0.15s ease;
  color: var(--ut-dark, #1a1a1a);
}

.md-input:focus[b-cwxrwgwpyn] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.md-btn-submit[b-cwxrwgwpyn] {
  padding: 0.5rem 1.25rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.md-btn-submit:hover[b-cwxrwgwpyn] {
  background-color: #d49300;
}

.md-btn-submit:active[b-cwxrwgwpyn] {
  transform: scale(0.97);
}

.md-hint[b-cwxrwgwpyn] {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Table Container */
.md-table-card[b-cwxrwgwpyn] {
  background-color: transparent;
}

@media (min-width: 768px) {
  .md-table-card[b-cwxrwgwpyn] {
    background-color: #ffffff;
    border-radius: var(--ut-radius-lg, 0.75rem);
    border: 1px solid var(--ut-border-color, #e5e3dc);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
}

.md-table-wrap[b-cwxrwgwpyn] {
  display: none;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .md-table-wrap[b-cwxrwgwpyn] {
    display: block;
  }
}

.md-table[b-cwxrwgwpyn] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.md-table thead tr[b-cwxrwgwpyn] {
  background-color: var(--ut-dark, #1a1a1a);
}

.md-th[b-cwxrwgwpyn] {
  padding: 0.875rem 1.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c8c5bc;
  white-space: nowrap;
}

.md-th--num[b-cwxrwgwpyn] {
  width: 3rem;
}

.md-th--actions[b-cwxrwgwpyn] {
  width: 8rem;
}

.md-tbody tr[b-cwxrwgwpyn] {
  border-bottom: 1px solid #f0ede5;
  transition: background-color 0.1s ease;
}

.md-tbody tr:hover:not(.md-edit-row)[b-cwxrwgwpyn] {
  background-color: #faf9f5;
}

.md-td[b-cwxrwgwpyn] {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.md-td--num[b-cwxrwgwpyn] {
  color: #9ca3af;
}

.md-td--name[b-cwxrwgwpyn] {
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  white-space: nowrap;
}

.md-td--desc[b-cwxrwgwpyn] {
  color: #4b5563;
}

.md-badge-count[b-cwxrwgwpyn] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.md-badge-count:hover[b-cwxrwgwpyn] {
  background-color: var(--ut-success, #1a7a30);
  color: #ffffff;
}

.md-actions-wrap[b-cwxrwgwpyn] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.md-btn-edit[b-cwxrwgwpyn] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3a3835;
  padding: 0.375rem 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-btn-edit:hover[b-cwxrwgwpyn] {
  color: var(--ut-dark, #1a1a1a);
  background-color: #f0ede5;
}

.md-btn-delete[b-cwxrwgwpyn] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-danger, #d94040);
  padding: 0.375rem 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-btn-delete:hover[b-cwxrwgwpyn] {
  background-color: #fee2e2;
  color: #b83535;
}

/* Edit Inline Form */
.md-edit-row[b-cwxrwgwpyn] {
  background-color: #faf9f5;
}

.md-edit-row td[b-cwxrwgwpyn] {
  padding: 1rem 1.5rem;
}

.md-edit-form[b-cwxrwgwpyn] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .md-edit-form[b-cwxrwgwpyn] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.md-edit-actions[b-cwxrwgwpyn] {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .md-edit-actions[b-cwxrwgwpyn] {
    width: auto;
  }
}

.md-btn-save[b-cwxrwgwpyn] {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
  .md-btn-save[b-cwxrwgwpyn] {
    flex: none;
  }
}

.md-btn-save:hover[b-cwxrwgwpyn] {
  background-color: #d49300;
}

.md-btn-cancel[b-cwxrwgwpyn] {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
  .md-btn-cancel[b-cwxrwgwpyn] {
    flex: none;
  }
}

.md-btn-cancel:hover[b-cwxrwgwpyn] {
  background-color: #f0ede5;
}

/* Mobile Cards View */
.md-mobile-list[b-cwxrwgwpyn] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .md-mobile-list[b-cwxrwgwpyn] {
    display: none;
  }
}

.md-mobile-card[b-cwxrwgwpyn] {
  padding: 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-mobile-header[b-cwxrwgwpyn] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.md-mobile-num[b-cwxrwgwpyn] {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 700;
}

.md-mobile-name[b-cwxrwgwpyn] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  margin: 0.125rem 0 0;
}

.md-mobile-desc[b-cwxrwgwpyn] {
  font-size: 0.75rem;
  color: #4b5563;
  margin: 0 0 1rem;
}

.md-mobile-actions[b-cwxrwgwpyn] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0ede5;
}

.md-mobile-actions .md-btn-edit[b-cwxrwgwpyn],
.md-mobile-actions .md-btn-delete[b-cwxrwgwpyn] {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
}

.md-mobile-edit-card[b-cwxrwgwpyn] {
  padding: 1.25rem;
  background-color: #faf9f5;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Pagination */
.md-pagination[b-cwxrwgwpyn] {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-pagination-info[b-cwxrwgwpyn] {
  font-size: 0.75rem;
  color: #8a8880;
}

.md-pagination-nav[b-cwxrwgwpyn] {
  display: flex;
  gap: 0.5rem;
}

.md-pagination-btn[b-cwxrwgwpyn] {
  padding: 0.25rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-sm, 0.25rem);
  font-size: 0.875rem;
  cursor: pointer;
}

.md-pagination-btn:disabled[b-cwxrwgwpyn] {
  opacity: 0.5;
  cursor: not-allowed;
}

.md-pagination-btn:hover:not(:disabled)[b-cwxrwgwpyn] {
  background-color: #f9fafb;
}
/* /Components/Views/Admin/ProductList/ProductList.razor.rz.scp.css */
/* ==========================================================================
   PRODUCTLIST - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

.productlist-page[b-fl5coqwz4j] {
  padding: 1.5rem 0 3rem;
  min-height: 100vh;
}

.productlist-container[b-fl5coqwz4j] {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .productlist-container[b-fl5coqwz4j] {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .productlist-container[b-fl5coqwz4j] {
    padding: 0 2rem;
  }
}

/* Header */
.productlist-header[b-fl5coqwz4j] {
  margin-bottom: 1.5rem;
}

.productlist-header-inner[b-fl5coqwz4j] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.productlist-title[b-fl5coqwz4j] {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.productlist-title .text-accent[b-fl5coqwz4j] {
  color: var(--ut-gold, #e8a000);
}

.productlist-subtitle[b-fl5coqwz4j] {
  font-size: 0.72rem;
  font-weight: 500;
  color: #a09e99;
  margin-top: 0.25rem;
}

.productlist-btn-add[b-fl5coqwz4j] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--ut-dark, #1a1a1a);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--ut-radius-md, 0.5rem);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.productlist-btn-add:hover[b-fl5coqwz4j] {
  background-color: #333333;
}

/* Alerts */
.productlist-alert[b-fl5coqwz4j] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  font-size: 0.875rem;
}

.productlist-alert--success[b-fl5coqwz4j] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
}

.productlist-alert--danger[b-fl5coqwz4j] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
}

.productlist-alert-icon[b-fl5coqwz4j] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Category Filter Pills */
.productlist-categories[b-fl5coqwz4j] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.productlist-categories[b-fl5coqwz4j]::-webkit-scrollbar {
  display: none;
}

.productlist-cat-btn[b-fl5coqwz4j] {
  padding: 0.375rem 0.875rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  background-color: #ffffff;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.15s ease;
}

.productlist-cat-btn:hover[b-fl5coqwz4j] {
  border-color: #d1d5db;
  color: var(--ut-dark, #1a1a1a);
}

.productlist-cat-btn--active[b-fl5coqwz4j] {
  background-color: var(--ut-dark, #1a1a1a) !important;
  color: #ffffff !important;
  border-color: var(--ut-dark, #1a1a1a) !important;
}

/* Main Table Card */
.productlist-card[b-fl5coqwz4j] {
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.productlist-card-header[b-fl5coqwz4j] {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .productlist-card-header[b-fl5coqwz4j] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.productlist-card-heading[b-fl5coqwz4j] {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.productlist-card-desc[b-fl5coqwz4j] {
  font-size: 0.82rem;
  color: #8a8880;
  margin: 0.125rem 0 0;
}

.productlist-search-wrap[b-fl5coqwz4j] {
  position: relative;
  width: 100%;
}

@media (min-width: 640px) {
  .productlist-search-wrap[b-fl5coqwz4j] {
    width: 16rem;
  }
}

.productlist-search-input[b-fl5coqwz4j] {
  width: 100%;
  padding-left: 2.25rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-md, 0.5rem);
  outline: none;
  transition: all 0.15s ease;
  color: var(--ut-dark, #1a1a1a);
}

.productlist-search-input:focus[b-fl5coqwz4j] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.productlist-search-icon[b-fl5coqwz4j] {
  width: 1rem;
  height: 1rem;
  color: #9ca3af;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Table View */
.productlist-table-wrap[b-fl5coqwz4j] {
  display: none;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .productlist-table-wrap[b-fl5coqwz4j] {
    display: block;
  }
}

.productlist-table[b-fl5coqwz4j] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.productlist-table thead tr[b-fl5coqwz4j] {
  background-color: var(--ut-dark, #1a1a1a);
}

.productlist-th[b-fl5coqwz4j] {
  padding: 0.75rem 0.875rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c8c5bc;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.productlist-th:hover[b-fl5coqwz4j] {
  color: #ffffff;
}

.productlist-th-inner[b-fl5coqwz4j] {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.productlist-th-center[b-fl5coqwz4j] {
  text-align: center;
}

.productlist-th-center .productlist-th-inner[b-fl5coqwz4j] {
  justify-content: center;
}

.productlist-th-action[b-fl5coqwz4j] {
  color: var(--ut-gold, #e8a000);
  font-weight: 700;
  text-align: center;
  cursor: default;
}

.productlist-sort-icon[b-fl5coqwz4j] {
  color: var(--ut-gold, #e8a000);
  font-size: 10px;
}

.productlist-tbody tr[b-fl5coqwz4j] {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.productlist-tbody tr:hover[b-fl5coqwz4j] {
  background-color: rgba(249, 250, 251, 0.6);
}

.productlist-td[b-fl5coqwz4j] {
  padding: 0.75rem 0.875rem;
  vertical-align: middle;
}

.productlist-td-center[b-fl5coqwz4j] {
  text-align: center;
}

/* Product Cell */
.productlist-prod-cell[b-fl5coqwz4j] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.productlist-img-thumb[b-fl5coqwz4j] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  object-fit: cover;
  border: 1px solid #f3f4f6;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.productlist-img-thumb:hover[b-fl5coqwz4j] {
  box-shadow: 0 0 0 2px var(--ut-dark, #1a1a1a);
}

.productlist-img-placeholder[b-fl5coqwz4j] {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #9ca3af;
}

.productlist-prod-name-btn[b-fl5coqwz4j] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  transition: color 0.15s ease;
}

.productlist-prod-name-btn:hover[b-fl5coqwz4j] {
  color: var(--ut-gold, #e8a000);
  text-decoration: underline;
}

.productlist-prod-unit[b-fl5coqwz4j] {
  font-size: 10px;
  color: #9ca3af;
}

.productlist-sku-code[b-fl5coqwz4j] {
  font-size: 0.75rem;
  font-family: var(--ut-font-mono, monospace);
  font-weight: 700;
  color: #1f2937;
  background-color: #f3f4f6;
  padding: 0.25rem 0.5rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  border: 1px solid rgba(229, 231, 235, 0.6);
}

.productlist-cat-badge[b-fl5coqwz4j] {
  font-size: 10px;
  font-weight: 600;
  color: #374151;
  background-color: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
}

.productlist-pts-badge[b-fl5coqwz4j] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ut-gold, #e8a000);
  font-weight: 700;
  font-size: 0.75rem;
  background-color: rgba(232, 160, 0, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
}

.productlist-stock-status[b-fl5coqwz4j] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 11px;
  font-weight: 600;
}

.productlist-stock-status--in[b-fl5coqwz4j] {
  color: var(--ut-success, #1a7a30);
}

.productlist-stock-status--out[b-fl5coqwz4j] {
  color: var(--ut-danger, #d94040);
}

.productlist-stock-dot[b-fl5coqwz4j] {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
}

.productlist-stock-dot--in[b-fl5coqwz4j] {
  background-color: var(--ut-success, #1a7a30);
}

.productlist-stock-dot--out[b-fl5coqwz4j] {
  background-color: var(--ut-danger, #d94040);
}

/* Action Buttons */
.productlist-actions[b-fl5coqwz4j] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.productlist-btn-edit[b-fl5coqwz4j] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  padding: 0.375rem 0.625rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.productlist-btn-edit:hover[b-fl5coqwz4j] {
  background-color: var(--ut-gold, #e8a000);
  color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.productlist-btn-delete[b-fl5coqwz4j] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-danger, #d94040);
  padding: 0.375rem 0.625rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  transition: all 0.15s ease;
  cursor: pointer;
}

.productlist-btn-delete:hover[b-fl5coqwz4j] {
  background-color: var(--ut-danger, #d94040);
  color: #ffffff;
  border-color: var(--ut-danger, #d94040);
}

/* Mobile List View */
.productlist-mobile-list[b-fl5coqwz4j] {
  display: block;
}

@media (min-width: 768px) {
  .productlist-mobile-list[b-fl5coqwz4j] {
    display: none;
  }
}

.productlist-mobile-item[b-fl5coqwz4j] {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.productlist-mobile-item:hover[b-fl5coqwz4j] {
  background-color: rgba(249, 250, 251, 0.5);
}

.productlist-mobile-header[b-fl5coqwz4j] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.productlist-mobile-prod[b-fl5coqwz4j] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.productlist-mobile-grid[b-fl5coqwz4j] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 0.5rem;
  font-size: 0.75rem;
  padding: 0.625rem 0.75rem;
  background-color: rgba(249, 250, 251, 0.6);
  border-radius: var(--ut-radius-md, 0.5rem);
  border-top: 1px solid rgba(243, 244, 246, 0.7);
  border-bottom: 1px solid rgba(243, 244, 246, 0.7);
}

.productlist-mobile-footer[b-fl5coqwz4j] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
}

/* Pagination Footer */
.productlist-pagination[b-fl5coqwz4j] {
  padding: 1rem 1.5rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.productlist-pagination-info[b-fl5coqwz4j] {
  font-size: 0.875rem;
  color: #6b7280;
}

.productlist-pagination-nav[b-fl5coqwz4j] {
  display: flex;
  gap: 0.5rem;
}

.productlist-pagination-btn[b-fl5coqwz4j] {
  padding: 0.25rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #ffffff;
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.productlist-pagination-btn:hover:not(:disabled)[b-fl5coqwz4j] {
  background-color: #f9fafb;
}

.productlist-pagination-btn:disabled[b-fl5coqwz4j] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Image Modal */
.productlist-modal-backdrop[b-fl5coqwz4j] {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.productlist-modal-dialog[b-fl5coqwz4j] {
  position: relative;
  width: 100%;
  max-width: 56rem;
  max-height: 90vh;
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.productlist-modal-header[b-fl5coqwz4j] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 0.5rem;
}

.productlist-modal-title[b-fl5coqwz4j] {
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productlist-modal-close[b-fl5coqwz4j] {
  color: #6b7280;
  background-color: #f3f4f6;
  border: none;
  border-radius: var(--ut-radius-md, 0.5rem);
  padding: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.productlist-modal-close:hover[b-fl5coqwz4j] {
  color: var(--ut-dark, #1a1a1a);
  background-color: #e5e7eb;
}

.productlist-modal-body[b-fl5coqwz4j] {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(249, 250, 251, 0.5);
  border-bottom-left-radius: var(--ut-radius-md, 0.5rem);
  border-bottom-right-radius: var(--ut-radius-md, 0.5rem);
  min-height: 300px;
}

.productlist-modal-img[b-fl5coqwz4j] {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--ut-radius-md, 0.5rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.productlist-modal-thumbs[b-fl5coqwz4j] {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 0.5rem;
}

.productlist-modal-thumb-btn[b-fl5coqwz4j] {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: 2px solid transparent;
  overflow: hidden;
  opacity: 0.6;
  transition: all 0.15s ease;
}

.productlist-modal-thumb-btn:hover[b-fl5coqwz4j] {
  opacity: 1;
}

.productlist-modal-thumb-btn--active[b-fl5coqwz4j] {
  border-color: var(--ut-gold, #e8a000) !important;
  opacity: 1 !important;
}
/* /Components/Views/Admin/Returns/Returns.razor.rz.scp.css */
/* ==========================================================================
   RETURNS & TRACKING - SPECIALIZED COMPONENT STYLES
   Scoped styles for Admin Returns & Group-based Asset Tracking
   ========================================================================== */

.returns-container[b-4s61qewunr] {
    padding: 2rem 1rem;
    max-width: 80rem; /* 1280px */
    margin: 0 auto;
}

@media (min-width: 640px) {
    .returns-container[b-4s61qewunr] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.page-title[b-4s61qewunr] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.25;
    margin: 0 0 1.5rem 0;
}

/* Alerts */
.alert-banner[b-4s61qewunr] {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-banner p[b-4s61qewunr] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.alert-success[b-4s61qewunr] {
    background-color: #eef9f0;
    border: 1px solid #b8e8c0;
    color: #1a7a30;
}

.alert-danger[b-4s61qewunr] {
    background-color: #fef0f0;
    border: 1px solid #f8c0c0;
    color: #d94040;
}

/* Filters */
.filters-card[b-4s61qewunr] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e3dc;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.filters-row[b-4s61qewunr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .filters-row[b-4s61qewunr] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }
}

.filter-group-search[b-4s61qewunr] {
    flex: 1;
    min-width: 180px;
    width: 100%;
}

.filter-group-select[b-4s61qewunr] {
    min-width: 150px;
    width: 100%;
}

@media (min-width: 1024px) {
    .filter-group-select[b-4s61qewunr] {
        width: auto;
    }
}

.filter-label[b-4s61qewunr] {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a8880;
    margin-bottom: 0.375rem;
}

.search-wrapper[b-4s61qewunr] {
    position: relative;
    width: 100%;
}

.search-icon[b-4s61qewunr] {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.filter-input[b-4s61qewunr] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    font-size: 0.8125rem;
    background-color: #f5f4f0;
    border: 1px solid #e5e3dc;
    border-radius: 0.5rem;
    outline: none;
    color: #1a1a1a;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.filter-input:focus[b-4s61qewunr],
.filter-select:focus[b-4s61qewunr] {
    background-color: #ffffff;
    border-color: var(--ut-gold, #e8a000);
}

.filter-select[b-4s61qewunr] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    background-color: #f5f4f0;
    border: 1px solid #e5e3dc;
    border-radius: 0.5rem;
    outline: none;
    color: #1a1a1a;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.filter-actions[b-4s61qewunr] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    justify-content: flex-end;
}

@media (min-width: 1024px) {
    .filter-actions[b-4s61qewunr] {
        width: auto;
    }
}

.btn-apply[b-4s61qewunr] {
    padding: 0.5rem 1.25rem;
    background-color: var(--ut-gold, #e8a000);
    color: #1a1a1a;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-apply:hover[b-4s61qewunr] {
    background-color: #d49300;
}

.btn-apply:active[b-4s61qewunr] {
    transform: scale(0.98);
}

/* Empty State */
.empty-box[b-4s61qewunr] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e3dc;
    padding: 4rem 1.5rem;
    text-align: center;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.empty-icon-circle[b-4s61qewunr] {
    width: 4rem;
    height: 4rem;
    background-color: #f5f4f0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.empty-icon-circle svg[b-4s61qewunr] {
    width: 2rem;
    height: 2rem;
    color: #8a8780;
}

.empty-box h3[b-4s61qewunr] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 0.25rem 0;
}

.empty-box p[b-4s61qewunr] {
    font-size: 0.875rem;
    color: #8a8780;
    margin: 0;
}

/* Group Cards Stack */
.groups-stack[b-4s61qewunr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.group-card[b-4s61qewunr] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid #e5e3dc;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.group-header-row[b-4s61qewunr] {
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: background-color 0.15s ease;
}

.group-header-row:hover[b-4s61qewunr] {
    background-color: #faf9f5;
}

.group-header-left[b-4s61qewunr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.group-avatar[b-4s61qewunr] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #f5f4f0;
    border: 1px solid #e5e3dc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.group-avatar svg[b-4s61qewunr] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ut-gold, #e8a000);
}

.group-info-text[b-4s61qewunr] {
    flex: 1;
    min-width: 0;
}

.group-title-line[b-4s61qewunr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.group-event-title[b-4s61qewunr] {
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-size: 1rem;
}

.badge-counter[b-4s61qewunr] {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 10px;
    font-weight: 700;
    background-color: #f5f4f0;
    color: #8a8780;
    border: 1px solid #e5e3dc;
}

.badge-state-done[b-4s61qewunr] {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 10px;
    font-weight: 700;
    background-color: #eef9f0;
    color: #1a7a30;
    border: 1px solid #b8e8c0;
}

.badge-state-borrowed[b-4s61qewunr] {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 10px;
    font-weight: 700;
    background-color: #fff8e6;
    color: #b37a00;
    border: 1px solid #ffe099;
}

.group-meta-tags[b-4s61qewunr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.meta-item[b-4s61qewunr] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.meta-item svg[b-4s61qewunr] {
    width: 0.875rem;
    height: 0.875rem;
}

.group-toggle-icon[b-4s61qewunr] {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: transform 0.2s ease, color 0.15s ease;
}

.group-toggle-icon.is-expanded[b-4s61qewunr] {
    transform: rotate(180deg);
}

/* Group Items Table Container */
.group-details-area[b-4s61qewunr] {
    border-top: 1px solid #e5e3dc;
    background-color: #faf9f5;
}

.items-table-desktop[b-4s61qewunr] {
    display: none;
    overflow-x: auto;
}

@media (min-width: 768px) {
    .items-table-desktop[b-4s61qewunr] {
        display: block;
    }
}

.group-items-table[b-4s61qewunr] {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.group-items-table thead tr[b-4s61qewunr] {
    background-color: #f5f4f0;
    border-bottom: 1px solid #e5e3dc;
}

.group-items-table th[b-4s61qewunr] {
    padding: 0.75rem 1.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a8780;
}

.group-items-table td[b-4s61qewunr] {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #e5e3dc;
    background-color: #ffffff;
}

.group-items-table tr:hover td[b-4s61qewunr] {
    background-color: #faf9f5;
}

.item-sku-code[b-4s61qewunr] {
    font-size: 10px;
    color: #6b7280;
    font-family: ui-monospace, monospace;
}

/* Status Badges */
.badge-return-state[b-4s61qewunr] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 10px;
    font-weight: 700;
}

.badge-return-state.state-returned[b-4s61qewunr] {
    border: 1px solid #b8e8c0;
    background-color: #eef9f0;
    color: #1a7a30;
}

.badge-return-state.state-draft[b-4s61qewunr] {
    border: 1px solid #c4b5fd;
    background-color: #ede9fe;
    color: #6d28d9;
}

.badge-return-state.state-waiting[b-4s61qewunr] {
    border: 1px solid #bae6fd;
    background-color: #e0f2fe;
    color: #1a6b8a;
}

.badge-return-state.state-pending[b-4s61qewunr] {
    border: 1px solid #fde68a;
    background-color: #fef3c7;
    color: #92400e;
}

/* Action Buttons inside row */
.btn-cancel-draft[b-4s61qewunr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background-color: #fef0f0;
    border: 1px solid #f8c0c0;
    color: #d94040;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-cancel-draft:hover[b-4s61qewunr] {
    background-color: #fee2e2;
}

.btn-open-return[b-4s61qewunr] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--ut-gold, #e8a000);
    border: 1px solid transparent;
    color: #1a1a1a;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-open-return:hover[b-4s61qewunr] {
    background-color: #d49300;
}

/* Mobile Items List */
.items-list-mobile[b-4s61qewunr] {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .items-list-mobile[b-4s61qewunr] {
        display: none;
    }
}

.mobile-item-row[b-4s61qewunr] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e3dc;
}

.mobile-item-top[b-4s61qewunr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.mobile-item-bottom[b-4s61qewunr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
}

/* Batch Submit Banner */
.batch-banner[b-4s61qewunr] {
    padding: 1rem 1.25rem;
    border-top: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.batch-banner.banner-ready[b-4s61qewunr] {
    background-color: #ede9fe;
    border-color: #c4b5fd;
}

.batch-banner.banner-warning[b-4s61qewunr] {
    background-color: #fff8e6;
    border-color: #ffe099;
}

.banner-message[b-4s61qewunr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.banner-message.ready[b-4s61qewunr] {
    color: #6d28d9;
    font-size: 0.75rem;
    font-weight: 700;
}

.banner-message.warning[b-4s61qewunr] {
    color: #b37a00;
    font-size: 0.75rem;
    font-weight: 700;
}

.btn-batch-submit[b-4s61qewunr] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: #6d28d9;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-batch-submit:hover[b-4s61qewunr] {
    background-color: #5b21b6;
}

.btn-batch-submit:active[b-4s61qewunr] {
    transform: scale(0.98);
}

/* Pagination Bar */
.pagination-card[b-4s61qewunr] {
    margin-top: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e3dc;
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}

.pagination-label[b-4s61qewunr] {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.pagination-buttons[b-4s61qewunr] {
    display: flex;
    gap: 0.5rem;
}

.btn-nav-page[b-4s61qewunr] {
    padding: 0.375rem 0.75rem;
    border: 1px solid #e5e3dc;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-nav-page:hover:not(:disabled)[b-4s61qewunr] {
    background-color: #f9fafb;
}

.btn-nav-page:disabled[b-4s61qewunr] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Return Modal */
.modal-overlay[b-4s61qewunr] {
    position: fixed;
    inset: 0;
    z-index: 215;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-backdrop-blur[b-4s61qewunr] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-dialog-box[b-4s61qewunr] {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #e5e3dc;
    width: 100%;
    max-width: 28rem; /* 448px */
    z-index: 10;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-head-row[b-4s61qewunr] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0ede5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-head-title[b-4s61qewunr] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.btn-close-x[b-4s61qewunr] {
    color: #a09e99;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 700;
    transition: color 0.15s ease;
}

.btn-close-x:hover[b-4s61qewunr] {
    color: #1a1a1a;
}

.modal-body-scroll[b-4s61qewunr] {
    padding: 1.5rem;
    overflow-y: auto;
}

.condition-inputs-grid[b-4s61qewunr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .condition-inputs-grid[b-4s61qewunr] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.field-label[b-4s61qewunr] {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a8880;
    margin-bottom: 0.375rem;
}

.field-input[b-4s61qewunr] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    background-color: #f5f4f0;
    border: 1px solid #e5e3dc;
    border-radius: 0.5rem;
    outline: none;
    color: #1a1a1a;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.field-input:focus[b-4s61qewunr],
.field-textarea:focus[b-4s61qewunr] {
    border-color: var(--ut-gold, #e8a000);
}

.field-textarea[b-4s61qewunr] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    background-color: #f5f4f0;
    border: 1px solid #e5e3dc;
    border-radius: 0.5rem;
    outline: none;
    color: #1a1a1a;
    resize: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.modal-foot-row[b-4s61qewunr] {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e3dc;
    background-color: #faf9f5;
    flex-shrink: 0;
}

.btn-save-draft[b-4s61qewunr] {
    padding: 0.625rem 1.25rem;
    background-color: var(--ut-gold, #e8a000);
    color: #1a1a1a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-save-draft:hover:not(:disabled)[b-4s61qewunr] {
    background-color: #d49300;
}

.btn-save-draft:active:not(:disabled)[b-4s61qewunr] {
    transform: scale(0.98);
}

.btn-save-draft:disabled[b-4s61qewunr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel-modal[b-4s61qewunr] {
    display: inline-flex;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background-color: #ffffff;
    border: 1px solid #e5e3dc;
    color: #3a3835;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-cancel-modal:hover[b-4s61qewunr] {
    background-color: #f0ede5;
}
/* /Components/Views/Admin/RoleAdmin/RoleAdmin.razor.rz.scp.css */
/* ==========================================================================
   ROLEADMIN - COMPONENT SCOPED STYLES
   ========================================================================== */

.roleadmin-page[b-0yt4x122dl] {
  padding-top: 2rem;
  padding-bottom: 2rem;
  min-height: 100vh;
}

.roleadmin-wrap[b-0yt4x122dl] {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .roleadmin-wrap[b-0yt4x122dl] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .roleadmin-wrap[b-0yt4x122dl] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Header */
.roleadmin-header[b-0yt4x122dl] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.roleadmin-title[b-0yt4x122dl] {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.25;
  margin: 0;
}

.btn-add-role[b-0yt4x122dl] {
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-add-role:hover[b-0yt4x122dl] {
  background-color: #d49300;
}

.btn-add-role:active[b-0yt4x122dl] {
  transform: scale(0.96);
}

/* Alerts */
.roleadmin-alert[b-0yt4x122dl] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.roleadmin-alert-success[b-0yt4x122dl] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: #1a7a30;
}

.roleadmin-alert-danger[b-0yt4x122dl] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: #d94040;
}

/* Search Bar */
.roleadmin-search-card[b-0yt4x122dl] {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .roleadmin-search-card[b-0yt4x122dl] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.search-input-wrap[b-0yt4x122dl] {
  position: relative;
  width: 100%;
}

@media (min-width: 640px) {
  .search-input-wrap[b-0yt4x122dl] {
    width: 20rem;
  }
}

.search-icon-pos[b-0yt4x122dl] {
  position: absolute;
  left: 0.75rem;
  top: 0.625rem;
  color: #9ca3af;
}

.search-field-input[b-0yt4x122dl] {
  display: block;
  width: 100%;
  padding-left: 2.25rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  background-color: #f5f4f0;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.search-field-input:focus[b-0yt4x122dl] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.sort-hint[b-0yt4x122dl] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
}

/* Table Card */
.roleadmin-card[b-0yt4x122dl] {
  background-color: transparent;
}

@media (min-width: 768px) {
  .roleadmin-card[b-0yt4x122dl] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid var(--ut-border, #e5e3dc);
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
}

.roleadmin-table-desktop[b-0yt4x122dl] {
  display: none;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .roleadmin-table-desktop[b-0yt4x122dl] {
    display: block;
  }
}

.roleadmin-table[b-0yt4x122dl] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.roleadmin-thead-tr[b-0yt4x122dl] {
  background-color: #1a1a1a;
}

.roleadmin-th[b-0yt4x122dl] {
  padding: 0.875rem 1.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c8c5bc;
}

.roleadmin-th.sortable[b-0yt4x122dl] {
  cursor: pointer;
  transition: color 0.15s ease;
}

.roleadmin-th.sortable:hover[b-0yt4x122dl] {
  color: #ffffff;
}

.roleadmin-tr[b-0yt4x122dl] {
  border-bottom: 1px solid #f0ede5;
  transition: background-color 0.1s ease;
}

.roleadmin-tr:hover[b-0yt4x122dl] {
  background-color: #faf9f5;
}

.roleadmin-td[b-0yt4x122dl] {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.user-count-circle[b-0yt4x122dl] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: #f5f4f0;
  border: 1px solid #e5e3dc;
  color: #374151;
  font-size: 0.75rem;
  font-weight: 700;
}

.badge-active-pill[b-0yt4x122dl] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: #1a7a30;
}

.badge-inactive-pill[b-0yt4x122dl] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: #d94040;
}

.table-actions-flex[b-0yt4x122dl] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.btn-tbl-view[b-0yt4x122dl] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-gold, #e8a000);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  background-color: #fefaf0;
  border: 1px solid #fbe8c0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-tbl-view:hover[b-0yt4x122dl] {
  color: #d49300;
}

.btn-tbl-edit[b-0yt4x122dl] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3a3835;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-tbl-edit:hover[b-0yt4x122dl] {
  background-color: #f0ede5;
  color: #1a1a1a;
}

.btn-tbl-delete[b-0yt4x122dl] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #d94040;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-tbl-delete:hover[b-0yt4x122dl] {
  background-color: #fee2e2;
  color: #b83535;
}

/* Mobile Cards */
.roleadmin-mobile-list[b-0yt4x122dl] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .roleadmin-mobile-list[b-0yt4x122dl] {
    display: none;
  }
}

.roleadmin-mobile-card[b-0yt4x122dl] {
  padding: 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-card-top[b-0yt4x122dl] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.mobile-card-meta[b-0yt4x122dl] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid #f0ede5;
  font-size: 0.75rem;
}

.mobile-card-btn-group[b-0yt4x122dl] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0ede5;
  justify-content: flex-end;
}

/* Pagination */
.roleadmin-pagination[b-0yt4x122dl] {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-pagination[b-0yt4x122dl] {
  padding: 0.25rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-pagination:hover:not(:disabled)[b-0yt4x122dl] {
  background-color: #f9fafb;
}

.btn-pagination:disabled[b-0yt4x122dl] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modal Dialog */
.modal-overlay[b-0yt4x122dl] {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  padding: 1rem;
}

.modal-card[b-0yt4x122dl] {
  background-color: #ffffff;
  border-radius: 1rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 28rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-header[b-0yt4x122dl] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-title[b-0yt4x122dl] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.modal-close-icon[b-0yt4x122dl] {
  color: #9ca3af;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.modal-close-icon:hover[b-0yt4x122dl] {
  color: #4b5563;
}

.modal-body[b-0yt4x122dl] {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.modal-field-label[b-0yt4x122dl] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.modal-field-input[b-0yt4x122dl],
.modal-field-textarea[b-0yt4x122dl] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.82rem;
  background-color: #f5f4f0;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.modal-field-input:focus[b-0yt4x122dl],
.modal-field-textarea:focus[b-0yt4x122dl] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.modal-footer[b-0yt4x122dl] {
  padding: 1rem 1.5rem;
  border-top: 1px solid #f0ede5;
  background-color: #faf9f5;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-modal-cancel[b-0yt4x122dl] {
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-modal-cancel:hover[b-0yt4x122dl] {
  background-color: #f0ede5;
}

.btn-modal-save[b-0yt4x122dl] {
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-modal-save:hover[b-0yt4x122dl] {
  background-color: #d49300;
}
/* /Components/Views/Admin/RoleAdminDetail/RoleAdminDetail.razor.rz.scp.css */
/* ==========================================================================
   ROLEADMIN DETAIL - COMPONENT SCOPED STYLES
   ========================================================================== */

.role-detail-page[b-yxpbg2bwud] {
  padding-top: 2rem;
  padding-bottom: 2rem;
  min-height: 100vh;
}

.role-detail-wrap[b-yxpbg2bwud] {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .role-detail-wrap[b-yxpbg2bwud] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .role-detail-wrap[b-yxpbg2bwud] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.btn-back-link[b-yxpbg2bwud] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: color 0.15s ease;
}

.btn-back-link:hover[b-yxpbg2bwud] {
  color: #1f2937;
}

.role-state-card[b-yxpbg2bwud] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  padding: 3rem;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.role-detail-stack[b-yxpbg2bwud] {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Role Info Card */
.role-info-card[b-yxpbg2bwud] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-header[b-yxpbg2bwud] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
}

.card-title[b-yxpbg2bwud] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.card-subtitle[b-yxpbg2bwud] {
  font-size: 0.72rem;
  color: #8a8880;
  margin: 0.125rem 0 0 0;
}

.card-body[b-yxpbg2bwud] {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.75rem;
}

.info-grid-2[b-yxpbg2bwud] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .info-grid-2[b-yxpbg2bwud] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.info-label[b-yxpbg2bwud] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.125rem;
}

.info-val-title[b-yxpbg2bwud] {
  font-weight: 700;
  font-size: 0.875rem;
  color: #111827;
}

.info-val-text[b-yxpbg2bwud] {
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

.info-status-row[b-yxpbg2bwud] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-top: 1px solid #f0ede5;
  border-bottom: 1px solid #f0ede5;
}

.badge-status-dot[b-yxpbg2bwud] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 10px;
}

.badge-status-dot.active[b-yxpbg2bwud] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: #1a7a30;
}

.badge-status-dot.inactive[b-yxpbg2bwud] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: #d94040;
}

.status-dot[b-yxpbg2bwud] {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
}

.status-dot.active[b-yxpbg2bwud] {
  background-color: #1a7a30;
}

.status-dot.inactive[b-yxpbg2bwud] {
  background-color: #d94040;
}

.info-meta-grid[b-yxpbg2bwud] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Permissions Matrix Card */
.perms-card[b-yxpbg2bwud] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.perms-header-flex[b-yxpbg2bwud] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .perms-header-flex[b-yxpbg2bwud] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.perms-header-actions[b-yxpbg2bwud] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-perm-action[b-yxpbg2bwud] {
  padding: 0.375rem 0.75rem;
  background-color: #f5f4f0;
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-perm-action:hover[b-yxpbg2bwud] {
  background-color: #eae8e0;
}

.btn-save-perms[b-yxpbg2bwud] {
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-save-perms:hover[b-yxpbg2bwud] {
  background-color: #d49300;
}

.btn-save-perms:active[b-yxpbg2bwud] {
  transform: scale(0.96);
}

.perms-alert-success[b-yxpbg2bwud] {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: #1a7a30;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.perms-groups-grid[b-yxpbg2bwud] {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .perms-groups-grid[b-yxpbg2bwud] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.perms-group-box[b-yxpbg2bwud] {
  background-color: #faf9f5;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid #f0ede5;
}

.perms-group-header[b-yxpbg2bwud] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ut-border, #e5e3dc);
}

.perms-group-title[b-yxpbg2bwud] {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.perms-group-actions[b-yxpbg2bwud] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10px;
}

.btn-group-toggle-select[b-yxpbg2bwud] {
  color: var(--ut-gold, #e8a000);
  background: transparent;
  border: none;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.btn-group-toggle-select:hover[b-yxpbg2bwud] {
  text-decoration: underline;
}

.btn-group-toggle-clear[b-yxpbg2bwud] {
  color: #6b7280;
  background: transparent;
  border: none;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.btn-group-toggle-clear:hover[b-yxpbg2bwud] {
  text-decoration: underline;
}

.perms-items-stack[b-yxpbg2bwud] {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.perms-item-label[b-yxpbg2bwud] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: #374151;
  user-select: none;
  transition: color 0.15s ease;
}

.perms-item-label:hover[b-yxpbg2bwud] {
  color: #111827;
}
/* /Components/Views/Admin/Scanner/Scanner.razor.rz.scp.css */
/* ==========================================================================
   SCANNER - SPECIALIZED COMPONENT STYLES
   Scoped styles for Barcode Scanner Operations
   ========================================================================== */

.scanner-page-container[b-u3fb921xu3] {
    width: 100%;
    min-height: 100vh;
    padding: 1.5rem 1rem 6rem 1rem;
    max-width: 56rem; /* 896px */
    margin: 0 auto;
    font-family: inherit;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .scanner-page-container[b-u3fb921xu3] {
        padding: 1.5rem 2.5rem 3rem 2.5rem;
    }
}

/* Back Button */
.btn-back-nav[b-u3fb921xu3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e3dc;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    background-color: #ffffff;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: all 0.15s ease;
}

.btn-back-nav:hover[b-u3fb921xu3] {
    border-color: #000000;
    background-color: #000000;
    color: #ffffff;
}

/* Page Header */
.scanner-page-title[b-u3fb921xu3] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ut-dark, #1a1a1a);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.scanner-page-title .brand-accent[b-u3fb921xu3] {
    color: var(--ut-gold, #e8a000);
}

.scanner-page-date[b-u3fb921xu3] {
    font-size: 0.72rem;
    font-weight: 500;
    color: #a09e99;
    margin-top: 0.25rem;
    margin-bottom: 2rem;
}

/* Alert Banners */
.alert-banner[b-u3fb921xu3] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.alert-banner.alert-success[b-u3fb921xu3] {
    background-color: #eef9f0;
    border: 1px solid #b8e8c0;
    color: #1a7a30;
}

.alert-banner.alert-danger[b-u3fb921xu3] {
    background-color: #fef0f0;
    border: 1px solid #f8c0c0;
    color: #c0392b;
}

/* Camera Scanner Card */
.camera-card[b-u3fb921xu3] {
    background-color: #ffffff;
    border: 1px solid #eae8e1;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

.camera-card-header[b-u3fb921xu3] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0ede5;
}

.camera-card-title[b-u3fb921xu3] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
    margin: 0;
}

.camera-card-desc[b-u3fb921xu3] {
    font-size: 0.72rem;
    color: #a09e99;
    margin: 0.125rem 0 0 0;
}

.camera-viewport-box[b-u3fb921xu3] {
    position: relative;
    background-color: #1a1a1a;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.camera-video[b-u3fb921xu3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-idle-overlay[b-u3fb921xu3] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #1a1a1a;
    z-index: 10;
}

.camera-idle-overlay p[b-u3fb921xu3] {
    font-size: 0.75rem;
    color: #8a8780;
    margin: 0;
}

.camera-scan-overlay[b-u3fb921xu3] {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 20;
}

.scan-frame[b-u3fb921xu3] {
    position: relative;
    width: 72%;
    height: 52%;
}

.corner-tl[b-u3fb921xu3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-top: 2.5px solid var(--ut-gold, #e8a000);
    border-left: 2.5px solid var(--ut-gold, #e8a000);
    border-top-left-radius: 3px;
}

.corner-tr[b-u3fb921xu3] {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-top: 2.5px solid var(--ut-gold, #e8a000);
    border-right: 2.5px solid var(--ut-gold, #e8a000);
    border-top-right-radius: 3px;
}

.corner-bl[b-u3fb921xu3] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-bottom: 2.5px solid var(--ut-gold, #e8a000);
    border-left: 2.5px solid var(--ut-gold, #e8a000);
    border-bottom-left-radius: 3px;
}

.corner-br[b-u3fb921xu3] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-bottom: 2.5px solid var(--ut-gold, #e8a000);
    border-right: 2.5px solid var(--ut-gold, #e8a000);
    border-bottom-right-radius: 3px;
}

.scan-laser-line[b-u3fb921xu3] {
    position: absolute;
    width: 100%;
    top: 50%;
    border-bottom: 1px solid #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: scanAnim-b-u3fb921xu3 2s infinite ease-in-out alternate;
}

@keyframes scanAnim-b-u3fb921xu3 {
    0% { top: 10%; }
    100% { top: 90%; }
}

.camera-card-actions[b-u3fb921xu3] {
    padding: 0 1rem 1rem 1rem;
}

.btn-camera-start[b-u3fb921xu3] {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    background-color: var(--ut-gold, #e8a000);
    color: #1a1a1a;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-camera-start:hover[b-u3fb921xu3] {
    background-color: #d49300;
}

.btn-camera-start:active[b-u3fb921xu3] {
    transform: scale(0.98);
}

.btn-camera-stop[b-u3fb921xu3] {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    background-color: #1a1a1a;
    color: #ffffff;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-camera-stop:hover[b-u3fb921xu3] {
    background-color: #333333;
}

.btn-camera-stop:active[b-u3fb921xu3] {
    transform: scale(0.98);
}

/* Transaction Details Form Card */
.form-card[b-u3fb921xu3] {
    background-color: #ffffff;
    border: 1px solid #eae8e1;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.form-header-row[b-u3fb921xu3] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0ede5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-title[b-u3fb921xu3] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
    margin: 0;
}

.badge-scanned-feedback[b-u3fb921xu3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background-color: #eef9f0;
    border: 1px solid #b8e8c0;
    color: #1a7a30;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 9999px;
    margin-left: 0.5rem;
}

.form-body-pad[b-u3fb921xu3] {
    padding: 1.25rem;
}

.field-block[b-u3fb921xu3] {
    margin-bottom: 1rem;
}

.field-label[b-u3fb921xu3] {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #a09e99;
    margin-bottom: 0.375rem;
}

.field-label .required-star[b-u3fb921xu3] {
    color: #d94040;
}

.field-label .optional-note[b-u3fb921xu3] {
    color: #b0ada8;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

[b-u3fb921xu3] .form-input-box,
[b-u3fb921xu3] .form-select-box,
.form-input-box[b-u3fb921xu3],
.form-select-box[b-u3fb921xu3] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.875rem;
    font-size: 0.82rem;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    outline: none;
    color: #1a1a1a;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

[b-u3fb921xu3] .form-input-box:hover,
[b-u3fb921xu3] .form-select-box:hover,
.form-input-box:hover[b-u3fb921xu3],
.form-select-box:hover[b-u3fb921xu3] {
    border-color: #9ca3af;
}

[b-u3fb921xu3] .form-input-box:focus,
[b-u3fb921xu3] .form-select-box:focus,
.form-input-box:focus[b-u3fb921xu3],
.form-select-box:focus[b-u3fb921xu3] {
    background-color: #ffffff;
    border-color: var(--ut-gold, #e8a000);
    box-shadow: 0 0 0 3px rgba(232, 160, 0, 0.2);
}

.section-box[b-u3fb921xu3] {
    background-color: #faf9f5;
    border: 1px solid #e5e3dc;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.section-divider-title[b-u3fb921xu3] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ut-gold, #e8a000);
    margin-bottom: 0.875rem;
}

.section-divider-title[b-u3fb921xu3]::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #e5e3dc;
}

.item-row[b-u3fb921xu3] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.item-row:last-child[b-u3fb921xu3] {
    margin-bottom: 0;
}

.item-sku-col[b-u3fb921xu3] {
    flex: 1;
}

.item-qty-col[b-u3fb921xu3] {
    width: 100px;
    flex-shrink: 0;
}

.btn-remove-row[b-u3fb921xu3] {
    padding: 0.5rem;
    color: #d94040;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-remove-row:hover[b-u3fb921xu3] {
    background-color: #fef0f0;
}

.btn-add-item-row[b-u3fb921xu3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    color: var(--ut-gold, #e8a000);
    font-weight: 700;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-top: 0.875rem;
    transition: color 0.15s ease;
}

.btn-add-item-row:hover[b-u3fb921xu3] {
    color: #c98d00;
}

.form-grid-2[b-u3fb921xu3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .form-grid-2[b-u3fb921xu3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.btn-submit-scanner[b-u3fb921xu3] {
    width: 100%;
    padding: 0.875rem;
    background-color: var(--ut-gold, #e8a000);
    color: #1a1a1a;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.1s ease;
}

.btn-submit-scanner:hover:not(:disabled)[b-u3fb921xu3] {
    background-color: #d49300;
}

.btn-submit-scanner:active:not(:disabled)[b-u3fb921xu3] {
    transform: scale(0.98);
}

.btn-submit-scanner:disabled[b-u3fb921xu3] {
    opacity: 0.7;
    cursor: not-allowed;
}
/* /Components/Views/Admin/Units/Units.razor.rz.scp.css */
/* ==========================================================================
   MASTER DATA - UNITS SPECIALIZED CSS
   ========================================================================== */

.md-page[b-h6t10n3uhh] {
  padding: 2rem 0;
  min-height: 100vh;
}

.md-container[b-h6t10n3uhh] {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .md-container[b-h6t10n3uhh] {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .md-container[b-h6t10n3uhh] {
    padding: 0 2rem;
  }
}

/* Header */
.md-header[b-h6t10n3uhh] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.md-title[b-h6t10n3uhh] {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.2;
  margin: 0;
}

/* Alerts */
.md-alert[b-h6t10n3uhh] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--ut-radius-md, 0.5rem);
  font-size: 0.875rem;
}

.md-alert--success[b-h6t10n3uhh] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
}

.md-alert--danger[b-h6t10n3uhh] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
}

.md-alert-icon[b-h6t10n3uhh] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Card Form (Add/Create) */
.md-card[b-h6t10n3uhh] {
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-card-header[b-h6t10n3uhh] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
}

.md-card-title[b-h6t10n3uhh] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.md-card-body[b-h6t10n3uhh] {
  padding: 1.25rem 1.5rem;
}

.md-form-row[b-h6t10n3uhh] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .md-form-row[b-h6t10n3uhh] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.md-form-group[b-h6t10n3uhh] {
  flex: 1;
  width: 100%;
}

.md-label[b-h6t10n3uhh] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.md-label .required[b-h6t10n3uhh] {
  color: var(--ut-danger, #d94040);
}

.md-input[b-h6t10n3uhh] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-md, 0.5rem);
  outline: none;
  transition: all 0.15s ease;
  color: var(--ut-dark, #1a1a1a);
}

.md-input:focus[b-h6t10n3uhh] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.md-btn-submit[b-h6t10n3uhh] {
  padding: 0.5rem 1.25rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.md-btn-submit:hover[b-h6t10n3uhh] {
  background-color: #d49300;
}

.md-btn-submit:active[b-h6t10n3uhh] {
  transform: scale(0.97);
}

.md-hint[b-h6t10n3uhh] {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Table Container */
.md-table-card[b-h6t10n3uhh] {
  background-color: transparent;
}

@media (min-width: 768px) {
  .md-table-card[b-h6t10n3uhh] {
    background-color: #ffffff;
    border-radius: var(--ut-radius-lg, 0.75rem);
    border: 1px solid var(--ut-border-color, #e5e3dc);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
}

.md-table-wrap[b-h6t10n3uhh] {
  display: none;
  overflow-x: auto;
}

@media (min-width: 768px) {
  .md-table-wrap[b-h6t10n3uhh] {
    display: block;
  }
}

.md-table[b-h6t10n3uhh] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.md-table thead tr[b-h6t10n3uhh] {
  background-color: var(--ut-dark, #1a1a1a);
}

.md-th[b-h6t10n3uhh] {
  padding: 0.875rem 1.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c8c5bc;
  white-space: nowrap;
}

.md-th--num[b-h6t10n3uhh] {
  width: 3rem;
}

.md-th--actions[b-h6t10n3uhh] {
  width: 8rem;
}

.md-tbody tr[b-h6t10n3uhh] {
  border-bottom: 1px solid #f0ede5;
  transition: background-color 0.1s ease;
}

.md-tbody tr:hover:not(.md-edit-row)[b-h6t10n3uhh] {
  background-color: #faf9f5;
}

.md-td[b-h6t10n3uhh] {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.md-td--num[b-h6t10n3uhh] {
  color: #9ca3af;
}

.md-td--name[b-h6t10n3uhh] {
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  white-space: nowrap;
}

.md-badge-count[b-h6t10n3uhh] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.md-badge-count:hover[b-h6t10n3uhh] {
  background-color: var(--ut-success, #1a7a30);
  color: #ffffff;
}

.md-actions-wrap[b-h6t10n3uhh] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.md-btn-edit[b-h6t10n3uhh] {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3a3835;
  padding: 0.375rem 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-btn-edit:hover[b-h6t10n3uhh] {
  color: var(--ut-dark, #1a1a1a);
  background-color: #f0ede5;
}

.md-btn-delete[b-h6t10n3uhh] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-danger, #d94040);
  padding: 0.375rem 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-btn-delete:hover[b-h6t10n3uhh] {
  background-color: #fee2e2;
  color: #b83535;
}

/* Edit Inline Form */
.md-edit-row[b-h6t10n3uhh] {
  background-color: #faf9f5;
}

.md-edit-row td[b-h6t10n3uhh] {
  padding: 1rem 1.5rem;
}

.md-edit-form[b-h6t10n3uhh] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .md-edit-form[b-h6t10n3uhh] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.md-edit-actions[b-h6t10n3uhh] {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .md-edit-actions[b-h6t10n3uhh] {
    width: auto;
  }
}

.md-btn-save[b-h6t10n3uhh] {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
  .md-btn-save[b-h6t10n3uhh] {
    flex: none;
  }
}

.md-btn-save:hover[b-h6t10n3uhh] {
  background-color: #d49300;
}

.md-btn-cancel[b-h6t10n3uhh] {
  flex: 1;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (min-width: 640px) {
  .md-btn-cancel[b-h6t10n3uhh] {
    flex: none;
  }
}

.md-btn-cancel:hover[b-h6t10n3uhh] {
  background-color: #f0ede5;
}

/* Mobile Cards View */
.md-mobile-list[b-h6t10n3uhh] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .md-mobile-list[b-h6t10n3uhh] {
    display: none;
  }
}

.md-mobile-card[b-h6t10n3uhh] {
  padding: 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-mobile-header[b-h6t10n3uhh] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.md-mobile-num[b-h6t10n3uhh] {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 700;
}

.md-mobile-name[b-h6t10n3uhh] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  margin: 0.125rem 0 0;
}

.md-mobile-actions[b-h6t10n3uhh] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0ede5;
}

.md-mobile-actions .md-btn-edit[b-h6t10n3uhh],
.md-mobile-actions .md-btn-delete[b-h6t10n3uhh] {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
}

.md-mobile-edit-card[b-h6t10n3uhh] {
  padding: 1.25rem;
  background-color: #faf9f5;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Pagination */
.md-pagination[b-h6t10n3uhh] {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-lg, 0.75rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.md-pagination-info[b-h6t10n3uhh] {
  font-size: 0.75rem;
  color: #8a8880;
}

.md-pagination-nav[b-h6t10n3uhh] {
  display: flex;
  gap: 0.5rem;
}

.md-pagination-btn[b-h6t10n3uhh] {
  padding: 0.25rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-sm, 0.25rem);
  font-size: 0.875rem;
  cursor: pointer;
}

.md-pagination-btn:disabled[b-h6t10n3uhh] {
  opacity: 0.5;
  cursor: not-allowed;
}

.md-pagination-btn:hover:not(:disabled)[b-h6t10n3uhh] {
  background-color: #f9fafb;
}
/* /Components/Views/Admin/UserCreate/UserCreate.razor.rz.scp.css */
/* ==========================================================================
   USER CREATE - COMPONENT SCOPED STYLES
   ========================================================================== */

.user-form-page[b-1leqso3ggr] {
  padding-top: 2rem;
  padding-bottom: 2rem;
  min-height: 100vh;
}

.user-form-wrap[b-1leqso3ggr] {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .user-form-wrap[b-1leqso3ggr] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .user-form-wrap[b-1leqso3ggr] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.btn-back-link[b-1leqso3ggr] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: color 0.15s ease;
}

.btn-back-link:hover[b-1leqso3ggr] {
  color: #1f2937;
}

.form-alert-danger[b-1leqso3ggr] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: #d94040;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.user-form-card[b-1leqso3ggr] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.user-form-header[b-1leqso3ggr] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-form-title[b-1leqso3ggr] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.user-form-subtitle[b-1leqso3ggr] {
  font-size: 0.72rem;
  color: #8a8880;
  margin: 0.125rem 0 0 0;
}

.user-form-body[b-1leqso3ggr] {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-section-title[b-1leqso3ggr] {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8880;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0ede5;
}

.form-grid-2[b-1leqso3ggr] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-grid-2[b-1leqso3ggr] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field-label[b-1leqso3ggr] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.field-input[b-1leqso3ggr],
.field-select[b-1leqso3ggr] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.82rem;
  background-color: #f5f4f0;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.field-input:focus[b-1leqso3ggr],
.field-select:focus[b-1leqso3ggr] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.field-input.has-error[b-1leqso3ggr] {
  border-color: #d94040;
}

.field-input.has-error:focus[b-1leqso3ggr] {
  border-color: #d94040;
}

.error-badge[b-1leqso3ggr] {
  margin-top: 0.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: #d94040;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

/* Category Scope Box */
.scope-box[b-1leqso3ggr] {
  background-color: #faf9f5;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scope-global-label[b-1leqso3ggr] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: #1f2937;
  font-weight: 700;
}

.scope-hint[b-1leqso3ggr] {
  font-size: 0.68rem;
  color: #6b7280;
  margin: 0 0 0.5rem 0;
}

.scope-grid[b-1leqso3ggr] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-height: 12rem;
  overflow-y: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ut-border, #e5e3dc);
}

@media (min-width: 640px) {
  .scope-grid[b-1leqso3ggr] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .scope-grid[b-1leqso3ggr] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.scope-item-label[b-1leqso3ggr] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: #374151;
  user-select: none;
}

.scope-item-label.disabled-look[b-1leqso3ggr] {
  opacity: 0.5;
}

/* Action Buttons */
.form-actions[b-1leqso3ggr] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #f0ede5;
}

.btn-cancel[b-1leqso3ggr] {
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-cancel:hover[b-1leqso3ggr] {
  background-color: #f0ede5;
}

.btn-submit[b-1leqso3ggr] {
  padding: 0.5rem 1.25rem;
  background-color: var(--ut-gold, #e8a000);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-submit:hover[b-1leqso3ggr] {
  background-color: #d49300;
}

.btn-submit:active[b-1leqso3ggr] {
  transform: scale(0.96);
}
/* /Components/Views/Admin/UserEdit/UserEdit.razor.rz.scp.css */
/* ==========================================================================
   USER EDIT - COMPONENT SCOPED STYLES
   ========================================================================== */

.user-form-page[b-jf0gt360hx] {
  padding-top: 2rem;
  padding-bottom: 2rem;
  min-height: 100vh;
}

.user-form-wrap[b-jf0gt360hx] {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .user-form-wrap[b-jf0gt360hx] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .user-form-wrap[b-jf0gt360hx] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.btn-back-link[b-jf0gt360hx] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: color 0.15s ease;
}

.btn-back-link:hover[b-jf0gt360hx] {
  color: #1f2937;
}

.form-alert-danger[b-jf0gt360hx] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: #d94040;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.user-state-card[b-jf0gt360hx] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  padding: 3rem;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.not-found-title[b-jf0gt360hx] {
  font-size: 1.125rem;
  font-weight: 700;
  color: #d94040;
  margin: 0;
}

.not-found-subtitle[b-jf0gt360hx] {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

.user-form-card[b-jf0gt360hx] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.user-form-header[b-jf0gt360hx] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-form-title[b-jf0gt360hx] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.user-form-subtitle[b-jf0gt360hx] {
  font-size: 0.72rem;
  color: #8a8880;
  margin: 0.125rem 0 0 0;
}

.user-id-badge[b-jf0gt360hx] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background-color: #f5f4f0;
  border: 1px solid #e5e3dc;
  color: #374151;
}

.user-form-body[b-jf0gt360hx] {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-section-title[b-jf0gt360hx] {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8880;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0ede5;
}

.form-grid-2[b-jf0gt360hx] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-grid-2[b-jf0gt360hx] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field-label[b-jf0gt360hx] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.field-input[b-jf0gt360hx],
.field-select[b-jf0gt360hx] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  font-size: 0.82rem;
  background-color: #f5f4f0;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.field-input:focus[b-jf0gt360hx],
.field-select:focus[b-jf0gt360hx] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.field-input.has-error[b-jf0gt360hx] {
  border-color: #d94040;
}

.field-input.has-error:focus[b-jf0gt360hx] {
  border-color: #d94040;
}

.error-badge[b-jf0gt360hx] {
  margin-top: 0.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: #d94040;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

/* Category Scope Box */
.scope-box[b-jf0gt360hx] {
  background-color: #faf9f5;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scope-global-label[b-jf0gt360hx] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: #1f2937;
  font-weight: 700;
}

.scope-hint[b-jf0gt360hx] {
  font-size: 0.68rem;
  color: #6b7280;
  margin: 0 0 0.5rem 0;
}

.scope-grid[b-jf0gt360hx] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-height: 12rem;
  overflow-y: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ut-border, #e5e3dc);
}

@media (min-width: 640px) {
  .scope-grid[b-jf0gt360hx] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .scope-grid[b-jf0gt360hx] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.scope-item-label[b-jf0gt360hx] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: #374151;
  user-select: none;
}

.scope-item-label.disabled-look[b-jf0gt360hx] {
  opacity: 0.5;
}

/* Action Buttons */
.form-actions[b-jf0gt360hx] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #f0ede5;
}

.btn-cancel[b-jf0gt360hx] {
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-cancel:hover[b-jf0gt360hx] {
  background-color: #f0ede5;
}

.btn-submit[b-jf0gt360hx] {
  padding: 0.5rem 1.25rem;
  background-color: var(--ut-gold, #e8a000);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-submit:hover[b-jf0gt360hx] {
  background-color: #d49300;
}

.btn-submit:active[b-jf0gt360hx] {
  transform: scale(0.96);
}
/* /Components/Views/Admin/Users/Users.razor.rz.scp.css */
/* ==========================================================================
   USERS - COMPONENT SCOPED STYLES
   ========================================================================== */

.users-page-container[b-knzxnadepw] {
  padding-top: 2rem;
  padding-bottom: 2rem;
  min-height: 100vh;
}

.users-content-wrap[b-knzxnadepw] {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .users-content-wrap[b-knzxnadepw] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .users-content-wrap[b-knzxnadepw] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Header */
.users-header-row[b-knzxnadepw] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.users-header-title[b-knzxnadepw] {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.25;
  margin: 0;
}

.users-header-subtitle[b-knzxnadepw] {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0.125rem 0 0 0;
}

.btn-add-user[b-knzxnadepw] {
  padding: 0.5rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn-add-user:hover[b-knzxnadepw] {
  background-color: #d49300;
}

.btn-add-user:active[b-knzxnadepw] {
  transform: scale(0.96);
}

/* Alert messages */
.users-alert[b-knzxnadepw] {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.users-alert-success[b-knzxnadepw] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: #1a7a30;
}

.users-alert-danger[b-knzxnadepw] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: #d94040;
}

/* Card container */
.users-card[b-knzxnadepw] {
  background-color: transparent;
}

@media (min-width: 768px) {
  .users-card[b-knzxnadepw] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    border: 1px solid var(--ut-border, #e5e3dc);
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
}

.users-card-header[b-knzxnadepw] {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #f0ede5;
  background-color: #faf9f5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

@media (min-width: 640px) {
  .users-card-header[b-knzxnadepw] {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.users-card-title[b-knzxnadepw] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.users-card-subtitle[b-knzxnadepw] {
  font-size: 0.72rem;
  color: #8a8880;
  margin: 0.125rem 0 0 0;
}

/* Desktop Table View */
.users-table-desktop[b-knzxnadepw] {
  display: none;
}

@media (min-width: 768px) {
  .users-table-desktop[b-knzxnadepw] {
    display: block;
  }
}

.users-table[b-knzxnadepw] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.users-thead-tr[b-knzxnadepw] {
  background-color: #1a1a1a;
}

.users-th[b-knzxnadepw] {
  padding: 0.75rem 0.875rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c8c5bc;
}

.users-tr[b-knzxnadepw] {
  border-bottom: 1px solid #f0ede5;
  transition: background-color 0.1s ease;
}

.users-tr:hover[b-knzxnadepw] {
  background-color: #faf9f5;
}

.users-td[b-knzxnadepw] {
  padding: 0.625rem 0.875rem;
  font-size: 0.75rem;
  vertical-align: middle;
}

.users-td-index[b-knzxnadepw] {
  color: #9ca3af;
  text-align: center;
  width: 2.5rem;
}

.users-td-name[b-knzxnadepw] {
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
}

.users-td-nrp[b-knzxnadepw] {
  color: #4b5563;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.users-td-email[b-knzxnadepw] {
  color: #4b5563;
}

.users-td-points[b-knzxnadepw] {
  font-weight: 600;
  color: var(--ut-gold, #e8a000);
  text-align: center;
  width: 4rem;
}

.users-td-division[b-knzxnadepw] {
  color: #4b5563;
}

/* Badges */
.role-badge[b-knzxnadepw] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid;
  text-transform: uppercase;
}

.role-badge.superadmin[b-knzxnadepw] {
  background-color: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}

.role-badge.manager[b-knzxnadepw] {
  background-color: #e0f2fe;
  color: #1a6b8a;
  border-color: #bae6fd;
}

.role-badge.admin[b-knzxnadepw] {
  background-color: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.role-badge.default[b-knzxnadepw] {
  background-color: #f5f4f0;
  color: #8a8780;
  border-color: #e5e3dc;
}

.scope-pill[b-knzxnadepw] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: #1a7a30;
  white-space: nowrap;
}

/* Action Buttons */
.users-action-flex[b-knzxnadepw] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
}

.btn-action-edit[b-knzxnadepw] {
  font-size: 10px;
  font-weight: 700;
  color: #3a3835;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action-edit:hover[b-knzxnadepw] {
  background-color: #f0ede5;
  color: #1a1a1a;
}

.btn-action-delete[b-knzxnadepw] {
  font-size: 10px;
  font-weight: 700;
  color: #d94040;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action-delete:hover[b-knzxnadepw] {
  background-color: #fee2e2;
  color: #b83535;
}

/* Mobile Card View */
.users-mobile-list[b-knzxnadepw] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .users-mobile-list[b-knzxnadepw] {
    display: none;
  }
}

.user-mobile-card[b-knzxnadepw] {
  padding: 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.2s ease;
}

.user-mobile-card:hover[b-knzxnadepw] {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mobile-card-top[b-knzxnadepw] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.mobile-card-meta-grid[b-knzxnadepw] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f0ede5;
  font-size: 0.75rem;
}

.mobile-card-scope[b-knzxnadepw] {
  padding-top: 0.5rem;
  border-top: 1px solid #f0ede5;
  font-size: 0.75rem;
}

.mobile-card-actions[b-knzxnadepw] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0ede5;
  justify-content: flex-end;
}

.mobile-btn-edit[b-knzxnadepw] {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #3a3835;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-btn-edit:hover[b-knzxnadepw] {
  background-color: #f0ede5;
  color: #1a1a1a;
}

.mobile-btn-delete[b-knzxnadepw] {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #d94040;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mobile-btn-delete:hover[b-knzxnadepw] {
  background-color: #fee2e2;
  color: #b83535;
}

/* Pagination */
.users-pagination[b-knzxnadepw] {
  margin-top: 1rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.btn-pagination[b-knzxnadepw] {
  padding: 0.25rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-pagination:hover:not(:disabled)[b-knzxnadepw] {
  background-color: #f9fafb;
}

.btn-pagination:disabled[b-knzxnadepw] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* /Components/Views/Auth/CompleteProfile/CompleteProfile.razor.rz.scp.css */
/* ==========================================================================
   COMPLETE PROFILE - SCOPED COMPONENT STYLES
   United Tractors WMS Design System
   ========================================================================== */

.cp-header[b-w2fdeogvwp] {
  text-align: center;
  margin-bottom: 1.5rem;
}

.cp-title[b-w2fdeogvwp] {
  font-family: var(--ut-font-heading, 'Syne', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0;
}

.cp-subtitle[b-w2fdeogvwp] {
  font-size: 0.875rem;
  color: #8a8880;
  margin-top: 0.5rem;
}

.cp-form[b-w2fdeogvwp] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cp-form-group[b-w2fdeogvwp] {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cp-label[b-w2fdeogvwp] {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a5855;
}

.cp-input-wrap[b-w2fdeogvwp] {
  position: relative;
}

.cp-input[b-w2fdeogvwp] {
  width: 100%;
  height: 2.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  outline: none;
  transition: all 0.15s ease;
}

.cp-input[b-w2fdeogvwp]::placeholder {
  color: #a09e99;
}

.cp-input:focus[b-w2fdeogvwp] {
  border-color: var(--ut-gold, #e8a000);
  box-shadow: 0 0 0 4px rgba(232, 160, 0, 0.1);
}

.cp-btn-submit[b-w2fdeogvwp] {
  width: 100%;
  height: 2.75rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-weight: 900;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 12px rgba(232, 160, 0, 0.3);
  transition: all 0.15s ease;
}

.cp-btn-submit:hover[b-w2fdeogvwp] {
  background-color: #d49300;
}

.cp-btn-submit:active[b-w2fdeogvwp] {
  transform: scale(0.98);
}

.cp-btn-icon[b-w2fdeogvwp] {
  width: 1rem;
  height: 1rem;
}
/* /Components/Views/Auth/ForgotPassword/ForgotPassword.razor.rz.scp.css */
/* ==========================================================================
   FORGOT PASSWORD VIEW SPECIALIZED CSS
   ========================================================================== */

.auth-header[b-evntju3bgz] {
  margin-bottom: 24px;
  text-align: center;
}

.auth-title[b-evntju3bgz] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-evntju3bgz] {
  font-size: var(--font-size-sm);
  color: var(--ut-muted);
  margin: 0;
}

.auth-error-alert[b-evntju3bgz] {
  margin-bottom: 16px;
  padding: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--ut-danger);
  background-color: var(--ut-danger-bg);
  border: 1px solid var(--ut-danger-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.auth-success-alert[b-evntju3bgz] {
  margin-bottom: 16px;
  padding: 14px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #166534;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  text-align: center;
  line-height: 1.5;
}

.auth-field[b-evntju3bgz] {
  margin-bottom: 16px;
}

.login-actions[b-evntju3bgz] {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.login-btn[b-evntju3bgz] {
  width: 100%;
  padding: 12px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-link[b-evntju3bgz] {
  font-size: var(--font-size-xs);
  color: var(--ut-gold-dark);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-link:hover[b-evntju3bgz] {
  color: var(--ut-dark);
}

.btn-spinner[b-evntju3bgz] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: btn-spin-b-evntju3bgz 0.8s linear infinite;
  display: inline-block;
}

@keyframes btn-spin-b-evntju3bgz {
  to { transform: rotate(360deg); }
}
/* /Components/Views/Auth/Login/Login.razor.rz.scp.css */
/* ==========================================================================
   LOGIN VIEW SPECIALIZED CSS
   ========================================================================== */

.auth-header[b-m3dfghamxt] {
  margin-bottom: 24px;
}

.auth-title[b-m3dfghamxt] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-m3dfghamxt] {
  font-size: var(--font-size-sm);
  color: var(--ut-muted);
  margin: 0;
}

.auth-error-alert[b-m3dfghamxt] {
  margin-bottom: 16px;
  padding: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--ut-danger);
  background-color: var(--ut-danger-bg);
  border: 1px solid var(--ut-danger-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.auth-success-alert[b-m3dfghamxt] {
  margin-bottom: 16px;
  padding: 12px 14px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #166534;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  text-align: center;
  line-height: 1.5;
}

.auth-field[b-m3dfghamxt] {
  margin-bottom: 16px;
}

.auth-field-header[b-m3dfghamxt] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.auth-link[b-m3dfghamxt] {
  font-size: var(--font-size-xs);
  color: var(--ut-gold-dark);
  font-weight: 500;
  transition: color 0.15s ease;
}

.auth-link:hover[b-m3dfghamxt] {
  color: var(--ut-dark);
}

.password-input-wrapper[b-m3dfghamxt] {
  position: relative;
  width: 100%;
}

.password-input-wrapper input[b-m3dfghamxt] {
  padding-right: 42px;
}

.toggle-password-btn[b-m3dfghamxt] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--zinc-500);
}

.toggle-password-btn:hover[b-m3dfghamxt] {
  color: var(--zinc-800);
}

.remember-me-wrapper[b-m3dfghamxt] {
  display: block;
  margin-bottom: 20px;
}

.remember-me-label[b-m3dfghamxt] {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--zinc-600);
  gap: 10px;
}

.login-actions[b-m3dfghamxt] {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-btn[b-m3dfghamxt] {
  width: 100%;
  padding: 12px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Loading Overlay */
.login-overlay[b-m3dfghamxt] {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.login-overlay.hidden[b-m3dfghamxt] {
  display: none;
}

.login-overlay-card[b-m3dfghamxt] {
  background: #ffffff;
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--zinc-200);
}

.login-spinner[b-m3dfghamxt] {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(232, 160, 0, 0.2);
  border-top-color: var(--ut-gold);
  border-radius: 50%;
  animation: login-spin-b-m3dfghamxt 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes login-spin-b-m3dfghamxt {
  to { transform: rotate(360deg); }
}
/* /Components/Views/Auth/Profile/Profile.razor.rz.scp.css */
/* ==========================================================================
   PROFILE - SCOPED COMPONENT STYLES
   United Tractors WMS Design System
   ========================================================================== */

.profile-page[b-wlorntp9df] {
  width: 100%;
  min-height: 100vh;
  padding: 1.5rem 1rem 6rem;
  font-family: inherit;
}

@media (min-width: 768px) {
  .profile-page[b-wlorntp9df] {
    padding: 1.5rem 2.5rem 3rem;
  }
}

/* Back Button */
.profile-btn-back[b-wlorntp9df] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ut-dark, #1a1a1a);
  background-color: #ffffff;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: all 0.15s ease;
}

.profile-btn-back:hover[b-wlorntp9df] {
  border-color: #000000;
  background-color: #000000;
  color: #ffffff;
}

.profile-btn-back-icon[b-wlorntp9df] {
  width: 1rem;
  height: 1rem;
}

/* Page Header */
.profile-header[b-wlorntp9df] {
  margin-bottom: 2rem;
}

.profile-title[b-wlorntp9df] {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}

.profile-title-accent[b-wlorntp9df] {
  color: var(--ut-gold, #e8a000);
}

.profile-subtitle[b-wlorntp9df] {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ut-muted, #a09e99);
  margin-top: 0.25rem;
}

/* Profile Card */
.profile-card[b-wlorntp9df] {
  background-color: #ffffff;
  border: 1px solid #eae8e1;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
}

.profile-card-header[b-wlorntp9df] {
  padding: 1.5rem;
  border-bottom: 1px solid #f0ede5;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #faf9f5;
}

.profile-avatar[b-wlorntp9df] {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background-color: var(--ut-gold, #e8a000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.profile-name[b-wlorntp9df] {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.25;
  margin: 0;
}

.profile-role[b-wlorntp9df] {
  font-size: 0.75rem;
  color: #8a8880;
  font-weight: 600;
  margin: 0.25rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Card Body & Sections */
.profile-card-body[b-wlorntp9df] {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.profile-section-header[b-wlorntp9df] {
  margin-bottom: 1rem;
}

.profile-section-title[b-wlorntp9df] {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0 0 0.25rem;
}

.profile-section-desc[b-wlorntp9df] {
  font-size: 0.72rem;
  color: var(--ut-muted, #a09e99);
  margin: 0;
}

.profile-required-note[b-wlorntp9df] {
  color: #ef4444;
  font-weight: 600;
}

/* Pending Banner */
.profile-pending-banner[b-wlorntp9df] {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #fff8e6;
  border: 1px solid #f0c851;
}

.profile-pending-content[b-wlorntp9df] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.profile-pending-icon[b-wlorntp9df] {
  width: 1.25rem;
  height: 1.25rem;
  color: #d49300;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.profile-pending-title[b-wlorntp9df] {
  font-size: 0.875rem;
  font-weight: 700;
  color: #b37c00;
  margin: 0;
}

.profile-pending-text[b-wlorntp9df] {
  font-size: 0.75rem;
  color: #8a8880;
  margin: 0.25rem 0 0;
}

/* Form Styles */
.profile-form[b-wlorntp9df] {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-form-group[b-wlorntp9df] {
  display: flex;
  flex-direction: column;
}

.profile-label[b-wlorntp9df] {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.profile-required-mark[b-wlorntp9df] {
  color: #ef4444;
}

.profile-input[b-wlorntp9df],
.profile-select[b-wlorntp9df] {
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.profile-input:focus[b-wlorntp9df],
.profile-select:focus[b-wlorntp9df] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.profile-form-footer[b-wlorntp9df] {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 0.5rem;
}

.profile-btn-submit[b-wlorntp9df] {
  padding: 0.625rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--ut-dark, #1a1a1a);
  background-color: var(--ut-gold, #e8a000);
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.1s ease;
}

.profile-btn-submit:hover:not(:disabled)[b-wlorntp9df] {
  background-color: #d49300;
}

.profile-btn-submit:active:not(:disabled)[b-wlorntp9df] {
  transform: scale(0.97);
}

.profile-btn-submit:disabled[b-wlorntp9df] {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-msg-success[b-wlorntp9df] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ut-success, #1a7a30);
}

.profile-msg-error[b-wlorntp9df] {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ut-danger, #d94040);
}

/* Section Divider */
.profile-section-divider[b-wlorntp9df] {
  padding-top: 2rem;
  border-top: 1px solid #f0ede5;
}

/* Delete Account Section */
.profile-btn-danger[b-wlorntp9df] {
  padding: 0.625rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #ffffff;
  background-color: #dc2626;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.1s ease;
}

.profile-btn-danger:hover:not(:disabled)[b-wlorntp9df] {
  background-color: #ef4444;
}

.profile-btn-danger:active:not(:disabled)[b-wlorntp9df] {
  transform: scale(0.97);
}

.profile-btn-danger:disabled[b-wlorntp9df] {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile-delete-box[b-wlorntp9df] {
  padding: 1.5rem;
  background-color: #faf9f5;
  border: 1px solid #f0ede5;
  border-radius: 0.75rem;
}

.profile-delete-confirm-title[b-wlorntp9df] {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.profile-delete-confirm-desc[b-wlorntp9df] {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.5;
}

.profile-delete-input[b-wlorntp9df] {
  background-color: #ffffff;
}

.profile-delete-actions[b-wlorntp9df] {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-start;
  gap: 0.75rem;
}

.profile-btn-cancel[b-wlorntp9df] {
  padding: 0.625rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.1s ease;
}

.profile-btn-cancel:hover[b-wlorntp9df] {
  background-color: #f9fafb;
}

.profile-btn-cancel:active[b-wlorntp9df] {
  transform: scale(0.97);
}

/* ==========================================================================
   Password Input Wrapper & Toggle Button
   ========================================================================== */
.profile-password-wrapper[b-wlorntp9df] {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

.profile-password-wrapper .profile-input[b-wlorntp9df] {
  max-width: 100%;
  padding-right: 2.75rem;
}

.profile-toggle-password-btn[b-wlorntp9df] {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: #8a8880;
  border-radius: 0.25rem;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.profile-toggle-password-btn:hover[b-wlorntp9df] {
  color: #1a1a1a;
  background-color: rgba(0, 0, 0, 0.05);
}

.profile-toggle-password-btn svg[b-wlorntp9df] {
  width: 1.25rem;
  height: 1.25rem;
}

/* ==========================================================================
   Floating Toast Notification
   ========================================================================== */
.profile-toast[b-wlorntp9df] {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 20rem;
  max-width: 28rem;
  padding: 0.875rem 1.25rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0ede5;
  border-left: 4px solid var(--ut-success, #1a7a30);
  animation: profileToastSlideIn-b-wlorntp9df 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.profile-toast--success[b-wlorntp9df] {
  border-left-color: #16a34a;
}

.profile-toast--error[b-wlorntp9df] {
  border-left-color: #dc2626;
}

.profile-toast-icon[b-wlorntp9df] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.profile-toast--success .profile-toast-icon[b-wlorntp9df] {
  background-color: #dcfce7;
  color: #16a34a;
}

.profile-toast--error .profile-toast-icon[b-wlorntp9df] {
  background-color: #fee2e2;
  color: #dc2626;
}

.profile-toast-icon svg[b-wlorntp9df] {
  width: 1.25rem;
  height: 1.25rem;
}

.profile-toast-body[b-wlorntp9df] {
  flex: 1;
  min-width: 0;
}

.profile-toast-title[b-wlorntp9df] {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.2;
}

.profile-toast-message[b-wlorntp9df] {
  font-size: 0.775rem;
  color: #6b7280;
  margin-top: 0.25rem;
  line-height: 1.4;
  word-break: break-word;
}

.profile-toast-close[b-wlorntp9df] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: #9ca3af;
  border-radius: 0.25rem;
  transition: color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.profile-toast-close:hover[b-wlorntp9df] {
  color: #1f2937;
  background-color: #f3f4f6;
}

.profile-toast-close svg[b-wlorntp9df] {
  width: 1rem;
  height: 1rem;
}

@keyframes profileToastSlideIn-b-wlorntp9df {
  from {
    opacity: 0;
    transform: translateY(-1rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* /Components/Views/Auth/ResetPassword/ResetPassword.razor.rz.scp.css */
/* ==========================================================================
   RESET PASSWORD VIEW SPECIALIZED CSS
   ========================================================================== */

.auth-header[b-rsfiancofn] {
  margin-bottom: 24px;
  text-align: center;
}

.auth-title[b-rsfiancofn] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.auth-subtitle[b-rsfiancofn] {
  font-size: var(--font-size-sm);
  color: var(--ut-muted);
  margin: 0;
}

.auth-error-alert[b-rsfiancofn] {
  margin-bottom: 16px;
  padding: 12px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--ut-danger);
  background-color: var(--ut-danger-bg);
  border: 1px solid var(--ut-danger-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.auth-success-alert[b-rsfiancofn] {
  margin-bottom: 16px;
  padding: 14px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #166534;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  text-align: center;
  line-height: 1.5;
}

.auth-field[b-rsfiancofn] {
  margin-bottom: 16px;
}

.auth-field-header[b-rsfiancofn] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.token-input[b-rsfiancofn] {
  font-family: 'IBM Plex Mono', monospace, monospace !important;
  font-size: var(--font-size-base) !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-align: center !important;
  background-color: #fffbeb !important;
  border-color: #f59e0b !important;
}

.password-input-wrapper[b-rsfiancofn] {
  position: relative;
  width: 100%;
}

.password-input-wrapper input[b-rsfiancofn] {
  padding-right: 42px;
}

.toggle-password-btn[b-rsfiancofn] {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--zinc-500);
}

.toggle-password-btn:hover[b-rsfiancofn] {
  color: var(--zinc-800);
}

.login-actions[b-rsfiancofn] {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.login-btn[b-rsfiancofn] {
  width: 100%;
  padding: 12px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-link[b-rsfiancofn] {
  font-size: var(--font-size-xs);
  color: var(--ut-gold-dark);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-link:hover[b-rsfiancofn] {
  color: var(--ut-dark);
}

.btn-spinner[b-rsfiancofn] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: #1a1a1a;
  border-radius: 50%;
  animation: btn-spin-b-rsfiancofn 0.8s linear infinite;
  display: inline-block;
}

@keyframes btn-spin-b-rsfiancofn {
  to { transform: rotate(360deg); }
}
/* /Components/Views/Common/Counter/Counter.razor.rz.scp.css */
/* ==========================================================================
   COUNTER - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

/* Page container & header overrides */
.page-container[b-llmbt6yp5r] {
  width: 100%;
}
/* /Components/Views/Common/Error/Error.razor.rz.scp.css */
/* ==========================================================================
   ERROR - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

/* Page container & header overrides */
.page-container[b-1cwd5qa2mv] {
  width: 100%;
}
/* /Components/Views/Common/NotFound/NotFound.razor.rz.scp.css */
.not-found-container[b-s6usutj9xm] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
}

.not-found-code[b-s6usutj9xm] {
  font-size: 5rem;
  font-weight: 800;
  color: var(--ut-gold);
  line-height: 1;
  margin-bottom: 12px;
}

.not-found-title[b-s6usutj9xm] {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--ut-dark);
  margin-bottom: 8px;
}

.not-found-desc[b-s6usutj9xm] {
  font-size: var(--font-size-sm);
  color: var(--zinc-600);
  max-width: 420px;
  margin-bottom: 24px;
}
/* /Components/Views/Common/Weather/Weather.razor.rz.scp.css */
/* ==========================================================================
   WEATHER - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

/* Page container & header overrides */
.page-container[b-7y02j536wg] {
  width: 100%;
}
/* /Components/Views/Reports/AdjustBarang/AdjustBarang.razor.rz.scp.css */
/* ==========================================================================
   UPDATE BARANG (STOCK ADJUSTMENT) - SCOPED COMPONENT STYLES
   ========================================================================== */

.reports-page[b-w11ryb27lm] {
  isolation: isolate;
  min-height: 100vh;
  padding: 3rem 1rem;
  font-family: inherit;
}

@media (min-width: 640px) {
  .reports-page[b-w11ryb27lm] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .reports-page[b-w11ryb27lm] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.reports-container[b-w11ryb27lm] {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* Header */
.reports-header-row[b-w11ryb27lm] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.back-link[b-w11ryb27lm] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}

.back-link:hover[b-w11ryb27lm] {
  color: #374151;
}

.reports-title[b-w11ryb27lm] {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}

.reports-accent[b-w11ryb27lm] {
  color: var(--ut-gold, #e8a000);
}

.reports-subtitle[b-w11ryb27lm] {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ut-muted, #a09e99);
  margin-top: 0.25rem;
}

.btn-pdf-export[b-w11ryb27lm] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease;
}

.btn-pdf-export:hover[b-w11ryb27lm] {
  background-color: #d49300;
}

/* Alert */
.report-alert-error[b-w11ryb27lm] {
  margin-bottom: 1.5rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Filter Card */
.filter-card[b-w11ryb27lm] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.filter-grid[b-w11ryb27lm] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .filter-grid[b-w11ryb27lm] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.filter-field[b-w11ryb27lm] {
  flex: 1;
  min-width: 200px;
}

.filter-label[b-w11ryb27lm] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ut-muted, #8a8880);
  margin-bottom: 0.375rem;
}

.filter-input[b-w11ryb27lm] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  background-color: #f5f4f0;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: all 0.15s ease;
}

.filter-input:focus[b-w11ryb27lm] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.btn-filter-apply[b-w11ryb27lm] {
  padding: 0.5rem 1.5rem;
  background-color: var(--ut-dark, #1a1a1a);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-filter-apply:hover[b-w11ryb27lm] {
  background-color: #333333;
}

/* Data Table Container */
.report-table-box[b-w11ryb27lm] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.report-table-scroll[b-w11ryb27lm] {
  overflow-x: auto;
}

.report-table[b-w11ryb27lm] {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  border-collapse: collapse;
}

.report-table thead[b-w11ryb27lm] {
  color: #6b7280;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #f3f4f6;
  background-color: #f9fafb;
}

.report-table th[b-w11ryb27lm] {
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.report-table tbody tr[b-w11ryb27lm] {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.report-table tbody tr:hover[b-w11ryb27lm] {
  background-color: #f9fafb;
}

.report-table td[b-w11ryb27lm] {
  padding: 1rem;
}

/* Product Info */
.thumb-box[b-w11ryb27lm] {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-img[b-w11ryb27lm] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badges */
.badge-in[b-w11ryb27lm] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #b8e8c0;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
}

.badge-out[b-w11ryb27lm] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #f8c0c0;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #fef0f0;
  color: var(--ut-danger, #d94040);
}
/* /Components/Views/Reports/Peminjaman/Peminjaman.razor.rz.scp.css */
/* ==========================================================================
   LAPORAN PEMINJAMAN - SCOPED COMPONENT STYLES
   ========================================================================== */

.reports-page[b-o2kpt89lvq] {
  isolation: isolate;
  min-height: 100vh;
  padding: 3rem 1rem;
  font-family: inherit;
}

@media (min-width: 640px) {
  .reports-page[b-o2kpt89lvq] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .reports-page[b-o2kpt89lvq] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.reports-container[b-o2kpt89lvq] {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* Header */
.reports-header-row[b-o2kpt89lvq] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.back-link[b-o2kpt89lvq] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}

.back-link:hover[b-o2kpt89lvq] {
  color: #374151;
}

.reports-title[b-o2kpt89lvq] {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}

.reports-accent[b-o2kpt89lvq] {
  color: var(--ut-gold, #e8a000);
}

.reports-subtitle[b-o2kpt89lvq] {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ut-muted, #a09e99);
  margin-top: 0.25rem;
}

.btn-pdf-export[b-o2kpt89lvq] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease;
}

.btn-pdf-export:hover[b-o2kpt89lvq] {
  background-color: #d49300;
}

/* Alert */
.report-alert-error[b-o2kpt89lvq] {
  margin-bottom: 1.5rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Filter Card */
.filter-card[b-o2kpt89lvq] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.filter-grid[b-o2kpt89lvq] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .filter-grid[b-o2kpt89lvq] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.filter-field[b-o2kpt89lvq] {
  flex: 1;
  min-width: 200px;
}

.filter-label[b-o2kpt89lvq] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ut-muted, #8a8880);
  margin-bottom: 0.375rem;
}

.filter-input[b-o2kpt89lvq] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  background-color: #f5f4f0;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: all 0.15s ease;
}

.filter-input:focus[b-o2kpt89lvq] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.btn-filter-apply[b-o2kpt89lvq] {
  padding: 0.5rem 1.5rem;
  background-color: var(--ut-dark, #1a1a1a);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-filter-apply:hover[b-o2kpt89lvq] {
  background-color: #333333;
}

/* Data Table Container */
.report-table-box[b-o2kpt89lvq] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.report-table-scroll[b-o2kpt89lvq] {
  overflow-x: auto;
}

.report-table[b-o2kpt89lvq] {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  border-collapse: collapse;
}

.report-table thead[b-o2kpt89lvq] {
  color: #6b7280;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #f3f4f6;
  background-color: #f9fafb;
}

.report-table th[b-o2kpt89lvq] {
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.report-table tbody tr[b-o2kpt89lvq] {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.report-table tbody tr:hover[b-o2kpt89lvq] {
  background-color: #f9fafb;
}

.report-table td[b-o2kpt89lvq] {
  padding: 1rem;
}

/* Product Info */
.thumb-box[b-o2kpt89lvq] {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-img[b-o2kpt89lvq] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badges */
.badge-waiting[b-o2kpt89lvq] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #fde68a;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #fef3c7;
  color: #92400e;
}

.badge-approved[b-o2kpt89lvq] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #b8e8c0;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
}

.badge-rejected[b-o2kpt89lvq] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #f8c0c0;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #fef0f0;
  color: var(--ut-danger, #d94040);
}

.badge-default[b-o2kpt89lvq] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #f9fafb;
  color: #4b5563;
}
/* /Components/Views/Reports/Reports/Reports.razor.rz.scp.css */
/* ==========================================================================
   REPORTS HUB - SCOPED COMPONENT STYLES
   ========================================================================== */

.reports-hub-page[b-3r6nogbc4j] {
  isolation: isolate;
  min-height: 100vh;
  padding: 3rem 1rem;
  font-family: inherit;
}

@media (min-width: 640px) {
  .reports-hub-page[b-3r6nogbc4j] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .reports-hub-page[b-3r6nogbc4j] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.reports-hub-container[b-3r6nogbc4j] {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* Page Header */
.reports-hub-header[b-3r6nogbc4j] {
  margin-bottom: 1.5rem;
}

.hub-title[b-3r6nogbc4j] {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}

.hub-accent[b-3r6nogbc4j] {
  color: var(--ut-gold, #e8a000);
}

.hub-date[b-3r6nogbc4j] {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ut-muted, #a09e99);
  margin-top: 0.25rem;
}

/* Collapsible Filter Card */
.filter-collapsible-box[b-3r6nogbc4j] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  margin-bottom: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.filter-header-trigger[b-3r6nogbc4j] {
  padding: 0.875rem 1.25rem;
  background-color: #faf9f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
  outline: none;
}

.filter-header-trigger:hover[b-3r6nogbc4j],
.filter-header-trigger:focus[b-3r6nogbc4j] {
  background-color: #f3f2eb;
}

.filter-trigger-left[b-3r6nogbc4j] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-trigger-icon[b-3r6nogbc4j] {
  width: 1rem;
  height: 1rem;
  color: var(--ut-muted, #8a8880);
}

.filter-trigger-title[b-3r6nogbc4j] {
  font-size: 0.68rem;
  font-weight: 800;
  color: #5a5855;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.filter-active-pill[b-3r6nogbc4j] {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 9px;
  font-weight: 800;
  background-color: #fff8e6;
  color: #b37a00;
  border: 1px solid #ffe099;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-chevron[b-3r6nogbc4j] {
  width: 1rem;
  height: 1rem;
  color: var(--ut-muted, #8a8880);
  transition: transform 0.2s ease;
}

.filter-chevron.collapsed[b-3r6nogbc4j] {
  transform: rotate(180deg);
}

.filter-body[b-3r6nogbc4j] {
  background-color: #ffffff;
}

.filter-inputs-area[b-3r6nogbc4j] {
  padding: 1rem 1.25rem;
}

.filter-flex-row[b-3r6nogbc4j] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .filter-flex-row[b-3r6nogbc4j] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.filter-col-input[b-3r6nogbc4j] {
  flex: 1;
  min-width: 180px;
  width: 100%;
}

.filter-label[b-3r6nogbc4j] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ut-muted, #8a8880);
  margin-bottom: 0.375rem;
}

.filter-input-control[b-3r6nogbc4j] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  background-color: #f5f4f0;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: all 0.15s ease;
}

.filter-input-control:focus[b-3r6nogbc4j] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.btn-filter-submit[b-3r6nogbc4j] {
  padding: 0.5rem 1.25rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.btn-filter-submit:hover[b-3r6nogbc4j] {
  background-color: #d49300;
}

.btn-filter-reset[b-3r6nogbc4j] {
  padding: 0.5rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-filter-reset:hover[b-3r6nogbc4j] {
  background-color: #f5f4f0;
}

.filter-pdf-bar[b-3r6nogbc4j] {
  padding: 0 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: flex-end;
}

@media (min-width: 640px) {
  .filter-pdf-bar[b-3r6nogbc4j] {
    flex-direction: row;
  }
}

.btn-hub-pdf[b-3r6nogbc4j] {
  width: 100%;
  padding: 0.625rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background-color 0.15s ease;
}

.btn-hub-pdf:hover[b-3r6nogbc4j] {
  background-color: #d49300;
}

@media (min-width: 640px) {
  .btn-hub-pdf[b-3r6nogbc4j] {
    width: auto;
  }
}

/* 3-Column Summary Cards */
.cards-3col-grid[b-3r6nogbc4j] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .cards-3col-grid[b-3r6nogbc4j] {
    grid-template-columns: repeat(3, 1fr);
  }
}

.summary-report-card[b-3r6nogbc4j] {
  display: block;
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 1.5rem;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.summary-report-card:hover[b-3r6nogbc4j] {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.summary-card-top[b-3r6nogbc4j] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.summary-card-icon[b-3r6nogbc4j] {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-card-icon.blue[b-3r6nogbc4j] {
  background-color: #dbeafe;
  color: #2563eb;
}

.summary-card-icon.purple[b-3r6nogbc4j] {
  background-color: #f3e8ff;
  color: #9333ea;
}

.summary-card-icon.green[b-3r6nogbc4j] {
  background-color: #d1fae5;
  color: #059669;
}

.summary-card-link-badge[b-3r6nogbc4j] {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  transition: background-color 0.15s ease;
}

.summary-card-link-badge.blue[b-3r6nogbc4j] {
  color: #2563eb;
  background-color: #eff6ff;
}

.summary-card-link-badge.purple[b-3r6nogbc4j] {
  color: #9333ea;
  background-color: #faf5ff;
}

.summary-card-link-badge.green[b-3r6nogbc4j] {
  color: #059669;
  background-color: #ecfdf5;
}

.summary-card-title[b-3r6nogbc4j] {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.25rem;
}

.summary-card-desc[b-3r6nogbc4j] {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 1rem;
}

.summary-metrics-grid[b-3r6nogbc4j] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.metric-num[b-3r6nogbc4j] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.metric-num.emerald[b-3r6nogbc4j] {
  font-size: 1.125rem;
  color: #059669;
}

.metric-num.amber[b-3r6nogbc4j] {
  font-size: 1.125rem;
  color: #d97706;
}

.metric-lbl[b-3r6nogbc4j] {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Executive Summary & Charts */
.exec-summary-grid[b-3r6nogbc4j] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .exec-summary-grid[b-3r6nogbc4j] {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kpi-mini-card[b-3r6nogbc4j] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 1.25rem;
}

.kpi-title[b-3r6nogbc4j] {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.kpi-val[b-3r6nogbc4j] {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.chart-card[b-3r6nogbc4j] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 1.25rem;
}

.chart-title[b-3r6nogbc4j] {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

.chart-wrapper[b-3r6nogbc4j] {
  position: relative;
  height: 250px;
}

/* 2-Column Charts Grid */
.charts-2col-grid[b-3r6nogbc4j] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .charts-2col-grid[b-3r6nogbc4j] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Recent Transactions Table */
.recent-card[b-3r6nogbc4j] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.recent-header[b-3r6nogbc4j] {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recent-title[b-3r6nogbc4j] {
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.recent-view-all[b-3r6nogbc4j] {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ut-gold, #e8a000);
  text-decoration: none;
}

.recent-view-all:hover[b-3r6nogbc4j] {
  text-decoration: underline;
}
/* /Components/Views/Reports/RequestBarang/RequestBarang.razor.rz.scp.css */
/* ==========================================================================
   LAPORAN REQUEST BARANG (GIVEAWAY) - SCOPED COMPONENT STYLES
   ========================================================================== */

.reports-page[b-3d6blyfm6x] {
  isolation: isolate;
  min-height: 100vh;
  padding: 3rem 1rem;
  font-family: inherit;
}

@media (min-width: 640px) {
  .reports-page[b-3d6blyfm6x] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .reports-page[b-3d6blyfm6x] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.reports-container[b-3d6blyfm6x] {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* Header */
.reports-header-row[b-3d6blyfm6x] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.back-link[b-3d6blyfm6x] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}

.back-link:hover[b-3d6blyfm6x] {
  color: #374151;
}

.reports-title[b-3d6blyfm6x] {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}

.reports-accent[b-3d6blyfm6x] {
  color: var(--ut-gold, #e8a000);
}

.reports-subtitle[b-3d6blyfm6x] {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ut-muted, #a09e99);
  margin-top: 0.25rem;
}

.btn-pdf-export[b-3d6blyfm6x] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease;
}

.btn-pdf-export:hover[b-3d6blyfm6x] {
  background-color: #d49300;
}

/* Alert */
.report-alert-error[b-3d6blyfm6x] {
  margin-bottom: 1.5rem;
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Filter Card */
.filter-card[b-3d6blyfm6x] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 2rem;
  padding: 1.5rem;
}

.filter-grid[b-3d6blyfm6x] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .filter-grid[b-3d6blyfm6x] {
    flex-direction: row;
    align-items: flex-end;
  }
}

.filter-field[b-3d6blyfm6x] {
  flex: 1;
  min-width: 200px;
}

.filter-label[b-3d6blyfm6x] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ut-muted, #8a8880);
  margin-bottom: 0.375rem;
}

.filter-input[b-3d6blyfm6x] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  background-color: #f5f4f0;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  color: var(--ut-dark, #1a1a1a);
  transition: all 0.15s ease;
}

.filter-input:focus[b-3d6blyfm6x] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.btn-filter-apply[b-3d6blyfm6x] {
  padding: 0.5rem 1.5rem;
  background-color: var(--ut-dark, #1a1a1a);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-filter-apply:hover[b-3d6blyfm6x] {
  background-color: #333333;
}

/* Data Table Container */
.report-table-box[b-3d6blyfm6x] {
  background-color: #ffffff;
  border: 1px solid var(--ut-border, #e5e3dc);
  border-radius: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.report-table-scroll[b-3d6blyfm6x] {
  overflow-x: auto;
}

.report-table[b-3d6blyfm6x] {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  border-collapse: collapse;
}

.report-table thead[b-3d6blyfm6x] {
  color: #6b7280;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #f3f4f6;
  background-color: #f9fafb;
}

.report-table th[b-3d6blyfm6x] {
  padding: 0.75rem 1rem;
  font-weight: 600;
}

.report-table tbody tr[b-3d6blyfm6x] {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.report-table tbody tr:hover[b-3d6blyfm6x] {
  background-color: #f9fafb;
}

.report-table td[b-3d6blyfm6x] {
  padding: 1rem;
}

/* Product Info */
.thumb-box[b-3d6blyfm6x] {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumb-img[b-3d6blyfm6x] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badges */
.badge-waiting[b-3d6blyfm6x] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #fde68a;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #fef3c7;
  color: #92400e;
}

.badge-approved[b-3d6blyfm6x] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #b8e8c0;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
}

.badge-rejected[b-3d6blyfm6x] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #f8c0c0;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #fef0f0;
  color: var(--ut-danger, #d94040);
}

.badge-default[b-3d6blyfm6x] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-size: 0.65rem;
  font-weight: 700;
  background-color: #f9fafb;
  color: #4b5563;
}
/* /Components/Views/User/BorrowCatalog/BorrowCatalog.razor.rz.scp.css */
/* ==========================================================================
   BORROW CATALOG - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

.catalog-container[b-x814867uoq] {
  width: 100%;
  min-height: 100vh;
  padding: 24px 16px 112px 16px;
}

@media (min-width: 768px) {
  .catalog-container[b-x814867uoq] {
    padding: 24px 40px 48px 40px;
  }
}

.catalog-header[b-x814867uoq] {
  margin-bottom: 24px;
}

.catalog-title[b-x814867uoq] {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--ut-dark);
  margin: 0;
  letter-spacing: -0.02em;
}

.catalog-subtitle[b-x814867uoq] {
  font-size: var(--font-size-sm);
  color: var(--ut-muted);
  margin: 4px 0 0 0;
}

/* Sticky Filter & Search Bar */
.catalog-toolbar[b-x814867uoq] {
  position: sticky;
  top: 60px;
  background-color: var(--ut-gray-light);
  padding: 12px 16px;
  margin: 0 -16px 24px -16px;
  border-bottom: 1px solid #e5e3dc;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 40;
  transition: all 0.2s ease;
}

@media (min-width: 768px) {
  .catalog-toolbar[b-x814867uoq] {
    top: 0;
    padding: 12px 40px;
    margin: 0 -40px 24px -40px;
  }
}

@media (max-width: 545px) {
  .catalog-toolbar[b-x814867uoq] {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* Category Filter Pills */
.category-pill-list[b-x814867uoq] {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-pill-list[b-x814867uoq]::-webkit-scrollbar {
  display: none;
}

.category-pill[b-x814867uoq] {
  padding: 6px 14px;
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  color: #5a5855;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.category-pill:hover[b-x814867uoq] {
  border-color: var(--ut-dark);
  color: var(--ut-dark);
}

.category-pill--active[b-x814867uoq] {
  background-color: var(--ut-dark) !important;
  border-color: var(--ut-dark) !important;
  color: #ffffff !important;
}

/* Search Box & Cart Button */
.catalog-search-wrapper[b-x814867uoq] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-cart-btn[b-x814867uoq] {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background-color: var(--ut-gold);
  border: 1px solid rgba(212, 147, 0, 0.3);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.15s ease;
}

.catalog-cart-btn:hover[b-x814867uoq] {
  background-color: var(--ut-gold-hover);
}

.catalog-cart-badge[b-x814867uoq] {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background-color: var(--ut-danger);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
}

.catalog-search-input-box[b-x814867uoq] {
  position: relative;
  width: 180px;
}

@media (min-width: 640px) {
  .catalog-search-input-box[b-x814867uoq] { width: 240px; }
}
@media (min-width: 768px) {
  .catalog-search-input-box[b-x814867uoq] { width: 280px; }
}
@media (max-width: 545px) {
  .catalog-search-input-box[b-x814867uoq] { width: 100%; }
}

.catalog-search-input[b-x814867uoq] {
  width: 100%;
  padding: 8px 16px 8px 36px;
  background-color: #f9f8f6;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #5a5855;
  outline: none;
  transition: all 0.15s ease;
}

.catalog-search-input:focus[b-x814867uoq] {
  border-color: var(--ut-gold);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(232, 160, 0, 0.15);
}

.catalog-search-icon[b-x814867uoq] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ut-muted);
  pointer-events: none;
}

/* Product Cards Grid */
.product-grid[b-x814867uoq] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

@media (min-width: 768px) {
  .product-grid[b-x814867uoq] {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .product-grid[b-x814867uoq] {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
}

.product-card[b-x814867uoq] {
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card:hover[b-x814867uoq] {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--ut-gold);
}

.product-image-container[b-x814867uoq] {
  aspect-ratio: 1 / 1;
  position: relative;
  background-color: #f5f4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #f0ede5;
}

.product-image[b-x814867uoq] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image[b-x814867uoq] {
  transform: scale(1.06);
}

.product-badge-soldout[b-x814867uoq] {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  background-color: var(--ut-danger-bg);
  border: 1px solid var(--ut-danger-border);
  color: var(--ut-danger-text);
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.product-content[b-x814867uoq] {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-category[b-x814867uoq] {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ut-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-name[b-x814867uoq] {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 4px 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-sku[b-x814867uoq] {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--zinc-500);
}

.product-footer[b-x814867uoq] {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--zinc-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-stock-pill[b-x814867uoq] {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ut-success-text);
}

/* ==========================================================================
   PRODUCT DETAIL MODAL - SCOPED STYLES
   ========================================================================== */
.pmodal-grid[b-x814867uoq] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 1024px) {
  .pmodal-grid[b-x814867uoq] {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 20px;
  }
}

.pmodal-gallery[b-x814867uoq] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pmodal-main-image-box[b-x814867uoq] {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f5f4f0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid #e5e3dc;
  cursor: crosshair;
}

.pmodal-main-image[b-x814867uoq] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.pmodal-thumb-row[b-x814867uoq] {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pmodal-thumb-btn[b-x814867uoq] {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid transparent;
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: all 0.15s ease;
}

.pmodal-thumb-btn:hover[b-x814867uoq] {
  opacity: 1;
}

.pmodal-thumb-btn--active[b-x814867uoq] {
  border-color: var(--ut-gold) !important;
  opacity: 1 !important;
}

.pmodal-thumb-btn img[b-x814867uoq] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pmodal-details[b-x814867uoq] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pmodal-product-title[b-x814867uoq] {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.pmodal-product-sku[b-x814867uoq] {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--zinc-600);
  background-color: #f0ede5;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  display: inline-block;
}

.pmodal-desc-box[b-x814867uoq] {
  margin-top: 12px;
  background-color: #f9f8f6;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-lg);
  padding: 14px;
}

.pmodal-desc-title[b-x814867uoq] {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 0 0 6px 0;
}

.pmodal-desc-text[b-x814867uoq] {
  font-size: var(--font-size-xs);
  color: #5a5855;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
}

.pmodal-variants-section[b-x814867uoq] {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0ede5;
}

.pmodal-variant-col[b-x814867uoq] {
  flex: 1;
}

.pmodal-variant-label[b-x814867uoq] {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #5a5855;
  margin-bottom: 8px;
}

.pmodal-variant-pills[b-x814867uoq] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pmodal-variant-pill[b-x814867uoq] {
  padding: 6px 12px;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background-color: #ffffff;
  color: #5a5855;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pmodal-variant-pill:hover[b-x814867uoq] {
  border-color: var(--ut-dark);
}

.pmodal-variant-pill--active[b-x814867uoq] {
  background-color: var(--ut-dark) !important;
  border-color: var(--ut-dark) !important;
  color: #ffffff !important;
}

.pmodal-variant-pill--disabled[b-x814867uoq] {
  background-color: #f5f4f0;
  border-color: #e5e3dc;
  color: #a09e99;
  opacity: 0.5;
  cursor: not-allowed;
}

.pmodal-qty-control[b-x814867uoq] {
  display: flex;
  align-items: center;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #ffffff;
  width: 108px;
}

.pmodal-qty-btn[b-x814867uoq] {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #5a5855;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pmodal-qty-btn:hover[b-x814867uoq] {
  background-color: #f5f4f0;
}

.pmodal-qty-input[b-x814867uoq] {
  flex: 1;
  text-align: center;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  outline: none;
  background: transparent;
  width: 44px;
}

.pmodal-footer-card[b-x814867uoq] {
  border-radius: var(--radius-lg);
  border: 1px solid #e5e3dc;
  background-color: #f9f8f6;
  padding: 10px 14px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pmodal-add-cart-btn[b-x814867uoq] {
  padding: 8px 18px;
  background-color: var(--ut-gold);
  color: #1a1a1a;
  border: 1px solid rgba(212, 147, 0, 0.3);
  font-size: var(--font-size-xs);
  font-weight: 800;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}

.pmodal-add-cart-btn:hover:not(:disabled)[b-x814867uoq] {
  background-color: var(--ut-gold-hover);
}

.pmodal-add-cart-btn:disabled[b-x814867uoq] {
  background-color: #e5e3dc;
  color: #8a8780;
  border-color: #e5e3dc;
  cursor: not-allowed;
  box-shadow: none;
}
/* /Components/Views/User/Dashboard/Home.razor.rz.scp.css */
/* ==========================================================================
   USER DASHBOARD (HOME) - SPECIALIZED CSS
   ========================================================================== */

.home-container[b-17lfpmiyd4] {
  width: 100%;
  min-height: 100vh;
  padding: 24px 20px 96px 20px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .home-container[b-17lfpmiyd4] {
    padding: 28px 36px 48px 36px;
  }
}

/* Hero Section (Staff / Mobile) */
.home-hero[b-17lfpmiyd4] {
  margin-bottom: 24px;
}

.home-greeting-row[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.home-greeting-sub[b-17lfpmiyd4] {
  font-size: 0.65rem;
  font-weight: 700;
  color: #7a3d00;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.home-greeting-title[b-17lfpmiyd4] {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: #92400e;
  line-height: 1.2;
  margin: 4px 0 0 0;
}

.home-profile-avatar-btn[b-17lfpmiyd4] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: #f7f7f7;
  color: #7a3d00;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease;
}

.home-profile-avatar-btn:hover[b-17lfpmiyd4] {
  background-color: #e5e5e5;
}

/* Sisa Kredit Card */
.home-credit-card[b-17lfpmiyd4] {
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 52%, #d97706 100%);
  color: #ffffff;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.home-credit-header[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.home-credit-label[b-17lfpmiyd4] {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.home-credit-toggle[b-17lfpmiyd4] {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

.home-credit-toggle:hover[b-17lfpmiyd4] {
  color: #ffffff;
}

.home-credit-amount[b-17lfpmiyd4] {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.home-credit-number[b-17lfpmiyd4] {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.home-credit-unit[b-17lfpmiyd4] {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2px;
}

/* 4 Action Icons */
.home-action-row[b-17lfpmiyd4] {
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-top: 16px;
}

.home-action-grid[b-17lfpmiyd4] {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 8px;
}

.home-action-item[b-17lfpmiyd4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  flex: 1;
  text-decoration: none;
  transition: transform 0.1s ease;
}

.home-action-item:active[b-17lfpmiyd4] {
  transform: scale(0.95);
}

.home-action-icon[b-17lfpmiyd4] {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
}

.home-action-title[b-17lfpmiyd4] {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--zinc-600);
  line-height: 1.2;
}

/* ==========================================================================
   METRICS GRID (4 CARDS)
   ========================================================================== */
.home-metrics-grid[b-17lfpmiyd4] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .home-metrics-grid[b-17lfpmiyd4] {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.home-metric-card[b-17lfpmiyd4] {
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 14px;
  padding: 18px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
  min-width: 0;
  overflow: hidden;
}

.home-metric-card:hover[b-17lfpmiyd4] {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.home-metric-card--yellow[b-17lfpmiyd4] {
  border-left-color: #e8a000;
}
.home-metric-card--yellow:hover[b-17lfpmiyd4] {
  border-color: #e8a000;
}

.home-metric-card--green[b-17lfpmiyd4] {
  border-left-color: #1a7a30;
}
.home-metric-card--green:hover[b-17lfpmiyd4] {
  border-color: #1a7a30;
}

.home-metric-card--danger[b-17lfpmiyd4] {
  border-left-color: #d94040;
}
.home-metric-card--danger:hover[b-17lfpmiyd4] {
  border-color: #d94040;
}

.home-metric-label[b-17lfpmiyd4] {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8780;
  margin: 0 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-metric-value[b-17lfpmiyd4] {
  font-size: 2.25rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1;
  margin: 0;
}

@media (max-width: 1024px) {
  .home-metric-value[b-17lfpmiyd4] {
    font-size: 1.75rem;
  }
}

.home-metric-value--danger[b-17lfpmiyd4] {
  color: #d94040 !important;
}

.home-metric-val-wrap[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.home-metric-badge-warning[b-17lfpmiyd4] {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background-color: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.home-metric-badge-danger-excl[b-17lfpmiyd4] {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #fef0f0;
  color: #d94040;
  font-weight: 800;
  border: 1px solid #f8c0c0;
  font-size: 1rem;
  line-height: 1;
  margin-left: 8px;
  flex-shrink: 0;
}

/* ==========================================================================
   TO DO LIST WIDGET
   ========================================================================== */
.home-todo-card[b-17lfpmiyd4] {
  background: #ffffff;
  border: 1px solid #e5e3dc;
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  margin-bottom: 24px;
  min-width: 0;
  overflow: hidden;
}

.home-todo-header[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}

.home-todo-title-row[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.home-todo-title[b-17lfpmiyd4] {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.01em;
}

.home-todo-dot-ping[b-17lfpmiyd4] {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.home-todo-dot-ping-anim[b-17lfpmiyd4] {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #f87171;
  opacity: 0.75;
  animation: ping-b-17lfpmiyd4 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.home-todo-dot-ping-inner[b-17lfpmiyd4] {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ef4444;
}

.home-todo-badge[b-17lfpmiyd4] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background-color: #d94040;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.home-todo-badge--neutral[b-17lfpmiyd4] {
  background-color: #f4f4f5;
  color: #52525b;
  border: 1px solid #e4e4e7;
}

.home-todo-chevron[b-17lfpmiyd4] {
  color: #a1a1aa;
  padding: 4px;
  display: flex;
  align-items: center;
}

.home-todo-item[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background-color: #faf9f5;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition: all 0.2s ease;
  gap: 12px;
}

.home-todo-item:hover[b-17lfpmiyd4] {
  border-color: var(--ut-gold);
  background-color: #ffffff;
  box-shadow: var(--shadow-sm);
}

@keyframes ping-b-17lfpmiyd4 {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ==========================================================================
   CHARTS & OPERATIONAL WIDGETS (3 CARDS)
   ========================================================================== */
.home-charts-grid[b-17lfpmiyd4] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  .home-charts-grid[b-17lfpmiyd4] {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.home-chart-card[b-17lfpmiyd4] {
  min-width: 0;
  border-radius: 16px;
  border: 1px solid #e5e3dc;
  background-color: #ffffff;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.home-chart-title[b-17lfpmiyd4] {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #8a8780;
  margin: 0 0 14px 0;
}

.home-chart-canvas-box[b-17lfpmiyd4] {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.home-chart-canvas-box canvas[b-17lfpmiyd4] {
  max-height: 180px !important;
  width: 100% !important;
}

.home-chart-legend[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f0ede5;
  font-size: 0.7rem;
  color: #5a5855;
  font-weight: 600;
  flex-wrap: wrap;
}

.home-chart-legend-item[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-chart-legend-dot[b-17lfpmiyd4] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Merch / Borrow Slide Toggle */
.home-item-toggle[b-17lfpmiyd4] {
  position: relative;
  display: flex;
  background-color: #f0ede5;
  border-radius: var(--radius-full);
  padding: 2px;
}

.home-item-tab[b-17lfpmiyd4] {
  position: relative;
  z-index: 10;
  padding: 4px 14px;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: #8a8880;
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-item-tab--active[b-17lfpmiyd4] {
  color: #1a1a1a !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Low Stock Products List */
.home-lowstock-list[b-17lfpmiyd4] {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #e5e3dc transparent;
}

.home-lowstock-list[b-17lfpmiyd4]::-webkit-scrollbar {
  width: 4px;
}

.home-lowstock-list[b-17lfpmiyd4]::-webkit-scrollbar-thumb {
  background-color: #e5e3dc;
  border-radius: 4px;
}

.home-lowstock-list[b-17lfpmiyd4]::-webkit-scrollbar-track {
  background: transparent;
}

.home-lowstock-item[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f5f3ee;
}

.home-lowstock-item:last-child[b-17lfpmiyd4] {
  border-bottom: none;
}

.home-lowstock-name[b-17lfpmiyd4] {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
  line-height: 1.3;
}

.home-lowstock-qty[b-17lfpmiyd4] {
  font-size: 0.85rem;
  font-weight: 800;
}

.home-lowstock-qty--danger[b-17lfpmiyd4] {
  color: #d94040;
}

.home-lowstock-qty--gold[b-17lfpmiyd4] {
  color: #e8a000;
}

.home-lowstock-unit[b-17lfpmiyd4] {
  font-size: 0.6rem;
  color: #8a8780;
  font-weight: 500;
  margin-left: 2px;
}

.home-lowstock-scroll-hint[b-17lfpmiyd4] {
  text-align: center;
  padding-top: 12px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #8a8780;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
}

/* Catalog Shortcut Cards (for non-staff) */
.home-shortcuts-grid[b-17lfpmiyd4] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

@media (min-width: 640px) {
  .home-shortcuts-grid[b-17lfpmiyd4] {
    grid-template-columns: repeat(2, 1fr);
  }
}

.home-shortcut-card[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: #fffbeb;
  border: 1px solid #f9e29c;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: all 0.2s ease;
}

.home-shortcut-card:hover[b-17lfpmiyd4] {
  border-color: var(--ut-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.home-shortcut-icon[b-17lfpmiyd4] {
  padding: 12px;
  background-color: #fef3c7;
  border-radius: var(--radius-lg);
  color: #b45309;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.home-shortcut-card:hover .home-shortcut-icon[b-17lfpmiyd4] {
  background-color: #fde68a;
}

.home-shortcut-title[b-17lfpmiyd4] {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}

.home-shortcut-card:hover .home-shortcut-title[b-17lfpmiyd4] {
  color: var(--ut-gold);
}

.home-shortcut-desc[b-17lfpmiyd4] {
  font-size: var(--font-size-xs);
  color: var(--ut-muted);
  margin: 2px 0 0 0;
}

/* Footer */
.home-footer[b-17lfpmiyd4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e3dc;
  font-size: 0.72rem;
  color: var(--ut-muted);
}
/* /Components/Views/User/GiveawayCatalog/GiveawayCatalog.razor.rz.scp.css */
/* ==========================================================================
   GIVEAWAY CATALOG - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

.catalog-container[b-f4ld1e4fs2] {
  width: 100%;
  min-height: 100vh;
  padding: 24px 16px 112px 16px;
}

@media (min-width: 768px) {
  .catalog-container[b-f4ld1e4fs2] {
    padding: 24px 40px 48px 40px;
  }
}

.catalog-header[b-f4ld1e4fs2] {
  margin-bottom: 24px;
}

.catalog-title[b-f4ld1e4fs2] {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--ut-dark);
  margin: 0;
  letter-spacing: -0.02em;
}

.catalog-subtitle[b-f4ld1e4fs2] {
  font-size: var(--font-size-sm);
  color: var(--ut-muted);
  margin: 4px 0 0 0;
}

/* Sticky Filter & Search Bar */
.catalog-toolbar[b-f4ld1e4fs2] {
  position: sticky;
  top: 60px;
  background-color: var(--ut-gray-light);
  padding: 12px 16px;
  margin: 0 -16px 24px -16px;
  border-bottom: 1px solid #e5e3dc;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 40;
  transition: all 0.2s ease;
}

@media (min-width: 768px) {
  .catalog-toolbar[b-f4ld1e4fs2] {
    top: 0;
    padding: 12px 40px;
    margin: 0 -40px 24px -40px;
  }
}

@media (max-width: 545px) {
  .catalog-toolbar[b-f4ld1e4fs2] {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* Category Filter Pills */
.category-pill-list[b-f4ld1e4fs2] {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.category-pill-list[b-f4ld1e4fs2]::-webkit-scrollbar {
  display: none;
}

.category-pill[b-f4ld1e4fs2] {
  padding: 6px 14px;
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  color: #5a5855;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.category-pill:hover[b-f4ld1e4fs2] {
  border-color: var(--ut-dark);
  color: var(--ut-dark);
}

.category-pill--active[b-f4ld1e4fs2] {
  background-color: var(--ut-dark) !important;
  border-color: var(--ut-dark) !important;
  color: #ffffff !important;
}

/* Search Box & Cart Button */
.catalog-search-wrapper[b-f4ld1e4fs2] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.catalog-cart-btn[b-f4ld1e4fs2] {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background-color: var(--ut-gold);
  border: 1px solid rgba(212, 147, 0, 0.3);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.15s ease;
}

.catalog-cart-btn:hover[b-f4ld1e4fs2] {
  background-color: var(--ut-gold-hover);
}

.catalog-cart-badge[b-f4ld1e4fs2] {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background-color: var(--ut-danger);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
}

.catalog-search-input-box[b-f4ld1e4fs2] {
  position: relative;
  width: 180px;
}

@media (min-width: 640px) {
  .catalog-search-input-box[b-f4ld1e4fs2] { width: 240px; }
}
@media (min-width: 768px) {
  .catalog-search-input-box[b-f4ld1e4fs2] { width: 280px; }
}
@media (max-width: 545px) {
  .catalog-search-input-box[b-f4ld1e4fs2] { width: 100%; }
}

.catalog-search-input[b-f4ld1e4fs2] {
  width: 100%;
  padding: 8px 16px 8px 36px;
  background-color: #f9f8f6;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #5a5855;
  outline: none;
  transition: all 0.15s ease;
}

.catalog-search-input:focus[b-f4ld1e4fs2] {
  border-color: var(--ut-gold);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(232, 160, 0, 0.15);
}

.catalog-search-icon[b-f4ld1e4fs2] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ut-muted);
  pointer-events: none;
}

/* Product Cards Grid */
.product-grid[b-f4ld1e4fs2] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
}

@media (min-width: 768px) {
  .product-grid[b-f4ld1e4fs2] {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .product-grid[b-f4ld1e4fs2] {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }
}

.product-card[b-f4ld1e4fs2] {
  background-color: #ffffff;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card:hover[b-f4ld1e4fs2] {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--ut-gold);
}

.product-image-container[b-f4ld1e4fs2] {
  aspect-ratio: 1 / 1;
  position: relative;
  background-color: #f5f4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #f0ede5;
}

.product-image[b-f4ld1e4fs2] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card:hover .product-image[b-f4ld1e4fs2] {
  transform: scale(1.06);
}

.product-badge-soldout[b-f4ld1e4fs2] {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  background-color: var(--ut-danger-bg);
  border: 1px solid var(--ut-danger-border);
  color: var(--ut-danger-text);
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.product-content[b-f4ld1e4fs2] {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-category[b-f4ld1e4fs2] {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ut-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-sku[b-f4ld1e4fs2] {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--zinc-600);
  background: #f0ede5;
  padding: 2px 6px;
  border-radius: 4px;
}

.product-name[b-f4ld1e4fs2] {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 4px 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer[b-f4ld1e4fs2] {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--zinc-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-points[b-f4ld1e4fs2] {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ut-gold);
}

.product-stock-pill[b-f4ld1e4fs2] {
  font-size: 0.7rem;
  font-weight: 700;
}

/* ==========================================================================
   PRODUCT DETAIL MODAL - SCOPED STYLES
   ========================================================================== */
.pmodal-grid[b-f4ld1e4fs2] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 1024px) {
  .pmodal-grid[b-f4ld1e4fs2] {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 20px;
  }
}

.pmodal-gallery[b-f4ld1e4fs2] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pmodal-main-image-box[b-f4ld1e4fs2] {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f5f4f0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid #e5e3dc;
  cursor: crosshair;
}

.pmodal-main-image[b-f4ld1e4fs2] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.pmodal-thumb-row[b-f4ld1e4fs2] {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pmodal-thumb-btn[b-f4ld1e4fs2] {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid transparent;
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: all 0.15s ease;
}

.pmodal-thumb-btn:hover[b-f4ld1e4fs2] {
  opacity: 1;
}

.pmodal-thumb-btn--active[b-f4ld1e4fs2] {
  border-color: var(--ut-gold) !important;
  opacity: 1 !important;
}

.pmodal-thumb-btn img[b-f4ld1e4fs2] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pmodal-details[b-f4ld1e4fs2] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pmodal-product-title[b-f4ld1e4fs2] {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.pmodal-product-sku[b-f4ld1e4fs2] {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--zinc-600);
  background-color: #f0ede5;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  display: inline-block;
}

.pmodal-desc-box[b-f4ld1e4fs2] {
  margin-top: 12px;
  background-color: #f9f8f6;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-lg);
  padding: 14px;
}

.pmodal-desc-title[b-f4ld1e4fs2] {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--ut-dark);
  margin: 0 0 6px 0;
}

.pmodal-desc-text[b-f4ld1e4fs2] {
  font-size: var(--font-size-xs);
  color: #5a5855;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
}

.pmodal-variants-section[b-f4ld1e4fs2] {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0ede5;
}

.pmodal-variant-col[b-f4ld1e4fs2] {
  flex: 1;
}

.pmodal-variant-label[b-f4ld1e4fs2] {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #5a5855;
  margin-bottom: 8px;
}

.pmodal-variant-pills[b-f4ld1e4fs2] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pmodal-variant-pill[b-f4ld1e4fs2] {
  padding: 6px 12px;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background-color: #ffffff;
  color: #5a5855;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pmodal-variant-pill:hover[b-f4ld1e4fs2] {
  border-color: var(--ut-dark);
}

.pmodal-variant-pill--active[b-f4ld1e4fs2] {
  background-color: var(--ut-gold) !important;
  border-color: var(--ut-gold) !important;
  color: #1a1a1a !important;
}

.pmodal-variant-pill--disabled[b-f4ld1e4fs2] {
  background-color: #f5f4f0;
  border-color: #e5e3dc;
  color: #a09e99;
  opacity: 0.5;
  cursor: not-allowed;
}

.pmodal-qty-control[b-f4ld1e4fs2] {
  display: flex;
  align-items: center;
  border: 1px solid #e5e3dc;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #ffffff;
  width: 108px;
}

.pmodal-qty-btn[b-f4ld1e4fs2] {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #5a5855;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pmodal-qty-btn:hover[b-f4ld1e4fs2] {
  background-color: #f5f4f0;
}

.pmodal-qty-input[b-f4ld1e4fs2] {
  flex: 1;
  text-align: center;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  outline: none;
  background: transparent;
  width: 44px;
}

.pmodal-footer-card[b-f4ld1e4fs2] {
  border-radius: var(--radius-lg);
  border: 1px solid #e5e3dc;
  background-color: #f9f8f6;
  padding: 10px 14px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pmodal-add-cart-btn[b-f4ld1e4fs2] {
  padding: 8px 18px;
  background-color: var(--ut-gold);
  color: #1a1a1a;
  border: 1px solid rgba(212, 147, 0, 0.3);
  font-size: var(--font-size-xs);
  font-weight: 800;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}

.pmodal-add-cart-btn:hover:not(:disabled)[b-f4ld1e4fs2] {
  background-color: var(--ut-gold-hover);
}

.pmodal-add-cart-btn:disabled[b-f4ld1e4fs2] {
  background-color: #e5e3dc;
  color: #8a8780;
  border-color: #e5e3dc;
  cursor: not-allowed;
  box-shadow: none;
}
/* /Components/Views/User/QuickAction/QuickAction.razor.rz.scp.css */
/* ==========================================================================
   QUICK ACTION SPECIALIZED CSS
   ========================================================================== */

.quick-action-card[b-vx40h4k0i8] {
  border-top-width: 4px;
  border-top-style: solid;
  border-top-color: var(--zinc-300);
}

.quick-action-card--approve[b-vx40h4k0i8] {
  border-top-color: var(--ut-success);
}

.quick-action-card--reject[b-vx40h4k0i8] {
  border-top-color: var(--ut-danger);
}

.quick-action-card--revise[b-vx40h4k0i8] {
  border-top-color: var(--ut-warning);
}

.quick-action-loading[b-vx40h4k0i8] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.quick-action-spinner[b-vx40h4k0i8] {
  width: 32px;
  height: 32px;
  border: 3px solid var(--zinc-200);
  border-top-color: var(--zinc-900);
  border-radius: 50%;
  animation: qa-spin-b-vx40h4k0i8 0.8s linear infinite;
}

@keyframes qa-spin-b-vx40h4k0i8 {
  to { transform: rotate(360deg); }
}

.quick-action-alert[b-vx40h4k0i8] {
  padding: 16px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  border: 1px solid transparent;
}

.quick-action-alert--success[b-vx40h4k0i8] {
  background-color: var(--ut-success-bg);
  border-color: var(--ut-success-border);
  color: var(--ut-success-text);
}

.quick-action-alert--danger[b-vx40h4k0i8] {
  background-color: var(--ut-danger-bg);
  border-color: var(--ut-danger-border);
  color: var(--ut-danger-text);
}

.quick-action-alert-header[b-vx40h4k0i8] {
  display: flex;
  align-items: center;
  font-weight: 600;
  gap: 8px;
}

.quick-action-actions[b-vx40h4k0i8] {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
/* /Components/Views/User/Receipt/Receipt.razor.rz.scp.css */
/* ==========================================================================
   RECEIPT - PRINTABLE COMPONENT STYLES
   United Tractors WMS Design System
   ========================================================================== */

.receipt-wrapper[b-w9wpb2ftbp] {
  background-color: #ffffff;
  padding: 2rem;
  max-width: 56rem;
  margin: 2rem auto;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-family: inherit;
  color: var(--ut-dark, #1a1a1a);
}

.receipt-header[b-w9wpb2ftbp] {
  text-align: center;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--ut-dark, #1a1a1a);
  padding-bottom: 1rem;
}

.receipt-title[b-w9wpb2ftbp] {
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
  color: var(--ut-dark, #1a1a1a);
}

.receipt-subtitle[b-w9wpb2ftbp] {
  font-size: 0.875rem;
  color: #5a5855;
  margin: 0;
  font-weight: 500;
}

/* Info Table */
.receipt-info-table[b-w9wpb2ftbp] {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.receipt-info-label[b-w9wpb2ftbp] {
  font-weight: 700;
  width: 11rem;
  padding: 0.35rem 0;
  vertical-align: top;
  font-size: 0.82rem;
  color: #5a5855;
}

.receipt-info-val[b-w9wpb2ftbp] {
  padding: 0.35rem 0;
  vertical-align: top;
  font-size: 0.82rem;
  color: var(--ut-dark, #1a1a1a);
}

/* Data Table */
.receipt-items-table[b-w9wpb2ftbp] {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  border: 1px solid #d1d5db;
  font-size: 0.82rem;
}

.receipt-items-thead tr[b-w9wpb2ftbp] {
  background-color: #f3f4f6;
}

.receipt-items-th[b-w9wpb2ftbp] {
  border: 1px solid #d1d5db;
  padding: 0.625rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.025em;
}

.receipt-items-th--left[b-w9wpb2ftbp] {
  text-align: left;
}

.receipt-items-th--center[b-w9wpb2ftbp] {
  text-align: center;
}

.receipt-items-td[b-w9wpb2ftbp] {
  border: 1px solid #d1d5db;
  padding: 0.625rem;
  vertical-align: middle;
}

.receipt-items-td--center[b-w9wpb2ftbp] {
  text-align: center;
}

.receipt-type-pill[b-w9wpb2ftbp] {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
}

.receipt-type-pill--giveaway[b-w9wpb2ftbp] {
  background-color: #f3e8ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}

.receipt-type-pill--borrow[b-w9wpb2ftbp] {
  background-color: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.receipt-status-text[b-w9wpb2ftbp] {
  font-size: 11px;
}

.receipt-status-text--returned[b-w9wpb2ftbp] {
  color: var(--ut-success, #1a7a30);
  font-weight: 700;
  display: block;
}

.receipt-status-text--unreturned[b-w9wpb2ftbp] {
  color: var(--ut-danger, #d94040);
  font-weight: 700;
}

/* Handover Photo */
.receipt-photo-section[b-w9wpb2ftbp] {
  margin-bottom: 2rem;
}

.receipt-photo-title[b-w9wpb2ftbp] {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}

.receipt-photo-img[b-w9wpb2ftbp] {
  max-width: 18rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
}

/* Notice */
.receipt-notice[b-w9wpb2ftbp] {
  font-size: 0.75rem;
  color: #6b7280;
  font-style: italic;
  margin-bottom: 3rem;
  line-height: 1.5;
}

/* Signature Table */
.receipt-sign-table[b-w9wpb2ftbp] {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.receipt-sign-line[b-w9wpb2ftbp] {
  text-align: center;
  padding-top: 3.5rem;
  border-bottom: 1px solid var(--ut-dark, #1a1a1a);
  width: 45%;
  font-weight: 700;
  font-size: 0.875rem;
}

.receipt-sign-spacer[b-w9wpb2ftbp] {
  width: 10%;
}

.receipt-sign-role[b-w9wpb2ftbp] {
  text-align: center;
  font-size: 0.75rem;
  color: #6b7280;
  padding-top: 0.25rem;
}

/* Print Overrides */
@media print {
  .receipt-wrapper[b-w9wpb2ftbp] {
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
  }
}
/* /Components/Views/User/Tracking/Tracking.razor.rz.scp.css */
/* ==========================================================================
   TRACKING - SPECIALIZED COMPONENT STYLES
   ========================================================================== */

.tracking-page[b-mw0dmhn21w] {
  padding: var(--ut-space-8, 2rem) 0;
  min-height: 100vh;
  font-family: inherit;
}

.tracking-container[b-mw0dmhn21w] {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .tracking-container[b-mw0dmhn21w] {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .tracking-container[b-mw0dmhn21w] {
    padding: 0 2rem;
  }
}

/* Page Header */
.tracking-header[b-mw0dmhn21w] {
  margin-bottom: 1.5rem;
}

.tracking-title[b-mw0dmhn21w] {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

.tracking-title .text-accent[b-mw0dmhn21w] {
  color: var(--ut-gold, #e8a000);
}

.tracking-subtitle[b-mw0dmhn21w] {
  font-size: 0.75rem;
  font-weight: 500;
  color: #a09e99;
  margin-top: 0.25rem;
}

/* Alerts */
.tracking-alert[b-mw0dmhn21w] {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ut-radius-lg, 0.75rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tracking-alert--danger[b-mw0dmhn21w] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
}

.tracking-alert--success[b-mw0dmhn21w] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
}

.tracking-alert-icon[b-mw0dmhn21w] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.tracking-alert-text[b-mw0dmhn21w] {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}

/* Filter Card */
.tracking-filter-card[b-mw0dmhn21w] {
  position: relative;
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tracking-filter-body[b-mw0dmhn21w] {
  padding: 0.75rem 1rem;
}

.tracking-filter-row[b-mw0dmhn21w] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .tracking-filter-row[b-mw0dmhn21w] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
}

.tracking-search-wrap[b-mw0dmhn21w] {
  flex: 1;
  min-width: 180px;
  width: 100%;
}

.tracking-search-inner[b-mw0dmhn21w] {
  position: relative;
}

.tracking-search-input[b-mw0dmhn21w] {
  display: block;
  width: 100%;
  padding-left: 2.25rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-md, 0.5rem);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  color: var(--ut-dark, #1a1a1a);
}

.tracking-search-input:focus[b-mw0dmhn21w] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.tracking-search-icon[b-mw0dmhn21w] {
  width: 1rem;
  height: 1rem;
  color: #8a8880;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.tracking-filter-group[b-mw0dmhn21w] {
  min-width: 140px;
  width: 100%;
}

@media (min-width: 1024px) {
  .tracking-filter-group[b-mw0dmhn21w] {
    width: auto;
  }
}

.tracking-filter-label[b-mw0dmhn21w] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.tracking-filter-select[b-mw0dmhn21w],
.tracking-filter-date[b-mw0dmhn21w] {
  display: block;
  width: 100%;
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: var(--ut-radius-md, 0.5rem);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  color: var(--ut-dark, #1a1a1a);
}

.tracking-filter-select:focus[b-mw0dmhn21w],
.tracking-filter-date:focus[b-mw0dmhn21w] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.tracking-filter-actions[b-mw0dmhn21w] {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  justify-content: flex-end;
}

@media (min-width: 1024px) {
  .tracking-filter-actions[b-mw0dmhn21w] {
    width: auto;
  }
}

.tracking-btn-apply[b-mw0dmhn21w] {
  padding: 0.5rem 1.25rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.tracking-btn-apply:hover[b-mw0dmhn21w] {
  background-color: #d49300;
}

.tracking-btn-apply:active[b-mw0dmhn21w] {
  transform: scale(0.97);
}

.tracking-btn-reset[b-mw0dmhn21w] {
  padding: 0.5rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--ut-radius-md, 0.5rem);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.tracking-btn-reset:hover[b-mw0dmhn21w] {
  background-color: #f0ede5;
}

.tracking-mobile-toggle[b-mw0dmhn21w] {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .tracking-mobile-toggle[b-mw0dmhn21w] {
    display: none;
  }
}

.tracking-mobile-btn[b-mw0dmhn21w] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background-color: #ffffff;
  color: var(--ut-dark, #1a1a1a);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* Tabs Card */
.tracking-tabs-card[b-mw0dmhn21w] {
  margin-bottom: 1rem;
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tracking-tabs-body[b-mw0dmhn21w] {
  padding: 1rem 1.25rem;
}

.tracking-tabs-grid[b-mw0dmhn21w] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.tracking-tab-btn[b-mw0dmhn21w] {
  width: 100%;
  padding: 0.45rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--ut-radius-md, 0.5rem);
  transition: all 0.15s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background-color: transparent;
  color: #8a8880;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracking-tab-btn:hover[b-mw0dmhn21w] {
  color: var(--ut-dark, #1a1a1a);
  background-color: #faf9f5;
}

.tracking-tab-btn--active[b-mw0dmhn21w] {
  background-color: var(--ut-dark, #1a1a1a) !important;
  color: #ffffff !important;
}

.tracking-tab-badge[b-mw0dmhn21w] {
  margin-left: 0.5rem;
  display: inline-flex;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
}

.tracking-tab-btn--active .tracking-tab-badge[b-mw0dmhn21w] {
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
}

.tracking-tab-badge--borrow[b-mw0dmhn21w] {
  background-color: #e7f1fb;
  color: #1a6b8a;
}

.tracking-tab-badge--giveaway[b-mw0dmhn21w] {
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
}

/* Empty State */
.tracking-empty-state[b-mw0dmhn21w] {
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 3rem 1.5rem;
  text-align: center;
}

.tracking-empty-icon[b-mw0dmhn21w] {
  margin: 0 auto 1rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracking-empty-icon--borrow[b-mw0dmhn21w] {
  background-color: #eef6fd;
  color: #1a6b8a;
}

.tracking-empty-icon--giveaway[b-mw0dmhn21w] {
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
}

.tracking-empty-title[b-mw0dmhn21w] {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  margin: 0 0 0.25rem;
}

.tracking-empty-desc[b-mw0dmhn21w] {
  font-size: 0.875rem;
  color: #8a8880;
  margin: 0;
}

/* Tracking Cards List */
.tracking-group-list[b-mw0dmhn21w] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tracking-card[b-mw0dmhn21w] {
  background-color: #ffffff;
  border-radius: var(--ut-radius-lg, 0.75rem);
  border: 1px solid;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.tracking-card--giveaway[b-mw0dmhn21w] {
  border-color: #d8eadb;
}

.tracking-card--borrow[b-mw0dmhn21w] {
  border-color: #d9e6f3;
}

.tracking-card-row[b-mw0dmhn21w] {
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tracking-card--giveaway .tracking-card-row:hover[b-mw0dmhn21w] {
  background-color: #f6fbf7;
}

.tracking-card--borrow .tracking-card-row:hover[b-mw0dmhn21w] {
  background-color: #f8fbff;
}

.tracking-card-main[b-mw0dmhn21w] {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.tracking-card-icon-wrap[b-mw0dmhn21w] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tracking-card-icon-wrap--giveaway[b-mw0dmhn21w] {
  background-color: #eef9f0;
  border-color: #d8eadb;
  color: var(--ut-success, #1a7a30);
}

.tracking-card-icon-wrap--borrow[b-mw0dmhn21w] {
  background-color: #eef6fd;
  border-color: #d9e6f3;
  color: #1a6b8a;
}

.tracking-card-details[b-mw0dmhn21w] {
  flex: 1;
  min-width: 0;
}

.tracking-card-title-row[b-mw0dmhn21w] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
  .tracking-card-title-row[b-mw0dmhn21w] {
    flex-direction: row;
    align-items: center;
  }
}

.tracking-card-identity[b-mw0dmhn21w] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.tracking-code-badge[b-mw0dmhn21w] {
  padding: 0.125rem 0.5rem;
  background-color: var(--ut-dark, #1a1a1a);
  color: var(--ut-gold, #e8a000);
  font-family: var(--ut-font-mono, monospace);
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  flex-shrink: 0;
}

.tracking-card-title[b-mw0dmhn21w] {
  font-family: var(--ut-font-heading, inherit);
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.875rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .tracking-card-title[b-mw0dmhn21w] {
    font-size: 1rem;
  }
}

.tracking-badges[b-mw0dmhn21w] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.tracking-badge[b-mw0dmhn21w] {
  padding: 0.125rem 0.5rem;
  border-radius: var(--ut-radius-sm, 0.25rem);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid;
  display: inline-block;
  line-height: 1.4;
}

.tracking-badge--count[b-mw0dmhn21w] {
  background-color: var(--ut-gray-light, #f5f4f0);
  color: #8a8780;
  border-color: var(--ut-border-color, #e5e3dc);
}

.tracking-badge--success[b-mw0dmhn21w] {
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
  border-color: #b8e8c0;
}

.tracking-badge--warning[b-mw0dmhn21w] {
  background-color: #fff8e6;
  color: #b37a00;
  border-color: #ffe099;
}

.tracking-badge--revision[b-mw0dmhn21w] {
  background-color: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}

.tracking-badge--danger[b-mw0dmhn21w] {
  background-color: #fef0f0;
  color: var(--ut-danger, #d94040);
  border-color: #f8c0c0;
}

.tracking-badge--info[b-mw0dmhn21w] {
  background-color: #e0f2fe;
  color: #1a6b8a;
  border-color: #bae6fd;
}

.tracking-card-meta[b-mw0dmhn21w] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.tracking-meta-item[b-mw0dmhn21w] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tracking-meta-icon[b-mw0dmhn21w] {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.tracking-card-arrow-wrap[b-mw0dmhn21w] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.tracking-card-arrow-btn[b-mw0dmhn21w] {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: all 0.15s ease;
}

.tracking-card-row:hover .tracking-card-arrow-btn[b-mw0dmhn21w] {
  color: var(--ut-dark, #1a1a1a);
  background-color: #f0ede5;
}
/* /Components/Views/User/TrackingDetail/TrackingDetail.razor.rz.scp.css */
/* ==========================================================================
   TRACKING DETAIL - SCOPED COMPONENT STYLES
   ========================================================================== */

.tracking-detail-page[b-0m0r0wu5j0] {
  isolation: isolate;
  min-height: 100vh;
  padding: 2rem 1rem;
  font-family: inherit;
}

@media (min-width: 640px) {
  .tracking-detail-page[b-0m0r0wu5j0] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .tracking-detail-page[b-0m0r0wu5j0] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.tracking-container[b-0m0r0wu5j0] {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* Page Header */
.page-header[b-0m0r0wu5j0] {
  margin-bottom: 1.5rem;
}

.page-title[b-0m0r0wu5j0] {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}

.title-accent[b-0m0r0wu5j0] {
  color: var(--ut-gold, #e8a000);
}

.page-date[b-0m0r0wu5j0] {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ut-muted, #a09e99);
  margin-top: 0.25rem;
}

/* Back Button */
.back-btn[b-0m0r0wu5j0] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.back-btn:hover[b-0m0r0wu5j0] {
  color: var(--ut-dark, #1a1a1a);
}

/* Main Card */
.tracking-main-card[b-0m0r0wu5j0] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Responsive Timelines */
.desktop-timeline[b-0m0r0wu5j0] {
  display: none;
}
.mobile-timeline[b-0m0r0wu5j0] {
  display: block;
}

@media (min-width: 1024px) {
  .desktop-timeline[b-0m0r0wu5j0] {
    display: block;
  }
  .mobile-timeline[b-0m0r0wu5j0] {
    display: none;
  }
}

.timeline-desktop-box[b-0m0r0wu5j0] {
  background-color: #faf9f5;
  padding: 1.25rem;
  border-bottom: 1px solid var(--ut-border, #e5e3dc);
}

.timeline-mobile-box[b-0m0r0wu5j0] {
  background-color: #faf9f5;
  padding: 1.25rem;
  border-bottom: 1px solid var(--ut-border, #e5e3dc);
}

.timeline-section-title[b-0m0r0wu5j0] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0ede5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Horizontal Track (Desktop) */
.timeline-horizontal-track[b-0m0r0wu5j0] {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 700px;
  width: 100%;
  padding: 0 1rem;
  margin-top: 0.5rem;
}

.timeline-horizontal-line[b-0m0r0wu5j0] {
  position: absolute;
  top: 11px;
  left: 80px;
  right: 80px;
  height: 2px;
  background-color: #d1d5db;
  z-index: 0;
}

.timeline-step-cell[b-0m0r0wu5j0] {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 8rem;
  flex-shrink: 0;
}

.timeline-dot[b-0m0r0wu5j0] {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  z-index: 10;
  margin-bottom: 0.625rem;
}

.timeline-dot.done[b-0m0r0wu5j0] {
  border-color: var(--ut-success, #1a7a30);
}

.timeline-dot.active[b-0m0r0wu5j0] {
  border-color: #2563eb;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.timeline-dot.warning[b-0m0r0wu5j0] {
  border-color: #f59e0b;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.timeline-dot.danger[b-0m0r0wu5j0] {
  border-color: var(--ut-danger, #d94040);
}

/* Vertical Track (Mobile) */
.timeline-vertical-track[b-0m0r0wu5j0] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0.5rem 0;
  padding-left: 0.5rem;
}

.timeline-vertical-line[b-0m0r0wu5j0] {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 15px;
  width: 2px;
  background-color: #d1d5db;
  z-index: 0;
}

.timeline-vertical-step[b-0m0r0wu5j0] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
}

/* Content Area */
.tracking-content-body[b-0m0r0wu5j0] {
  padding: 1.25rem;
}

@media (min-width: 1024px) {
  .tracking-content-body[b-0m0r0wu5j0] {
    padding: 1.5rem;
  }
}

/* PDF Documents Bar */
.docs-bar[b-0m0r0wu5j0] {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.docs-bar-label[b-0m0r0wu5j0] {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ut-muted, #8a8780);
  margin-right: 0.5rem;
  display: block;
  width: 100%;
}

@media (min-width: 640px) {
  .docs-bar-label[b-0m0r0wu5j0] {
    width: auto;
  }
}

.doc-link[b-0m0r0wu5j0] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.doc-link-disabled[b-0m0r0wu5j0] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: rgba(243, 244, 246, 0.5);
  border: 1px solid rgba(229, 231, 235, 0.5);
  color: #9ca3af;
  cursor: not-allowed;
}

/* Order Summary Box (2 Column Grid) */
.order-summary-box[b-0m0r0wu5j0] {
  background-color: #faf9f5;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .order-summary-box[b-0m0r0wu5j0] {
    padding: 1.5rem;
  }
}

.order-summary-header[b-0m0r0wu5j0] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ut-border, #e5e3dc);
}

.order-summary-grid[b-0m0r0wu5j0] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .order-summary-grid[b-0m0r0wu5j0] {
    grid-template-columns: repeat(2, 1fr);
  }
}

.order-column-card[b-0m0r0wu5j0] {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
}

.column-card-title[b-0m0r0wu5j0] {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a09e99;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Dispute Notice Banner */
.dispute-banner[b-0m0r0wu5j0] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .dispute-banner[b-0m0r0wu5j0] {
    flex-direction: row;
    align-items: center;
  }
}

/* Hybrid Product View */
.tracking-table-box[b-0m0r0wu5j0] {
  display: none;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border, #e5e3dc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
}

@media (min-width: 768px) {
  .tracking-table-box[b-0m0r0wu5j0] {
    display: block;
  }
}

.tracking-mobile-cards[b-0m0r0wu5j0] {
  display: block;
}

@media (min-width: 768px) {
  .tracking-mobile-cards[b-0m0r0wu5j0] {
    display: none;
  }
}

.tracking-table[b-0m0r0wu5j0] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.tracking-table th[b-0m0r0wu5j0] {
  padding: 0.875rem 1.25rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ut-muted, #8a8780);
  background-color: #f5f4f0;
  border-bottom: 1px solid var(--ut-border, #e5e3dc);
}

.tracking-table td[b-0m0r0wu5j0] {
  padding: 1.25rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--ut-border, #e5e3dc);
}

.tracking-table tr:hover[b-0m0r0wu5j0] {
  background-color: #faf9f5;
}
/* /Components/Views/User/TransactionHistory/TransactionHistory.razor.rz.scp.css */
/* ==========================================================================
   TRANSACTION HISTORY - SCOPED COMPONENT STYLES
   United Tractors WMS Design System
   ========================================================================== */

.th-page[b-8etacfln7g] {
  padding: 2rem 0 3rem;
  min-height: 100vh;
  font-family: inherit;
}

@media (min-width: 768px) {
  .th-page[b-8etacfln7g] {
    padding: 3rem 0;
  }
}

.th-container[b-8etacfln7g] {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .th-container[b-8etacfln7g] {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .th-container[b-8etacfln7g] {
    padding: 0 2rem;
  }
}

/* Page Header */
.th-header[b-8etacfln7g] {
  margin-bottom: 1.5rem;
}

.th-title[b-8etacfln7g] {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}

.th-title-accent[b-8etacfln7g] {
  color: var(--ut-gold, #e8a000);
}

.th-subtitle[b-8etacfln7g] {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ut-muted, #a09e99);
  margin-top: 0.25rem;
}

/* Filter Card */
.th-filter-card[b-8etacfln7g] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 2rem;
}

.th-filter-toggle[b-8etacfln7g] {
  padding: 0.875rem 1.25rem;
  background-color: #faf9f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
  outline: none;
}

.th-filter-toggle:hover[b-8etacfln7g],
.th-filter-toggle:focus[b-8etacfln7g] {
  background-color: #f3f2eb;
}

.th-filter-toggle--open[b-8etacfln7g] {
  border-bottom: 1px solid var(--ut-border-color, #e5e3dc);
}

.th-filter-toggle-left[b-8etacfln7g] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.th-filter-toggle-icon[b-8etacfln7g] {
  width: 1rem;
  height: 1rem;
  color: #8a8880;
  transition: color 0.15s ease;
}

.th-filter-toggle:hover .th-filter-toggle-icon[b-8etacfln7g] {
  color: #374151;
}

.th-filter-toggle-text[b-8etacfln7g] {
  font-size: 0.68rem;
  font-weight: 800;
  color: #5a5855;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.th-filter-toggle:hover .th-filter-toggle-text[b-8etacfln7g] {
  color: #111827;
}

.th-filter-active-pill[b-8etacfln7g] {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 9px;
  font-weight: 800;
  background-color: #fff8e6;
  color: var(--ut-warning, #b37a00);
  border: 1px solid #ffe099;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.th-filter-arrow[b-8etacfln7g] {
  width: 1rem;
  height: 1rem;
  color: #8a8880;
  transition: transform 0.2s ease, color 0.15s ease;
}

.th-filter-toggle:hover .th-filter-arrow[b-8etacfln7g] {
  color: #374151;
}

.th-filter-arrow--collapsed[b-8etacfln7g] {
  transform: rotate(180deg);
}

.th-filter-content[b-8etacfln7g] {
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.th-filter-section-title[b-8etacfln7g] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.5rem;
}

.th-quick-filter-row[b-8etacfln7g] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.th-quick-btn[b-8etacfln7g] {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  background-color: #ffffff;
  color: #5a5855;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
}

.th-quick-btn:hover[b-8etacfln7g] {
  background-color: #faf9f5;
}

.th-quick-btn--active-all[b-8etacfln7g] {
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  border-color: var(--ut-gold, #e8a000);
}

.th-quick-btn--active-giveaway[b-8etacfln7g] {
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
  border-color: #b8e8c0;
}

.th-quick-btn--active-borrow[b-8etacfln7g] {
  background-color: #eef6fd;
  color: var(--ut-info, #1a6b8a);
  border-color: #d9e6f3;
}

.th-quick-btn--active-both[b-8etacfln7g] {
  background-color: #fff8e6;
  color: var(--ut-warning, #b37a00);
  border-color: #ffe099;
}

.th-quick-btn--active-in[b-8etacfln7g] {
  background-color: var(--ut-gray-light, #f5f4f0);
  color: #374151;
  border-color: var(--ut-border-color, #e5e3dc);
}

.th-quick-icon[b-8etacfln7g] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.th-divider[b-8etacfln7g] {
  border-top: 1px solid #f0ede5;
}

.th-date-grid[b-8etacfln7g] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .th-date-grid[b-8etacfln7g] {
    grid-template-columns: repeat(2, 1fr);
  }
}

.th-input-group[b-8etacfln7g] {
  display: flex;
  flex-direction: column;
}

.th-input-label[b-8etacfln7g] {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
  margin-bottom: 0.375rem;
}

.th-date-input[b-8etacfln7g] {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  background-color: var(--ut-gray-light, #f5f4f0);
  border: 1px solid var(--ut-border-color, #e5e3dc);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  color: var(--ut-dark, #1a1a1a);
}

.th-date-input:focus[b-8etacfln7g] {
  background-color: #ffffff;
  border-color: var(--ut-gold, #e8a000);
}

.th-filter-actions[b-8etacfln7g] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.th-btn-reset[b-8etacfln7g] {
  padding: 0.625rem 1.25rem;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  color: #3a3835;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.th-btn-reset:hover[b-8etacfln7g] {
  background-color: #f9fafb;
}

.th-btn-reset:active[b-8etacfln7g] {
  transform: scale(0.97);
}

.th-btn-apply[b-8etacfln7g] {
  padding: 0.625rem 1.5rem;
  background-color: var(--ut-gold, #e8a000);
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.th-btn-apply:hover[b-8etacfln7g] {
  background-color: #d49300;
}

.th-btn-apply:active[b-8etacfln7g] {
  transform: scale(0.97);
}

.th-action-icon[b-8etacfln7g] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Alerts */
.th-alert[b-8etacfln7g] {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.th-alert--success[b-8etacfln7g] {
  background-color: #eef9f0;
  border: 1px solid #b8e8c0;
  color: var(--ut-success, #1a7a30);
}

.th-alert--danger[b-8etacfln7g] {
  background-color: #fef0f0;
  border: 1px solid #f8c0c0;
  color: var(--ut-danger, #d94040);
}

.th-alert-icon[b-8etacfln7g] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Empty State */
.th-empty-card[b-8etacfln7g] {
  background-color: #ffffff;
  padding: 4rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.th-empty-icon[b-8etacfln7g] {
  width: 4rem;
  height: 4rem;
  color: #d1d0cb;
  margin: 0 auto 1rem;
}

.th-empty-title[b-8etacfln7g] {
  font-size: 1rem;
  font-weight: 700;
  color: #8a8880;
  letter-spacing: 0.025em;
  margin: 0 0 0.25rem;
}

.th-empty-desc[b-8etacfln7g] {
  font-size: 0.75rem;
  color: #a09e99;
  margin: 0;
}

/* Accordion Group List */
.th-group-list[b-8etacfln7g] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.th-accordion-card[b-8etacfln7g] {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.th-accordion-card--giveaway[b-8etacfln7g] {
  border-color: #d8eadb;
}

.th-accordion-card--borrow[b-8etacfln7g] {
  border-color: #d9e6f3;
}

.th-accordion-card--stockin[b-8etacfln7g] {
  border-color: var(--ut-border-color, #e5e3dc);
}

.th-accordion-header[b-8etacfln7g] {
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background-color 0.15s ease;
}

.th-accordion-header--giveaway:hover[b-8etacfln7g] {
  background-color: #f6fbf7;
}

.th-accordion-header--borrow:hover[b-8etacfln7g] {
  background-color: #f8fbff;
}

.th-accordion-header--stockin:hover[b-8etacfln7g] {
  background-color: #faf9f5;
}

.th-accordion-left[b-8etacfln7g] {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.th-type-icon[b-8etacfln7g] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.th-type-icon--giveaway[b-8etacfln7g] {
  background-color: #eef9f0;
  border-color: #d8eadb;
  color: var(--ut-success, #1a7a30);
}

.th-type-icon--borrow[b-8etacfln7g] {
  background-color: #eef6fd;
  border-color: #d9e6f3;
  color: var(--ut-info, #1a6b8a);
}

.th-type-icon--stockin[b-8etacfln7g] {
  background-color: var(--ut-gray-light, #f5f4f0);
  border-color: var(--ut-border-color, #e5e3dc);
  color: #6b7280;
}

.th-svg-icon[b-8etacfln7g] {
  width: 1.25rem;
  height: 1.25rem;
}

.th-accordion-meta[b-8etacfln7g] {
  flex: 1;
  min-width: 0;
}

.th-title-row[b-8etacfln7g] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

@media (min-width: 640px) {
  .th-title-row[b-8etacfln7g] {
    flex-direction: row;
    align-items: center;
  }
}

.th-group-name[b-8etacfln7g] {
  font-family: inherit;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  font-size: 0.875rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .th-group-name[b-8etacfln7g] {
    font-size: 1rem;
  }
}

.th-badges-wrap[b-8etacfln7g] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.th-badge[b-8etacfln7g] {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid;
  display: inline-block;
  line-height: 1.4;
}

.th-badge--count[b-8etacfln7g] {
  background-color: var(--ut-gray-light, #f5f4f0);
  color: var(--ut-muted, #8a8780);
  border-color: var(--ut-border-color, #e5e3dc);
}

.th-badge--giveaway[b-8etacfln7g] {
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
  border-color: #b8e8c0;
}

.th-badge--borrow[b-8etacfln7g] {
  background-color: #eef6fd;
  color: var(--ut-info, #1a6b8a);
  border-color: #d9e6f3;
}

.th-badge--stockin[b-8etacfln7g] {
  background-color: #ffffff;
  color: #4b5563;
  border-color: #e5e7eb;
}

.th-badge--waiting[b-8etacfln7g] {
  background-color: #fff8e6;
  color: var(--ut-warning, #b37a00);
  border-color: #ffe099;
}

.th-badge--approved[b-8etacfln7g] {
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
  border-color: #b8e8c0;
}

.th-badge--revision[b-8etacfln7g] {
  background-color: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}

.th-badge--rejected[b-8etacfln7g] {
  background-color: #fef0f0;
  color: var(--ut-danger, #d94040);
  border-color: #f8c0c0;
}

.th-badge--handover[b-8etacfln7g] {
  background-color: #e0f2fe;
  color: var(--ut-info, #1a6b8a);
  border-color: #bae6fd;
}

.th-meta-row[b-8etacfln7g] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.th-meta-item[b-8etacfln7g] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.th-meta-icon[b-8etacfln7g] {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.th-accordion-right[b-8etacfln7g] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.th-toggle-btn[b-8etacfln7g] {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: all 0.15s ease;
}

.th-accordion-header:hover .th-toggle-btn[b-8etacfln7g] {
  color: var(--ut-dark, #1a1a1a);
  background-color: #f0ede5;
}

.th-arrow-icon[b-8etacfln7g] {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease;
}

.th-arrow-icon--expanded[b-8etacfln7g] {
  transform: rotate(180deg);
}

/* Accordion Body */
.th-accordion-body[b-8etacfln7g] {
  border-top: 1px solid var(--ut-border-color, #e5e3dc);
  background-color: #faf9f5;
  padding: 1.25rem;
}

.th-body-grid[b-8etacfln7g] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .th-body-grid[b-8etacfln7g] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Vertical Timeline Card (Column 1) */
.th-timeline-card[b-8etacfln7g] {
  background-color: #ffffff;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .th-col-timeline[b-8etacfln7g] {
    grid-column: span 1;
  }
  .th-col-details[b-8etacfln7g] {
    grid-column: span 3;
  }
}

.th-timeline-heading[b-8etacfln7g] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0ede5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.th-timeline-title-icon[b-8etacfln7g] {
  width: 1rem;
  height: 1rem;
  color: var(--ut-gold, #e8a000);
}

.th-timeline-flow[b-8etacfln7g] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0.5rem 0;
  padding-left: 0.5rem;
}

.th-timeline-track[b-8etacfln7g] {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 15px;
  width: 2px;
  background-color: #d1d5db;
  z-index: 0;
}

.th-timeline-item[b-8etacfln7g] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  z-index: 10;
}

.th-timeline-dot[b-8etacfln7g] {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  z-index: 10;
}

.th-timeline-dot--done[b-8etacfln7g] {
  border-color: #059669;
}

.th-timeline-dot--active[b-8etacfln7g] {
  border-color: #2563eb;
  animation: thPulse-b-8etacfln7g 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.th-timeline-dot--warning[b-8etacfln7g] {
  border-color: #f59e0b;
  animation: thPulse-b-8etacfln7g 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.th-timeline-dot--danger[b-8etacfln7g] {
  border-color: #e11d48;
}

.th-dot-fill[b-8etacfln7g] {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.th-dot-fill--done[b-8etacfln7g] {
  background-color: var(--ut-success, #1a7a30);
}

.th-dot-fill--warning[b-8etacfln7g] {
  background-color: #f59e0b;
}

.th-dot-fill--danger[b-8etacfln7g] {
  background-color: var(--ut-danger, #d94040);
}

.th-dot-ping-wrap[b-8etacfln7g] {
  position: relative;
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
  align-items: center;
  justify-content: center;
}

.th-dot-ping[b-8etacfln7g] {
  animation: thPing-b-8etacfln7g 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background-color: #60a5fa;
  opacity: 0.75;
}

.th-dot-inner-active[b-8etacfln7g] {
  position: relative;
  display: inline-flex;
  border-radius: 9999px;
  height: 0.5rem;
  width: 0.5rem;
  background-color: #2563eb;
}

.th-dot-inner-default[b-8etacfln7g] {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: #d1d5db;
}

.th-step-icon[b-8etacfln7g] {
  width: 0.625rem;
  height: 0.625rem;
  color: #ffffff;
}

@keyframes thPulse-b-8etacfln7g {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes thPing-b-8etacfln7g {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.th-timeline-body[b-8etacfln7g] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.th-timeline-name[b-8etacfln7g] {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.th-timeline-name--done[b-8etacfln7g] { color: var(--ut-success, #1a7a30); }
.th-timeline-name--active[b-8etacfln7g] { color: #2563eb; }
.th-timeline-name--warning[b-8etacfln7g] { color: #d97706; }
.th-timeline-name--danger[b-8etacfln7g] { color: var(--ut-danger, #d94040); }
.th-timeline-name--default[b-8etacfln7g] { color: #6b7280; }

.th-timeline-sub[b-8etacfln7g] {
  font-size: 10px;
  color: #9ca3af;
  line-height: 1.25;
}

.th-timeline-sub--warning[b-8etacfln7g] {
  color: #d97706;
  font-weight: 600;
}

.th-timeline-sub--danger[b-8etacfln7g] {
  color: #e11d48;
  font-weight: 600;
}

.th-timeline-time[b-8etacfln7g] {
  font-size: 9px;
  color: #9ca3af;
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.th-time-icon[b-8etacfln7g] {
  width: 0.75rem;
  height: 0.75rem;
  color: #9ca3af;
}

/* Details Section (Column 2) */
.th-details-col[b-8etacfln7g] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Document PDF Bar */
.th-docs-bar[b-8etacfln7g] {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.th-docs-label[b-8etacfln7g] {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8880;
  margin-right: 0.5rem;
  display: block;
  width: 100%;
}

@media (min-width: 640px) {
  .th-docs-label[b-8etacfln7g] {
    width: auto;
  }
}

.th-doc-btn[b-8etacfln7g] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.th-doc-btn--request[b-8etacfln7g] {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #374151;
}

.th-doc-btn--request:hover[b-8etacfln7g] {
  background-color: #f3f4f6;
}

.th-doc-btn--handover[b-8etacfln7g] {
  background-color: #faf5ff;
  border-color: #e9d5ff;
  color: #7e22ce;
}

.th-doc-btn--handover:hover[b-8etacfln7g] {
  background-color: #f3e8ff;
}

.th-doc-btn--return[b-8etacfln7g],
.th-doc-btn--documentation[b-8etacfln7g] {
  background-color: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.th-doc-btn--return:hover[b-8etacfln7g],
.th-doc-btn--documentation:hover[b-8etacfln7g] {
  background-color: #d1fae5;
}

.th-doc-btn--disabled[b-8etacfln7g] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: rgba(243, 244, 246, 0.5);
  border: 1px solid rgba(229, 231, 235, 0.5);
  color: #9ca3af;
  cursor: not-allowed;
}

.th-doc-icon[b-8etacfln7g] {
  width: 0.875rem;
  height: 0.875rem;
}

/* Stats 4-Grid */
.th-stats-grid[b-8etacfln7g] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .th-stats-grid[b-8etacfln7g] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .th-stats-grid[b-8etacfln7g] {
    grid-template-columns: repeat(4, 1fr);
  }
}

.th-stat-card[b-8etacfln7g] {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.th-stat-icon-wrap[b-8etacfln7g] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.th-stat-icon-wrap--amber[b-8etacfln7g] { background-color: #fffbeb; color: #f59e0b; }
.th-stat-icon-wrap--emerald[b-8etacfln7g] { background-color: #ecfdf5; color: #10b981; }
.th-stat-icon-wrap--purple[b-8etacfln7g] { background-color: #faf5ff; color: #a855f7; }
.th-stat-icon-wrap--blue[b-8etacfln7g] { background-color: #eff6ff; color: #3b82f6; }

.th-stat-svg[b-8etacfln7g] {
  width: 1.25rem;
  height: 1.25rem;
}

.th-stat-info[b-8etacfln7g] {
  min-width: 0;
  flex: 1;
}

.th-stat-label[b-8etacfln7g] {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a8880;
  margin-bottom: 0.125rem;
}

.th-stat-val[b-8etacfln7g] {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-stat-val--accent[b-8etacfln7g] {
  color: var(--ut-gold, #e8a000);
}

.th-stat-val--muted[b-8etacfln7g] {
  color: #9ca3af;
}

.th-stat-sub[b-8etacfln7g] {
  display: block;
  font-size: 10px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-pts-unit[b-8etacfln7g] {
  font-size: 10px;
  font-weight: 400;
  color: #6b7280;
}

/* Notes Card */
.th-notes-card[b-8etacfln7g] {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.th-notes-title[b-8etacfln7g] {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #8a8880;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.th-notes-text[b-8etacfln7g] {
  font-size: 0.75rem;
  color: #5a5855;
  margin: 0;
}

/* Table of Items */
.th-table-container[b-8etacfln7g] {
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
}

.th-table[b-8etacfln7g] {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  white-space: nowrap;
}

.th-thead-row[b-8etacfln7g] {
  background-color: var(--ut-gray-light, #f5f4f0);
  border-bottom: 1px solid var(--ut-border-color, #e5e3dc);
}

.th-th[b-8etacfln7g] {
  padding: 0.625rem 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a8880;
}

.th-th--right[b-8etacfln7g] {
  text-align: right;
}

.th-tbody-row[b-8etacfln7g] {
  border-bottom: 1px solid var(--ut-border-color, #e5e3dc);
  transition: background-color 0.15s ease;
}

.th-tbody-row:last-child[b-8etacfln7g] {
  border-bottom: none;
}

.th-tbody-row:hover[b-8etacfln7g] {
  background-color: #faf9f5;
}

.th-td[b-8etacfln7g] {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.th-td--right[b-8etacfln7g] {
  text-align: right;
}

.th-prod-cell[b-8etacfln7g] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.th-prod-thumb[b-8etacfln7g] {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.25rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  overflow: hidden;
  flex-shrink: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-prod-img[b-8etacfln7g] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.th-prod-info[b-8etacfln7g] {
  min-width: 0;
}

.th-prod-name[b-8etacfln7g] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.th-prod-sku[b-8etacfln7g] {
  font-size: 9px;
  color: #6b7280;
  background-color: #ffffff;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: var(--ut-font-mono, monospace);
  display: inline-block;
  margin-top: 0.125rem;
}

.th-qty-val[b-8etacfln7g] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
}

.th-qty-unit[b-8etacfln7g] {
  font-size: 10px;
  font-weight: 400;
  color: #6b7280;
}

.th-stock-sub[b-8etacfln7g] {
  font-size: 9px;
  color: #9ca3af;
}

.th-credit-val[b-8etacfln7g] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.th-credit-icon[b-8etacfln7g] {
  width: 0.875rem;
  height: 0.875rem;
  color: #f59e0b;
}

.th-credit-sub[b-8etacfln7g] {
  font-size: 9px;
  color: #9ca3af;
}

.th-text-muted[b-8etacfln7g] {
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 500;
}

.th-type-pill[b-8etacfln7g] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid;
}

.th-type-pill--borrow[b-8etacfln7g] {
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
  border-color: #b8e8c0;
}

.th-type-pill--giveaway[b-8etacfln7g] {
  background-color: #e0f2fe;
  color: var(--ut-info, #1a6b8a);
  border-color: #bae6fd;
}

.th-type-pill--stockin[b-8etacfln7g] {
  background-color: #ffffff;
  color: #4b5563;
  border-color: #e5e7eb;
}

.th-approver-row[b-8etacfln7g] {
  font-size: 10px;
  color: #4b5563;
}

.th-approver-name[b-8etacfln7g] {
  font-weight: 700;
  color: var(--ut-dark, #1a1a1a);
}

.th-date-main[b-8etacfln7g] {
  font-size: 0.75rem;
  color: #4b5563;
  font-weight: 500;
}

.th-date-time[b-8etacfln7g] {
  font-size: 9px;
  color: #9ca3af;
}

.th-status-badge[b-8etacfln7g] {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid;
}

.th-status-badge--waiting[b-8etacfln7g] {
  border-color: #fde68a;
  background-color: #fef3c7;
  color: #92400e;
}

.th-status-badge--approved[b-8etacfln7g] {
  border-color: #b8e8c0;
  background-color: #eef9f0;
  color: var(--ut-success, #1a7a30);
}

.th-status-badge--revision[b-8etacfln7g] {
  border-color: #bae6fd;
  background-color: #e0f2fe;
  color: var(--ut-info, #1a6b8a);
}

.th-status-badge--rejected[b-8etacfln7g] {
  border-color: #f8c0c0;
  background-color: #fef0f0;
  color: var(--ut-danger, #d94040);
}

.th-status-badge--handover[b-8etacfln7g] {
  border-color: #bae6fd;
  background-color: #e0f2fe;
  color: var(--ut-info, #1a6b8a);
}

.th-status-badge--default[b-8etacfln7g] {
  border-color: var(--ut-border-color, #e5e3dc);
  background-color: var(--ut-gray-light, #f5f4f0);
  color: var(--ut-muted, #8a8780);
}

/* Pagination */
.th-pagination-card[b-8etacfln7g] {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.th-pagination-info[b-8etacfln7g] {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ut-muted, #8a8780);
}

.th-page-current[b-8etacfln7g] {
  color: var(--ut-dark, #1a1a1a);
}

.th-pagination-btns[b-8etacfln7g] {
  display: flex;
  gap: 0.5rem;
}

.th-page-btn[b-8etacfln7g] {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--ut-border-color, #e5e3dc);
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.th-page-btn:hover:not(:disabled)[b-8etacfln7g] {
  background-color: #faf9f5;
}

.th-page-btn:disabled[b-8etacfln7g] {
  opacity: 0.3;
  cursor: not-allowed;
}

.th-page-btn-icon[b-8etacfln7g] {
  width: 1.25rem;
  height: 1.25rem;
}