/* --- Monthly Wrap-Up Widget --- */
.monthly-wrap-up-widget .wrap-up-content {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.monthly-wrap-up-widget .wrap-up-column {
    padding: 0 20px;
    box-sizing: border-box;
}

.monthly-wrap-up-widget .wrap-up-column:nth-child(1) { /* Winner */
    flex: 2;
    padding-left: 0;
}
.monthly-wrap-up-widget .wrap-up-column:nth-child(2) { /* Others */
    flex: 2;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.monthly-wrap-up-widget .wrap-up-column:nth-child(3) { /* Top Deaths */
    flex: 1.5;
    padding-right: 0;
}

.monthly-wrap-up-widget h5 {
    margin-top: 0;
    font-size: 1em;
    color: #333;
    font-weight: 600; /* BOLD */
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.wrap-up-winner {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wrap-up-trophy-image { /* NEW: Trophy image styling */
    width: 140px; /* Adjust size as needed */
    height: auto;
}

.wrap-up-winner-info h4 {
    margin: 0;
    font-size: 1.2em; /* Base size */
    font-weight: 600; /* BOLD */
}
.wrap-up-winner-info h4 a { /* NEW: Winner's name link styling */
    font-size: 3.0em; /* Twice as big as 1.5em */
    color: #000; /* Darker color for emphasis */
    text-decoration: none;
}
.wrap-up-winner-info h4 a:hover {
    text-decoration: underline;
}

.wrap-up-winner-info p {
    margin: 0;
    font-size: 1.7em;
    color: #555;
}
.wrap-up-others-list {
    list-style: disc; /* Changed to bullet list */
    padding-left: 20px; /* Indent for bullets */
    margin-top: 5px;
}

.wrap-up-others-list li {
    font-size: 0.9em;
    padding: 2px 0;
    color: #666;
}
.wrap-up-others-list li a { /* NEW: Other scorers' name links */
    color: #666;
    text-decoration: none;
}
.wrap-up-others-list li a:hover {
    text-decoration: underline;
}

.wrap-up-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wrap-up-list li {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    padding: 4px 0;
}

.wrap-up-list li.first-top-death { /* NEW: First top death styling */
    font-size: 1.5em; /* 1.5 times bigger */
    font-weight: 600;
    color: #333;
}

.wrap-up-list li span {
    color: #666;
    font-weight: 600; /* BOLD */
    white-space: nowrap;
    padding-left: 10px;
}


/* --- Dashboard General Layout Styles --- */
.dashboard-section-container {
    border: 1px solid #ccc;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dashboard-section-header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-section-header h2 {
    color: white;
    margin: 0;
    font-size: 1.2em;
}

/* --- General Widget Styles --- */
.widget-box {
    width: calc(50% - 10px);
    box-sizing: border-box;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #ccc;
    position: relative;
    z-index: 1;
}

.widget-header {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.widget-header-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee; /* Light border similar to h5 */
    padding-bottom: 5px;
    margin-bottom: 10px; /* Match h5 margin-bottom */
}

.widget-header-with-button .widget-header {
    flex-grow: 1;
    margin-bottom: 0;
    border-bottom: none;
}

.widget-box h3.widget-header {
    padding: 15px;
    margin: 0;
    font-size: 1.2em;
    color: #333;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    background-color: #cccccc;
    z-index: 1;
}

/* --- Fix for Leaderboard Widget Headers --- */
.user-widgets-row .widget-box .widget-header,
.admin-widgets-row .widget-box .widget-header {
    background-color: #cccccc;
    margin-bottom: 0;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-widgets-row .widget-box .widget-header h3,
.admin-widgets-row .widget-box .widget-header h3 {
    margin: 0;
    font-size: 1.2em;
    flex-grow: 1;
}

/* --- Scrollable Content for Widgets --- */
.scrollable-content {
    max-height: 200px;
    overflow-y: auto;
}

.scrollable-widget-content {
    max-height: 400px; /* Approx 10 rows */
    overflow-y: auto;
}

/* --- Dashboard Widget Table/List Styles --- */
.widget-box table {
    width: 100%;
    border-collapse: collapse;
}

.widget-box td {
    padding: 8px 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.widget-box tr:last-child td {
    border-bottom: none;
}

.widget-box table.leaderboard-table td:first-child {
    width: 10%;
}

.widget-box table.leaderboard-table td:last-child {
    text-align: right;
    white-space: nowrap;
    width: 25%;
}

.widget-box table.top-picks-table td:first-child {
    width: 75%;
}

.widget-box table.top-picks-table td:last-child {
    text-align: right;
    white-space: nowrap;
    border-left: 1px solid #eee;
    padding-left: 10px;
}

.no-header-table thead {
    display: none;
}

.widget-box ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.widget-box li {
    padding: 8px 15px;
    border-bottom: 1px solid #eee;
}

.widget-box li:last-child {
    border-bottom: none;
}

/* --- Admin Dashboard Specific Styles --- */
.admin-manage-zone {
    background-color: #ddd;
    padding: 15px 20px;
}

.admin-manage-zone p {
    margin: 0;
    color: #333;
    margin-bottom: 15px;
}

.admin-widgets-row {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding: 0 20px 20px 20px;
}

.admin-widgets-row .widget-box {
    width: calc(50% - 10px);
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
}

.admin-stats-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    padding: 20px;
    background-color: #f0f0f0;
}

.stat-cell {
    flex: 1;
    min-width: 110px; /* Prevent cells from becoming too narrow */
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.stat-cell h3 {
    margin-top: 0;
    font-size: 1.1em;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.stat-cell p {
    margin: 5px 0;
    font-size: 0.95em;
    color: #333;
}

.stat-cell p b {
    font-weight: 600; /* BOLD */
    font-size: 1.2em;
    margin-right: 5px;
}

/* --- User Dashboard Specific Styles --- */
.dashboard-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.user-widgets-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Align to top to prevent stretching */
    gap: 20px;
    padding: 20px;
}

.user-widgets-row .widget-box {
    width: calc(50% - 10px); /* Restore width for flexbox */
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #ccc;
    background-color: #fff;
}

/* --- Recent Deaths Widget --- */
.recent-deaths-widget-bg {
    background-image: url('/static/recent_deaths_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0 0 8px 8px; /* Match the container rounding */
    overflow: hidden; /* Keep background contained */
}

.recent-deaths-widget-bg .deceased {
    background-color: transparent !important;
}

.recent-deaths-widget-bg td {
    color: white;
    font-weight: 600; /* BOLD */
    text-shadow: 1px 1px 3px #000;
}

.recent-deaths-widget-bg th {
    color: white;
    font-weight: 600; /* BOLD */
    text-shadow: 1px 1px 3px #000;
    text-align: center;
    background-color: transparent !important;
}

.recent-deaths-widget-bg td:nth-child(2), /* Age */
.recent-deaths-widget-bg td:nth-child(4), /* Date of Death */
.recent-deaths-widget-bg td:nth-child(5) { /* In Lists */
    text-align: center;
}

/* --- Widget Height/Scroll Solution --- */
.widget-box.top-picks-list {
    display: flex;
    flex-direction: column;
}

.scrollable-table-content {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0; /* A flexbox trick to ensure scrolling works correctly */
}

.scrollable-table-content thead th {
    position: sticky;
    top: 0;
    background-color: #f4f4f4;
    z-index: 1; /* Sits above tbody content */
}

/* Media query for smaller dashboard screens */
@media (max-width: 768px) {
    .widget-box {
        width: 100%;
    }
}

/* --- Overrides for "Your Picks for This Month" widget --- */
#your-picks-current .pick-row {
    background-color: transparent; /* Remove background for living people */
}

#your-picks-current .pick-row.deceased-pick {
    background-color: #e0e0e0; /* A darker gray for deceased people */
}

#your-picks-current .pick-input-display {
    font-size: 1.8em; /* 50% larger than the base 1.2em */
}

/* --- Font override for "Your Picks for Next Month" widget --- */
#your-picks-upcoming .pick-input {
    font-family: "Kalam", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8em; /* 50% larger than the base 1.2em */
}