/* ============================================
   SUMMARY ITEMS CARD
   ============================================
   Digunakan untuk summary items di summary menu
   ID format: summaryItemsCard_{partName}_{itemsID}
   Style copied from partCard for consistency
   ============================================ */

.summary-items-card {
    padding: 1rem; /* p-4 */
    border: 1px solid rgba(0, 0, 0, 0.08); /* border border-apple */
    border-radius: 0.75rem; /* rounded-xl */
    background-color: white; /* bg-white */
    cursor: pointer;
    transition: all 0.2s ease; /* transition-all duration-200 */
}

.summary-items-card:hover {
    border-color: rgb(203, 213, 225); /* hover:border-slate-300 */
    background-color: rgb(248, 250, 252); /* hover:bg-slate-50 */
    transform: translateY(-1px); /* hover-lift */
}

.summary-items-card.active {
    border: 2px solid rgb(59, 130, 246); /* border-2 border-blue-500 */
    background-color: rgb(239, 246, 255); /* bg-blue-50 */
}

/* ============================================
   FLEX LAYOUT - Ensure proper spacing
   Same as partCard structure
   ============================================ */

/* Container flex - ensure flex layout */
.summary-items-card > .flex.items-center {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important; /* space-x-4 */
    width: 100% !important;
}

/* A: Image container - fixed width (w-16 h-16) */
.summary-items-card > .flex.items-center > .w-16.h-16 {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 4rem !important; /* w-16 = 64px */
    height: 4rem !important; /* h-16 = 64px */
    min-width: 4rem !important;
    max-width: 4rem !important;
}

/* B: Content container - takes remaining space (flex-1) */
.summary-items-card > .flex.items-center > .flex-1 {
    flex: 1 1 0% !important; /* flex-1 */
    min-width: 0 !important; /* Allow text truncation if needed */
    flex-shrink: 1 !important; /* Can shrink if needed */
    flex-grow: 1 !important; /* Can grow to fill space */
}

/* C: Icon edit container - fixed size, always on right (w-8 h-8 flex-shrink-0) */
.summary-items-card > .flex.items-center > .w-8.h-8.flex-shrink-0 {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 2rem !important; /* w-8 = 32px */
    height: 2rem !important; /* h-8 = 32px */
    min-width: 2rem !important;
    max-width: 2rem !important;
}