/* 1. Remove tile padding for full-width bar */
[data-welcome-style="sonic"][data-itemtype="welcome_item"] .r-w-item {
    padding: 0 !important; 
    display: block !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    min-height: 220px !important;
    background: #fff !important;
    text-decoration: none !important;
}

/* 2. THE HEADER BAR (Icon Box) - Use Block to stop centering */
[data-itemtype="welcome_item"] .r-w-icon {
    display: block !important; /* This stops the centering dead */
    width: 100% !important;
    height: 70px !important; 
    padding: 18px 0 0 20px !important; /* Adjust 18px to center icon vertically */
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* 3. The Glyphicon - Float left to stay on the edge */
[data-itemtype="welcome_item"] .r-w-icon .glyphicon {
    float: left !important;
    color: white !important;
    font-size: 1.8rem !important;
}

/* 4. THE TITLE - Sucked up into the bar */
[data-itemtype="welcome_item"] .r-w-header {
    display: block !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 1.5rem !important;
    background: transparent !important;
    
    /* Alignment within the bar */
    position: relative !important;
    margin-top: -57px !important; /* Pulls title UP into the bar */
    margin-left: 65px !important;  /* Pushes title RIGHT of the icon */
    z-index: 10 !important;
}

/* 5. Description Area */
[data-itemtype="welcome_item"] .r-w-comment {
    display: block !important;
    clear: both !important; /* Ensures it stays below the floated icon */
    padding: 35px 15px 20px 15px !important; 
    color: #444 !important;
}

/* --- 14-TILE COLOR PALETTE --- */
[data-itemid="welcome_item"] .r-w-icon { background-color: #75566b !important; }
[data-itemid="welcome_item1"] .r-w-icon { background-color: #5f9ea0 !important; }
[data-itemid="welcome_item2"] .r-w-icon { background-color: #f39c12 !important; }
[data-itemid="welcome_item3"] .r-w-icon { background-color: #2980b9 !important; }
[data-itemid="welcome_item4"] .r-w-icon { background-color: #5f9ea0 !important; }
[data-itemid="welcome_item5"] .r-w-icon { background-color: #5f9ea0 !important; }
[data-itemid="welcome_item6"] .r-w-icon { background-color: #cd5c5c !important; }
[data-itemid="welcome_item7"] .r-w-icon { background-color: #2c3e50 !important; }
[data-itemid="welcome_item8"] .r-w-icon { background-color: #36b49d !important; }
[data-itemid="welcome_item9"] .r-w-icon { background-color: #e8926f !important; }
[data-itemid="welcome_item10"] .r-w-icon { background-color: #6da5c8 !important; }
[data-itemid="welcome_item11"] .r-w-icon { background-color: #cc8e35 !important; }
[data-itemid="welcome_item12"] .r-w-icon { background-color: #1b4d3e !important; }
[data-itemid="welcome_item13"] .r-w-icon { background-color: #30336b !important; }
[data-itemid="welcome_item14"] .r-w-icon { background-color: #b33939 !important; }

/* 1. Target the main container to create the blue background "row" 
[data-cellid="grid_c"] .r-welcome-align {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centering the contents 
    justify-content: center !important;
    background-color: #032c4a !important; /* Your dark blue background 
    padding: 40px 0 !important;
    margin-top: 30px !important;
    width: 100% !important;
    border-radius: 12px !important;
}*/

/* 2. Target the welcome group inside that container */
.welcome-group[data-itemid="welcome_group"] {
    width: 100% !important;
    text-align: center !important;
}

/* 3. Target the image specifically to ensure it doesn't float or misalign */
img[data-itemid="image"] {
    display: block !important;
    margin: 0 auto !important;
    max-width: 500px !important; /* Keeps the logo at a professional size */
    height: auto !important;
}

/* 4. Hide any empty H2 headers that PHPRunner might be injecting into that group */
.welcome-group h2:empty {
    display: none !important;
}

/* center tile grid*/

/* 1. The Centering Engine - Only on the parent */
.page-menu [data-cellid="grid_c1"], 
.r-welcome-align {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* This centers the visible tiles */
    align-items: flex-start !important;
    width: 100% !important;
}

/* 2. The Tile - NO 'display' rule here */
/* We only use properties that don't force a hidden item to show */
[data-itemtype="welcome_item"] {
    float: none !important;
    flex: 0 0 300px !important; /* Gives them the 300px width */
    margin: 15px !important;    /* Gives them the spacing */
    min-height: 100px;          /* Ensures they have shape */
}

/* 3. The Iron-Clad Permission Lock */
/* We re-assert the 'none' for anything that should be hidden */
[data-itemtype="welcome_item"][data-hidden="true"],
[data-itemtype="welcome_item"][style*="none"],
[data-itemtype="welcome_item"].r-hidden-item {
    display: none !important;
    flex: none !important; /* Prevents flexbox from 'seeing' the hidden item */
    margin: 0 !important;
}

/* Direct targeting of the Login elements by ID to force them back to normal (prevent black background on text) */
[data-page="_global_login"] [data-cellid="top_c3"],
[data-page="_global_login"] [data-itemid="login_welcome"] {
    background-color: transparent !important;
    background: transparent !important;
    margin-top:20px;
}

/* This targets the label specifically for the gamename field in the search panel */
[data-fieldname="gamename"] .r-search-label {
    visibility: hidden;
    position: relative;
}

[data-fieldname="gamename"] .r-search-label:after {
    content: 'Game Name (Select Subtopic First):';
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    color: #d9534f; /* This makes it red so they notice it */
    font-weight: bold;
}

/* ==========================================
   1. TRANSFORM 'WORDS LINK' INTO A BUTTON
   ========================================== */
a[id^='details_'] {
    background-color: #f0f4f8 !important; /* Soft light blue/grey */
    color: #2b5d8f !important;            /* Matching dark blue text */
    border: 1px solid #cbd5e1 !important; /* Clean subtle border */
    padding: 6px 12px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
    font-size: 13px !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

a[id^='details_']:hover {
    background-color: #2b5d8f !important; /* Inverts color on hover */
    color: white !important;
    border-color: #2b5d8f !important;
}

/* ==========================================
   FIX BRANDING PADDING & MENU PAGE LOGO
   ========================================== */
/* 1. Apply nice padding ONLY when inside the vertical sidebar */
.bs-sidebar-main .bs-logo, 
.bs-sidebar-main [class*="menu-header"] {
    padding-left: 20px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* 2. Strip all spacing from the horizontal menu logo container */
.navbar-header .bs-logo {
    padding: 0 !important;
    margin: 0 !important;
    height: 50px !important; 
    display: flex !important;
    align-items: center !important; 
}

/* ==========================================
   OVERRIDE BOOTSTRAP NAVBAR PADDING FOR LOGO
   ========================================== */
.navbar-header .navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* We leave left/right padding alone so it doesn't hug the edge of the screen */
    display: flex !important;
    align-items: center !important;
}

/* ==========================================
   CLEAN UP TOP ROW (BUTTONS LEFT, PRINT RIGHT)
   ========================================== */
/* 1. Force the main wrapper to act as a single unbreakable row */
[data-container="above-grid"] > .row,
.r-above-grid > .row {
    display: flex !important;
    flex-wrap: nowrap !important; /* Prevents the two columns from breaking apart */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* 2. Left Column (Buttons) - Give it permission to expand and take over empty space */
[data-cellid="above-grid_c1"] {
    display: flex !important;
    flex-wrap: nowrap !important; /* Force buttons to stay inline */
    flex: 1 1 auto !important; /* Let this column grow wide */
    gap: 8px !important;
    align-items: center !important;
}

/* Strip invisible margins */
[data-cellid="above-grid_c1"] > * {
    margin: 0 !important;
}

/* 3. Right Column (Pagination/Print) - Tell it to only take the space it strictly needs */
[data-cellid="above-grid_c2"] {
    display: flex !important;
    flex: 0 0 auto !important; /* Do not expand, just sit on the right */
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 15px !important;
}

/* ==========================================
   TOP MENU INVISIBLE SPACER (RESTORES LOGOUT POSITION)
   ========================================== */
.invisible-spacer {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================
   SAFE SIDEBAR ALIGNMENT & ICON FIX (THE REAL FIX)
   ========================================== */
/* 1. Target the actual LOGO block in the left bar and kill the float */
.r-vbar-page .r-left .navbar-brand,
[data-location="left"] [data-cellid="left_c0"] .navbar-brand {
    float: none !important;
    height: auto !important;
    padding: 10px 15px !important; /* Forces it to match standard menu item padding */
    font-size: 14px !important; /* Adjust if the text size doesn't quite match the others */
    line-height: inherit !important;
    display: block !important;
    margin: 0 !important;
}

/* 2. Target the icons ONLY (exclude the main logo image) */
.r-vbar-page .r-left .navbar-brand .glyphicon,
.r-vbar-page .r-left .navbar-brand i,
[data-location="left"] .nav > li > a > .glyphicon,
[data-location="left"] .nav > li > a > i,
[data-location="left"] .nav > li > a > img {
    display: inline-block !important;
    width: 25px !important; 
    text-align: center !important; 
    margin-right: 10px !important;
    float: none !important;
}

/* 3. Explicitly protect the main site logo from being shrunk */
.r-vbar-page .r-left .navbar-brand img {
    width: auto !important;
    max-width: 100% !important;
    display: inline-block !important;
}