/* 
 * Modern MenuBar CSS for OpenGTS
 * Updated to use CSS-based styling instead of background images
 */

:root {
  --primary-color: #3498db;
  --primary-hover: #2980b9;
  --secondary-color: #2ecc71;
  --secondary-hover: #27ae60;
  --text-color: #333333;
  --light-text: #777777;
  --light-bg: #f5f5f5;
  --border-color: #e0e0e0;
  --header-bg: #f8f9fa;
  --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  --content-width: 100%; /*800px;              */
}

/* Main menu bar container */
.menuBar {
    font-size: 10pt;
    padding: 0;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    display: table;
    margin: 0 auto;
    width: auto !important;
    max-width: var(--content-width);
}

/* Menu bar table */
.menuBar table {
    width: auto !important;
    margin: 0 auto;
    border-collapse: collapse;
}

/* Unselected menu items - standard and narrow */
.menuBarUns20, .menuBarUns {
    cursor: pointer;
    padding: 10px 15px;
    color: var(--text-color);
    text-decoration: none;
    text-align: center;
    font-size: 10pt;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 2px solid transparent;
    background-image: none;
    background-color: #e0e0e0;
    width: auto;
    height: auto;
    display: table-cell;
}

.menuBarUns:hover {
    color: var(--primary-color);
    background-color: #d0d0d0;
}

/* Unselected menu items - wide */
.menuBarUnsW  {
    cursor: pointer;
    padding: 10px 20px;
    color: var(--text-color);
    text-decoration: none;
    text-align: center;
    font-size: 10pt;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 2px solid transparent;
    background-image: none;
    background-color: #e0e0e0;
    width: auto;
    height: auto;
    display: table-cell;
}

.menuBarUnsW:hover {
    color: var(--primary-color);
    background-color: #d0d0d0;
}

/* Selected menu items - standard and narrow */
.menuBarSel20, .menuBarSel {
    cursor: pointer;
    padding: 10px 15px;
    color: var(--primary-color);
    text-decoration: none;
    text-align: center;
    font-size: 10pt;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 2px solid var(--primary-color);
    background-image: none;
    width: auto;
    height: auto;
    display: table-cell;
}

/* Selected menu items - wide */
.menuBarSelW  {
    cursor: pointer;
    padding: 10px 20px;
    color: var(--primary-color);
    text-decoration: none;
    text-align: center;
    font-size: 10pt;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 2px solid var(--primary-color);
    background-image: none;
    width: auto;
    height: auto;
    display: table-cell;
    
}

/* Submenu styling */
TABLE.menuSubFrame {
    width: 300px; /* Increased width for better readability */
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow);
    overflow: visible; /* Changed from hidden to visible */
}

TD.menuSubItemCol {
    cursor: pointer;
    border-top: solid 1px var(--border-color);
    padding: 8px 15px;
    text-align: left;
    width:  100%;
    font-size: 10pt;
    transition: var(--transition);
}
TD.menuSubItemCol:hover {
    background-color: var(--light-bg);
    color: var(--primary-color);
}

A.menuSubItemLink {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition);
}
A.menuSubItemLink:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}