/* Basic reset for consistency */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
}

/* ------------------------------------------------------------------ */
/* NEW: Global Scaling for Dashboard Page */
/* ------------------------------------------------------------------ */
/* Target a wrapper element around the entire dashboard content. 
   You may need to adjust '.lfk-dashboard-main-wrapper' to the actual 
   class/ID of your main content area if this doesn't work. */
.lfk-dashboard-main-wrapper {
    /* Scale the entire element and its children to 80% of their original size */
    transform: scale(0.8);
    /* Set the transformation origin to the top-left corner */
    transform-origin: top left;
    
    /* Calculate the negative margin needed to pull the content back into view 
       after the scaling has offset it (100% - 80% = 20% offset) */
    width: 125%; /* 1 / 0.8 = 1.25. Use 125% to fill the original container width. */
    
    /* Optional: Ensure text remains readable by forcing it to be 100% wide */
    box-sizing: border-box; 
    
    /* Ensure the wrapper doesn't overflow horizontally due to the scaling/width adjustments */
    max-width: 100vw;
    overflow-x: hidden;
}

/* Kanban Board Wrapper - Now handles overall scrolling */
.lfk-kanban-board-wrapper {
    width: 100%; /* Ensure it always takes 100% of its parent's width */
    max-height: calc(100vh - 120px); /* Adjust based on your theme's header/footer height */
    overflow: auto; /* Handles both horizontal and vertical scrolling for the whole board area */
    padding-bottom: 16px; /* Padding for the horizontal scrollbar */
    padding-right: 16px; /* Add some right padding to prevent content from touching scrollbar */
}

/* Kanban Board Container - Now just flexes its columns */
.lfk-kanban-board {
    display: flex;
    gap: 16px; /* Gap between columns */
    min-height: 500px; /* Minimum height for the board content */
    flex-wrap: nowrap; /* Prevent columns from wrapping to the next line */
    
    /* UPDATED: Remove fixed min-width, make it always try to be 100% of its parent */
    width: 100%; /* Ensure it takes 100% of its parent's width */
    /* flex-grow: 1; /* Removed as width: 100% should suffice and prevent over-stretching */
}

/* Kanban Column */
.lfk-kanban-column {
    /* Flex properties: Do not grow, do not shrink, base width 250px */
    flex: 0 0 250px; 
    min-width: 250px; /* Minimum width for readability */
    /* Removed max-width to allow more flexibility if the overall board expands significantly */

    background-color: #ebecf0; /* Trello-like column background */
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle shadow */
    overflow-y: auto; /* Enable vertical scrolling for cards within the column */
    max-height: calc(100vh - 180px); /* Ensure columns don't overflow vertically */
}

.lfk-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
}

.lfk-task-count {
    background-color: #d1d5db;
    color: #4b5563;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Kanban Card */
.lfk-kanban-card {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 0 rgba(9,30,66,.25); /* Subtle card shadow */
    cursor: grab;
    transition: background-color 0.2s ease-in-out;
    border-left: 4px solid #4f46e5; /* Default border color, will be overridden by JS */
    position: relative; /* For edit button positioning */
}

.lfk-kanban-card:active {
    cursor: grabbing;
}

.lfk-kanban-card.dragging {
    opacity: 0.5;
    border: 2px dashed #007bff;
}

.lfk-card-title {
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
}

.lfk-card-meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 4px;
}

.lfk-card-meta strong {
    font-weight: 500;
    color: #4b5563;
}

/* Card Actions Container */
.lfk-card-actions {
    position: absolute; /* Positions it relative to .lfk-kanban-card */
    top: 6px;
    right: 6px;
    display: flex; /* Arranges buttons horizontally */
    gap: 4px; /* Space between buttons */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out; /* Smooth fade-in/out */
    z-index: 10; /* Ensure it's above other card content if needed */
}

/* Show actions on card hover */
.lfk-kanban-card:hover .lfk-card-actions {
    opacity: 1; /* Make visible on hover */
}

/* Styling for Edit and Archive buttons */
.lfk-card-edit-button,
.lfk-card-archive-button {
    background: none; /* No background by default */
    border: none;
    color: #9ca3af; /* Default icon color (gray) */
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex; /* For SVG centering */
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    /* Ensure no default button styles interfere */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Ensure SVG inside buttons takes full available space */
.lfk-card-edit-button svg,
.lfk-card-archive-button svg {
    width: 100%;
    height: 100%;
    display: block; /* Remove extra space below SVG */
}


.lfk-card-edit-button:hover {
    color: #2563eb; /* Blue-600 on hover */
    background-color: #e0e7ff; /* Blue-100 background on hover */
}

.lfk-card-archive-button:hover {
    color: #dc2626; /* Red-600 on hover */
    background-color: #fee2e2; /* Red-100 background on hover */
}

.lfk-card-edit-button:focus,
.lfk-card-archive-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* Focus ring */
}

/* Modal Styling */
#lfk-modal.lfk-modal { /* Increased specificity with ID */
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent body scroll when modal is open */
    background-color: rgba(0,0,0,0.6); /* Dark overlay */
    justify-content: center;
    align-items: center;
    padding: 10px; /* Padding around the modal content */
}

#lfk-modal-content.lfk-modal-content { /* Increased specificity with ID */
    background-color: #fefefe;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    /* Make it full width/height with a small margin */
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    max-width: 100%; /* Allow it to take full width on smaller screens */
    max-height: 100%; /* Allow it to take full height on smaller screens */
}

#lfk-modal-iframe.lfk-modal-iframe { /* Increased specificity with ID */
    width: 100%;
    flex-grow: 1; /* Allow iframe to fill available space */
    border: none;
}

.lfk-close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: #fff; /* Ensure it stands out against iframe content */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 100001; /* Ensure close button is above iframe */
}

.lfk-close-button:hover,
.lfk-close-button:focus {
    color: black;
    text-decoration: none;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .lfk-kanban-column {
        min-width: 200px; /* Allow columns to shrink more on small screens */
    }
    #lfk-modal.lfk-modal {
        padding: 5px;
    }
    #lfk-modal-content.lfk-modal-content {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
    }
    .lfk-close-button {
        top: 5px;
        right: 10px;
        font-size: 24px;
        width: 25px;
        height: 25px;
    }
}

/*
 * Pagination Styling for Upcoming Cases
 */
.lfk-upcoming-cases .pagination {
    display: flex;
    justify-content: center;
    margin-top: 1rem; /* Space from the list above */
}

.lfk-upcoming-cases .pagination .page-numbers {
    display: flex;
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
}

.lfk-upcoming-cases .pagination .page-numbers li {
    margin: 0 0.25rem; /* Space between each page number */
}

.lfk-upcoming-cases .pagination .page-numbers .page-numbers,
.lfk-upcoming-cases .pagination .page-numbers .prev,
.lfk-upcoming-cases .pagination .page-numbers .next {
    color: #4b5563; /* text-gray-700 */
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.25rem;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    display: inline-block;
}

.lfk-upcoming-cases .pagination .page-numbers .page-numbers:hover,
.lfk-upcoming-cases .pagination .page-numbers .prev:hover,
.lfk-upcoming-cases .pagination .page-numbers .next:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
    border-color: #9ca3af; /* border-gray-400 */
}

.lfk-upcoming-cases .pagination .page-numbers .current {
    background-color: #3b82f6; /* bg-blue-500 */
    color: white;
    border-color: #3b82f6;
    pointer-events: none; /* Make current page non-clickable */
}

/* Optional: Hide prev/next on first/last page */
.lfk-upcoming-cases .pagination .page-numbers .prev.dots,
.lfk-upcoming-cases .pagination .page-numbers .next.dots {
    display: none;
}