/* Base body font */
body {
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding-top: 70px; /* Adjust this value based on the actual height of your menu */
    transition: padding-top 0.5s ease-in-out; /* Smooth transition */
}

/* General button styles */
button, .button, .menubutton, .trend, .save-btn {
    background-color: navy;
    font-size: inherit;
    padding: 8px 16px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Hover effect for buttons */
button:hover, .button:hover, .menubutton:hover, .trend:hover, .save-btn:hover {
    background-color: steelblue;
}

/* Special button styles */
.trend {
    background-color: lightblue;
    color: white;
}

.menubutton {
    border: 2px dashed white;
}

.save-btn {
    background-color: navy;
}

/* control image display */
img {
    width: 80%;  /* The image will scale to fit the width of its container */
    height: auto; /* Maintain the aspect ratio */
}


/* image on menu */
.img-menu {
	width: 40px;
	height: auto;
}

/* image on quote and invoice */
.img-quote-inv {
	width: 200px;
	height: auto;
}

/* Global UL Styles (Menu Container) */
ul {
    font-family: inherit;
	font-size: inherit;
    list-style-type: none;
    margin: 0;
    overflow: visible;
    background-color: navy;
    padding: 15px; /* 25px, 20px */
    /* border-radius: 5px; */
    opacity: 1; /* Visible by default */
    transition: opacity 0.5s ease-in-out; /* Smooth transition for hide/show effect */
    position: fixed; /* Makes the menu stay at the top */
    top: 0;
    left: 0;
    width: 100%; /* Full width to make it span across the top */
    height: auto; /* Set the height of the menu */
    z-index: 1000; /* Ensure it stays on top of other content */
	pointer-events: all;
}

/* Hidden menu state */
.hidden-menu {
    opacity: 0;
    pointer-events: none; /* Disable interaction when hidden */
    transition: opacity 0.5s ease-in-out; /* Smooth hiding effect */
}

/* Match View and Org form labels and select elements with menu text */
.view-label, .org-label, #viewtype, #orgtype {
    color: white; /* Match the menu text color */
    background-color: navy; /* Match the menu background */
    border: none;
    padding: 5px; /*  4px 8px */
}

/* Match View and Org form labels and select elements with menu text */
#viewtype, #orgtype {
    color: black; /* Match the menu text color */
    background-color: white; /* Match the menu background */
    border: none;
    padding: 5px; /*  4px 8px */
}

#viewtype:hover, #orgtype:hover {
    background-color: steelblue; /* Same hover effect as menu */
}

/* li styles (nav bar) */
li {
    float: left;
 	/* position: relative;*/ /* Ensure dropdown is positioned relative to its parent */
}

li a, .dropbtn {
    font-family: inherit;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: navy;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: navy;
    min-width: 160px;
    box-shadow: Black;
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: navy;
}

.dropdown:hover .dropdown-content {
    display: block; /* inline-block */
	/* position: relative; */ /* Make the dropdown content relative to this */
}

/* Menu toggle button with circular design */
button#menuToggleButton {
    position: fixed;
    top: 10px;  /* Adjust as needed */
    right: 10px; /* Position the button all the way to the right */
    background-color: navy;
    color: white;
    border: none;
    padding: 15px;
    font-size: inherit;
    cursor: pointer;
    border-radius: 50%; /* Makes the button circular */
    width: 50px;
    height: 50px;
    z-index: 1005; /* Ensure it stays on top of other content */
    display: flex;
    justify-content: center;
    align-items: center;
}

button#menuToggleButton:hover {
    background-color: steelblue;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Add a slight shadow on hover */
}

/* Table styles */
/* Container for the table to enable scrolling */
.table-container {
    max-height: 100vh; /* Set a fixed height for the table's container */
    overflow-y: auto; /* Enable vertical scrolling */
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: inherit;
}

td, th {
    text-align: left;
    padding: 12px 16px;
}

/* Sticky table headers */
th {
    background-color: gainsboro; /* Ensure the background is visible while scrolling */
    font-weight: bold;
    cursor: pointer;
    position: sticky;
    top: 0; /* Stick to the top of the container */
    z-index: 100; /* Keep header above other content */
    box-shadow: 0 2px 2px rgba(0,0,0,0.1); /* Optional: add a shadow for better visibility */
}

tr {
    background-color: white;
    border-right-color: transparent;
    border-left-color: transparent;
}

/* Specific table styles */
.fundraiser-table, .quote-table {
    border: 1px solid #000;
}

.fundraiser-th, .fundraiser-td, .quote-td, .quote-th, .quote-td-cat {
    border: 1px solid #ddd;
}

.fundraiser-th {
    background-color: white;
    font-weight: bold;
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 10; /* Ensure the header stays on top of the table content */
}

.fundraiser-th.sort-asc::after {
    content: " ▲";
}

.fundraiser-th.sort-desc::after {
    content: " ▼";
}

.fundraiser-tfoot {
    font-weight: bold;
}

.trmenu {
    background-color: navy;
}

.orderstatus-table {
    border: 1px dashed;
}

/* Hover effect for tables */
.tablecolor tr:hover, .alternate tr:hover {
    background-color: powderblue;
}

/* Modal (alert formatting) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: powderblue;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: gainsboro;
    float: right;
    font-size: inherit;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Inputs */
input {
    /*width: auto;*/
    box-sizing: border-box;
    display: inline;
}

.column-input {
    text-align: right;
}

/* Analyze style */
.analyze {
    font-style: italic;
    font-size: min(1em, 1vw);
    color: navy;
}

/* Payment styles */
.payment {
    background-color: lightgreen;
}

.partial-payment {
    background-color: lightyellow;
}

/* Quote table styles */
.quote-table {
    resize: both;
    table-layout: fixed;
    font-size: min(1em, 1vw);
    border: 1px solid;
}

.input-readonly {
    border: none;
    background: none;
    display: inline;
    font-family: inherit;
    font-size: inherit;
    width: auto;
}

.quote-td, .quote-th, .quote-td-cat {
    overflow: scroll;
    text-overflow: initial;
}

.quote-th {
    background-color: gainsboro;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10; /* Ensure the header stays on top of the table content */
    border-bottom: 2px solid #000; /* Add bottom border */
    cursor: pointer;
}

/* Specific color classes */
.red {
    color: red;
}

.green {
    color: green;
}

/* Container and layout styling */
.charts-container {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

.chart {
    width: 40%;
}

.table-container, .top-tables-container {
    margin-top: 30px;
    display: flex;
    justify-content: space-between; /* Adjust spacing between tables */
    flex-wrap: wrap; /* In case there are more than 5 tables, this ensures wrapping */
}

.top-table {
    width: 30%;
    flex: 1;
    min-width: 200px; /* Adjust the minimum width of each table */
    margin: 10px;
}

.section-links {
    margin-bottom: 20px;
}

.section-links a {
    margin-right: 20px;
    text-decoration: none;
    color: navy;
}

.section-links a:hover {
    text-decoration: underline;
}