:root {
    --primary-color: #4CAF50;
    --secondary-color: #035dbc;
    --danger-color: #dc3545;
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --bg-alt: #e9ecef;
    --border-color: #dee2e6;
    --text-dark: #343a40;
    --text-light: #6c757d;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.07); /* REDUCED shadow */
}


/* --- GENERAL LAYOUT & BODY --- */
body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 15px; /* REDUCED base font size for overall compactness */
    margin: 0;
    background-color: var(--bg-body);
    color: var(--text-dark);
}

.app-container {
    padding: 15px; /* REDUCED outer padding */
}

header h2, .machines-area h2 {
    margin-top: 0;
    font-size: 1.5em; /* REDUCED heading size */
}




.main-content {
    display: flex;
    gap: 20px; /* REDUCED gap between columns */
    margin: 0 auto;
}

/* --- LEFT COLUMN: Order Forms & List --- */
.order-list-area {
    flex: 0 0 300px; 
    display: flex;
    flex-direction: column;
    gap: 15px; /* REDUCED gap */
    max-width: 100%; /* CHANGED: from 300px. Let it be controlled by the parent. */
    width: 200px;    /* ADDED: Use width for the ideal size, but max-width allows it to shrink. */
}

/* GOAL: Make "Add new order" section smaller */
.add-order-section {
    background-color: var(--bg-card);
    border-radius: 8px; /* Slightly larger radius for a softer look */
    box-shadow: var(--shadow);
    overflow: hidden; /* This is key for containing the new header's corners */
    padding: 0; /* We remove padding here to let the header touch the edges */
}


.add-order-section h2 {
    /* Create the header bar */
    background-image: linear-gradient(to right, #007bff, #0056b3); /* Blue gradient */
    color: white;
    
    /* Spacing and Alignment */
    padding: 1rem 1.25rem;
    margin: 0;
    
    /* Font Styling */
    font-size: 1.2em;
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

/* We need to add padding to the form itself now */
#add-order-form {
    padding: 1.25rem;
}

#add-order-form input:focus,
#add-order-form select:focus,
.sort-section select:focus {
    /* 1. The border color changes to your primary blue */
    border-color: var(--secondary-color);

    /* 2. A soft "glow" appears around the element, also in blue */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);

    /* 3. Remove the default, often ugly, browser outline */
    outline: none;
}

#add-order-form label { display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.9em; }
#add-order-form input, #add-order-form select {
    width: 100%;
    padding: 0.5rem 0.6rem; /* REDUCED padding */
    margin-bottom: 0.75rem; /* REDUCED margin */
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-sizing: border-box;
}
#add-order-form button {
    width: 100%;
    padding: 0.6rem; /* REDUCED padding */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    margin-top: 0.25rem;
}

#submitOrderButton {
    background-color: var(--secondary-color); /* Use the primary blue */
    transition: background-color 0.2s ease;
}

#submitOrderButton:hover {
    /* A slightly darker blue on hover */
    background-color: #0056b3; 
}

/* Styling for the sort controls section */
.sort-section {
    background-color: var(--bg-card);
    padding: 0.75rem 1rem; /* REDUCED padding */
    border-radius: 6px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sort-section select {
    flex-grow: 1;
    padding: 0.5rem; /* REDUCED padding */
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

/* Styling for the main vertical order list */
#orders-container {
    background-color: var(--bg-alt); /* <--- ADD/CHANGE THIS LINE */
    padding: 1rem;
    border-radius: 6px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
}



/* --- RIGHT COLUMN: Machines --- */
.machines-area {
    flex: 1;
    max-width: none !important; /* remove fixed max-width */
}

#machines-grid {
    display: flex;
    flex-direction: column;
    gap: 10px; /* REDUCED Vertical gap between each machine */
}

.machine-container {
    display: flex;
    align-items: stretch;
    background-color: var(--bg-card); /* The container is the main white card */
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden; /* This is no longer strictly necessary but is good practice */
}

.machine-container h3 {
    /* --- The new "Subtle Panel" style --- */
    background-color: var(--bg-alt); /* Use the light alternate background color */
    color: var(--text-dark);          /* Use the standard dark text for a clean look */
    border-right: 1px solid var(--border-color); /* A clean separator line */

    /* --- Layout and Sizing --- */
    flex: 0 0 120px; /* A nice, defined width for the panel */
    margin: 0;
    padding: 0 1rem;
    
    /* --- Text and Alignment --- */
    font-size: 1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.machine-orders {
    background-color: transparent;
    border: none; /* The outer container now has the border */
    /* Keep all other flex properties */
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 106px;
    padding: 8px; /* A little padding inside the drop zone */
    overflow-x: auto;
    overflow-y: hidden;
}

/* --- SHARED STYLING for .order-item --- */
.order-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.75rem;
    border-radius: 6px;
    position: relative;
    
    /* === THE KEY ENHANCEMENTS START HERE === */

    /* 1. A more noticeable gradient for better definition */
    background-image: linear-gradient(to bottom, #ffffff, #e9ecef); /* Ends with your --bg-alt color */

    /* 2. A crisp border that defines the tile's edges */
    border: 1px solid #dee2e6; /* Your --border-color */

    /* 3. A stronger, more effective shadow to create depth and contrast */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);

    /* --- Animations and Cursor remain the same --- */
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    will-change: transform, box-shadow;
    cursor: grab;
    
    /* --- The colored left border remains a great feature --- */
    border-left-width: 5px; 

}

.order-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.order-item:active {
    cursor: grabbing;
}

.order-item.status-highlight-gruen {
    border-left-color: #2ecc71; /* New, softer green */
}

.order-item.status-highlight-gelb {
    border-left-color: #f1c40f; /* New, golden yellow */
}

.order-item.status-highlight-rot {
    border-left-color: #e74c3c; /* New, softer red */
}


.order-item h4 { font-size: 0.9em; margin: 0; font-weight: 600; }
.order-item p { font-size: 0.8em; margin: 0; color: var(--text-light); }
.order-item .order-actions { display: flex; gap: 5px; margin-top: 5px; align-self: flex-end; }



/* Buttons inside order items */
.order-item .order-actions .button {
    padding: 3px 7px;
    border: none;
    border-radius: 4px;
    color: white; /* This color is only for buttons with a colored background */
    cursor: pointer;
    font-size: 0.8em;
}
.order-actions .edit-button { background-color: var(--secondary-color);}
.order-actions .delete-button { background-color: var(--danger-color); }


/* Style orders specifically when inside a machine's horizontal list */
.machine-orders .order-item {
    width: 160px; /* REDUCED fixed width */
    background-color: white;
}

/* --- Sortable.js Helper Class --- */
.order-item.sortable-ghost {
    /* 1. First, we must explicitly turn OFF the gradient from the .order-item style. */
    background-image: none;

    /* 2. Now, we apply the solid blue color we want. */
    background-color: #c8ebfb;
    
    /* 3. (Optional but recommended) Let's make the ghost even clearer. */
    opacity: 0.9; /* Make it a bit more solid and visible */
    border-color: #a1d9f7; /* Use a matching blue for the border */
    box-shadow: none; /* Turn off the shadow, as it's not needed on the ghost */
}

/* --- Responsive Media Query --- */
@media (max-width: 992px) {
    .main-content {
        flex-direction: column;
    }
}




/* =============================================== */
/* === Toast Notification Styles (NEW) === */
/* =============================================== */

/* The container that holds all the toasts */
#toast-container {
    position: fixed;         /* Stays on the screen even when you scroll */
    top: 20px;               /* 20px from the top */
    right: 20px;              /* 20px from the right */
    z-index: 1000;           /* Sits on top of all other content */
    display: flex;           /* Use flexbox to manage toasts */
    flex-direction: column;  /* Stack toasts vertically */
    gap: 10px;               /* Space between each toast */
}

/* The style for a single toast message */
.toast {
    padding: 12px 20px;
    border-radius: 6px;
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0; /* Start invisible */
    animation: fadeIn 0.5s forwards, fadeOut 0.5s 2.5s forwards; /* Appear, wait 2.5s, then disappear */
}

/* Modifier class for a SUCCESS toast */
.toast--success {
    background-color: #28a745; /* Green */
}

/* Modifier class for an ERROR toast */
.toast--error {
    background-color: #dc3545; /* Red */
}


/* Animation keyframes for appearing and disappearing */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px); /* Slide in from above */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* 2. Style the menu container */
.order-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    color:black
}

/* 3. Style the three-dot button */
.menu-toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem; /* Makes the dots bigger */
    line-height: 1;
    padding: 0 2px;
    color: #555;
    border-radius: 4px;
    color: #555555; /* A dark grey color */

}

.menu-toggle-button:hover {
    color: #000000; /* Black on hover */
    background-color: #f0f0f0; /* A light grey background */
}

/* 4. Style the dropdown panel */
.menu-dropdown {
    /* Hide by default */
    display: none; 
    
    /* Positioning */
    position: absolute;
    right: 0;
    top: 100%; /* Position it right below the button */
    z-index: 100;

    /* Appearance */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-width: 120px;
    list-style: none;
    padding: 5px 0;
    
}

/* 5. The class that makes the dropdown visible */
.menu-dropdown.show {
    display: block;
}

/* 6. Style the action buttons inside the dropdown */
.menu-action-button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-dark); /* <--- ADD THIS LINE */
}

.menu-action-button:hover {
    background-color: #f5f5f5;
}

/* Add a specific color for the delete action to make it stand out */
.menu-action-button.delete-button {
    color: var(--danger-color); /* Make the text red */
    font-weight: 500;
}







.form-group {
    display: flex;
    align-items: first baseline; /* This is key! It vertically aligns the label text and the input box */
    gap: 10px;           /* Adds a nice space between the label and the input */
}

/* 
   We now tell the label inside the form-group NOT to be a block element,
   and to take up only the space it needs.
*/
.form-group label {
    display: inline; /* Or 'initial'. This removes the line-breaking behavior. */
    flex-shrink: 0;  /* Prevents the label from shrinking if the space is tight */
}

/* 
   And we tell the input to grow and fill the remaining available space.
   This is much better than a fixed width.
*/
.form-group input {
    width: 100%10py;       /* Allow the input to take up all remaining space */
    margin-bottom: 0;  /* The margin is now on the parent .form-group */
}