/* Existing styles ... */


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

.wrap {
    margin: 1em; /* Adjusted for potentially more content */
}

@media (min-width: 750px) {
    .wrap {
        margin: 2em 4em;
    }
}


header {
    display: flex;
    justify-content: space-between;
}

nav ul {
    background: white;
    position:fixed;
    z-index: 999;
    top: 0;
    right: 0;
    height: 100vh;
    margin: 0;
    list-style: none;
    width: 40%;
    text-align: right;
    padding: 2em;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;


    li {
        margin: 1em 0;
        
        &:nth-of-type(1) {
            margin-bottom: 2em;
        }

        a {
            color: #301934;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.5rem;

            &:hover {
                color:rgb(103, 16, 216)
            }
        }
    }
}

.open {
    transform: translateX(0%);
}

p {
    font-size: 1.2rem;
    line-height: 1.5;
}  

.hide-desktop {
        display: block;
    }

.hide-mobile {
        display: none;
    }

.header-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1em;
        
    .divider {
        height: 50px;
        width: 1px;
        border-right: 1px solid gray;
        }

        a {
            text-decoration: none;
            color: #301934;
            font-size: 1.2rem;

        }
    }

#cabin-list {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 420px)); 
    justify-content: center; 
    padding-bottom: 100px; /* Increased padding for potentially taller expanded dock */
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
	color: #301934;
    border-radius: 8px;
    width: 100%; 
}

#cabin-list .cabin-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    position: relative; 
    background-color: #fff; 
    border: 1px solid #ddd; 
    border-radius: 8px;     
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin: 10px; 
    padding: 15px; 
    max-width: 420px; 
    min-height: 150px; 
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
}

#cabin-list .cabin-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
#cabin-list .cabin-item.selected {
    background-color: #e0f7fa;
    box-shadow: 0 0 0 2px #00796b, 0 5px 15px rgba(0,0,0,0.2); 
}

#cabin-list .cabin-item img {
    max-width: 100%;
    order: 1;
    margin-bottom: 5px;
}

#cabin-list .cabin-item input[type="checkbox"] {
    position: absolute;
    top: 10px;
    right: 10px;
    order: 2; 
}

#cabin-list .cabin-item label {
    text-align: center;
    order: 3; 
    width: 100%; 
}

.map-link {
    display: block;
    margin-top: 10px;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.map-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

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

.container h1, 
.container h2, 
.container h3 {
    color: #333; 
}

.container h1 {
    text-align: center;
    margin-bottom: 20px;
}

.container h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 30px;
}

.container h3 {
    margin-top: 20px;
    color: #555; 
}

.container ul {
    list-style-type: none;
    padding-left: 0;
}

#supply-list li {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.container li strong {
    color: #0056b3; 
}

.task-category {
    margin-bottom: 20px;
}

.task-category ul {
    padding-left: 20px; 
}

.task-category > ul > li { 
    background: #e9f5ff; 
    border-color: #cce4ff;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.task-category > ul > li > strong {
    color: #333; 
}


.task-details {
    list-style-type: disc; 
    margin-left: 20px;
    font-size: 0.9em;
    color: #444;
    padding-left: 20px; 
}
.task-details li {
    background: transparent; 
    border: none;
    padding: 2px 0;
    margin-bottom: 2px;
}


#cabin-config-display {
    background-color: #eef;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

#cabin-config-display h2 { 
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd; 
    font-size: 1.2em;
}

#cabin-config-display p {
    margin: 8px 0; 
    font-size: 1rem;
}

.error-message {
    color: red;
    text-align: center;
    padding: 20px;
    font-size: 1.2em;
    border: 1px solid red;
    background-color: #ffeeee;
}
.error-message a {
    color: #900;
    font-weight: bold;
}

.task-details li {
    display: flex;            
    justify-content: space-between; 
    align-items: center;      
    padding: 6px 0;           
    margin-bottom: 5px;       
    cursor: pointer;          
    background: transparent;  
    border: none;             
    transition: opacity 0.2s ease-in-out; 
}

.task-details .task-text {
    flex-grow: 1;             
    margin-right: 10px;       
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

.task-details li.task-completed .task-text {
    text-decoration: line-through;
    color: #777; 
}
.task-details li.task-completed {
    opacity: 0.7; 
}


.task-checkmark {
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    width: 20px;              
    height: 20px;             
    border: 2px solid #0056b3;
    border-radius: 4px;       
    font-size: 16px;          
    font-weight: bold;
    color: transparent;       
    background-color: #fff;   
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    flex-shrink: 0;           
    user-select: none;        
}

.task-checkmark.checked {
    background-color: #0056b3; 
    color: white;             
    border-color: #004080;    
}

.motd {
    background-color: #e0f7fa; 
    color: #00796b; 
    padding: 15px 20px; 
    text-align: center;
    margin: 20px 0; 
    border-radius: 8px;
    font-size: 1.05em; 
    border: 1px solid #b2ebf2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#motd-text { 
    margin: 0;
    line-height: 1.5;
}

.button:active {
    transform: translateY(1px);
}
.button-primary {
    background-color: #A020F0; /* Purple */
    color: #ffffff;
}
.button-primary:hover {
    background-color: #8a1bc4; 
}
.button-secondary {
    background-color: #f5e5e6; /* Light red */
    color: #301934; 
}
.button-secondary:hover {
    background-color: #e8d1d2; 
}
.button-neutral {
    background-color: #6c757d; 
    color: #ffffff;
}
.button-neutral:hover {
    background-color: #5a6268;
}
.button-icon { /* For icon buttons like clear search, to-top */
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 1.2em; /* Adjust as needed */
    padding: 5px;
}
.button-icon:hover {
    color: #fff;
}

.map-links-container { 
    list-style-type: none; 
    padding-left: 0; 
}

.map-link-item {
    background: #f0f8ff; 
    padding: 8px 10px;
    margin: 5px 0;
    border: 1px solid #d1e0ff;
    border-radius: 4px;
    display: block; 
}
 .map-link-item.no-address {
     color: #777;
     font-style: italic;
 }

.map-link-checklist { 
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.map-link-checklist:hover {
    color: #0056b3;
    text-decoration: underline;
}

.search-wrapper {
    position: relative; 
    display: flex; 
    align-items: center;
}

#cabin-search {
    flex-grow: 1; 
}

#clear-search-btn {
    /* If positioned next to input: */
    background: transparent;
    border: none;
    color: #777;
    font-size: 1.5em; 
    cursor: pointer;
    padding: 0 5px;
    margin-left: -30px; 
    z-index: 2; 
}
#clear-search-btn:hover {
    color: #333;
}

#cabin-list .search-prompt,
#cabin-list .no-results {
    grid-column: 1 / -1; 
    text-align: center;
    padding: 30px 20px;
    color: #777;
    font-style: italic;
    font-size: 1.1em;
}

#content-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 170px; /* Increased padding to ensure space for expanded dock and content */
}

/* --- "Recently Selected" Section --- */
#recent-cabins-section-wrapper {
    background-color: #fffaf0;
    border: 1px solid #f8efdc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin: 20px 0;
    overflow: hidden; /* Important for collapse transition */
}

#recent-cabins-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    user-select: none;
}

#recent-cabins-header h3 {
    margin: 0;
    color: #5d4037;
    font-size: 1.1em;
}

.chevron-toggle {
    font-size: 1.2em;
    color: #5d4037;
    padding: 0 5px; /* Make it easier to tap */
}

#recent-cabins-content {
    padding: 0 15px 15px 15px; /* Padding only when expanded */
    max-height: 500px; /* Or enough to show a few rows of cards */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
}

#recent-cabins-section-wrapper.collapsed #recent-cabins-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden; /* Ensure content doesn't leak during collapse */
}

#recent-cabins-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.recent-cabin-item { /* Card style for recent items */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    padding: 10px;
    width: calc(50% - 8px); /* 2 items per row on smaller screens */
    min-width: 130px;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    box-sizing: border-box;
}
.recent-cabin-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.recent-cabin-item img {
    width: 100%;
    max-height: 70px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}
.recent-cabin-item .recent-cabin-name {
    font-size: 0.85em;
    color: #333;
    font-weight: bold;
}
@media (min-width: 480px) {
    .recent-cabin-item {
        width: calc(33.333% - 10px); /* 3 items per row */
    }
}
@media (min-width: 768px) {
    .recent-cabin-item {
        width: calc(25% - 12px); /* 4 items per row */
    }
}
.no-recents {
    font-style: italic; color: #777; width: 100%;
    background-color: transparent; box-shadow: none; padding: 0; border: none;
}


/* --- Floating Dock General --- */
.floating-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #301934;
    color: #f0f0f0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
    z-index: 900;
    box-sizing: border-box;
    border-top: 1px solid #4a2b4d;
    display: flex; /* Use flex for vertical layout */
    flex-direction: column-reverse; /* Keep handle and content at bottom */
    transition: height 0.3s ease-in-out; /* Add height transition */
    height: auto; /* Start with auto height */
     /* Remove max-height limits if they prevent expansion */
}

/* Container for the list shown when expanded */
.dock-expanded-content {
    background-color: #4a2b4d; /* Match handle or choose another color */
    padding: 10px 15px;
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    border-bottom: 1px solid #5a3b5d; /* Separator line */
}
.dock-expanded-content h4 {
    margin: 0 0 5px 0;
    font-size: 0.9em;
    color: #ccc;
}
.dock-expanded-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: calc(30vh - 60px); /* Adjust 30vh and subtract padding/header */
    overflow-y: auto;
    /* Simple scrollbar styling (optional) */
    scrollbar-width: thin;
    scrollbar-color: #888 #4a2b4d;
}
.dock-expanded-content ul li {
    padding: 3px 0;
    font-size: 0.85em;
    border-bottom: 1px dashed #6a4b6d;
}
.dock-expanded-content ul li:last-child {
    border-bottom: none;
}


/* Styles when the dock IS expanded */
#floating-dock.expanded .dock-expanded-content {
    max-height: 30vh; /* Target height (e.g., 30% of viewport height) */
    opacity: 1;
    padding: 10px 15px; /* Restore padding */
}

/* Adjust main dock content when expanded */
#floating-dock.expanded .dock-content {
   /* Maybe add padding-bottom if needed */
}

/* Adjust body padding based on EXPANDED dock height potentially */
/* This might need dynamic adjustment via JS if height varies too much */
/* Or use a simpler, fixed larger padding */
body.dock-visible-padding {
    padding-bottom: 35vh; /* Increased padding to ensure space for expanded dock */
}

/* Dock Handle should always be at the bottom */
#floating-dock .dock-expand-handle {
   /* Ensure it stays below the expanded content */
   flex-direction: column-reverse;
}

/* --- Floating Dock on index.html (main-page-dock) --- */
#floating-dock.main-page-dock {
    display: flex;
    flex-direction: column;
    padding: 0;
    /* height: auto; Let content determine height */
    /* overflow: hidden; This was preventing summary expansion */
}

#floating-dock .dock-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px; /* Reduced gap for tighter mobile */
    padding: 8px 10px; /* Reduced padding */
    width: 100%;
    box-sizing: border-box;
    transition: padding 0.3s ease-in-out; /* For smooth changes if needed */
}

#floating-dock .view-controls-section {
    display: flex;
    align-items: center;
    gap: 5px; /* Gap between the + and - buttons */
    /* margin: 0 5px; /* Optional margin around this section */
}

/* Style for the + and - buttons specifically if .button-icon isn't enough */
#floating-dock .view-controls-section .button.button-icon {
    font-size: 1.4em; /* Make + and - a bit larger */
    padding: 2px 6px; /* Keep padding small */
    min-width: auto; /* Allow buttons to be naturally small */
    line-height: 1;
    background-color: #4a2b4d; /* Example background */
    color: #f0f0f0;
    border: 1px solid #5a3b5d;
    border-radius: 4px; /* Slightly less rounded than other buttons if desired */
}

#floating-dock .view-controls-section .button.button-icon:hover {
    background-color: #5a3b5d; /* Darken on hover */
}


/* Styles for #cabin-list column variations */
/* The default style is already in your #cabin-list rule:
   grid-template-columns: repeat(auto-fill, minmax(200px, 420px)); */

#cabin-list.cols-fewer { /* Fewer columns, meaning larger cards */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* This class can be used to explicitly set/reset to default if needed,
   or JS can just remove other classes to fall back to the base #cabin-list style.
   For the current JS logic, having an explicit default class is cleaner. */
#cabin-list.cols-default {
    grid-template-columns: repeat(auto-fill, minmax(200px, 420px));
}

#cabin-list.cols-more { /* More columns, meaning smaller cards */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

#floating-dock .dock-expand-handle {
    width: 100%;
    text-align: center;
    padding: 4px 0; /* Reduced padding */
    cursor: pointer;
    background-color: #4a2b4d;
    border-top: 1px solid #5a3b5d;
    line-height: 1;
}

#dock-expand-chevron {
    font-size: 1.1em; /* Slightly smaller */
    display: inline-block;
}

/* --- Collapsed State Styles for Dock Summary --- */
#floating-dock.main-page-dock .summary-section { /* Target directly for base styles */
    flex-grow: 1;
    justify-content: center;
    text-align: center;
    font-size: 0.8em; /* Slightly smaller */
    padding: 0 5px;
    min-width: 100px; /* Allow it to shrink more */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Added opacity transition */
    opacity: 1;
}

#floating-dock.main-page-dock:not(.expanded) .summary-section {
    max-height: 1.2em; /* Tight one-liner */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.7; /* Slightly fade when collapsed */
}

/* --- Expanded State Styles for Dock Summary --- */
#floating-dock.main-page-dock.expanded .summary-section {
    max-height: 80px; /* Allow for multiple lines */
    white-space: normal;
    overflow: auto;
    opacity: 1;
    margin-bottom: 5px; /* Space if it wraps */
}

/* Mobile specific adjustments for dock */
@media (max-width: 600px) {
    #floating-dock .dock-content { /* Base for mobile */
        flex-wrap: wrap;
    }
    #floating-dock .search-section {
        min-width: 100%;
        margin-bottom: 5px;
    }
    #floating-dock .actions-section {
        width: 100%;
        justify-content: space-around;
        margin-top: 5px; /* Add space if search and summary are also full width */
    }

    /* When expanded on mobile, summary can take full width */
    #floating-dock.main-page-dock.expanded .summary-section {
        order: 2; /* Place summary between search and actions when expanded and wrapped */
        width: 100%;
        text-align: left;
        margin-top: 5px;
        margin-bottom: 8px;
    }
    /* When collapsed on mobile, summary is more constrained */
    #floating-dock.main-page-dock:not(.expanded) .summary-section {
        order: 0; /* Default order */
        width: auto; /* Allow it to sit next to actions if it fits */
        flex-grow: 1;
        text-align: center;
         /* max-height, overflow, text-overflow from above will apply */
    }
}


#floating-dock .dock-section {
    display: flex;
    align-items: center;
    position: relative;
}
#floating-dock .search-section #cabin-search {
    width: 100%;
    padding: 7px 10px; /* Adjusted padding */
    padding-right: 30px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #4a2b4d;
    color: #f0f0f0;
    font-size: 0.9em;
    box-sizing: border-box;
}
#floating-dock .search-section #cabin-search::placeholder { color: #aaa; }

#floating-dock .search-section #clear-search-btn {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; font-size: 1.3em; cursor: pointer;
    color: #aaa; padding: 0 5px; line-height: 1; z-index: 2;
}
#floating-dock .search-section #clear-search-btn:hover { color: #fff; }

.button {
    padding: 8px 14px; font-size: 0.9em; /* Slightly smaller buttons */
    border: none; border-radius: 18px; cursor: pointer;
    font-weight: bold; transition: background-color 0.2s ease, transform 0.1s ease;
    text-align: center;
}
/* ... (other button styles .button-primary, .button-secondary etc. remain the same) ... */

body.dock-visible-padding {
    padding-bottom: 180px; /* Generous padding for expanded dock */
}

/* Ensure checklist page dock (if still used temporarily) uses general .floating-dock */
.checklist-page-dock {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
}

#checklist-view-container .container {
    margin-bottom: 100px; /* Ensure space for its own dock */
}

/* Style the navigation icon slightly for log viewer js */

#log-viewer-view .cabin-log-map-link .nav-icon {
    font-size: 0.5em; /* Adjust size as needed */
    margin-left: 4px;
    text-decoration: none; /* Ensure icon itself isn't underlined if link is */
    display: inline-block; /* Helps with alignment */
}

#log-viewer-view .cabin-log-map-link {
    text-decoration: none; /* Style links as desired */
    color: #007bff; /* Example link color */
}
#log-viewer-view .cabin-log-map-link:hover {
    text-decoration: underline;
}