/* --- styles.css (Consolidated with Calendar & Status Styles) --- */

/* SGL Brand Guidelines & Global Styles
   ========================================================================== */
:root {
    --brand-red: #ff0000;
    --brand-red-dark: #cc0000;
    --brand-white: #ffffff;
    --brand-grey-light: #f2f2f2;
    --brand-grey-medium: #dddddd;
    --brand-grey-dark: #aaaaaa;
    --brand-black: #000000;
    --brand-blue: #007bff;          /* Default for booked slots if no user color */
    --brand-blue-light: #e0f0ff;    /* Used for empty slots (example) */

    /* Status Specific Colors */
    --status-arrived-bg: #d4edda;       /* Light Green */
    --status-arrived-text: #155724;     /* Dark Green */
    --status-arrived-border: #28a745;   /* Green */

    --status-unloading-bg: #fff3cd;     /* Light Orange/Yellow */
    --status-unloading-text: #856404;   /* Dark Orange/Yellow */
    --status-unloading-border: #fd7e14; /* Orange */

    --status-completed-bg: #e9ecef;     /* Light Grey */
    --status-completed-text: #495057;   /* Darker Grey */
    --status-completed-border: #6c757d; /* Grey */

    --status-cancelled-bg: #f8f9fa;     /* Very Light Grey */
    --status-cancelled-text: #6c757d;   /* Grey */
    --status-cancelled-border: #adb5bd; /* Medium Grey */


    --font-family-primary: Arial, sans-serif;
    --font-size-large: 2rem;      /* 32px */
    --font-size-medium: 1.2rem;   /* 19.2px */
    --font-size-normal: 1rem;     /* 16px */
    --font-size-small: 0.875rem;  /* 14px */
    --font-size-xs: 0.75rem;      /* 12px */

    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;

    --border-radius: 5px;
}

body {
    font-family: var(--font-family-primary);
    background-color: var(--brand-grey-light);
    margin: 0;
    padding: var(--spacing-md);
    color: var(--brand-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Common Action Button Styles
   ========================================================================== */
.action-button {
    background-color: var(--brand-red);
    color: var(--brand-white);
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-normal);
    cursor: pointer;
    border-radius: var(--border-radius);
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s, color 0.2s;
    margin-left: var(--spacing-xs);
}
.action-button:first-child {
    margin-left: 0;
}
.action-button:hover {
    background-color: var(--brand-red-dark);
}
.action-button.secondary {
    background-color: var(--brand-grey-medium);
    color: var(--brand-black);
    border: 1px solid var(--brand-grey-dark);
}
.action-button.secondary:hover {
    background-color: var(--brand-grey-dark);
}

/* Header Action Button (e.g., View Audit Log on dashboard header) */
.header-action-button {
    background-color: transparent;
    color: var(--brand-white);
    border: 1px solid var(--brand-white);
    padding: 5px 10px;
    font-size: var(--font-size-small);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color 0.2s, color 0.2s;
    margin-left: 10px;
    cursor: pointer;
    display: inline-block;
}
.header-action-button:hover {
    background-color: var(--brand-white);
    color: var(--brand-red);
    border-color: var(--brand-white);
}


/* Authentication Pages Styles
   ========================================================================== */
.auth-container {
    background-color: var(--brand-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--brand-grey-medium);
    width: 100%;
    max-width: 450px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.auth-header { text-align: center; margin-bottom: var(--spacing-md); }
.auth-header svg { margin: 0 auto var(--spacing-sm) auto; height: 48px; width: auto; color: var(--brand-red); }
.auth-header h1 { font-size: var(--font-size-large); font-weight: bold; color: var(--brand-black); margin-bottom: var(--spacing-xs); }
.auth-header p { font-size: var(--font-size-normal); color: var(--brand-black); opacity: 0.8; }
.form-group { margin-bottom: var(--spacing-md); }
.form-group label { display: block; font-size: var(--font-size-normal); font-weight: 500; margin-bottom: var(--spacing-xs); color: var(--brand-black); }
.form-input, .form-select { /* Added .form-select for modals */
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--font-size-normal);
    border: 1px solid var(--brand-grey-medium);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--brand-red);
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
}
.form-input.input-error { border-color: var(--brand-red); }
.form-input.input-error:focus { box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2); }
.error-message { color: var(--brand-red); font-size: var(--font-size-small); margin-top: var(--spacing-xs); }
.hidden { display: none !important; }
.form-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs); font-size: var(--font-size-small); }
.form-actions a { color: var(--brand-red); text-decoration: none; font-weight: 500; }
.form-actions a:hover { text-decoration: underline; }
#registerForm .form-actions a { display: none; }
.submit-button { display: flex; width: 100%; justify-content: center; background-color: var(--brand-red); color: var(--brand-white); border: none; padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-normal); font-weight: 500; cursor: pointer; border-radius: var(--border-radius); transition: background-color 0.2s; }
.submit-button:disabled { background-color: var(--brand-grey-medium); cursor: not-allowed; }
.submit-button:hover:not(:disabled) { background-color: var(--brand-red-dark); }
.submit-button:focus:not(:disabled) { outline: none; box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.4); }
.security-reminder { font-size: var(--font-size-xs); color: var(--brand-black); opacity: 0.7; margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); text-align: left; }
.security-reminder strong { font-weight: bold; }
.auth-link-container { margin-top: var(--spacing-lg); text-align: center; font-size: var(--font-size-small); color: var(--brand-black); opacity: 0.8; }
.auth-link-container a { font-weight: 500; color: var(--brand-red); text-decoration: none; }
.auth-link-container a:hover { text-decoration: underline; }
.message-box { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-50px); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius); box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1000; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; pointer-events: none; font-size: var(--font-size-normal); }
.message-box.success { background-color: #28a745; color: white; }
.message-box.error { background-color: var(--brand-red); color: white; }
.message-box.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Dashboard Page General Styles
   ========================================================================== */
.page-container {
    background-color: var(--brand-white);
    padding: 0; 
    border-radius: var(--border-radius);
    border: 1px solid var(--brand-grey-medium);
    width: 100%;
    max-width: 1200px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.page-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--brand-red); color: var(--brand-white); border-radius: var(--border-radius) var(--border-radius) 0 0; flex-wrap: wrap; }
.page-header h1 { font-size: var(--font-size-large); margin: 0; flex-grow: 1; }
.page-header .user-info-container { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--font-size-small); margin-left: var(--spacing-md); }
.user-info-container .logged-in-user { margin-bottom: var(--spacing-xs); }
.online-users-section { font-size: var(--font-size-xs); margin-top: var(--spacing-xs); text-align: right; }
.online-users-display { display: inline; }
.online-users-display span:not(:last-child)::after { content: ", "; }
.logout-button { background-color: transparent; color: var(--brand-white); border: 1px solid var(--brand-white); padding: 5px 10px; font-size: var(--font-size-small); text-decoration: none; border-radius: var(--border-radius); transition: background-color 0.2s, color 0.2s; }
.logout-button:hover { background-color: var(--brand-white); color: var(--brand-red); border-color: var(--brand-white); }
.main-content { padding: var(--spacing-md); }
.controls-area { margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.controls-area input[type="week"], .controls-area .week-nav-button { padding: var(--spacing-xs); border-radius: var(--border-radius); border: 1px solid var(--brand-grey-medium); }
.controls-area .week-nav-button { margin-left: 0; }

/* Booking Calendar - Static Structural & Base Styles
   ========================================================================== */
.booking-calendar {
    display: grid; /* This is essential. The grid-template-columns is set in dashboard.php <style> */
    gap: 1px; 
    background-color: var(--brand-grey-medium); 
    border: 1px solid var(--brand-grey-medium);
    overflow-x: auto; 
    margin-bottom: var(--spacing-md, 16px); /* Added from embedded */
}

.calendar-header, .time-slot-label {
    padding: var(--spacing-sm, 8px);
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid var(--brand-grey-medium, #ccc);
    background-color: #f8f9fa; 
    font-size: var(--font-size-small, 0.875rem);
}

.time-slot-label {
    border-right: 1px solid var(--brand-grey-medium, #ccc);
    font-size: var(--font-size-xs, 0.75rem);
    justify-content: flex-end; 
    padding-right: var(--spacing-sm);
    position: sticky; 
    left: 0;
    z-index: 5; 
}
.calendar-header.time-header { /* For the top-left empty "Time" cell */
     background-color: var(--brand-grey-light); /* Match time-slot-label */
}


.calendar-day-header {
    /* grid-column: span X; is set in dashboard.php <style> */
    text-align: center;
    background-color: #e9ecef; 
    border-bottom: 1px solid var(--brand-grey-medium);
    position: sticky; 
    top: 0;
    z-index: 10; 
}

.calendar-type-header {
    background-color: #f8f9fa;
    font-size: var(--font-size-xs);
    font-weight: normal;
    position: sticky;
    top: 0; /* Needs adjustment if day headers are also sticky. This might need to be combined or reconsidered */
    /* If day headers are also sticky, type headers need a top offset equal to day header height */
    /* For simplicity if day headers are sticky, type headers might not need to be, or styles adjusted */
}


.empty-slot,
.booked-slot {
    border-right: 1px solid var(--brand-grey-light, #eee); /* From embedded */
    border-bottom: 1px solid var(--brand-grey-light, #eee); /* From embedded */
    min-height: 55px; 
    padding: 4px; 
    box-sizing: border-box; 
    overflow: hidden; 
    position: relative; 
    font-size: var(--font-size-small, 0.875rem); /* From embedded */
    line-height: 1.3; /* From embedded */
    cursor: pointer; /* From embedded */
    /* Common flex properties from main styles.css for .booked-slot */
    display: flex; 
    align-items: flex-start; 
    justify-content: flex-start;
    flex-direction: column; 
}
.empty-slot { /* Overrides common properties if needed */
    justify-content: center; /* Center content in empty slots if any */
    align-items: center;
}


.empty-slot[data-type="loose"] { background-color: #e0f0ff; }
.empty-slot[data-type="palletised"] { background-color: #d4eaff; }
.empty-slot[data-type="pallets"] { background-color: #c7e3ff; }
.empty-slot:hover { background-color: #e9f5ff; } /* From embedded */
.empty-slot[data-type="loose"]:hover { background-color: #cce4ff; } /* From embedded */
.empty-slot[data-type="palletised"]:hover { background-color: #b8daff; } /* From embedded */
.empty-slot[data-type="pallets"]:hover { background-color: #a8d0ff; } /* From embedded */

.booked-slot strong {
    display: block;
    font-weight: bold;
    margin-bottom: 2px;
    word-break: break-word;
}
.booked-slot .details-tooltip { /* From main styles.css, seems ok */
    display: none;
    position: absolute;
    bottom: 105%;
    left: 0;
    background-color: var(--brand-black);
    color: var(--brand-white);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    z-index: 20; 
    font-size: var(--font-size-xs);
    width: 200px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0.9;
}
.booked-slot:hover .details-tooltip {
    display: block;
}


/* Selected Booking & Details Area Styles */
.selected-booking-details-area {
    margin-top: var(--spacing-md, 16px);
    padding: var(--spacing-md, 16px);
    background-color: var(--brand-white, #fff);
    border: 1px solid var(--brand-grey-medium, #ccc);
    border-radius: var(--border-radius, 4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.selected-booking-details-area h3 {
    margin-top: 0;
    color: var(--brand-red, #ff0000);
    font-size: var(--font-size-medium, 1.125rem);
    border-bottom: 1px solid var(--brand-grey-light, #eee);
    padding-bottom: var(--spacing-sm, 8px);
    margin-bottom: var(--spacing-sm, 8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selected-booking-details-area .no-booking-selected {
    color: var(--brand-grey-dark, #aaa);
    font-style: italic;
}
.booked-slot.selected-booking {
    outline: 3px solid var(--brand-red, #ff0000) !important; /* Ensure it overrides status borders if needed */
    outline-offset: -2px;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    z-index: 5; 
}
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xs, 4px) var(--spacing-lg, 24px);
}
.details-grid p { margin: var(--spacing-xs, 4px) 0; font-size: var(--font-size-normal, 1rem); display: flex; flex-wrap: nowrap; }
.details-grid p strong { display: inline-block; width: 140px; color: #333; flex-shrink: 0; margin-right: var(--spacing-sm, 8px); font-weight: bold; }
.details-grid p span { word-break: break-word; flex-grow: 1; }
.details-grid p.full-width { grid-column: 1 / -1; }
.details-actions-container { display: flex; margin-left: auto; } /* From embedded */
.edit-booking-btn, .delete-booking-btn { margin-left: var(--spacing-xs, 4px); }
.delete-booking-btn { background-color: var(--brand-black, #000); }
.delete-booking-btn:hover { background-color: #333; }


/* Status, Pulse, and Indicators */
@keyframes pulse-active-booking {
    0% { opacity: 1; }
    50% { opacity: 0.7; } 
    100% { opacity: 1; }
}
.booking-active-pulse {
    animation: pulse-active-booking 1.5s infinite ease-in-out;
}
.booking-reference-on-grid { font-size: 0.75em; display: block; opacity: 0.7; margin-top: 2px; font-style: italic; }
.booking-status-on-grid { font-size: 0.8em; display: block; opacity: 0.8; margin-top: 2px; font-weight: 500; }

.booked-slot.status-is-arrived {
    background-color: var(--status-arrived-bg) !important;
    color: var(--status-arrived-text) !important;
    border-left: 5px solid var(--status-arrived-border) !important;
}
.booked-slot.status-is-unloading {
    background-color: var(--status-unloading-bg) !important;
    color: var(--status-unloading-text) !important;
    border-left: 5px solid var(--status-unloading-border) !important;
}
.booked-slot.status-is-completed {
    background-color: var(--status-completed-bg) !important;
    color: var(--status-completed-text) !important;
    border-left: 5px solid var(--status-completed-border) !important;
    opacity: 0.8;
}
.booked-slot.status-is-completed strong,
.booked-slot.status-is-completed span {
    text-decoration: line-through;
}
.booked-slot.status-is-cancelled {
    background-color: var(--status-cancelled-bg) !important; 
    color: var(--status-cancelled-text) !important;
    border-left: 5px solid var(--status-cancelled-border) !important;
    opacity: 0.6;
}
.booked-slot.status-is-cancelled strong,
.booked-slot.status-is-cancelled span {
    text-decoration: line-through;
}
/* Ensure text inside status-styled slots inherits its new color */
.status-is-arrived strong, .status-is-arrived span, .status-is-arrived .booking-reference-on-grid, .status-is-arrived .booking-status-on-grid,
.status-is-unloading strong, .status-is-unloading span, .status-is-unloading .booking-reference-on-grid, .status-is-unloading .booking-status-on-grid,
.status-is-completed strong, .status-is-completed span, .status-is-completed .booking-reference-on-grid, .status-is-completed .booking-status-on-grid,
.status-is-cancelled strong, .status-is-cancelled span, .status-is-cancelled .booking-reference-on-grid, .status-is-cancelled .booking-status-on-grid {
    color: inherit !important; 
}


/* WebSocket Interaction Indicators */
.booked-slot.is-being-edited-by-other {
    outline: 3px dashed orange !important;
    opacity: 0.7;
    cursor: not-allowed;
}
.empty-slot.drag-over { /* From main styles.css, but relevant if used */
    background-color: #a8d3ff;
    border: 2px dashed var(--brand-blue);
}
.empty-slot.is-being-considered-for-add {
    outline: 2px dashed var(--brand-blue, #007bff);
    background-color: #add8e6 !important; 
    position: relative; 
}
.editing-indicator-text,
.adding-indicator-text {
    font-size: 0.7em;
    color: #cc5500; 
    display: block;
    font-weight: bold;
    margin-top: 2px;
    animation: blink-animation 1.2s steps(2, start) infinite;
}
@keyframes blink-animation {
    to { visibility: hidden; }
}


/* Modal styles previously in dashboard.php */
.color-picker-label { display: block; margin-bottom: var(--spacing-xs, 4px); }
.color-picker-input { width: 100%; height: 35px; border: 1px solid var(--brand-grey-medium, #ccc); border-radius: var(--border-radius, 4px); padding: var(--spacing-xs, 4px); box-sizing: border-box; cursor: pointer; }
.color-swatch { display: inline-block; width: 20px; height: 20px; border: 1px solid var(--brand-grey-dark, #aaa); margin-left: var(--spacing-sm, 8px); vertical-align: middle; border-radius: 3px; }
.recent-colors-container { margin-bottom: var(--spacing-sm, 8px); padding-top: var(--spacing-xs, 4px); }
.recent-colors-container p { font-size: var(--font-size-small, 0.875rem); margin-bottom: var(--spacing-xs, 4px); color: #555; }
.recent-color-swatches { display: flex; flex-wrap: wrap; gap: var(--spacing-xs, 4px); }
.recent-color-swatch { width: 24px; height: 24px; border: 1px solid var(--brand-grey-medium, #ccc); border-radius: 3px; cursor: pointer; transition: transform 0.1s ease-in-out; }
.recent-color-swatch:hover { transform: scale(1.1); border-color: var(--brand-grey-dark, #aaa); }

.brand-modal { /* This might be a duplicate if you have it globally, ensure one definition */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; 
}
.brand-modal-content { /* This might be a duplicate if you have it globally */
    background-color: var(--brand-white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    max-width: 90%; 
    width: 500px; /* Adjusted from 450px for potentially more content */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    max-height: 90vh; /* from embedded */
    overflow-y: auto; /* from embedded */
    display: flex; /* from embedded */
    flex-direction: column; /* from embedded */
}
.brand-modal-content form { flex-grow: 1; } /* from embedded */
.brand-modal-content h3 { /* Style for modal title */
    margin-top: 0;
    font-size: var(--font-size-medium);
    color: var(--brand-red);
    margin-bottom: var(--spacing-md); /* Add some space below title */
}
.brand-modal-content .form-input, 
.brand-modal-content .form-select {
    /* These are already styled by global .form-input, .form-select, so this is redundant if definitions are identical */
    margin-bottom: var(--spacing-md); /* Ensure consistent bottom margin for form elements in modal */
}
.brand-modal-content textarea.form-input { min-height: 80px; /* Slightly more for details */ }
.brand-modal-content .form-group { margin-bottom: var(--spacing-md); /* Consistent group margin */ }
.brand-modal-content .form-group-inline { display: flex; gap: var(--spacing-sm); }
.brand-modal-content .form-group-inline .form-group { flex: 1; }
.brand-modal-content .form-actions-sticky { /* from embedded */
    position: sticky;
    bottom: -1px; 
    background-color: var(--brand-white, #fff);
    padding-top: var(--spacing-sm, 8px);
    padding-bottom: var(--spacing-sm, 8px); 
    border-top: 1px solid var(--brand-grey-light, #eee);
    z-index: 10; 
    text-align: right; /* Align buttons to the right */
}
.brand-modal-content .form-actions-sticky .action-button {
    margin-left: var(--spacing-sm); /* Space between buttons */
}
.brand-modal-content .form-actions-sticky .action-button:first-child {
    margin-left: 0;
}


/* Responsive Adjustments (Merged from both files)
   ========================================================================== */
@media (max-width: 768px) {
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-header h1 { font-size: 1.5rem; margin-bottom: var(--spacing-sm); }
    .page-header .user-info-container { align-items: flex-start; margin-left: 0; width: 100%; }
    .online-users-section { text-align: left; }
    .controls-area { flex-direction: column; align-items: flex-start; }
    .controls-area > * { margin-bottom: var(--spacing-xs); }
    .controls-area span[style*="margin-left: auto"] { margin-left: 0 !important; margin-top: var(--spacing-sm); }
    
    .calendar-header, .time-slot-label { font-size: var(--font-size-xs, 0.7rem); padding: var(--spacing-xs, 4px); }
    .empty-slot, .booked-slot { min-height: 45px; } /* From embedded */
}

@media (max-width: 480px) {
    .page-header .user-info-container { font-size: 0.8rem; }
    .logout-button { padding: 3px 6px; font-size: var(--font-size-xs); }
    .action-button { font-size: var(--font-size-small); }
    .brand-modal-content {
        width: 95%; /* More width on very small screens */
        padding: var(--spacing-sm);
    }
    .details-grid {
        grid-template-columns: 1fr; /* Stack details on very small screens */
    }
    .details-grid p strong {
        width: 100px; /* Adjust label width if needed */
    }
}