/* General Reset */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: var(--black); /* Default background color */
    color: var(--white); /* Default text color */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

/* Custom Colors */
:root {
    --dark-crimson: #5A0000; /* Dark Crimson */
    --crimson: #8B0000; /* Darker Crimson */
    --light-crimson: #A52A2A; /* Light Crimson */
    --gold: #FFD700;    /* Gold */
    --black: #000000;   /* Black */
    --white: #FFFFFF;   /* White */
    
    /* Layout Backgrounds */
    --header-bg: var(--black); /* Black for header */
    --sidebar-bg: var(--crimson); /* Crimson for sidebar */
    --content-bg: var(--black); /* Black for content area */
    --block-bg: var(--black);   /* Black for block background */
    --outer-block-bg: var(--black); /* Black for outer block */
    --text-color: var(--white); /* White text */

    /* Table Global Styles */
    --table-font-size: 16px; /* Default font size */
    --table-padding-left: 1px; /* Left padding for better spacing */
    --table-cell-height: 20px; /* Reduced default cell height */
}

.single-page main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

.row.no-wrap {
    flex-wrap: nowrap;
  }

/* Light Mode Colors */
body.light-mode {
    --header-bg: var(--white); /* White for header */
    --sidebar-bg: var(--gold); /* Gold for sidebar */
    --content-bg: var(--white); /* White for content area */
    --block-bg: var(--white);   /* White for block background */
    --outer-block-bg: var(--white); /* White for outer block */
    --text-color: var(--black); /* Black text */
}

/* Header */
.main-header {
    background-color: var(--header-bg); /* Header background */
    color: var(--text-color); /* Header text */
    border-bottom: 2px solid var(--gold); /* Gold border */
}

.text-gold {
    color: #FFD700 !important;
  }

/* Navigation Bar */
.navbar {
    margin-bottom: 5px;
    background-color: #000000; /* Solid black background */
    border-bottom: 2px solid var(--black); /* Optional gold border for visual separation */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure it stays above other content */
    margin-top: 15; /* Reduce margin to bring the navigation closer to the top */
}

.navbar .navbar-nav .nav-link {
    color: var(--white); /* Default link color */
    border-radius: 5px; /* Rounded corners on hover */
    font-weight: normal; /* Normal font weight by default */
    text-decoration: none; /* Remove underline by default */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for hover effects */
}

.navbar .nav-link:hover {
    color: var(--gold); /* Change link color to gold on hover */
    font-weight: bold; /* Bolden text on hover */
    text-decoration: none; /* Ensure no underline appears on hover */
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: #000000; /* Solid black background */
    border: 1px solid var(--gold); /* Gold border around dropdown */
}

.dropdown-item {
    color: var(--gold); /* Default gold text for dropdown items */
    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
}

.dropdown-item:hover {
    background-color: var(--crimson); /* Crimson background on hover */
    color: var(--gold); /* Gold text on hover */
}

/* Logo */
.logo {
    max-height: 40px;
    width: auto;
}

/* Hero Section (Banner) */
.hero-section {
    height: 60vh; /* Adjust the height of the banner */
    background: url('../images/banners/crimson.jpg') no-repeat center center; /* Add your banner image */
    background-size: cover; /* Ensure the image fills the space without distortion */
    position: relative; /* For layering content */
    display: flex; /* Flexbox for centering text */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-align: center; /* Center text */
    color: white;
    border-bottom: 2px solid var(--gold); /* Add gold border under the banner */
}   

/* Overlay for Better Readability */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay with 40% opacity */
    z-index: 1; /* Layer the overlay below the text */
}

.container-lower {
    background-color: var(--black);
}


.hero-section .container {
    position: relative; /* Ensure text is above the overlay */
    z-index: 2; /* Layer the text above everything */
}

.hero-section h1 {
    font-size: 3rem; /* Title font size */
    font-weight: bold; /* Bold title */
    margin-bottom: 1rem; /* Space between title and subtitle */
}

.hero-section p {
    font-size: 1.2rem; /* Subtitle font size */
}

/* Guild Features Section */
#guild {
    background-color: var(--crimson); /* Darker Crimson for features section */
    padding: 2rem 0; /* Vertical spacing for the section */
    width: 100%; /* Ensure full width */
    margin: 0; /* Remove default margin */
}

#guild h2 {
    color: var(--gold); /* Gold section heading */
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem; /* Add spacing below heading */
}

#guild .container-fluid {
    width: 100%; /* Ensure full width */
}

/* ############################################ START FEATURE CARD ############################################  */
.feature-card {
    background-color: var(--black);
    color: var(--white);
    border-radius: 0.75rem;
    border: 2px solid var(--gold);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.1);
    margin-bottom: 1rem;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
    background-color: #2c2c2c;
}

.feature-card h3 {
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.feature-card h3 a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.feature-card h3 a:hover {
    font-weight: bold;
    text-decoration: none;
}

.feature-card p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}
/* ############################################ END FEATURE CARD ############################################  */

/* Towns Link */
.towns-link {
    color: var(--gold); /* Gold color */
    text-decoration: none; /* No underline */
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition for hover effects */
}

.towns-link:hover {
    font-weight: bold; /* Bold on hover */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Footer */
footer {
    background-color: var(--black); /* Set background color to black */
    color: var(--gold); /* Gold text */
    border-top: 2px solid var(--gold); /* Top gold border */
    padding: 1rem 0; /* Vertical spacing */
    text-align: center; /* Center footer content */
}

.footer {
    background-color: var(--black); /* Set background color to black */
    color: #fff; /* White text */
    padding: 20px 0;
    text-align: center;
    border-top: 5px solid gold; /* Gold border */
}

/* ######################################################### Navigation Block (Card) ######################################################### */
.navigation-block {
    width: 100%;
    max-width: 180px;
    background-color: var(--black);
    border-radius: 10px;
    padding: 10px 15px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2),
                -4px -4px 8px rgba(255, 255, 255, 0.1);
    text-align: center;
  }
  .navigation-block .block-header {
    color: var(--gold);
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    padding: 6px 10px;
    border: 1px solid var(--gold);   /* ✅ Full-width gold border */
    border-radius: 6px;
    background-color: transparent;
    display: block;                 /* ✅ Full width */
    width: 100%;                    /* ✅ Ensure it fills the container */
    text-align: center;             /* ✅ Keep the text centered */
  }
  .navigation-block .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;          /* ⬅️ SUPER tight gap between links */
    padding: 0;
    margin: 0;
    width: 100%;
    list-style: none;
  }
  
  .navigation-block .nav-link {
    display: block;
    width: 100%;
    padding: 2px 6px;          /* ✅ Tighter vertical spacing */
    margin: 0;
    font-size: 0.75rem;        /* Slightly smaller text */
    line-height: 1;          /* Less height between lines */
    text-align: center;
    color: var(--text-color);
    border-radius: 4px;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
  }
  .navigation-block .nav-link:hover {
    background-color: var(--light-crimson);
    color: var(--gold);
  }
/* ######################################################### END Navigation Block (Card) ######################################################### */
  
/* ######################################################### SIDEBAR LAYOUT ######################################################### */
.sidebar {
    width: 100%;
    max-width: 250px;
    background-color: var(--sidebar-bg);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* ✅ Center blocks */
    gap: 1rem;
    overflow-y: auto;
    border-radius: 10px;
  }
  
  /* NAV BLOCK / CARD */
  .sidebar .card {
    width: 100%;
    background-color: var(--block-bg);
    border-radius: 10px;
    padding: 0.5rem;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
  }
  
  /* BLOCK TITLE */
  .sidebar .card-header {
    text-align: center;
    font-weight: bold;
    color: var(--gold);
    background-color: var(--dark-crimson);
    border-radius: 6px;
    padding: 0.5rem;
  }
  
  /* NAV LINKS */
  .sidebar .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--text-color);
    white-space: nowrap; /* 🚫 No wrap */
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
  }
  
  .sidebar .nav-link:hover {
    background-color: var(--light-crimson);
    color: var(--gold);
  }
  
  .sidebar .nav-link.active {
    background-color: var(--dark-crimson);
    color: var(--gold);
    font-weight: bold;
  }
  
/* Ensure background color for specific nav link rows */
.sidebar .table tbody tr td a.nav-link {
    display: block;
    background-color: var(--dark-crimson); /* Dark crimson background for nav link rows */
}

/* Submenu Item Hover Styles */
.sidebar .submenu-item .nav-link {
    background-color: var(--dark-crimson); /* Dark crimson background for submenu items */
}

.sidebar .submenu-item .nav-link:hover {
    background-color: var(--light-crimson); /* Light crimson background on hover for submenu items */
}

/* Prevent child menu from highlighting when hovering over parent */
.sidebar .nav-item:hover .submenu-item .nav-link {
    background-color: var(--dark-crimson); /* Maintain dark crimson background for submenu items */
}

/* Adjust padding for submenu items */
.sidebar .submenu-item {
    padding-left: 1.5rem; /* Adjust the padding to create a larger indent */
}

/* Sidebar Container */
.sidebar-crimson {
    background-color: var(--crimson);
    color: #fff;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: 10px;
    box-shadow: 4px 0 6px rgba(255, 255, 255, 0.2),
                6px 0 10px rgba(255, 255, 255, 0.1);
  }
/* ######################################################### END SIDEBAR LAYOUT ######################################################### */

/* ######################################################### RIGHT NAVIGATION BLOCK ######################################################### */

.navigation-block-right {
    background-color: #000;
    border: 2px solid #FFD700;
    border-radius: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;                      /* More space inside */
    max-width: 100%;                    /* Use full width of sidebar */
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}


.navigation-block-right .block-header {
    font-weight: bold;
    padding: 0.5rem 1rem;
    background-color: var(--crimson); /* Dark crimson background */
    border: 1px solid var(--gold);            /* Match left block header */
    color: #FFD700;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.navigation-block-right ul.nav {
    list-style: none;
    padding: 0.5rem 1rem;
    margin: 0;
}

.navigation-block-right .nav-link {
    color: #fff;
    padding: 0.25rem 0;
    display: block;
}

.navigation-block-right .nav-link:hover {
    color: #FFD700;
    text-decoration: underline;
}

/* ######################################################### END RIGHT NAVIGATION BLOCK ######################################################### */


/* ######################################################### SIDEBAR RIGHT LAYOUT ######################################################### */
.sidebar-right {
    background-color: #111111;
    border-left: 2px solid #8B0000; /* Crimson */
    padding: 1rem 0;
}

.sidebar-right .right-block {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 1rem;
}

.sidebar-right .block-header {
    color: #FFD700; /* Gold */
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}
/* ######################################################### END SIDEBAR RIGHT LAYOUT ######################################################### */


/* Main Content */
.main-content {
    padding-left: 0; /* Remove left padding */
    margin-left: 10px; /* Move the block 10px to the right of the navigation block */
    background-color: var(--content-bg); /* Black background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller drop shadow */
    padding: 5px 0 0 0; /* Add 5px padding from the top */
}

/* Outer Block */
.outer-block {
    background-color: var(--outer-block-bg); /* Black background for outer block */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller drop shadow */
    padding: 1rem; /* Add padding inside the outer block */
    margin-bottom: 1rem; /* Add margin below the outer block */
}

/* Dashboard Block */
.dashboard-block {
    background-color: var(--dark-crimson); /* Dark crimson background inside the block */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.1); /* Raised look */
    padding: 1rem; /* Add padding inside the block */
    margin-bottom: 1rem; /* Add margin below the block */
    margin-top: -10px; /* Move the block up a little more */
}

/* Sidebar Outer Block */
.sidebar-outer-block {
    background-color: var(--outer-block-bg); /* Black background for outer block */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller drop shadow */
    padding: 1rem; /* Add padding inside the outer block */
    margin-bottom: 1rem; /* Add margin below the outer block */
    padding-top: 25px;
}

/* Container Fluid */
.container-fluid {
    padding: 0; /* Remove padding inside the container */
}

/* Light Mode Adjustments */
body.light-mode .main-header,
body.light-mode .sidebar,
body.light-mode .footer {
    background-color: var(--header-bg); /* Light background */
    color: var(--text-color); /* Dark text */
}

body.light-mode .sidebar .nav-link,
body.light-mode .profile-menu .dropdown-item {
    color: var(--text-color); /* Dark text */
}

body.light-mode .sidebar .nav-link:hover,
body.light-mode .profile-menu .dropdown-item:hover {
    color: var(--gold); /* Gold text on hover */
    background-color: var(--header-bg); /* Light background on hover */
}

body.light-mode .search-bar input {
    background-color: var(--header-bg);
    color: var(--text-color);
}

/* Custom Crimson Background */
.bg-crimson {
    background-color: #8B0000 !important;
  }

  .rounded-4 {
    border-radius: 1rem !important;
}

.bg-soft-white {
    background-color: rgb(228, 229, 231); /* Softer white color */
}

.bg-dark-crimson {
    background-color: #5A0000; /* Darker Crimson color */
}

/* Additional Styles */
.nav-header {
    color: gold !important;
    font-weight: bold;
    pointer-events: none;
}
.nav-link span[data-feather] {
    margin-right: 0px; /* Adjust the margin to reduce spacing */
}
.submenu-item {
    padding-left: 50px; /* Adjust the padding to create a larger indent */
}
.chevron-icon {
    transition: transform 0.3s ease;
}
.collapsed .chevron-icon {
    transform: rotate(-90deg);
}
.expanded .chevron-icon {
    transform: rotate(90deg);
}
.manage-content-link {
    margin-bottom: 20px; /* Adjust the margin to create space below the Manage Content link */
}
.ashes-header {
    margin-top: 20px; /* Adjust the margin to create space above the Ashes of Creation header */
}

/* Tab Styles */
.nav-tabs .nav-link {
    background-color: var(--black); /* Black background for tabs */
    color: var(--gold); /* Gold text for tabs */
    border: 1px solid var(--gold); /* Gold border for tabs */
    border-radius: 0; /* Remove border-radius */
}

.nav-tabs .nav-link.active {
    background-color: var(--gold); /* Gold background for active tab */
    color: var(--black); /* Black text for active tab */
}

/* Center tables inside the sidebar */
.sidebar .table-responsive {
    display: flex;
    justify-content: left;
    padding-left: 45px; /* Change left padding to 25% */
}

.sidebar .table td{
    width: 100%; /* Set the table width to 100% */
    max-width: 300px; /* Set a maximum width for the tables */
    background-color: var(--crimson); /* Set table background to crimson */
}

/* Table Header Styles */
.sidebar .table th {
    background-color: var(--black); /* Black background for table headers */
    color: var (--gold); /* Gold text for table headers */
}

/* Table Row Styles */
.sidebar .table tbody tr {
    background-color: var(--dark-crimson); /* Dark crimson background for table rows */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* Hero Section: Adjust for smaller screens */
    .hero-section {
        height: 40vh; /* Shorter height for mobile screens */
    }

    .hero-section h1 {
        font-size: 2rem; /* Smaller title font size */
    }

    .hero-section p {
        font-size: 1rem; /* Smaller subtitle font size */
    }
}

/* Card Hover Effect */
.card:hover {
    transform: translateY(-5px); /* Lift card slightly */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Shadow effect */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
}

/* DataTable Styles */
.dataTables_wrapper {
    background-color: var(--white); /* White background for DataTable */
    color: var(--black); /* Black text for DataTable */
    border: 1px solid var(--black); /* Black border for DataTable */
    border-radius: 5px; /* Rounded corners */
    padding: 1rem; /* Padding inside the DataTable */
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--black); /* Black text for DataTable controls */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--white); /* White background for pagination buttons */
    border: 1px solid var(--black); /* Black border for pagination buttons */
    color: var(--black); /* Black text for pagination buttons */
    border-radius: 3px; /* Rounded corners for pagination buttons */
    margin: 0 2px; /* Margin between pagination buttons */
    padding: 5px 10px; /* Padding inside pagination buttons */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--light-crimson); /* Light crimson background on hover */
    color: var(--white); /* White text on hover */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: var(--gold); /* Gold background for current page button */
    color: var(--black); /* Black text for current page button */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background-color: var(--black); /* Black background for disabled buttons */
    color: var(--white); /* White text for disabled buttons */
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--white); /* White background for input fields */
    border: 1px solid var(--black); /* Black border for input fields */
    color: var(--black); /* Black text for input fields */
    border-radius: 3px; /* Rounded corners for input fields */
    padding: 5px; /* Padding inside input fields */
}

/* Alternating Row Colors and Hover Effect */
#continents-table tbody tr:nth-child(odd) {
    background-color: var(--white); /* White background for odd rows */
}

#continents-table tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Light gray background for even rows */
}

#continents-table tbody tr {
    color: var(--black); /* Black text for rows */
    border-bottom: 1px solid #d3d3d3; /* Thin gray line at the bottom of each row */
}

#continents-table tbody tr:hover {
    background-color: var(--light-crimson); /* Light crimson background on hover */
    color: var(--white); /* White text on hover */
}

/* Plus Sign Styles */
.plus-sign {
    font-size: 1.5rem; /* Adjust the size as needed */
    cursor: pointer; /* Change cursor to pointer */
    color: var(--black); /* Black color for the plus sign */
}

#continents-table tbody tr:hover .plus-sign {
    color: var(--white); /* White color for the plus sign on hover */
}

/* ============================================= */
/* Global Styling for All Game Data Tables      */
/* Applies to tables displaying world details,  */
/* characters, crafting, nodes, and more.       */
/* ============================================= */

/* Alternating Row Colors */
.table-game-data tbody tr:nth-child(odd) {
    background-color: var(--white); /* White background for odd rows */
}

.table-game-data tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Light gray background for even rows */
}

/* Default Row Styling */
.table-game-data tbody tr {
    color: var(--black); /* Black text for readability */
    border-bottom: 1px solid #d3d3d3; /* Thin separator between rows */
    font-size: var(--table-font-size); /* Use adjustable font size */
    height: var(--table-cell-height); /* Ensures consistent row height */
}

/* Adjust Table Cell Text Alignment */
.table-game-data td,
.table-game-data th {
    text-align: left; /* Align text to the left by default */
    vertical-align: middle; /* Centers text vertically */
    padding-left: var(--table-padding-left); /* Adds spacing to the left */
    padding-top: 5px; /* Reduce padding above text */
    padding-bottom: 5px; /* Reduce padding below text */
}

/* ✅ Fix: Force Hover Effect to Apply */
.table-game-data tbody tr:hover td {
    background-color: var(--light-crimson) !important; /* Highlighted background on hover */
    color: var(--white) !important; /* White text for contrast */
}

/* Plus-Sign Styling for Expandable Rows */
.table-game-data tbody tr:hover .plus-sign {
    color: var(--white) !important; /* Ensures visibility when hovering */
}

/* Table Header Styling */
.table-game-data thead th {
    background-color: var(--crimson); /* Crimson red background for headers */
    color: var(--gold); /* Gold text for high contrast */
    font-size: calc(var(--table-font-size) + 2px); /* Slightly larger font for headers */
    text-align: left; /* Align headers to the left */
}

/* Small Table Variant - Force Font Size & Row Height */
.small-table.table-game-data tbody tr {
    height: 15px !important; /* Force smaller row height */
    font-size: 12px !important; /* Override DataTables styles */
}

/* Ensure Table Headers Match */
.small-table.table-game-data thead th {
    font-size: 14px !important;
}

/* Ensure Padding Adjusts */
.small-table.table-game-data td,
.small-table.table-game-data th {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Optional: Center Text Horizontally in Specific Tables */
.text-center-table .table-game-data td {
    text-align: center; /* Centers text horizontally */
}

/* Optional: Adjust Vertical Alignment for Specific Tables */
.text-top-table .table-game-data td {
    vertical-align: top; /* Aligns text to the top */
}

.text-bottom-table .table-game-data td {
    vertical-align: bottom; /* Aligns text to the bottom */
}

/* =============================================== END TABLE-GAME-DATA =============================================== */


/* Plus Sign Styles - Adjust Based on Font Size */
.plus-sign {
    font-size: calc(var(--table-font-size) + 2px); /* Auto-scales with table */
    cursor: pointer; /* Change cursor to pointer */
    color: var(--black); /* Default black color */
}

/* Small Table Variant */
.small-table .plus-sign {
    font-size: calc(var(--table-font-size) - 1px) !important; /* Slightly smaller */
}

/* Large Table Variant */
.large-table .plus-sign {
    font-size: calc(var(--table-font-size) + 4px) !important; /* Slightly larger */
}

/* =============================================== END Plus Sign =============================================== */

/* Table Header Styles */
#zones-table thead th {
    background-color: var(--crimson); /* Crimson red background for table headers */
    color: var(--gold); /* Gold text for table headers */
}

/* Custom CSS for Table Header and Text Spacing */
.table-crimson-gold th {
    background-color: #8B0000; /* Crimson background */
    color: #FFD700; /* Gold text */
}
.table-rounded {
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensure rounded corners are visible */
}
.table td, .table th {
    padding-left: 3px; /* 3px spacing from the left */
}

/* Custom CSS for Table Header and Highlighting */
.table-crimson-gold th {
    background-color: #8B0000; /* Crimson background */
    color: #FFD700; /* Gold text */
}
.table-crimson-gold th a.header-link {
    color: #FFD700; /* Gold text for links */
    text-decoration: none; /* Remove underline */
}
.table-crimson-gold th a.header-link:hover {
    text-decoration: underline; /* Underline on hover */
}
.highlight-crimson-night {
    background-color: #FFD700; /* Gold background */
    color: #8B0000; /* Crimson text */
}

/* Styling for pagination buttons in DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    width: auto;                  /* Button width adjusts automatically to content */
    padding: 0px;                   /* Removes padding for compact buttons */
    margin-left: 0px;                /* No spacing between buttons */
    border-radius: 4px;               /* Rounded corners for smoother appearance */
    background-color: #8B0000;       /* Crimson red background for the button */
    color: #FFD700;                  /* Gold color for button text */
    height: 20px;                    /* Explicit height to ensure uniform button size */
    box-sizing: border-box;          /* Includes padding and border in element's total width/height */
    border: 1px solid #8B0000;       /* Crimson border to match background */
    border: none;                    /* Removes border outline for cleaner look */
    padding: 0px;                    /* No internal padding for minimal size */
    margin-left: 0px;                /* Removes spacing between adjacent buttons */
    border-radius: 4px;              /* Slightly rounded corners for better aesthetics */
    font-size: 12px;                 /* Smaller font size for compact appearance */
    line-height: 20px;               /* Vertically centers text within the button */
}

/* Hover state style for pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #FFD700;       /* Gold background on hover for visual feedback */
    color: #8B0000;                  /* Crimson text on hover to maintain contrast */
}

/* Current active page button styling */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #FFD700;           /* Highlight current page in gold */
    color: #8B0000;                      /* Crimson text color for contrast */
}

/* Adjust Previous button to the left */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    margin-right: 0px;                  /* Pushes the "Previous" button slightly to the left */
}

/* Adjust Next button to the right */
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    margin-left: 0px;                   /* Pushes the "Next" button slightly to the right */
}

/* Center the pagination container for balanced visual appearance */
.dataTables_wrapper .dataTables_paginate {
    text-align: center;                  /* Centers pagination controls */
}

/* Align the search bar clearly to the right and slightly lower */
.dataTables_wrapper .dataTables_filter {
    margin-top: 20px;               /* Push the search bar downward */
    text-align: right;              /* Align to the right for neatness */
}

/* Position "Search:" label to the left of input field clearly */
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 5px;                       /* Space between label and input */
    font-size: 0.9rem;
}

/* Adjust input size for clearer visibility */
.dataTables_wrapper .dataTables_filter input {
    height: 28px;                   /* Slightly taller input */
    width: 200px;                   /* Wider input for easier use */
    margin-left: 5px;               /* Spacing from the "Search:" label */
}

/* ============================================================ */
/* HOME PAGE STYLING - Matching crimsonnightgaming.com */
/* ============================================================ */

/* Welcome Section */
.welcome-section {
    background-color: #000000;
    border-bottom: 2px solid var(--gold);
    padding: 3rem 0 !important;
}

.welcome-section h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.welcome-section p {
    color: #cccccc;
    font-size: 1.1rem;
}

/* Crimson Section Background */
.bg-crimson-section {
    background-color: #6B1818 !important;
    padding: 3rem 0 !important;
}

.bg-crimson-section h2 {
    color: var(--gold);
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
}

/* Feature Cards - Home Page */
.bg-crimson-section .feature-card {
    background-color: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 0.5rem;
    padding: 1.5rem;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bg-crimson-section .feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.15);
}

.bg-crimson-section .feature-card h3 {
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-align: center;
}

.bg-crimson-section .feature-card .text-light {
    color: #e0e0e0 !important;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    color: #d0d0d0;
    font-size: 0.9rem;
    padding: 0.35rem 0;
    line-height: 1.5;
    margin-left: 0;
}

.feature-list li:before {
    content: "• ";
    color: var(--gold);
    margin-right: 0.5rem;
}

/* Ensure layout padding */
section.px-4.py-4 {
    padding: 0 !important;
}