/* =========================================
    ADMIN PANEL STYLESHEET
    ========================================= */

/* Base Layout & Body Styles */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Global Main Content Area */
.admin-main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* End Base Layout & Body Styles */

/* Header & Main Layout */
.page-flex {
    display: flex;
    flex: 1 1 auto;
}
.page-flex nav {
    width: 220px;
    background: #222;
    color: #fff;
    padding: 30px 0px 0px 0px;
    display: flex;
    flex-direction: column;
}
.page-flex main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0px 40px 40px 100px;
}
/* End Header & Main Layout */

/* Admin Panel Section Titles */
.admin-box h2, .admin-box h3,
.admin-form-box h2, .admin-form-box h3 {
    color: #333333;
    max-width: 1300px;
    font-size: 22px;
}
.section-title {
    color: #3d475c;
	
    font-family: Poppins;
    font-weight: 600;
    padding: 15px 0px 10px 0px;
    letter-spacing: 0.5px;
    font-size: 18px;
    display: block;
  
    width: 100%;
}
.settings-form button[type="submit"],
.font-settings-form button[type="submit"] {
    margin-top: 12px;
}
/* End Admin Panel Section Titles */

/* Settings Row & Form Inputs */
.settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    Row-gap: 17px;
    margin-top: 9px;
    margin-bottom: 10px;
}
.settings-label {
    display: flex;
    align-items: center;
    font-size: 1em;
    gap: 6px;
}
/* End Settings Row & Form Inputs */

/* Input and Select Styling for Modern Look */
.settings-row input[type="text"],
.settings-row input[type="number"],
.settings-row input[type="range"],
.settings-row select {
    border: 1px solid #bbb;
    border-radius: 6px;
    font-size: 1em;
    background: #fafbfc;
    transition: border 0.18s, box-shadow 0.18s;
    margin-right: 0px;
    margin-left: 7px;
      text-align: Left;
}

/* MODIFIED: Style for all color inputs to make them thin, rectangular bars */
.settings-row input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #bbb;
    border-radius: 6px;
    width: 140px;
    height: 25px;
    cursor: pointer;
    background: #fafbfc;
    margin-right: 0px;
    box-sizing: border-box;
    transition: border 0.18s, box-shadow 0.18s;
}

.settings-row input[type="color"]::-webkit-color-swatch-wrapper {
}

.settings-row input[type="color"]::-webkit-color-swatch {
    border: none !important;
    border-radius: 6px;
    box-sizing: border-box;
}

.settings-row input[type="color"]::-moz-color-swatch {
    border: none !important;
    border-radius: 6px;
}

/* Ensure the color input's focus style is also consistent */
.settings-row input[type="color"]:focus {
    border-color: #888;
    box-shadow: 0 0 0 2px #e0e0e0;
    outline: none;
}

.settings-row input[type="number"] {
    width: 45px;
    margin-right: 5px;
    margin-left: 3px;
}
.settings-row input[name="title_font_size"],
.settings-row input[name="header_page_title_font_size"],
.settings-row input[name="header_page_desc_font_size"],
.settings-row input[name="nav_font_size"] {
    padding: 0px 0px 0px 0px;
}
.settings-row input[type="text"]:focus,
.settings-row input[type="number"]:focus,
.settings-row input[type="range"]:focus,
.settings-row select:focus {
    border-color: #888;
    box-shadow: 0 0 0 2px #e0e0e0;
    outline: none;
}
/* End Input and Select Styling for Modern Look */

/* Checkbox Alignment */
.settings-row input[type="checkbox"] {
    margin-right: 4px;
    accent-color: #2e7d32;
}
/* End Checkbox Alignment */

/* Admin Box Styles (Wide/Table) */
.admin-box {
    margin: 0px 0px 30px 0px;
    padding: 10px 30px 40px 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 1400px;
	
}

.admin-box table {
    width: auto; /* This remains as auto for general tables within admin-box */
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 32px;
    border-collapse: collapse;
    background: #fff;
    max-width: 1300px;
    /* No table-layout: fixed; here for general admin-box tables */
}

.admin-box th, .admin-box td {
    padding: 10px;
    border: 1px solid #bbb;
    text-align: left;
    vertical-align: top;
    max-width: 1300px;
}
/* End Admin Box Styles (Wide/Table) */

/* Admin Form Box Styles (Narrow/Forms) */
.admin-form-box {
    max-width: 800px;
    margin: 0px 0px 30px 0px;
    padding: 10px 30px 40px 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 2000px;
    width: 100%;
}

/* GENERAL table inside admin-form-box - NO CHANGE TO CURRENT SETTINGS */
.admin-form-box table {
    width: 100%; /* KEPT AS IS: This remains at 100% as per your instruction for other tables */
    border-collapse: collapse;
    background: #fff;
    table-layout: fixed; /* KEPT AS IS: This remains at fixed as per your instruction for other tables */
}
.admin-form-box th, .admin-form-box td {
    padding: 8px;
    border: 1px solid #bbb;
    text-align: left;
    display: table-cell;
}

/* START: Team Members Table Specific Styles (applies ONLY to tables with class .team-members-table) */
.admin-form-box .team-members-table {
    /* Calculated width based on sum of column widths: 50+150+150+250+200+100+150 = 1050px */
    width: 1465px; /* Explicit total width based on sum of column widths */
    table-layout: fixed; /* Ensure column widths are strictly adhered to for this table */
    /* This specific 'width' will override the general 100% width for THIS specific table */
}

.admin-form-box .team-members-table th:nth-child(1),
.admin-form-box .team-members-table td:nth-child(1) { /* ID */
    width: 50px;
	    vertical-align: top; /* Align content to the top for team members table cells */
}
.admin-form-box .team-members-table th:nth-child(2),
.admin-form-box .team-members-table td:nth-child(2) { /* Name */
    width: 150px;
	    vertical-align: top; /* Align content to the top for team members table cells */
}
.admin-form-box .team-members-table th:nth-child(3),
.admin-form-box .team-members-table td:nth-child(3) { /* Title */
    width: 135px;
	    vertical-align: top; /* Align content to the top for team members table cells */
}
.admin-form-box .team-members-table th:nth-child(4),
.admin-form-box .team-members-table td:nth-child(4) { /* Description */
    width: 500px;
	vertical-align: Center;
}
.admin-form-box .team-members-table th:nth-child(5),
.admin-form-box .team-members-table td:nth-child(5) { /* Image Path */
    width: 300px;
	    vertical-align: top; /* Align content to the top for team members table cells */
}
.admin-form-box .team-members-table th:nth-child(6),
.admin-form-box .team-members-table td:nth-child(6) { /* Preview */
    width: 100px;
    text-align: center; /* Center the image in this column */
	    vertical-align: top; /* Align content to the top for team members table cells */
}
/* Specific style for the image within the preview cell to ensure it fits */
.admin-form-box .team-members-table td:nth-child(6) img {
    max-width: 90px; /* Match the max-width set in PHP */
    max-height: 90px; /* Match the max-height set in PHP */
    width: auto; /* Allow natural width if smaller than max */
    height: auto; /* Allow natural height if smaller than max */
    object-fit: contain; /* Ensure the entire image is visible without cropping */
    margin: 0 auto; /* Center the image horizontally within the cell */
    display: block; /* Make it a block element to apply margin auto */
    border-radius: 50%; /* Re-added border-radius based on original request for rounded images */
	    vertical-align: top; /* Align content to the top for team members table cells */
}
.admin-form-box .team-members-table th:nth-child(7),
.admin-form-box .team-members-table td:nth-child(7) { /* Actions */
    width: 150px;
}

/* Ensure inputs and textareas within these specific table cells fill their space */
.admin-form-box .team-members-table td input[type="text"],
.admin-form-box .team-members-table td textarea {
    box-sizing: border-box;
    width: 100%;
}
/* END: Team Members Table Specific Styles */


/* CONSOLIDATED .admin-form-box img rule */
/* This general rule remains but the specific rule above will override for preview images */
.admin-form-box img {
    max-width: 1000px;
    width: 100%;
    margin: 16px 0;
    box-sizing: border-box;
    height: auto;
    display: block;
    padding: 0 20px;
}


.admin-form-box .team-members-table td {

}


/* End Admin Form Box Styles (Narrow/Forms) */

/* Responsive Styles */
@media (max-width: 1200px) {
    .admin-box {
        margin-left: 10px;
        margin-right: 10px;
        padding: 20px;
        max-width: 1300px;
    }
    .admin-form-box {
        margin-left: 10px;
        margin-right: 10px;
        padding: 16px;
    }
    .admin-box table, .admin-form-box table {
        max-width: 100vw;
        overflow-x: auto;
    }
    /* Specific adjustment for team-members-table on smaller screens */
    .admin-form-box .team-members-table {
        width: auto; /* Allow it to collapse and overflow on smaller screens */
    }
    .admin-form-box .team-members-table th,
    .admin-form-box .team-members-table td {
        white-space: normal; /* Allow content to wrap */
    }
}
@media (max-width: 700px) {
    .settings-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px 0;
    }
    .settings-row label {
        margin-right: 0;
    }
    /* No specific column width resets needed here if table-layout: fixed is on larger and auto on smaller */
}
/* End Responsive Styles */

/* Categories Table (Admin) */

.admin-box-categories {
    margin: 0px 0px 30px 0px;
    padding: 10px 30px 40px 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 1600px;
}


.categories-table {
    display: grid;
    grid-template-columns: 40px 60px 280px 400px 360px 80px 80px 200px;
    background: #fff;
	border-collapse: collapse;
	max-width: 1900px !important;
	
	
	
}
.categories-table .row {
    display: contents;
}
.categories-table .cell, .categories-table .header {
    padding: 10px;
    border: 1px solid #bbb;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    background: #fff;
    display: flex; /* Added for vertical alignment */
    align-items: center; /* Vertically center content */
}
.categories-table .header {
    font-weight: bold;
    background: #f8f8f8;
    white-space: nowrap;
}
.categories-table .cell.checkbox {
    justify-content: center; /* Center the checkbox */
}
.categories-table .cell.order {
    justify-content: flex-end; /* Align number to the right */
}
.categories-table .cell.bg-image {
    word-break: break-all;
    white-space: normal;
}
.categories-table .cell input[type="text"],
.categories-table .cell input[type="number"] {
    width: 100%;
    box-sizing: border-box;
}

/* End Categories Table (Admin) */

/* Site Pages Table Styles */
.site-pages-table {
    table-layout: fixed;
}

/* Column Widths for Site Pages Table (ADJUSTED) */
.site-pages-table th:nth-child(1),
.site-pages-table td:nth-child(1) {
    width: 60px;
}
.site-pages-table th:nth-child(2),
.site-pages-table td:nth-child(2) {
    width: 120px;
}
.site-pages-table th:nth-child(3),
.site-pages-table td:nth-child(3) {
    width: 200px;
}
.site-pages-table th:nth-child(4),
.site-pages-table td:nth-child(4) {
    width: 200px;
}
.site-pages-table th:nth-child(5),
.site-pages-table td:nth-child(5) {
    width: 400px;
}
.site-pages-table th:nth-child(6),
.site-pages-table td:nth-child(6) {
    width: 160px;
}

/* Ensure inputs and textareas within these cells fill their space */
.site-pages-table input[type="text"],
.site-pages-table textarea {
    box-sizing: border-box;
    width: 100%;
}
/* End Site Pages Table Styles */

/* Uniform Admin Button Styles */
button,
input[type="submit"],
input[type="button"] {
    padding: 8px 8px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.18s, transform 0.15s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    outline: none;
    background: #333333;
}
button:hover:not(.delete-btn),
input[type="submit"]:hover:not(.delete-btn),
input[type="button"]:hover:not(.delete-btn) {
    background: #2e7d32;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transform: scale(1.04);
}
button.delete-btn,
input[type="submit"].delete-btn,
input[type="button"].delete-btn {
    background: #ff3333;
}
button.delete-btn:hover,
input[type="submit"].delete-btn:hover,
input[type="button"].delete-btn:hover {
    color: #fff;
    background-color: darkred;
    box-shadow: 0 4px 16px rgba(211,47,47,0.18);
    transform: scale(1.05);
}
button + .delete-btn,
input[type="submit"] + .delete-btn,
input[type="button"] + .delete-btn {
    margin-left: 7px;
}
/* End Uniform Admin Button Styles */

/* =========================================
   ADMIN PANEL STYLESHEET (UPDATED ADMIN SIDEBAR SECTION - V12)
   ========================================= */

/* Admin Sidebar */
nav ul {
    list-style: none; /* Ensure no default list bullets */
    padding: 0;      /* Remove default padding from the UL */
    margin: 0;       /* Remove default margin from the UL */
}

/* Ensure no extra padding on list items themselves */
nav li {
    padding: 0;
    margin-bottom: 0px; /* Reset default margin-bottom for all li */
    width: 100%; /* Make sure LI elements take full width of their parent UL */
}

/* Add consistent bottom margin for spacing between top-level menu items */
/* Applies to direct link items AND the parent LI of submenus */
nav > ul > li:not(.logout-item) { /* Exclude logout from this general spacing */
    margin-bottom: 8px; /* Consistent spacing between main menu items */
}

/* Base styling for all top-level items: direct links and menu titles */
nav > ul > li > a,
nav > ul > li > .menu-title {
    display: flex; /* Ensures they take full width for padding/hover effects */
    align-items: center; /* Vertically center content */
    justify-content: space-between; /* Pushes text to left, arrow to right */
    padding: 7px 15px 7px 30px; /* Uniform left padding for all top-level items */
    text-decoration: none;
    transition: background 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.10s ease-out, border-left 0.15s ease-out; /* Added transform to transition */
    border-left: none;
	 position: relative; 
    font-weight: normal;
    color: #fff;
    background: none;
    cursor: default; /* Change cursor to default for menu-title text */
    box-sizing: border-box; /* Include padding in the element's total width */
}

/* Specific styling for the menu titles (non-link parents like Design, Data) */
nav li.has-submenu .menu-title {
    font-weight: normal;
    /* Re-introduce hover effects for the text area of the menu-title */
    transition: background 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.10s ease-out; /* Match other top-level items */
}

/* NEW: Hover effect for the menu-title text area (excluding the arrow) */
nav li.has-submenu .menu-title:hover {
    background: #3a3a3a; /* Darker background on hover */
    color: #fff !important;
    box-shadow: 0 0 15px rgba(247, 227, 173, 0.6); /* Even yellow glow */
    transform: scale(1.0); /* Subtle pop-out */
}

/* NEW: Ensure the hover effect doesn't apply when hovering the arrow itself */
nav li.has-submenu .menu-title:hover .submenu-toggle-arrow {
    background: transparent; /* Reset arrow background when hovering its parent text */
    box-shadow: none; /* Remove arrow shadow when hovering its parent text */
    transform: none; /* Reset arrow transform when hovering its parent text */
}

/* Styling for the submenu toggle arrow span (the clickable area) */
nav li.has-submenu .submenu-toggle-arrow {
    display: flex; /* Use flex to center the arrow content */
    align-items: center;
    justify-content: center;
    width: 30px; /* Make the arrow area clickable/hoverable */
    height: 100%; /* Take full height of parent menu-title */
    font-size: 0.85em; /* Make the arrow smaller (this will apply to pseudo-element) */
    color: #f7e3ad; /* Match active color (this will apply to pseudo-element) */
    cursor: pointer; /* Indicate it's clickable */
    transition: transform 0.3s ease, background 0.15s ease-out, box-shadow 0.15s ease-out; /* Transitions for arrow hover */
    margin-left: 10px; /* Space between title text and arrow */
    flex-shrink: 0; /* Prevent arrow from shrinking if text is long */
  
    box-sizing: border-box; /* Ensure padding/border are included in width/height */
}

/* Put the arrow content back on a pseudo-element of the toggle span */
nav li.has-submenu .submenu-toggle-arrow::before {
    content: '\25B6'; /* Right-pointing triangle (Black Right-Pointing Triangle) */
}

/* Rotate arrow when submenu is open */
nav li.has-submenu.open .submenu-toggle-arrow {
    transform: rotate(90deg); /* Rotate the span itself */
}

/* Hover effect for the submenu toggle arrow */
nav li.has-submenu .submenu-toggle-arrow:hover {
    background: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
    box-shadow: 0 0 10px rgba(247, 227, 173, 0.6); /* Yellow glow on hover */
    transform: scale(1.0) rotate(0deg); /* Slight pop and ensure no rotation from previous state */
}

/* Reset scale on hover for the arrow when submenu is open, so it doesn't pop out too much */
nav li.has-submenu.open .submenu-toggle-arrow:hover {
    transform: scale(1.0) rotate(90deg); /* Maintain rotation while popping */
}

/* Hover effect for main menu items (direct links) */
nav > ul > li:not(.active) > a:hover {
    background: #3a3a3a;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(247, 227, 173, 0.6); /* Even yellow glow */
    transform: scale(1.0); /* Pop-out effect */
}

/* Active state for main menu item (direct link) */
nav > ul > li.active > a {
    font-weight: bold;
    
    color: #f7e3ad !important;
  
    
  
    padding: 7px 15px 7px 30px; /* Ensure active link matches base padding */
}

/* Active state for main menu item (title with submenu) */
nav > ul > li.has-submenu.active > .menu-title {
    font-weight: bold;
    color: #f7e3ad !important;
    
  
 
    padding: 7px 15px 7px 30px; /* Ensure active title matches base padding */
}

/* Hover state for active main menu item (title with submenu) - this is for the whole title area */
nav li.active .menu-title:hover {
    background: #4a4a4a; /* Slightly darker background on hover for active state */
    box-shadow: 0 5px 15px rgba(247, 227, 173, 0.4); /* Original stronger glow for active hover */
    border-radius: 2px;
    border-left: 4px solid #ffe8b5; /* Slightly lighter border on hover for active state */
}

/* Styling for submenu lists */
nav ul.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    width: 100%;
}

/* Add consistent spacing between submenu items */
nav ul.submenu li:not(:last-child) {
    margin-bottom: 5px; /* Smaller spacing for submenu items */
}

/* Show submenu when parent is active (page loaded within submenu) or hovered */
/* This rule is now primarily for initial 'open' state and fallback hover (though JS handles open/close) */
nav li.has-submenu.open > .submenu { /* Removed :hover as JS handles open/close */
    max-height: 200px; /* Adjust as needed to fit all submenu items */
    opacity: 1;
    overflow: visible;
    margin-top: 5px; /* Add a small gap between parent title and first submenu item */
    margin-bottom: 8px; /* Add a small gap after the last submenu item, before next main item */
}

/* Styling for submenu list items */
nav ul.submenu li {
    padding: 0; /* No padding on submenu LI itself */
    width: 100%; /* Explicitly make submenu LIs take full width */
}

/* Styling for submenu links */
nav ul.submenu li a {
    font-size: 0.95em;
    padding: 7px 15px 7px 45px; /* Indent submenu items further left */
    color: #ccc;
	border-left: none; /* Keep this */
	position: relative; /* <<-- ADD THIS LINE */
    display: flex; /* Changed to flex to control alignment */
    align-items: center; /* Vertically center content */
    justify-content: flex-start; /* CRITICAL: Align content to the left */
    text-decoration: none;
    box-sizing: border-box; /* Crucial: Include padding in width calculation */
    width: 100%; /* Make it explicitly take full width of its LI parent */
    transition: background 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.10s ease-out, border-left 0.15s ease-out; /* Added transform to transition */
}

/* Hover state for submenu links */
nav ul.submenu li a:hover {
    background: #4a4a4a; /* Darker background on hover */
    color: #fff !important;
    box-shadow: 0 0 15px rgba(247, 227, 173, 0.6); /* Even yellow glow */
    transform: scale(1.00); /* Subtle pop-out */
}

/* Active state for submenu links */
nav ul.submenu li.active a {
    font-weight: bold;
    color: #f7e3ad !important;
  
  
   
  
    padding: 7px 15px 7px 45px; /* Ensure active submenu link matches its base padding */
}

/* Specific styling for the Logout button to ensure its unique spacing */
nav li.logout-item {
    margin-top: 100px; /* This specific margin should ONLY apply to Logout */
}

/* Ensure default margin-top is zero for all other list items to prevent conflicts */
nav li:not(.logout-item) {
    margin-top: 0;
}

/* NEW: Pseudo-element for the active border for top-level links */
nav > ul > li.active > a::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 15px; /* <<-- THIS IS THE KEY: MATCHES padding-left of parent */
    height: 75%;
    width: 4px; /* Width of the border */
    background-color: #f7e3ad; /* Yellow color */
    
}












/* Modern Font Preview Box */
.font-preview {
    margin: 1px 0px 17px 0px;
    padding: 6px 12px ;
    border: 1px solid #ddd;
    background: #fafafa;
    font-size: 1.2em;
    min-height: 0;
    border-radius: 8px;
    box-shadow: none;
    color: #222 !important;
    transition: all 0.18s;
    font-family: inherit;
    letter-spacing: 0.02em;
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.font-preview span {
    font-size: 16px;
    color: inherit;
    line-height: 1.5;
}
/* End Modern Font Preview Box */

/* Page Font Settings Styles */

/* Form Elements - General */
.form-group label {
    font-weight: bold;
}

label[for="font_color"] {
}

/* NEW: Styles for the wrapper holding color picker and text input */
.color-inputs-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-grow: 1;
}

/* NEW: Specific styling for the text input within the color-inputs-wrapper */
.color-inputs-wrapper input[type="text"] {
    height: 25px;
    padding: 2px 5px;
    box-sizing: border-box;
    vertical-align: middle;
    max-width: 100px;
}

input#font_color {
    width: 140px;
    margin-right: 10px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    padding: 1px !important;
    height: 25px;
    transition: border 0.18s, box-shadow 0.18s;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

input#font_color_text {
    flex-grow: 1;
    max-width: 150px;
}

.form-group {
    margin-bottom: 5px;
    display: flex;
    align-items: start;
    gap: 10px;
}
.admin-box .form-control {
    box-sizing: border-box;
    max-width: 1500px;
}
.form-group .form-control {
    margin-top:3px;
}
#font_size {
    width: 60px;
}

/* Specific width for the font family title */
.settings-form select[name="font_family"] {
    width: 140px;
}

/* Specific width for the 'Select Element to Edit' dropdown */
#font_section_select {
    width: 300px;
}

/* Specific width for the Text Shadow input */
#text_shadow {
    width: 300px;
}

/* Form Elements - Color Input */
.color-input {
    width: 100%;
    height: 38px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: 0;
    cursor: pointer;
}

/* Checkbox Group Styling (e.g., Italic/Underline) */
.checkbox-group {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-right: 0;
    height: 100%;
    width: 100%;
}
.checkbox-group .form-check-inline {
    margin-right: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.form-check-input {
    position: static !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    display: inline-block;
    vertical-align: middle;
}
.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
    padding-right: 0px;
}

/* Custom Font Settings Row Layout */
.font-settings-row {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 0px;
    gap: 10px;
}
.font-settings-row {
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 0;
    padding-bottom: 10px;
}

.form-group {
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 0;
    padding-bottom: 10px;
}

/* NEW: Styles for the settings-row-break class to force line break */
.settings-row-break {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 10px;
    margin-top: 18px;
    margin-bottom: 10px;
    row-gap: 29px;
}

/* --- START OF MISSING SECTIONS TO BE ADDED --- */

/* Page Settings Table Styling */
.page-settings-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.page-settings-table th, .page-settings-table td {
    border: 1px solid #dee2e6;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
.page-settings-table th {
    background-color: #e9ecef;
    font-weight: bold;
}
.page-settings-table input[type="text"],
.page-settings-table input[type="url"] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Submit Button Styling (font_settings_form) */
form[name="font_settings_form"] button[type="submit"] {
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    flex-basis: 100%;
    margin-top: 20px;
    width: fit-content;
    align-self: center;
}
/* End Page Font Settings Styles */

/* Footer Font Settings Styles */

/* Styles for the container of the font settings form */
.settings-form {
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
    padding: 0px 0px 0px 0px;
    border-radius: 8px;
}

/* Specific width for the Font Family dropdown */
#font_family {
    width: 140px;
}

/* Specific width for the Font Size input */
.settings-form input[name="font_size"] {
    width: 90px;
}

/* Specific width for the Font Weight dropdown */
.settings-form select[name="font_weight"] {
    width: 120px;
}

/* Specific width for the Font Color input */
.settings-form input[name="font_color"] {
    width: 140px;
    cursor: pointer;
}

/* Specific width for the Text Shadow input */
.settings-form input[name="text_shadow"] {
    width: 250px;
    text-align: Center;
}

/* General styling for labels within the settings form to align elements */
.settings-form label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
    white-space: nowrap;
}

/* Adjust checkbox specific labels to keep them compact */
.settings-form label input[type="checkbox"] {
    margin-right: 0;
}

/* Style the save button - moved into .settings-form for consistent flex layout */
.settings-form button[name="update_footer_font"] {
    padding: 8px 20px;
    margin: 10px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.message-box-container {
    display: inline-flex;
    align-items: center;
    max-width: fit-content;
    background-color: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #D0D0D0;
    margin: 0px 0px 40px 0px;
}

.message-box-container .alert {
    margin: 0;
    background: transparent;
    border: none;
}

.message-box-container .close {
    margin-Left: 15px;
    position: relative;
    top: 0;
}

/* NEW: Styles for labels within settings-row to align elements (general) */
.settings-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
}
/* End Footer Font Settings Styles */

/* Custom Styles for Range Input (Transparency Slider) */
/* This section targets the <input type="range"> element to customize its appearance. */

.settings-row input[type="range"] {
    /* General styles for the range input element */
    -webkit-appearance: none; /* Remove default Webkit styles */
    appearance: none;
    width: 150px; /* Adjust width as needed */
    height: 8px; /* Height of the track */
    background: transparent; /* Make the input background transparent */
    cursor: pointer;
    margin-left: 7px; /* Align with other inputs */
    margin-right: 0px;
    border-radius: 4px; /* Rounded corners for the overall slider */
    outline: none; /* Remove outline on focus, replaced by custom focus styles */
}

/* Track styles for Webkit browsers (Chrome, Safari, Edge) */
.settings-row input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: #596988; /* Swapped: Lighter blue-gray color for the track */
    border-radius: 4px; /* Rounded track ends */
    transition: background 0.3s ease; /* Smooth transition for background changes */
}

/* Thumb (slider handle) styles for Webkit browsers */
.settings-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default Webkit styles */
    appearance: none;
    width: 18px; /* Size of the thumb */
    height: 18px;
    background: #596988; /* Swapped: Lighter blue-gray color for the thumb */
    border: 1px solid #1c273a; /* Border remains dark for contrast */
    border-radius: 50%; /* Make the thumb round */
    margin-top: -5px; /* Vertically center the thumb on the track */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle shadow for depth */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover styles for Webkit track and thumb */
.settings-row input[type="range"]:hover::-webkit-slider-runnable-track {
    background: #2f436a; /* Swapped: Darker blue-gray on hover */
}

.settings-row input[type="range"]:hover::-webkit-slider-thumb {
    background: #2f436a; /* Swapped: Darker blue-gray on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* More prominent shadow on hover */
}

/* Focus styles for Webkit thumb for accessibility */
.settings-row input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(47, 67, 106, 0.5); /* Blue-gray glow on focus, based on darker hover color */
}


/* Track styles for Mozilla Firefox */
.settings-row input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #596988; /* Swapped: Lighter blue-gray color for the track */
    border-radius: 4px; /* Rounded track ends */
    transition: background 0.3s ease; /* Smooth transition for background changes */
}

/* Thumb (slider handle) styles for Mozilla Firefox */
.settings-row input[type="range"]::-moz-range-thumb {
    width: 18px; /* Size of the thumb */
    height: 18px;
    background: #596988; /* Swapped: Lighter blue-gray color for the thumb */
    border: 1px solid #1c273a; /* Border remains dark for contrast */
    border-radius: 50%; /* Make the thumb round */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Subtle shadow for depth */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover styles for Mozilla track and thumb */
.settings-row input[type="range"]:hover::-moz-range-track {
    background: #2f436a; /* Swapped: Darker blue-gray on hover */
}

.settings-row input[type="range"]:hover::-moz-range-thumb {
    background: #2f436a; /* Swapped: Darker blue-gray on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* More prominent shadow on hover */
}

/* Focus styles for Mozilla thumb for accessibility */
.settings-row input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(47, 67, 106, 0.5); /* Blue-gray glow on focus, based on darker hover color */
}


/* Refiners Table (Admin) - FINAL ATTEMPT TO MIRROR CATEGORIES TABLE STYLES */


/* Refiners Table (Admin) - **FINAL, EXACT REPLICATION ATTEMPT** */


/* Refiners Table (Admin) - **FINAL, EXACT REPLICATION ATTEMPT (INCLUDING INPUT BORDERS)** */





.refiners-table {
    display: grid;
    /* Columns: Checkbox, Order, Name, Description, Icon, Is Active */
    /* Adjust these to fine-tune alignment and spacing based on your content. */
    grid-template-columns: 40px 60px 150px 700px 150px 80px; 
    background: #fff;
    max-width: 1400px;
	line-height: 10px;
}

.refiners-table .row {
    display: contents; /* Crucial: Makes children (cells) direct grid items of .refiners-table */
		
}

.refiners-table .cell, .refiners-table .header {
    padding: 10px; /* Consistent padding with categories */
    border: 1px solid #bbb; /* Individual cell borders, creates the single line */
    text-align: left;
    vertical-align: middle; /* Ensures content is vertically centered, consistent with categories */
    overflow: hidden;
    background: #fff; /* Explicitly white background, consistent with categories */
    display: flex; /* As per your existing categories-table cell style */
    align-items: center; /* Vertically center content inside flex container */
    border-radius: 0; /* Ensure no unexpected rounded corners */
    box-shadow: none; /* Ensure no unexpected shadows */

	
}

.refiners-table .header {
    font-weight: bold;
    background: #f8f8f8; /* Header background color, consistent with categories */
    white-space: nowrap; /* Prevent header text from wrapping */
    position: sticky; /* Keep headers visible on scroll */
    top: 0;
    z-index: 1; /* Ensure headers stay on top */
	padding-bottom:15px;
}

/* Specific alignment for certain cells, directly copied from categories */
.refiners-table .cell.checkbox {
    justify-content: center; /* Center the checkbox */
}

.refiners-table .cell.order {
    justify-content: flex-end; /* Align order number to the right */
}

.refiners-table .cell.is_active {
    justify-content: center; /* Center the checkbox for 'Is Active' */
}

/* Styling for input fields inside refiners table cells - **CORRECTED FOR BORDERS/BACKGROUND** */
.refiners-table .cell input[type="text"],
.refiners-table .cell input[type="number"] {
    width: 100%;
    box-sizing: border-box;
padding:4px;
    border: 1px solid #bbb; /* **THIS IS THE KEY: Re-adding the border.** */
    background: #fff; /* **THIS IS THE KEY: Re-adding the white background.** */
    border-radius: 2.5px; /* Ensure no rounded corners */
    text-align: left;
		line-height: 17px;
	
}

/* Specific styling for the SELECT element (order dropdown) - DIRECTLY FROM CATEGORIES */
.refiners-table .cell select.order-select {
    width: auto; /* Allow select to size to content */
    border: 1px solid #bbb; /* Categories select has a border */
    border-radius: 2.5px; /* No rounded corners */
    padding: 2.5px; /* No padding inside select, consistent */
    background: #fff; /* White background for select, consistent */
    text-align: left; /* Numbers in categories select are centered */
    height: auto; /* Allow height to adjust */
    margin: 0;
	width: 90px;

}

/* Ensure the checkbox appears as a standard native checkbox - ALREADY CORRECT */
.refiners-table .cell input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    vertical-align: middle;
    accent-color: #2e7d32;
}


/* Reconfirming styles for the 'Add New Refiner' table to ensure consistency */
/* The inputs in the "Add New" section also need their borders and white background. */
.admin-box table.table-bordered.table-striped {
    width: auto;
    max-width: 1400px;
    margin-left: 0;
    margin-bottom: 32px;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #bbb;
}
.admin-box table.table-bordered.table-striped th,
.admin-box table.table-bordered.table-striped td {
    padding: 10px;
    border: 1px solid #bbb;
    text-align: left;
    vertical-align: middle;
}
.admin-box table.table-bordered.table-striped th {
    font-weight: bold;
    background: #f8f8f8;
    white-space: nowrap;
}
/* Inputs in the "Add New" table - **CORRECTED FOR BORDERS/BACKGROUND** */
.admin-box table.table-bordered.table-striped input[type="text"],
.admin-box table.table-bordered.table-striped select {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 5px; /* Added slight horizontal padding */
    border: 1px solid #bbb; /* **THIS IS THE KEY: Re-adding the border.** */
    background: #fff; /* **THIS IS THE KEY: Re-adding the white background.** */
    text-align: left; /* Align text left */
    border-radius: 0; /* No rounded corners */
}
.admin-box table.table-bordered.table-striped input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    vertical-align: middle;
    accent-color: #2e7d32;
}

.admin-box table.table-bordered.table-striped button[name="add"] {
    padding: 8px 12px;
    background-color: #333333;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background 0.3s, box-shadow 0.18s, transform 0.15s;
}
.admin-box table.table-bordered.table-striped button[name="add"]:hover {
    background: #2e7d32;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transform: scale(1.04);
}
/* Custom Admin Box for Destinations Page */
.admin-box-destinations {
    margin: 0px 0px 30px 0px;
    padding: 10px 30px 40px 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* max-width is intentionally omitted here to allow it to expand */
    width: auto; /* Allow content to dictate width, within parent constraints */
}

/* Destinations Table (Admin) */
.destinations-table {
    display: grid;
    /* Define grid columns for the destinations table */
    /* Adjust these values as needed for optimal display */
    grid-template-columns: 
							40px /* Checkbox */
                           150px /* City Name */
                           120px /* Country */
                           120px /* Continent */
                           280px /* Description */
                           290px /* Image URL */
                       
						    80px; /* Is Active */
                        
						   
    background: #fff;
    border-collapse: collapse; /* Not directly applicable to grid layout, but good for internal tables */
    max-width: none; /* Ensure table can expand beyond parent's max-width if needed */
    width: 100%; /* Make sure it takes available space within its container */

}

.destinations-table .row {
    display: contents; /* Makes children (cells) direct grid items of .destinations-table */
}

.destinations-table .cell, .destinations-table .header {
    padding: 10px;
    border: 1px solid #bbb;
    text-align: left;
    vertical-align: middle;
    overflow: hidden; /* Prevents content from overflowing cells */
    background: #fff;
    display: flex; /* For vertical centering */
    align-items: center; /* Vertically center content */
    border-radius: 0;
    box-shadow: none;
    line-height: normal; /* Ensure text line height is appropriate for content */
}

.destinations-table .header {
    font-weight: bold;
    background: #f8f8f8;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: 15px;
}

/* Specific alignment for checkboxes */
.destinations-table .cell.checkbox,
.destinations-table .cell.is_active {
    justify-content: center; /* Center the checkboxes */
}

/* Text input and textarea styling within table cells */
.destinations-table .cell input[type="text"],
.destinations-table .cell textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border: 1px solid #bbb;
    background: #fff;
    border-radius: 2.5px;
    text-align: left;
    line-height: normal; /* Ensure text line height is normal */
    height: auto; /* Allow height to adjust based on content */
    resize: vertical; /* Allow vertical resizing for textareas */
}

/* Checkbox styling */
.destinations-table .cell input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    vertical-align: middle;
    accent-color: #2e7d32;
}

/* Styles for the "Add New Destination" table */
.admin-box-destinations table.table-bordered.table-striped {
    width: auto;
    max-width: none; /* Allow it to expand fully */
    margin-left: 0;
    margin-bottom: 32px;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #bbb;
    table-layout: auto; /* Allow browser to determine column widths */
}
.admin-box-destinations table.table-bordered.table-striped th,
.admin-box-destinations table.table-bordered.table-striped td {
    padding: 10px;
    border: 1px solid #bbb;
    text-align: left;
    vertical-align: middle;
}
.admin-box-destinations table.table-bordered.table-striped th {
    font-weight: bold;
    background: #f8f8f8;
    white-space: nowrap;
}
.admin-box-destinations table.table-bordered.table-striped input[type="text"],
.admin-box-destinations table.table-bordered.table-striped textarea,
.admin-box-destinations table.table-bordered.table-striped select {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 5px;
    border: 1px solid #bbb;
    background: #fff;
    text-align: left;
    border-radius: 0;
    line-height: normal;
    height: auto;
}
.admin-box-destinations table.table-bordered.table-striped input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    vertical-align: middle;
    accent-color: #2e7d32;
}

.admin-box-destinations table.table-bordered.table-striped button[name="add"] {
    padding: 8px 12px;
    background-color: #333333;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background 0.3s, box-shadow 0.18s, transform 0.15s;
}
.admin-box-destinations table.table-bordered.table-striped button[name="add"]:hover {
    background: #2e7d32;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transform: scale(1.04);
}

/* Search/Filter Container styling */
.search-filter-container {
    margin-bottom: 20px;
  
}

.search-filter-container form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    width: 100%;
}

.search-filter-container label {
    font-weight: bold;
    white-space: nowrap; /* Prevent label wrapping */
}

.search-filter-container input[type="text"] {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    flex: 1; /* Allow inputs to grow */
    min-width: 120px; /* Minimum width for inputs */
    max-width: 200px;
    box-sizing: border-box;
}

.search-filter-container input[type="checkbox"] {
    accent-color: #2e7d32;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.search-filter-container button {
    padding: 8px 15px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    color: white;
    cursor: pointer;
    background: #333333;
    transition: background 0.3s, box-shadow 0.18s, transform 0.15s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-filter-container button:hover {
    background: #2e7d32;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transform: scale(1.04);
}

.search-filter-container button + button {
    margin-left: 7px;
}

/* Pagination controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 20px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.pagination-controls a {
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #333;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.pagination-controls a:hover {
    background-color: #e0e0e0;
    border-color: #a0a0a0;
    color: #000;
}

.pagination-controls a.active-page {
    background-color: #2e7d32;
    color: white;
    border-color: #2e7d32;
    font-weight: bold;
}

.pagination-controls p {
    margin: 0;
    font-size: 0.9em;
    color: #555;
}

/* Responsive adjustments for the destinations page */
@media (max-width: 1400px) {
    .admin-box-destinations {
        padding: 10px 20px 30px 20px;
    }
    .destinations-table {
        /* Allow columns to be more flexible or stack if necessary */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Example: min 100px, flexible */
        overflow-x: auto; /* Enable horizontal scrolling if content overflows */
    }
    .destinations-table .cell, .destinations-table .header {
        white-space: normal; /* Allow text to wrap */
    }
}

@media (max-width: 768px) {
    .admin-box-destinations {
        padding: 10px 15px 20px 15px;
    }
    .destinations-table {
        grid-template-columns: 1fr; /* Stack columns on very small screens */
        display: block; /* Remove grid for better stacking */
		padding-top: 25px;
    }
    .destinations-table .row {
        display: block; /* Each row is a block */
        margin-bottom: 15px; /* Space between rows */
        border: 1px solid #bbb; /* Add border to individual row for clarity */
        border-radius: 8px; /* Rounded corners for row boxes */
        padding: 10px;
    }
    .destinations-table .cell, .destinations-table .header {
        border: none; /* Remove individual cell borders when stacked */
        padding: 5px 0;
        display: block; /* Make cells block elements */
    }
    .destinations-table .header {
        font-size: 1.1em;
        margin-bottom: 5px;
        background: none; /* No header background when stacked */
        border-bottom: 1px solid #eee; /* Light separator for headers */
        padding-bottom: 10px;
    }
    .destinations-table .cell:before {
        content: attr(data-label); /* Display column name as a label */
        font-weight: bold;
        display: block;
        color: #555;
        margin-bottom: 5px;
    }
    .destinations-table .cell.checkbox,
    .destinations-table .cell.is_active {
        text-align: left; /* Align checkboxes to left when stacked */
        justify-content: flex-start;
    }
    .search-filter-container form {
        flex-direction: column; /* Stack filter inputs */
        align-items: stretch;
    }
    .search-filter-container input[type="text"] {
        max-width: 100%;
    }
    .pagination-controls {
        flex-wrap: wrap;
        gap: 5px;
        font-size: 0.8em;
    }
    .pagination-controls a {
        padding: 6px 10px;
    }
}

/* Custom Admin Box for Refiner Scores Page */
.admin-box-refiner-scores {
    margin: 0px 0px 30px 0px;
    padding: 10px 30px 40px 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto; /* Allows it to expand */
    max-width: fit-content; /* Adjust based on your widest expected table content */
    min-width: 800px; /* Ensure a minimum width */
}

/* Refiner Scores Table Layout (CSS Grid) */
.refiner-scores-table {
    display: grid;
    /* grid-template-columns is set dynamically in PHP based on $num_refiner_columns */
   grid-template-columns: 250px repeat(5, minmax(120px, 1fr)); */
    background: #fff;
    width: 100%; /* Make the grid take full width of its container */
    overflow-x: auto; /* Enable horizontal scrolling if content overflows */
    border: 1px solid #bbb; /* Outer border for the whole grid */
    font-size: 0.95em; /* Slightly smaller font for compactness */
}

/* IMPORTANT: This is the key change for rows */
.refiner-scores-table .row {
    display: grid; /* Each row is now its own grid container */
    grid-template-columns: subgrid; /* Inherit column definitions from parent grid */
    grid-column: 1 / -1; /* Make the row span all columns of the parent grid */
}

.refiner-scores-table .cell, 
.refiner-scores-table .header {
    padding: 10px;
    border: 1px solid #ddd; /* Internal cell borders */
    text-align: center; /* Center content by default */
    vertical-align: middle;
    overflow: hidden; 
    background: #fff;
    display: flex; /* For vertical centering */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    white-space: nowrap; /* Prevent text wrapping in headers and scores */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

.refiner-scores-table .header {
    font-weight: bold;
    background: #f8f8f8;
    position: sticky; /* Keep headers visible on scroll */
    top: 0;
    z-index: 1;
    padding-bottom: 15px;
}

.refiner-scores-table .category-header {
    text-align: left; /* Align top-left header to left */
    justify-content: flex-start;
    padding-left: 15px; /* Add some left padding */
}

.refiner-scores-table .refiner-header {
    /* Specific styles for refiner headers if needed, otherwise inherits from .header */
}

.refiner-scores-table .category-name-cell {
    text-align: left; /* Align category names to the left */
    justify-content: flex-start;
    font-weight: bold;
    background: #fdfdfd; /* Slightly different background for category names */
    padding-left: 15px; /* Consistent left padding */
    white-space: normal; /* Allow category names to wrap if needed */
}

/* Styling for the input field when a score cell is in edit mode */
.refiner-scores-table .score-cell input[type="number"] {
    width: 100%;
    height: 100%; /* Make input fill the cell */
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #2e7d32; /* Highlight border when editing */
    border-radius: 4px;
    text-align: center;
    font-size: 1em;
    background: #f0fff0; /* Light green background for editable cells */
    outline: none;
    -moz-appearance: textfield; /* Remove default arrow buttons for Firefox */
}

/* Hide arrow buttons for Chrome, Safari, Edge */
.refiner-scores-table .score-cell input[type="number"]::-webkit-outer-spin-button,
.refiner-scores-table .score-cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .admin-box-refiner-scores {
        padding: 10px 20px 30px 20px;
        min-width: unset; /* Allow it to shrink on smaller screens */
    }
    /* No change to .refiner-scores-table grid-template-columns here, as it's dynamic in PHP */
}

@media (max-width: 768px) {
    .admin-box-refiner-scores {
        padding: 10px 15px 20px 15px;
    }
    .refiner-scores-table {
        display: block; /* Stack elements for better mobile experience */
        border: none; /* Remove outer grid border */
    }
    .refiner-scores-table .row {
        display: block; /* Each category row becomes a block */
        margin-bottom: 20px;
        border: 1px solid #ccc; /* Border around each category block */
        border-radius: 8px;
        padding: 10px;
    }
    .refiner-scores-table .header-row {
        display: none; /* Hide the main header row on small screens */
    }
    .refiner-scores-table .cell,
    .refiner-scores-table .category-name-cell {
        display: flex; /* Keep flex for internal alignment */
        justify-content: space-between; /* Space out label and value */
        align-items: center;
        padding: 8px 0;
        border: none; /* Remove individual cell borders */
        background: none;
        text-align: left;
        white-space: normal; /* Allow text to wrap in mobile view */
        text-overflow: unset; /* Remove ellipsis in mobile view */
    }
    .refiner-scores-table .cell:not(.category-name-cell):before {
        content: attr(data-refiner-name) ": "; /* Add refiner name as a label for each score */
        font-weight: bold;
        color: #555;
        flex-shrink: 0;
        margin-right: 10px;
    }
    .refiner-scores-table .category-name-cell {
        font-size: 1.2em;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee; /* Separator for category name */
        padding-bottom: 10px;
    }

    /* Adjust input within stacked cells */
    .refiner-scores-table .score-cell input[type="number"] {
        flex-grow: 1; /* Allow input to take remaining space */
        text-align: right; /* Align numbers to the right */
    }
}

/* Custom Admin Box for Destination Category Scores Page */
.admin-box-destination-category-scores {
    margin: 0px 0px 30px 0px;
    padding: 10px 30px 40px 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto; /* Allows it to expand */
    max-width: fit-content; /* Adjust based on your widest expected table content */
    min-width: 800px; /* Ensure a minimum width */
}

/* Destination Category Scores Table Layout (CSS Grid) */
.destination-category-scores-table {
    display: grid;
    /* grid-template-columns is set dynamically in PHP based on $num_displayed_destination_columns */
    /* Example: grid-template-columns: 250px repeat(5, minmax(100px, 1fr)); */
    background: #fff;
    width: 100%; /* Make the grid take full width of its container */
    overflow-x: auto; /* Enable horizontal scrolling if content overflows */
    border: 1px solid #bbb; /* Outer border for the whole grid */
    font-size: 0.95em; /* Slightly smaller font for compactness */
}

.destination-category-scores-table .row {
    display: grid; /* Each row is now its own grid container */
    grid-template-columns: subgrid; /* Inherit column definitions from parent grid */
    grid-column: 1 / -1; /* Make the row span all columns of the parent grid */
}

.destination-category-scores-table .cell, 
.destination-category-scores-table .header {
    padding: 10px;
    border: 1px solid #ddd; /* Internal cell borders */
    text-align: center; /* Center content by default */
    vertical-align: middle;
    overflow: hidden; 
    background: #fff;
    display: flex; /* For vertical centering */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    white-space: nowrap; /* Prevent text wrapping in headers and scores */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

.destination-category-scores-table .header {
    font-weight: bold;
    background: #f8f8f8;
    position: sticky; /* Keep headers visible on scroll */
    top: 0;
    z-index: 1;
    padding-bottom: 15px;
}

.destination-category-scores-table .category-destination-header {
    text-align: left; /* Align top-left header to left */
    justify-content: flex-start;
    padding-left: 15px; /* Add some left padding */
}

.destination-category-scores-table .destination-header {
    /* Specific styles for destination headers if needed, otherwise inherits from .header */
}

.destination-category-scores-table .category-name-cell {
    text-align: left; /* Align category names to the left */
    justify-content: flex-start;
    font-weight: bold;
    background: #fdfdfd; /* Slightly different background for category names */
    padding-left: 15px; /* Consistent left padding */
    white-space: normal; /* Allow category names to wrap if needed */
}

/* Styling for the input field when a score cell is in edit mode */
.destination-category-scores-table .score-cell input[type="number"] {
    width: 100%;
    height: 100%; /* Make input fill the cell */
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #2e7d32; /* Highlight border when editing */
    border-radius: 4px;
    text-align: center;
    font-size: 1em;
    background: #f0fff0; /* Light green background for editable cells */
    outline: none;
    -moz-appearance: textfield; /* Remove default arrow buttons for Firefox */
}

/* Hide arrow buttons for Chrome, Safari, Edge */
.destination-category-scores-table .score-cell input[type="number"]::-webkit-outer-spin-button,
.destination-category-scores-table .score-cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Column Pagination Controls */
.column-pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 20px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.column-pagination-controls a {
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: #333;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.column-pagination-controls a:hover {
    background-color: #e0e0e0;
    border-color: #a0a0a0;
    color: #000;
}

.column-pagination-controls a.active-column-page {
    background-color: #2e7d32;
    color: white;
    border-color: #2e7d32;
    font-weight: bold;
}

.column-pagination-controls p {
    margin: 0;
    font-size: 0.9em;
    color: #555;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .admin-box-destination-category-scores {
        padding: 10px 20px 30px 20px;
        min-width: unset; /* Allow it to shrink on smaller screens */
    }
    /* grid-template-columns is dynamic in PHP, so no explicit changes here */
}

@media (max-width: 768px) {
    .admin-box-destination-category-scores {
        padding: 10px 15px 20px 15px;
    }
    .destination-category-scores-table {
        display: block; /* Stack elements for better mobile experience */
        border: none; /* Remove outer grid border */
    }
    .destination-category-scores-table .row {
        display: block; /* Each category row becomes a block */
        margin-bottom: 20px;
        border: 1px solid #ccc; /* Border around each category block */
        border-radius: 8px;
        padding: 10px;
    }
    .destination-category-scores-table .header-row {
        display: none; /* Hide the main header row on small screens */
    }
    .destination-category-scores-table .cell,
    .destination-category-scores-table .category-name-cell {
        display: flex; /* Keep flex for internal alignment */
        justify-content: space-between; /* Space out label and value */
        align-items: center;
        padding: 8px 0;
        border: none; /* Remove individual cell borders */
        background: none;
        text-align: left;
        white-space: normal; /* Allow text to wrap in mobile view */
        text-overflow: unset; /* Remove ellipsis in mobile view */
    }
    .destination-category-scores-table .cell:not(.category-name-cell):before {
        content: attr(data-destination-name) ": "; /* Add destination name as a label for each score */
        font-weight: bold;
        color: #555;
        flex-shrink: 0;
        margin-right: 10px;
    }
    .destination-category-scores-table .category-name-cell {
        font-size: 1.2em;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee; /* Separator for category name */
        padding-bottom: 10px;
    }

    /* Adjust input within stacked cells */
    .destination-category-scores-table .score-cell input[type="number"] {
        flex-grow: 1; /* Allow input to take remaining space */
        text-align: right; /* Align numbers to the right */
    }
}

/