/* Global Resets and Carbon Base */
body {
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: #f4f4f4; /* Carbon Gray 10 */
    color: #161616; /* Carbon Gray 100 */
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

h2 {
    font-weight: 600; /* Semi-bold, common in Carbon */
    margin-bottom: 1rem; /* 16px */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0; /* Carbon Gray 30 */
}

/* App Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

.ui-kit-sidebar {
    width: 250px;
    background-color: #ffffff; /* White background */
    padding: 1rem; /* 16px */
    border-right: 1px solid #e0e0e0; /* Carbon Gray 30 */
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

.drop-zone-container {
    flex-grow: 1;
    padding: 1rem; /* 16px */
    display: flex;
    flex-direction: column;
}

/* Draggable Items in the Kit */
.draggable-item {
    background-color: #0f62fe; /* IBM Blue 60 */
    color: #ffffff;
    padding: 0.75rem 1rem; /* 12px 16px */
    margin-bottom: 0.75rem; /* 12px */
    border-radius: 0; /* Carbon components often have sharp edges or 0 radius */
    cursor: grab;
    font-size: 0.875rem; /* 14px */
    text-align: center;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.draggable-item:hover {
    background-color: #0353e9; /* Darker blue for hover */
}

.draggable-item.dragging {
    opacity: 0.5;
    border: 1px dashed #0f62fe;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Drop Zone */
.drop-zone {
    flex-grow: 1;
    background-color: #ffffff;
    border: 2px dashed #c6c6c6; /* Carbon Gray 40 */
    padding: 1rem; /* 16px */
    border-radius: 0;
    min-height: 200px; /* Minimum height for visibility */
    position: relative; /* Crucial for absolute positioning of children */
}

.drop-zone p {
    color: #525252; /* Carbon Gray 60 */
    margin: auto; /* Center placeholder text */
}

.drop-zone.drag-over {
    border-color: #0f62fe; /* IBM Blue 60 */
    background-color: #e0e0e03b; /* Light background tint */
}

/* Styles for our custom wrapper around dropped Carbon components */
.dropped-component {
    /* This is the draggable and resizable container.
       Carbon components will be placed inside this.
       It should have minimal styling itself, mostly for layout/interaction. */
    position: absolute; /* Already set by JS */
    /* border: 1px dashed #ccc; */ /* Optional: for debugging the container */
    display: flex; /* Use flexbox to help child fill */
    align-items: stretch; /* Stretch child vertically */
    justify-content: stretch; /* Stretch child horizontally */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* A light shadow for the container itself */
    /* Ensure direct child can expand */
    /* overflow: hidden; */ /* Might be needed if children have margins that break out */
}
.dropped-component > * { /* Target the direct Carbon component child */
    flex-grow: 1; /* Allow child to grow */
    /* min-width: 0; */ /* Prevent flex item from being too large due to intrinsic content size */
    /* min-height: 0; */
}


/* Style for items being moved within the drop zone */
.dropped-component.is-moving {
    opacity: 0.7;
    border: 1px dashed #0f62fe; /* Dashed border like the kit's dragging items */
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    cursor: grabbing; /* Indicate it's being moved */
}

/* Custom Time Picker Layout Styles (inspired by user example) */
.custom-time-row-group {
    background: #fff; /* White background for the group */
    border-radius: 0; /* Example had 4px, but our theme is 0 for components */
    padding: 0;
    margin: 0;
    /* min-width: 410px; /* Let this be controlled by the resizable wrapper */
    /* max-width: 540px; */
    width: 100%; /* Fill its .dropped-component wrapper */
    height: 100%; /* Fill its .dropped-component wrapper */
    box-shadow: 0 2px 8px rgba(0,0,0,0.07); /* From example */
    display: flex;
    align-items: stretch; /* Make fields same height */
    border-bottom: 3px solid #ee5396; /* Magenta underline from example */
    overflow: hidden;
    box-sizing: border-box;
}

.custom-time-field {
    display: flex;
    flex-direction: column;
    /* flex: 1 1 0; */ /* Specific flex values are set inline in JS for now */
    padding: 1.25rem 1rem 0.875rem 1rem; /* 20px 16px 14px 16px (from example) */
    border-right: 1px solid #e0e0e0; /* $ui-03 */
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.custom-time-field:last-child {
    border-right: none;
}

/* Responsive for mobile (from user example) */
@media (max-width: 600px) {
    .custom-time-row-group {
        flex-direction: column;
        /* min-width: 0; */ /* Already 100% width */
        /* max-width: 100vw; */ /* Already 100% width */
        height: auto; /* Adjust height for column layout */
    }
    .custom-time-field {
        border-right: none;
        border-bottom: 1px solid #e0e0e0; /* $ui-03 */
        padding: 1rem 0.625rem 0.5rem 0.625rem; /* (16px 10px 8px 10px) */
    }
    .custom-time-field:last-child {
        border-bottom: none;
    }
}