/* Be aware the class 'card-asset-chart' can cause especially the Net Worth chart to jitter. This has been a problem, so look out for it. */

/* ========================================================= */
/* ============= SECTION: Desktop Screen CSS =============== */
/* ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {--color-main: #1a202e;}

* {font-family: 'Poppins', sans-serif; box-sizing: border-box; text-decoration: none; list-style-type: none; margin: 0; padding: 0;}

body {overflow-x: hidden;}

/* Overlay that darkens the page */
#overlayToken {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 999;}
/* Dialog box styling */
#tokenDialog {display: none; position: fixed; font-size: 24px; top: 30%; left: 50%; transform: translate(-50%, -30%); background-color: #fff;       border: 1px solid #ccc; padding: 20px; box-shadow: 0 0 15px rgba(0,0,0,0.3); z-index: 1000;}
#tokenDialog a {color: #00bcd4; text-decoration: none;}
#tokenDialog a:hover {text-decoration: underline;}
#inactivityLogOutMessage {position: fixed; top: 20px; right: 20px; background-color: #ff4d4d; color: white; padding: 16px 24px; border-radius: 8px; font-size: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 9999; display: none;}



#sidebar-toggle {display: none;}
.body-label {position: fixed; height: 100%; width: calc(100% - 280px); z-index: 30; right: -100%; top: 0; }
#sidebar-toggle:checked ~ .sidebar {left: -100%;}
#sidebar-toggle:checked ~ .main-content header {left: 0; width: 100%; right: 0;}
#sidebar-toggle:checked ~ .main-content {margin-left: 0;}
.sidebar {width: 280px; position: fixed; left: 0; top: 0; height: 100%; padding: 1rem; background: var(--color-main); color: #fff; z-index: 20; transition: left 300ms; }
.sidebar-brand {display: flex; justify-content: center; align-items: center; height: 70px;}
.brand-flex {display: flex; justify-content: space-between; align-items: center;}
.brand-flex-logo img {width: 80px; height: 40px; border-radius: 5%;}
.brand-icons span {font-size: 1.5rem; margin-left: .5rem;}
.sidebar-user {margin: 1rem 0rem 1rem 0rem; text-align: center;}
.sidebar-user img {width: 150px; height: 150px; border-radius: 50%; border-left: 2px solid transparent; border-right: 2px solid #efefef; border-bottom: 2px solid #efefef; border-top: 2px solid transparent;}
.sidebar-user h3 {font-size: 1rem;}
.sidebar-user span {font-size: .85rem;}
.sidebar-menu {margin-top: 2rem;}
.sidebar-menu ul {margin-botton: 1.5rem;}
.sidebar-menu li {margin-botton: .8rem;}
.sidebar-menu li a {color: #efefef; font-size: .85rem; display: flex; align-items: center;}
.sidebar-menu li a  span {font-size: 1.5rem; display: inline-block; margin-right: 1rem;}
.sidebar-link:hover {color: rgba(153, 204, 255, 1.0);}
#side-bar-section-1-tour, #side-bar-section-2-tour {background: var(--color-main);}

/* Tour */
#tour-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.2); z-index: 999; pointer-events: none; display: none;}
.tour-highlight {position: relative; z-index: 1000; outline: 3px solid #00bcd4; background-color: #e0f7fa; transition: all 0.5s ease;}
.tour-message-box {position: fixed; bottom: 7%; left: 50%; transform: translateX(-50%); background: white; border: 2px solid #00bcd4; padding: 16px 24px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1003; min-height: 100px; max-width: 800px; font-size: 18px; text-align: justify; display: none;}
.tour-message-box a {color: #00bcd4;}
.tour-controls {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1002; display: none;}
.tour-controls button {margin: 0 8px; padding: 6px 12px; font-weight: bold; border: none; border-radius: 4px; background-color: #00bcd4; color: white; cursor: pointer;}
.tour-controls button:hover {background-color: #0097a7;}
#tour-intro {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 998; display: none;}
.tour-intro-backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2);}
.tour-intro-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; font-size: 18px; padding: 24px 32px; border-radius: 8px; text-align: justify; max-width: 1000px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 999;}
.tour-intro-box h2 {margin-bottom: 30px; color: #00bcd4;}
.tour-intro-box button {margin-top: 16px; padding: 8px 16px; font-size: 24px; font-weight: bold; background-color: #00bcd4; color: white; border: none; border-radius: 4px; cursor: pointer;}
.tour-intro-box button:hover {background-color: #0097a7;}


/* Header */
.menu-head {text-transform: uppercase; color: #8da2fb; font-size: 0.8rem; font-weight: 500; margin-bottom: 0.5rem;}
header {height: 70px; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; position: fixed; left: 280px; width: calc(100% - 280px); top: 0; z-index: 20; background: #fff; box-shadow: 4px 4px 10px rgba(0,0,0,0.1); transition: left 300ms;}
.header-icons i {display: inline-block; margin-left: .7rem; font-size: 1.4rem;}
#key-stats {padding-top: 50px;} /* This is for the slight top padding needed for the key-stats hyperlink anchor */

/* Footer */
.footer {font-size: .65rem; color: #fff; background: #000; width: 100%; text-align: justify; padding: 1rem;}
.footer a {font-size: .75rem; color: aquamarine;}

.menu-toggle label {height: 60px; width: 60px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 50%;}
.menu-toggle label:hover {background: #efefef;}

.main-content {margin-left: 280px; transition: margin-left 300ms;}
main {padding: 1.5rem; background: #f1f5f9; min-height: calc(100vh - 70px); margin-top: 70px;}

.page-header {display: block; text-align: justify;}
.page-header-top-spacer {height: 75px;} /* This is for the space that is needed below the header bar. The page header gets covered up otherwise. Don't delete this. */
.page-header h1{font-size: 24px;}
.page-header small{font-size: 18px;}

.header-actions button {outline: none; color: #fff; background: #8da2fb; border: 2px solid #ccc; padding: .6rem 1rem; margin-left: 1rem; border-radius: 3px; font-weight: 600;}
.header-actions button i {font-size: 1.2rem; margin-right: .6rem;}

/* Cards */
.cards {display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 3rem; margin-top: 2rem;}
.card-asset-chart {background: #fff; padding: 1rem; box-shadow: 2px 3px 10px rgba(0,0,0,0.2); border-radius: 8px; /*transition: transform 0.5s ease;*/}
.card-asset-chart:hover { /*transform: scale(1.01); transition: transform 0.5s ease; */}
.card-single {background: #fff; min-height: 200px; height: auto; padding: 1rem; box-shadow: 2px 3px 10px rgba(0,0,0,0.2); border-radius: 8px; transition: transform 0.5s ease;}
.card-single:hover {transform: scale(1.03); transition: transform 0.5s ease;}

.card-flex {display: grid; grid-template-columns: 70% auto; align-items: center;}
.card-flex-pie-chart {display: grid; grid-template-columns: 95% auto; align-items: center;}
.card-flex-speedometer {display: grid; grid-template-columns: 95% auto; align-items: center;}

.card-head span {display: block; text-transform: uppercase; color: #555; font-size: .9rem;}
.card-head small {font-weight: 600; color: #555;}
.card-info h2 {font-size: 2.2rem; color: #333;}
.card-chart i {font-size: 5rem;}
.card-chart.success i {color: rgb(189, 225, 205);}
.card-chart.danger i {color: rgb(206, 44, 44);}
.card-chart.yellow i {color: orange;}

.jobs-grid {margin-top: 4rem; display: grid; grid-template-columns: auto 70%; grid-gap: 3rem;}
.analytics-card {background: #fff; transition: transform 0.5s ease;}
.analytics-card:hover {transform: scale(1.03); transition: transform 0.5s ease;}
.analytics-head {display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem;}
.analytics-head i {font-size: 1.5rem;}
.analytics-chart small {font-weight: 600; color: #555; display: block; margin-bottom: 1rem;}
.analytics-card button {display: block; padding: .6rem 1rem; width: 100%; height: 45px; background: linear-gradient(135deg, rgb(103, 147, 137), rgb(107, 153, 143)); /* background: linear-gradient(135deg, #4da591, #50ac97); background: #5850ec;*/ color: #fff; border: 1px solid #4da591; border-radius: 3px;}
.jobs h2 small {color: #5850ec; font-weight: 600; display: inline-block; margin-left: 1rem; font-size: .9rem;}
.jobs table {border-collapse: collapse; margin-top: 1rem; overflow-x: auto;}
.jobs table td div {background: #fff; margin-bottom: .8rem; height: 300px; display: flex; align-items: center; padding: .5rem; font-size: .85rem; color: #444; font-weight: 500;}

.chart-circle {height: 500px; width: 500px; border-left: 10px solid transparent; border-right: 10px solid #5850ec; border-bottom: 10px solid #5850ec; border-top: 10px solid #5850ec; display: grid; place-items: center; margin: auto; border-radius: 20%; margin-bottom: 3rem;}

span.indicator {background: #c9f7f5; height: 15px; width: 15px; border-radius: 50%;}

table button {background: #8da2fb; color: midnightblue; border: 1px solid #8da2fb; padding: .5rem; border-radius: 3px;}

/* Pie Chart Asset Allocation - Desktop */
.pie-chart-container-asset-allocation {padding: 0px; height: 300px;}
/* .trivia-question-container {padding: 0px; height: 300px;} */
#pieChartAssetAllocation {width: 100%; height: auto;}

/* Cards - Desktop */
.card-info h2 {font-size: 1.8rem; color: #333;}


/* Net Worth Chart and Slider */
.chart-container-net-worth {}
.net-worth-chart {width: 100% !important; height: auto !important;}
.slider-container {width: 25%; margin: 60px 40px 30px 50px;}
.slider {-webkit-appearance: none; width: 100%; height: 8px; background: #9ceec4; border-radius: 4px; outline: none; transition: background 0.3s;}
.noUi-connect {background: rgba(42, 104, 119, 0.5);}
/* .noUi-tooltip {transform: translateY(-100%); margin-bottom: 8px; max-height: 40px; white-space: nowrap; z-index: 10;} */
.noUi-tooltip {font-size: 14px; opacity: 0.8;}
.toggle-buttons {display: flex; gap: 12px;}
.toggle-chart {padding: 6px 12px; font-size: 12px; border: none; border-radius: 6px; background-color: #ccc; color: #333; cursor: pointer; transition: background-color 0.3s, color 0.3s;}
.toggle-chart.active {background-color: #007bff; color: #fff;}
.toggle-chart:focus {outline: none; box-shadow: 0 0 0 2px rgba(0,123,255,0.5);}
.what-if-button {padding: 12px 24px; font-size: 16px; border: 1px solid #999; border-radius: 6px; background-color: #eee; color: #444; cursor: pointer; transition: background-color 0.3s;}
.what-if-button:hover {background-color: #ddd;}


/* Slider CSS Examples - NoUiSlider */
/* #slider {margin: 50px auto; width: 80%;} */
/* Custom filled portion .noUi-connect {background: rgba(42, 104, 119, 0.5);} */
/* Custom track background .noUi-target {background: #f0f0f0; border-radius: 10px; height: 10px;} */
/* Custom filled portion .noUi-connect {background: #28a745;} */
/* Custom handle .noUi-handle {background: #ffffff; border: 2px solid #28a745; border-radius: 50%; width: 20px; height: 20px; top: -6px; (Center handle vertically) box-shadow: none; cursor: grab;}*/
/* Optional: handle hover effect .noUi-handle:hover {background: #28a745; border-color: #1e7e34;} */
/* Display value #slider-value {text-align: center; font-size: 1.2em; margin-top: 20px;} */


.logo-image-container {position: relative; width: 160px; height: 70px; margin: auto; overflow: hidden; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.logo-image-container img {width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.3s ease;}
.logo-image-container:hover img {transform: scale(1.03);}
.overlay-text {position: absolute; bottom: 0; width: 100%; padding: 5px; background: rgba(0, 0, 0, 0.6); color: #fff; text-align: center; font-size: 10px; opacity: 0; transition: opacity 0.3s ease-in-out;}
.logo-image-container:hover .overlay-text {opacity: 1;}

/* Speedometer - Desktop */
.gauge {width: 100%; height: auto;}
.gauge-wrapper {display: inline-block; position: relative;}
.gauge-wrapper canvas {background: #fff; border-radius: 10%; box-shadow: 0 0 10px rgba(0,0,0,0.2);
transition: transform 0.3s ease;}
.gauge-wrapper:hover canvas {transform: scale(1.05);}
.gauge-label {font-size: 24px; margin-top: 10px;}


th {padding: 20px; text-align: left;}

/* Data Tables: Net Worth and Client Log - Desktop */
.data-table {width: 100%; border-collapse: collapse; font-family: 'Poppins', sans-serif; margin: 0 auto; }
.data-table th, .data-table td {border: 1px solid #ccc; text-align: left; padding: 12px; font-size: 14px; color: #444;}
.data-table th {background-color: #f4f4f4; color: #222;}
#net-worth-data-table {border: 2px solid #333; padding: 15px; width: 100%; display: none; margin-top: 10px;}
#net-worth-table-output table tbody tr:hover, #client-log-tableContainer table tbody tr:hover {background-color: rgba(197, 197, 198, .3); color: #333; font-weight: 600; transition: background-color 0.7s ease-in-out;}

/* Client Chart Hamburger Menu and Input Fields - Desktop */
#hamburgerMenuClientChart {position: relative; width: 150px; top: 5px; left: 5px; font-size: 20px; cursor: pointer; z-index: 0; background: #0077cc; color: white; padding: 3px 20px; border-radius: 8px; user-select: none; opacity: 0.3; transition: all 1.0s ease; /* Transition on hover */}
#hamburgerMenuClientChart:hover {opacity: 1; color: white; background-color: rgba(65, 96, 104, 1);}

#inputPanelClientChart {position: absolute; top: 500; left: 500; width: 450px; background: #f8f8f8; border: 2px solid #0077cc; border-radius: 5px; padding: 25px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 10; transition: opacity 0.3s ease, transform 0.3s ease;}
#inputPanelClientChart input {margin-bottom: 10px; padding: 8px; width: 325px;}

#summaryNetWorth {font-size: 18px; margin-top: 20px; text-align: justify;}

/* Monte Carlo Simulation Hamburger Menu and Input Fields - Desktop */
#hamburgerMenuMonteCarlo {position: relative; width: 150px; top: 5px; left: 5px; font-size: 20px; cursor: pointer; z-index: 500; background: #0077cc; color: white; padding: 3px 20px; border-radius: 8px; user-select: none; opacity: 0.3; transition: all 1.0s ease; /* Transition on hover */}
#hamburgerMenuMonteCarlo:hover {opacity: 1; color: white; background-color: rgba(65, 96, 104, 1);}

#inputPanelMonteCarlo {position: absolute; top: 500; left: 500; width: 450px; background: #f8f8f8; border: 2px solid #0077cc; border-radius: 5px; padding: 25px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999; transition: opacity 0.3s ease, transform 0.3s ease;}
#inputPanelMonteCarlo input {margin-bottom: 10px; padding: 8px; width: 325px;}

#summaryMonteCarlo {font-size: 18px; margin-top: 20px; text-align: justify;}


/* Data Table Monte Carlo - With Colors For Validation */
.success-row-monte-carlo {background-color: #e0f7e9; /* light green */}
.failure-row-monte-carlo {background-color: #fbeaea; /* light red */}

/* Trivia Corner */
.trivia-question-container {padding: 0; height: 300px;}
.trivia-question {font-size: 1.3rem; text-align: justify; margin-top: 10px; margin-bottom: 10px;}
.trivia-choices {font-size: 1.0rem; list-style: none; padding: 0;}
.trivia-choices li {margin: 8px 0; transition: font-weight 0.3s;}
.bold {font-weight: bold; color: green;}
.trivia-empty-note {font-style: italic; color: #666;}


/* Client Log */
.client-log-tableContainer {max-height: 300px; overflow-y: auto; /* 👈 adds vertical scroll if needed */ border: 1px solid #ccc; background: white;}
.client-log-tableContainer table td div {border-collapse: collapse; width: 100%; margin-top: 20px; background: white;}
.client-log-tableContainer th, td {border: .5px solid #ccc; font-size: .8rem; padding: 5px; text-align: justify; vertical-align: top; white-space: pre-line; /* 👈 preserves line breaks */}
.client-log-tableContainer th, tr {background: #fff;}
.collapsible-container {max-width: 100%; margin: 3rem auto; background: white; border-radius: 8px; box-shadow: 0 0 8px rgba(0,0,0,0.1); overflow: hidden;}

.toggle-button {background: linear-gradient(135deg, rgb(103, 147, 137), rgb(107, 153, 143)); /*background: linear-gradient(135deg, #4da591, #50ac97);*/ color: white; padding: 12px; cursor: pointer; text-align: left; font-weight: bold; border: none; width: 100%;}

.content {max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.3s ease; padding: 0 20px;}
.content.expanded {max-height: 500px; /* adjust as needed */ overflow-y: auto; padding: 20px;}

/* Buttons */
.cool-button {background: linear-gradient(135deg, rgb(103, 147, 137), rgb(107, 153, 142)); border: none; color: white; padding: 15px 30px; font-size: 18px; font-family: Arial, sans-serif; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: all 0.3s ease;}
.cool-button:hover {background: linear-gradient(135deg, rgb(122, 138, 123), rgb(108, 153, 133)); box-shadow: 0 6px 15px rgba(0,0,0,0.3); transform: scale(1.05);}
.cool-button:active {transform: scale(0.97); box-shadow: 0 2px 8px rgba(0,0,0,0.2);}
.cool-button-reserves {background: linear-gradient(135deg, rgb(103, 147, 137), rgb(107, 153, 142)); border: none; color: white; padding: 7px 15px; font-size: 10px; font-family: Arial, sans-serif; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: all 0.3s ease;}


/* Tooltip */
/* Example: <li><a href="" class="tooltip"><i class="fas fa-users"></i>Monte Carlo Simulation<span class="tooltiptext">Come Back Later - In Development</span></a></li> */
.tooltip {position: relative; text-decoration: underline; cursor: pointer;}
.tooltiptext {visibility: hidden; width: max-content; background-color: #fff; color: #000; text-align: center; padding: 5px 10px; border-radius: 4px; border: solid #000 3px; position: absolute; bottom: 120%; left: 50%; transform: translateX(-30%); z-index: 1; white-space: nowrap; font-size: 0.5rem; opacity: 0; transition: opacity 0.3s ease;}
.tooltip:hover .tooltiptext {visibility: visible; opacity: 1;}


/* Feedback Button - Floating on bottom-right hand corner */
#feedbackBtn {position: fixed; bottom: 20px; left: 20px; background: linear-gradient(135deg, #749476, #54af86); color: white; border: none; border-radius: 5%; width: 120px; height: 60px; font-size: 12px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); z-index: 1000; transition: .5s ease-in-out; opacity: .35;}
#feedbackBtn:hover {background-color: #1b5fbd; opacity: 1.0;}

/* Feedback Modal - Background */
#feedbackModal {display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);}

/* Feedback Modal - Content */
.modal-content {background-color: #fff; margin: 10% auto; padding: 20px; border-radius: 10px; width: 90%; max-width: 400px; box-shadow: 0 0 10px #aaa;}
.feedback input {width: 50%; height: 100px; margin-top: 10px; margin-bottom: 15px; padding: 10px; font-size: 18px; resize: none;}
.feedback textarea {width: 100%; height: 100px; margin-top: 10px; margin-bottom: 15px; padding: 10px; font-size: 18px; resize: none;}
.modal-buttons {display: flex; justify-content: space-between;}
.modal-buttons button {padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer;}
.send-btn {background-color: #2d89ef; color: white;}
.send-btn:hover {background-color: #1b5fbd;}
.close-btn {background-color: #ccc;}
.close-btn:hover {background-color: #999;}


/* Input Fields for Client Chart and Monte Carlo Simulation - Desktop */
.input-row {font-size: 16px; margin-bottom: 10px;}
.input-row-reserves {width: 90%; max-width: 100px; padding: 4px; margin-right: 20px; font-size: 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; background-color: #f9f9f9; outline: none;}

/* Hide Input Field Button When Not Hovering */
.hidden {opacity: 0; pointer-events: none;}
.visible {opacity: 1; pointer-events: auto;}





/* ========================================================= */
/* ============= SECTION: Tablet Screen CSS ================ */
/* ========================================================= */

@media only screen and (max-width: 1124px) {
.sidebar {left: -100%; z-index: 100; overflow-y: auto;}
.main-content {margin-left: 0;}
header {left: 0; width: 100%;}
#sidebar-toggle:checked ~ .sidebar {left: 0;}
#sidebar-toggle:checked ~ .body-label {right: 0;}


/* Tour */
#tour-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.2); z-index: 999; pointer-events: none; display: none;}
.tour-highlight {position: relative; z-index: 1000; outline: 3px solid #00bcd4; background-color: #e0f7fa; transition: all 0.5s ease;}
.tour-message-box {position: fixed; bottom: 10%; left: 50%; transform: translateX(-50%); background: white; border: 2px solid #00bcd4; padding: 16px 24px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1003; min-height: 100px; max-width: 800px; font-size: 16px; text-align: justify; display: none;}
.tour-message-box a {color: #00bcd4;}
.tour-controls {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1002; display: none;}
.tour-controls button {margin: 0 8px; padding: 6px 12px; font-weight: bold; border: none; border-radius: 4px; background-color: #00bcd4; color: white; cursor: pointer;}
.tour-controls button:hover {background-color: #0097a7;}
#tour-intro {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 998; display: none;}
.tour-intro-backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2);}
.tour-intro-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; font-size: 14px; padding: 12px 16px; border-radius: 8px; text-align: justify; max-width: 1000px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 999;}
.tour-intro-box h2 {margin-bottom: 30px; color: #00bcd4;}
.tour-intro-box button {margin-top: 16px; padding: 8px 16px; font-size: 16px; font-weight: bold; background-color: #00bcd4; color: white; border: none; border-radius: 4px; cursor: pointer;}
.tour-intro-box button:hover {background-color: #0097a7;}

.cards {grid-template-columns: repeat(2, 1fr);}

/* Client Chart Hamburger Menu and Input Fields - Tablet */
#hamburgerMenuClientChart {position: relative; width: 150px; top: 5px; left: 5px; font-size: 20px; cursor: pointer; z-index: 0; background: #0077cc; color: white; padding: 3px 20px; border-radius: 8px; user-select: none; opacity: 0.3; transition: all 1.0s ease; /* Transition on hover */}

#inputPanelClientChart {position: absolute; top: 500; left: 500; width: 400px; background: #f8f8f8; border: 2px solid #0077cc; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999; transition: opacity 0.3s ease, transform 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */}
#inputPanelClientChart input {margin-bottom: 10px; padding: 8px; width: 325px;}

/* Monte Carlo Simulation Hamburger Menu and Input Fields - Tablet */
#hamburgerMenuMonteCarlo {position: relative; width: 150; top: 5px; left: 5px; font-size: 20px; cursor: pointer; z-index: 500; background: #0077cc; color: white; padding: 3px 20px; border-radius: 8px; user-select: none; opacity: 0.3; transition: all 1.0s ease; /* Transition on hover */}

#inputPanelMonteCarlo {position: absolute; top: 500; left: 500; width: 400px; background: #f8f8f8; border: 2px solid #0077cc; border-radius: 5px; padding: 25px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999; transition: opacity 0.3s ease, transform 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */}
#inputPanelMonteCarlo input {margin-bottom: 10px; padding: 8px; width: 325px;}


/* Input Fields for Client Chart and Monte Carlo Simulation - Tablet */
.input-row {font-size: 16px; margin-bottom: 10px;}

/* Footer - Tablet */
.footer {font-size: .4rem; color: #fff; background: #000; width: 100%; text-align: justify; padding: 1rem;}
.footer a {font-size: .5rem; color: aquamarine;}    
    
    
}




/* ========================================================= */
/* ======== SECTION: Mobile Screen CSS (Landscape) ========= */
/* ========================================================= */

@media only screen and (max-width: 768px) {

html, body {margin: 0; padding: 0; height: 100%; overflow-x: hidden; overflow-y: auto;}

.sidebar {overflow-y: auto; z-index: 100}
.sidebar-user {display: none;}

.tour-message-box {position: fixed; bottom: 20%; background: white; border: 2px solid #00bcd4; padding: 4px 6px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1003; min-height: 100px; width: 80%; font-size: 6px; text-align: justify; overflow-y: auto; display: none;}
.tour-message-box a {color: #00bcd4;}
.tour-controls {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1002; display: none;}
.tour-controls button {margin: 0 4px; padding: 3px 6px; font-size: 10px; font-weight: bold; border: none; border-radius: 4px; background-color: #00bcd4; color: white; cursor: pointer;}
.tour-controls button:hover {background-color: #0097a7;}
#tour-intro {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 998; display: none;}
.tour-intro-backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2);}
.tour-intro-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; font-size: 10px; padding: 12px 16px; border-radius: 8px; text-align: justify; width: 500px; height: 300px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 999;}
.tour-intro-box h2 {margin-bottom: 30px; color: #00bcd4;}
.tour-intro-box button {margin-top: 16px; padding: 8px 16px; font-size: 12px; font-weight: bold; background-color: #00bcd4; color: white; border: none; border-radius: 4px; cursor: pointer;}



.cards {grid-template-columns: 100%;}
.jobs-grid {grid-template-columns: 100%;}
.page-header {display: block; text-align: justify;}
.page-header h1{font-size: 14px;}
.page-header small{font-size: 10px;}
.header-actions {margin-top: 1rem; text-align: right;}
.header-actions button:first-child {margin-left: 0rem;}
.cool-button {padding: 8px 16px; font-size: 10px;}

header {height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1rem; position: fixed; left: 0px; width: 100%; top: 0; z-index: 20; background: #fff; box-shadow: 4px 4px 10px rgba(0,0,0,0.1); transition: left 300ms;}

/* Trivia Corner - Mobile */
.trivia-question-container {padding: 0px; height: 300px;}
.trivia-question {font-size: 1.0rem; text-align: left; margin-top: 10px; margin-bottom: 10px;}
.trivia-choices {font-size: 0.85rem; list-style: none; padding: 0;}
.trivia-choices li {margin: 8px 0; transition: font-weight 0.3s;}
.bold {font-weight: bold; color: green;}
.trivia-empty-note {font-style: italic; color: #666;}

/* Canvases - Mobile */
/* Speedometer */
#gauge {width: 12rem;}
/* Pie Chart */
#pieChartAssetAllocation {width: 100%; height: auto;}
.chart-container-pie-chart {}
/* Net Worth Line Chart */
.chart-container-net-worth {width: 100%;}
#rangeSlider {font-size: 10px;}


/* Net Worth Line Chart */
#hamburgerMenuClientChart {position: relative; width: 75px; top: 5px; left: 5px; font-size: 10px; cursor: pointer; z-index: 0; background: #0077cc; color: white; padding: 3px 10px; border-radius: 8px; user-select: none; opacity: 0.5;}

#inputPanelClientChart {position: absolute; top: 500; left: 500; width: 300px; height: 200px; background: #f8f8f8; border: 2px solid #0077cc; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 100; transition: opacity 0.3s ease, transform 0.3s ease; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */}
#inputPanelClientChart input {margin-bottom: 5px; padding: 4px; width: 250px;}

#summaryNetWorth {font-size: 8px;}

/* Monte Carlo Line Chart */
#hamburgerMenuMonteCarlo {position: relative; width: 75px; top: 5px; left: 5px; font-size: 10px; cursor: pointer; z-index: 500; background: #0077cc; color: white; padding: 3px 10px; border-radius: 8px; user-select: none; opacity: 0.5;}

#inputPanelMonteCarlo {position: absolute; top: 500; left: 500; width: 300px; height: 200px; background: #f8f8f8; border: 2px solid #0077cc; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; transition: opacity 0.3s ease, transform 0.3s ease; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */}
#inputPanelMonteCarlo input {margin-bottom: 5px; padding: 4px; width: 250px;}

.montecarlojoke {font-size: 5px;}
#summaryMonteCarlo {font-size: 8px;}

/* Input Fields for Client Chart and Monte Carlo Simulation - Mobile */
.input-row {font-size: 14px; margin-bottom: 8px;}


/* Data Tables: Net Worth and Client Log - Mobile */
.data-table {width: 100%; border-collapse: collapse; font-family: 'Poppins', sans-serif; margin: 0 auto; }
.data-table th, .data-table td {border: 1px solid #ccc; text-align: left; padding: 6px; font-size: 8px; color: #444;}
.data-table th {background-color: #f4f4f4; color: #222;}
#net-worth-data-table {border: 2px solid #333; padding: 5px; width: 100%; display: none; margin-top: 5px;}
#net-worth-table-output table tbody tr:hover, #client-log-tableContainer table tbody tr:hover {font-size: 0.2rem; background-color: rgba(197, 197, 198, .3); color: #333; font-weight: 400; transition: background-color 0.7s ease-in-out; overflow-x: auto;}
#net-worth-table-output {font-size: 0.4rem;}



/* Icons - Cards Section - Mobile */
.card-chart i {font-size: 4rem;}



/* Feedback Modal - Button - Mobile */
#feedbackBtn {position: fixed; bottom: 10px; left: 10px; background: linear-gradient(135deg, #749476, #54af86); color: white; border: none; border-radius: 5%; width: 90px; height: 30px; font-size: 10px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); z-index: 1000; transition: .5s ease-in-out; opacity: .35;}
/* Feedback Modal - Content */
.modal-content {position: relative; bottom: 10%; left: 5%; background-color: #fff; margin: 10% auto; padding: 10px; border-radius: 5px; width: 70%; max-width: 600px; box-shadow: 0 0 10px #aaa; z-index: 1001;}
.feedback input {width: 50%; height: 100px; margin-top: 10px; margin-bottom: 10px; padding: 10px; font-size: 10px; resize: none;}
.feedback textarea {width: 100%; height: 100px; margin-top: 10px; margin-bottom: 10px; padding: 10px; font-size: 10px; resize: none;}
.modal-buttons {display: flex; justify-content: space-between;}
.modal-buttons button {padding: 5px 10px; border: none; border-radius: 6px; cursor: pointer;}
.send-btn {background-color: #2d89ef; color: white;}
.send-btn:hover {background-color: #1b5fbd;}
.close-btn {background-color: #ccc;}
.close-btn:hover {background-color: #999;}
 
}


/* ========================================================= */
/* ======== SECTION: Mobile Screen CSS (Portrait) ========== */
/* ========================================================= */

@media only screen and (max-width: 450px) {

html, body {margin: 0; padding: 0; height: 100%; overflow-x: hidden; overflow-y: auto;}

.page-header {display: block; text-align: justify;}
.page-header h1{font-size: 18px;}
.page-header small{font-size: 15px;}


.tour-message-box {position: fixed; bottom: 20%; background: white; border: 2px solid #00bcd4; padding: 8px 12px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1003; min-height: 100px; width: 80%; font-size: 10px; text-align: justify; overflow-y: auto; display: none;}
.tour-message-box a {color: #00bcd4;}
.tour-controls {position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1002; display: none;}
.tour-controls button {margin: 0 4px; padding: 3px 6px; font-size: 10px; font-weight: bold; border: none; border-radius: 4px; background-color: #00bcd4; color: white; cursor: pointer;}
.tour-controls button:hover {background-color: #0097a7;}
#tour-intro {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 998; display: none;}
.tour-intro-backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2);}
.tour-intro-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; font-size: 10px; padding: 12px 16px; border-radius: 8px; text-align: justify; padding-top: 50px; width: 300px; height: 500px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 999;}
.tour-intro-box h2 {margin-bottom: 10px; color: #00bcd4;}
.tour-intro-box button {margin-top: 10px; padding: 4px 8px; font-size: 10px; font-weight: bold; background-color: #00bcd4; color: white; border: none; border-radius: 4px; cursor: pointer;}


#key-stats {padding-top: 30px;} /* This is for the slight top padding needed for the key-stats hyperlink anchor */

/* Show-Hide Warning Message for Charts In Mobile Portrait Mode */
.orientation-warning {display: none; background: #ffcc00; color: #000; font-size: 1.05rem; padding: 0.75em; margin-bottom: 1em; text-align: justify; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}


/* Footer - Tablet */ 
.footer {font-size: .65rem; color: #fff; background: #000; width: 100%; text-align: justify; padding: 1rem;}
.footer a {font-size: .75rem; color: aquamarine;} 
    
}