body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 80%;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

.text-areas {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.text-areas textarea {
    width: 48%;
    min-height: 150px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical; /* Allow vertical resize, disable horizontal */
}

/* New layout for main control buttons */
.main-controls-container {
    display: flex;
    justify-content: space-between; /* Pushes left and right groups apart */
    align-items: center; /* Align items vertically if they have different heights */
    margin-bottom: 20px; /* Space before text areas */
    flex-wrap: wrap; /* Allow controls to wrap on smaller screens if necessary */
    gap: 10px; /* Add some gap if they wrap */
}

.control-group {
    display: flex;
    gap: 10px; /* Spacing between buttons within a group */
    flex-wrap: wrap; /* Allow buttons in a group to wrap */
}

/* General styling for buttons in control groups and copy action button */
.control-group button,
.copy-action button,
.button-like-label { /* .button-like-label is already styled, but ensure consistency */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    text-decoration: none; /* For labels styled as buttons */
    display: inline-block; /* For labels to respect padding */
}

.control-group button:hover,
.copy-action button:hover,
.button-like-label:hover {
    background-color: #0056b3;
}
/* Note: Specific button styles like #toggle-delete-mode-btn.active will still override these general styles. */
/* The .button-like-label rule below can be removed if the above general rule is sufficient and desired.
   For now, I'll keep it to ensure it explicitly has its intended styles, then remove if redundant. */


.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Spacing between cards */
    margin-bottom: 20px;
    padding: 10px;
    border: 1px dashed #ccc;
    min-height: 50px;
    border-radius: 4px;
}

.card {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    padding: 10px;
    border-radius: 4px;
    cursor: grab;
    min-width: 100px; /* Minimum width for a card */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column; /* Stack content and buttons vertically */
    gap: 5px; /* Space between content and buttons */
}

.card-content {
    margin-bottom: 5px; /* Space between text and buttons */
    word-wrap: break-word; /* Wrap long words */
    white-space: pre-wrap; /* Respect newlines and spaces */
}

.card-buttons button {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
    margin-right: 5px; /* Space between buttons */
}

.card-buttons button.delete-btn {
    background-color: #dc3545;
}
.card-buttons button.delete-btn:hover {
    background-color: #c82333;
}

.card-buttons button.edit-btn {
    background-color: #ffc107;
    color: #333;
}
.card-buttons button.edit-btn:hover {
    background-color: #e0a800;
}

/* Style for when dragging a card */
.card.dragging {
    opacity: 0.5;
    border: 2px dashed #007bff;
}

/* Placeholder for drop zones when dragging over */
textarea.drag-over {
    border-color: #007bff;
    background-color: #f0f8ff; /* Light blue background */
}

.copy-action {
    text-align: center;
    margin-top: 20px;
}

/* Modal Styles */
.modal {
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    display: none; /* Hidden by default - will be controlled by JS */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Keep this for centering if not using flexbox for modal parent */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    display: flex;
    /* --- Size Adjustments --- */
    width: 66vw; /* 2/3 of viewport width */
    max-width: 900px; /* Optional: prevent it from becoming too large on very wide screens */
    height: 66vh; /* 2/3 of viewport height */
    max-height: 800px; /* Optional: prevent it from becoming too tall on very tall screens */
    /* --- End Size Adjustments --- */
    flex-direction: column;
    gap: 10px;
}

.modal-content h3 {
    margin-top: 0;
    text-align: center;
}

/* Ensure the content textarea within the modal can grow */
#modal-content-textarea { /* This ID was introduced in the previous step */
    flex-grow: 1; /* Allow textarea to take up available space in flex column */
    width: 100%; /* Full width relative to modal-content */
    /* min-height is already set, but flex-grow will handle dynamic height better */
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.modal-content button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#modal-save-btn {
    background-color: #007bff;
    color: white;
}
#modal-save-btn:hover {
    background-color: #0056b3;
}

#modal-cancel-btn {
    background-color: #6c757d;
    color: white;
}
#modal-cancel-btn:hover {
    background-color: #545b62;
}

.close-modal-btn {
    color: #aaa;
    float: right; /* Position to the right */
    font-size: 28px;
    font-weight: bold;
    align-self: flex-end; /* Align to the end of the flex container (modal-content) */
    cursor: pointer;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Styles for the copy status message */
#copy-status-message {
    margin-top: 10px; /* Already set inline, but good to have in CSS */
    min-height: 20px; /* Already set inline */
    text-align: center; /* Center the message text */
    font-weight: bold;
    font-size: 0.9em;
    /* Colors are set by JavaScript (green for success, red for error, orange for warning) */
}

/* .button-like-label styles are now part of the general rule above.
   If specific overrides are needed for .button-like-label that differ
   from .control-group button, they can remain here.
   For now, assuming the general rule is fine. If not, this can be uncommented and adjusted.
.button-like-label {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    display: inline-block;
}

.button-like-label:hover {
    background-color: #0056b3;
}
*/

/* Styles for Deletion Mode */
#toggle-delete-mode-btn.active {
    background-color: #dc3545; /* Red to indicate active delete mode */
    color: white;
}
#toggle-delete-mode-btn.active:hover {
    background-color: #c82333; /* Darker red on hover */
}

/* Optional: Visual cue for cards when deletion mode is active */
body.delete-mode-active .card {
    cursor: crosshair !important; /* Change cursor to indicate clickable for delete */
    border-color: #dc3545 !important; /* Red border for cards, !important to override existing */
    opacity: 0.8;
}
body.delete-mode-active .card:hover {
    opacity: 1;
    box-shadow: 0 0 5px #dc3545;
}

/* Ensure card buttons are less prominent or disabled in delete mode */
body.delete-mode-active .card .card-buttons button {
    opacity: 0.5;
    pointer-events: none; /* Disable clicks on original edit/delete buttons in delete mode */
}

/* Adjust modal title input if needed, though it's usually single line */
#modal-title-input {
     width: 100%; /* Full width relative to modal-content */
     padding: 10px;
     /* margin-bottom: 10px; */ /* Space is now handled by flex gap in modal-row */
     box-sizing: border-box;
     border: 1px solid #ccc;
     border-radius: 4px;
}

.modal-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

#modal-color-palette {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.color-swatch.selected {
    border-color: #333;
}


#modal-title-input {
    flex-grow: 1;
}

#modal-color-input {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* Styles for card title and hidden content */
.card-title {
    font-weight: bold;
    margin-bottom: 5px; /* Space between title and buttons if content is short */
    word-wrap: break-word;
    white-space: pre-wrap; /* Allows newlines in title if any */
}

.card-main-content {
    display: none; /* Ensure this is hidden */
}

/* Styling for the duplicate button on cards */
.card-buttons button.duplicate-btn {
    background-color: #17a2b8; /* Info blue */
    /* Assuming other button properties like color, padding, border, etc.,
       are handled by a general .card-buttons button rule.
       If not, they should be added here for consistency. */
}

.card-buttons button.duplicate-btn:hover {
    background-color: #138496; /* Darker info blue on hover */
}

/* Styling for selected card */
.card.selected {
    border-color: #007bff; /* Example: Blue border */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Example: Blue shadow */
    background-color: #e7f3ff; /* Example: Light blue background */
}

/* Delete Confirmation Toggle Switch Styles */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between switch and label */
}

#toggle-delete-confirm-checkbox {
    height: 0;
    width: 0;
    visibility: hidden;
}

.toggle-switch-label {
    cursor: pointer;
    text-indent: -9999px; /* Hide the actual label text */
    width: 40px; /* Width of the switch */
    height: 20px; /* Height of the switch */
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

.toggle-switch-label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px; /* Size of the knob */
    height: 16px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

#toggle-delete-confirm-checkbox:checked + .toggle-switch-label {
    background: #007bff; /* 'on' color */
}

#toggle-delete-confirm-checkbox:checked + .toggle-switch-label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

.toggle-switch-label:active:after {
    width: 22px; /* Optional: make knob wider on click */
}