:root {
	--primary-color: #FFD700;  /*yello*/
	--secondary-color: #1e3d6b;  /*dark blue (bar)*/
	--background-color: #f8f8f8; /*light gray background color*/
	--card-background: #ffffff; /*white color*/
	--text-color: #333333; /*black*/
	--border-color: #cccccc;
	--sidebar-active-color: #ADD8E6; /*light blue*/
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	
}

img, iframe, table {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
}
.container {
	display: flex;
	max-width: 100%;
	
	padding-top: 3rem; 
}


.header {
	background-color: #2D3E4E; /* #2D3E5A  #2E3B4E   #5C6F8C  #1e3d6b*/
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 2px solid grey;
	position: fixed;
	padding-top: 0.1rem;	
	padding-bottom: 0.1rem;
	min-height: 70px; /* Ensure header is tall enough for larger logo */
	width: 100%;
	z-index: 1000; /* Keep header z-index lower than disclaimer */
    top: 0; /* Push header down to make room for disclaimer */
    left: 0;
}


.header-logo {
	display: flex !important;
	align-items: center !important;
	gap: 15px !important;
	flex-direction: row !important;
	margin-left: 15px;
}

.logo-image {
	height: 60px !important; /* Made much larger than text */
	width: auto;
	object-fit: contain;
	display: inline-block;
}

.header-logo h1 {
	margin: 0 !important;
	display: inline-block;
	font-size: 1.5rem !important; /* Keeping text smaller than logo */
	font-weight: 600;
}

.logout-link {
	color: black !important; 
	text-decoration: none;
	font-weight: bold;
	padding: 5px 10px;
	border: 1px solid #1e3d6b;
	border-radius: 4px;
	transition: all 0.3s ease;
	background: white;
	font-szie: 1rem;
	margin-right: 20px; /* Adjust this value to move it more or less to the left */
}

.logout-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	filter: brightness(95%);
}

/* =====================================================
   PROFESSIONAL SIDEBAR STYLES - CLEAN & MINIMAL
   ===================================================== */

/* Sidebar Base */
.sidebar {
	position: sticky;
	top:70px;
	height: calc(100vh - 70px); 
	padding-top:1.5rem;
    background-color: #ffffff !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.08) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 400px;
    transition: width 0.3s ease !important;
	z-index: 999;    
}
.sidebar a { text-decoration: none !important; }
.sidebar a:hover { text-decoration: none !important; }

/* Toggle button styles removed - auto-expand/collapse on hover now */

/* Collapsed sidebar state */
.sidebar.collapsed {
    width: 80px;
    transition: width 0.3s ease !important;
}
.sidebar .sidebar-collapsible-content {
  --tree-rail: #d9e1ea;           /* neutral line colour */
  --tree-rail-active: #9bb4d1;    /* emphasised on hover/active */
}

.sidebar.collapsed .sidebar-collapsible-content.collapsed {
    display: none !important;
    max-height: 0 !important;
}

.sidebar.collapsed .sidebar-collapsible-content:not(.collapsed) {
    display: block !important;
    max-height: 600px !important;
    opacity: 1 !important;
}



.sidebar-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    background: #f0f2f5;
}
.pillar-icon { 
    background: #e3f2fd !important; 
}
.pillar-icon .sidebar-icon { 
    color: #2196f3 !important; 
}

.floor-icon { 
    background: #f3e5f5 !important; 
}
.floor-icon .sidebar-icon { 
    color: #9c27b0 !important; 
}

.coalburst-icon { 
    background: #fff3e0 !important; 
}
.coalburst-icon .sidebar-icon { 
    color: #ff9800 !important; 
}

.results-icon { 
    background: #e8f5e9 !important; 
}
.results-icon .sidebar-icon { 
    color: #4caf50 !important; 
}

.guide-icon { 
    background: #fff9c4 !important; 
}
.guide-icon .sidebar-icon { 
    color: #f57c00 !important; 
}
.sidebar.collapsed .sidebar-icon-wrapper {
    width: 44px;
    height: 44px;
}
/* Hide text when collapsed */
.sidebar.collapsed .sidebar-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

/* Keep icons visible when collapsed */
.sidebar.collapsed .sidebar-icon {
    margin-right: 0;
	font-size: 1.3rem;
}
.sidebar.collapsed .sidebar-subitem {
    padding-left: 20px !important;
}
.sidebar.collapsed .sidebar-item {
    justify-content: center;
}
.sidebar.collapsed .sidebar-subsubitem {
    padding-left: 35px !important;
}


/* Center content when collapsed */
.sidebar.collapsed .sidebar-item a,
.sidebar.collapsed .sidebar-subitem a,
.sidebar.collapsed .sidebar-subsubitem a,
.sidebar.collapsed .sidebar-section-header {
    justify-content: center;
    padding: 14px 8px;
}


/* Hide group labels when collapsed */
.sidebar.collapsed .sidebar-subitem-group-label {
    display: none;
}

/* Section Header - Clean Professional Style */
.sidebar-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 12px 15px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 6px;
    border-left: 3px solid transparent;
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.05rem;
}

.sidebar-section-header:hover {
    background-color: rgba(173, 216, 230, 0.25);
    border-left-color: #1e3d6b;
    transform: translateX(2px);
}

/* Toggle Icon */
.toggle-icon {
    transition: transform 0.3s ease !important;
    color: #1e3d6b !important;
}

.toggle-icon.collapsed {
    transform: rotate(0deg) !important;
}


/* Sidebar Icon */
.sidebar-icon {
    font-size: 1.1rem;
    color: #1e3d6b;
    margin-right: 0.7rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.sidebar-icon-wrapper .home-icon {
  background: #e3f2fd;   /* light blue */
  color: #2196f3;        /* blue */
}
/* Sidebar Text */
.sidebar-text {
    transition: opacity 0.3s ease;
    flex: 1;
}

/* Collapsible Content */
.sidebar-collapsible-content {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease;
    opacity: 1;
}

.sidebar-collapsible-content.collapsed {
    max-height: 0;
    opacity: 0;
}

/* Group Label - Subtle but visible */
.sidebar-subitem-group-label {
    padding: 8px 15px 6px 30px;
    margin-top: 8px;
    margin-bottom: 3px;
    color: #5a6c7d;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-left: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

/* Home Item */
.sidebar-item {
    display: flex;
    align-items: center;
}

.sidebar-item a {
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.sidebar-item:hover {
    background-color: rgba(173, 216, 230, 0.25);
    border-left-color: #1e3d6b;
    transform: translateX(2px);
}

.sidebar-item.active {
    border-left-color: #1e3d6b;
    background-color: rgba(30, 61, 107, 0.1);
    font-weight: 600;
}

.sidebar-item.active .sidebar-icon {
    color: #1e3d6b;
}

/* Subitems */
.sidebar-subitem {
    padding: 9px 20px 9px 35px;
    font-size: 1rem;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar-subitem a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #3a4a5a;
    font-weight: 500;
}

.sidebar-subitem:hover:not(.disabled-item) {
    background-color: rgba(173, 216, 230, 0.2);
    border-left-color: #1e3d6b;
    transform: translateX(2px);
}

.sidebar-subitem.active {
    border-left-color: #3498db;
    background-color: rgba(52, 152, 219, 0.1);
    font-weight: 600;
}

.sidebar-item.active .sidebar-icon-wrapper {
    background: rgba(30, 61, 107, 0.15) !important;
}
.sidebar-subitem.active .sidebar-icon {
    color: #3498db;
}

/* Sub-subitems (Results) */
.sidebar-subsubitem {
    padding: 8px 20px 8px 50px;
    font-size: 0.95rem;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar-subsubitem a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #4a5a6a;
    font-weight: 500;
}

.sidebar-subsubitem:hover:not(.disabled-item) {
    background-color: rgba(173, 216, 230, 0.15);
    border-left-color: #1e3d6b;
    transform: translateX(2px);
}

.sidebar-subsubitem.active {
    border-left-color: #3498db;
    background-color: rgba(52, 152, 219, 0.08);
    font-weight: 600;
}

.sidebar-subsubitem.active .sidebar-icon {
    color: #3498db;
}

/* Disabled Items */
.sidebar-subitem.disabled-item,
.sidebar-subsubitem.disabled-item {
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.5;
}

.sidebar-subitem.disabled-item:hover,
.sidebar-subsubitem.disabled-item:hover {
    background-color: transparent;
    transform: none;
    border-left-color: transparent;
}

.disabled-link {
    color: #aaa !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* No-active items */
.sidebar-item-no-active,
.sidebar-subitem-no-active {
    padding: 10px 15px;
    margin-bottom: 3px;
    border-radius: 4px;
    border-left: 3px solid transparent;
    cursor: default;
}

.sidebar-item-no-active a,
.sidebar-subitem-no-active a {
    color: #333;
    text-decoration: none;
    display: block;
    font-weight: 500;
}

/* Before pseudo-elements for hover indicators */
.sidebar-item:before,
.sidebar-subitem:before,
.sidebar-subsubitem:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.sidebar .sidebar-subitem,
.sidebar .sidebar-subsubitem { position: relative; }

.sidebar .sidebar-subitem::before {
  content: "";
  position: absolute;
  left: 22px;                     /* aligns with L1 indent */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tree-rail);
}
.sidebar .sidebar-subitem::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;                      /* horizontal connector into the label row */
  width: 12px;
  height: 1px;
  background: var(--tree-rail);
}

/* Level 2 (sub-subitem) */
.sidebar .sidebar-subsubitem::before {
  content: "";
  position: absolute;
  left: 37px;                     /* aligns with L2 indent */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tree-rail);
}
.sidebar .sidebar-subsubitem::after {
  content: "";
  position: absolute;
  left: 37px;
  top: 18px;
  width: 12px;
  height: 1px;
  background: var(--tree-rail);
}

/* Stop the vertical rail cleanly at the last child in a block */
.sidebar .sidebar-collapsible-content > .sidebar-subitem:last-of-type::before,
.sidebar .sidebar-collapsible-content > .sidebar-subsubitem:last-of-type::before {
  bottom: 18px;
}

/* Emphasise connectors on hover/active */
.sidebar .sidebar-subitem:hover::before,
.sidebar .sidebar-subitem:hover::after,
.sidebar .sidebar-subitem.active::before,
.sidebar .sidebar-subitem.active::after,
.sidebar .sidebar-subsubitem:hover::before,
.sidebar .sidebar-subsubitem:hover::after,
.sidebar .sidebar-subsubitem.active::before,
.sidebar .sidebar-subsubitem.active::after {
  background: var(--tree-rail-active);
}

/* Hide guides when the rail is collapsed (icon-only) */
.sidebar.collapsed .sidebar-subitem::before,
.sidebar.collapsed .sidebar-subitem::after,
.sidebar.collapsed .sidebar-subsubitem::before,
.sidebar.collapsed .sidebar-subsubitem::after {
  display: none;
}






.sidebar-section {
    position: relative;
}
/* Show badge when content is collapsed */
.sidebar-collapsible-content.collapsed ~ .sidebar-section-header .section-badge,
#moduleA-content.collapsed ~ .sidebar-section-header .section-badge,
#moduleB-content.collapsed ~ .sidebar-section-header .section-badge,
#moduleC-content.collapsed ~ .sidebar-section-header .section-badge,
#Results-content.collapsed ~ .sidebar-section-header .section-badge,
#Usermanual-content.collapsed ~ .sidebar-section-header .section-badge {
    opacity: 1;
    visibility: visible;
}
.sidebar.collapsed .sidebar-collapsible-content {
    position: absolute;
    left: 80px;
    top: 0;
    width: 280px;
    background: white;
    box-shadow: 2px 2px 15px rgba(0,0,0,0.15);
    border-radius: 0 8px 8px 0;
    z-index: 1000;
    padding: 8px 0;
}



.sidebar.collapsed .sidebar-section.open .sidebar-collapsible-content {
  display: block !important;
  position: absolute;
  left: 80px;              
  top: 0;
  width: 280px;
  box-shadow: 2px 2px 15px rgba(0,0,0,0.15);
  background: #fff;
  border-radius: 0 8px 8px 0;
  z-index: 1000;
  padding: 8px 0;
}


.sidebar .sidebar-section.open .toggle-icon {
  transform: rotate(90deg) !important;
}


.sidebar-section-header {
    display: flex !important;
    align-items: center;
    padding: 14px 12px;
    gap: 12px;
}

.sidebar-section-header:hover .section-badge {
    background: linear-gradient(135deg, #2d5a8a 0%, #3d6a9a 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.section-left {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.section-right {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s ease;
}


.sidebar.collapsed .section-right {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.blank-container{
	display: flex;
    width: 95%;
	height:100%;
	gap: 0; /* Control the gap size between columns */
	
}

.main-content {
	margin-left: 160px; /* Same as the width of the sidebar */
	padding: 0px 10px;
    width: 95%;
    margin: 0 auto;
	background: aliceblue;
}
.result-header-section {
	background: #1e3d6b;
	border-radius: 12px;
	padding: 2rem;
	margin-bottom: 20px;
	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
	color: white;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.result-header-section h1 {
	margin: 0;
	font-size: 2rem;
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.result-header-section p {
	margin: 0.5rem 0 0 0;
	font-size: 1.1rem;
	opacity: 0.9;
}

/* Two-column layout under the "Welcome" title */
.welcome-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center; 
  
}
.btn-auth{
  --brand:#1e3d6b; --accent: #f8f8f8; --danger:#dc2626;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:10px;
  font-weight:700; text-decoration:none;
  border:2px solid var(--brand); color:var(--brand); background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  margin-inline-end: 35px;
}
.btn-auth i{ font-size:1.5rem; line-height:1; }
.btn-auth:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.12); }

.btn-signin{
  border-color:var(--accent);
}
.btn-signin:hover{
  background:var(--accent); color:#1e3d6b;
}

.btn-logout{
  border-color:var(--accent); color:#1e3d6b;
}
.btn-logout:hover{
  background:var(--accent); color:#1e3d6b;
}

/* Tight on small screens: hide the text label */
@media (max-width: 480px){
  .btn-auth span{ display:none; }
  .btn-auth{ padding:.45rem .6rem; }
}
.welcome-header-section {
    
    min-width: 0; /* Allow flex item to shrink below content size */
	display: flex;
	flex-direction: column;
}
.welcome-header {
    color: #1e3d6b;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid rgba(128,128,128,0.5); /*border-bottom: 2px solid #1e3d6b;  #ADD8E6; */
    font-size: 2rem;
    text-align: center;
    margin: 0 auto;
	font-weight:bold; 
	margin-bottom:3rem; 
	
}
.welcome-video{ flex: 0 1 520px; }  /* video column */
.welcome-text{  flex: 1 1 380px; text-align:center; }  /* text column */

.welcome-video video{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}


.profile-btn{
  width:40px; height:40px; border-radius:9999px; border:1px solid rgba(30,61,107,.15);
  background:#fff; display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.profile-btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,.10); }

.profile-icon{
  font-size:26px; color:#1e3d6b; line-height:1;
}

.dropdown-menu{
  border-radius:12px; border:1px solid rgba(30,61,107,.08);
  padding:.35rem; min-width:220px;
}


/* Footer styling  */
.site-footer {
	--primary-color: #FFD700; /*yellow*/
	--secondary-color: #1e3d6b;/*#1e3d6b;*/
	--hover-color: #154a7d;
	--text-light: #ffffff;
	--text-muted: rgba(255, 255, 255, 0.8);
	--border-color: rgba(255, 255, 255, 0.2);
	
	background: #2D3E4E; /*#2D3E4E;*/
	color: var(--text-light);
	padding: 3rem 0 1rem;
	margin-top: 3rem;
}

.footer-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

.footer-section h3 {
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-size: 1.2rem;
	font-weight: 600;
}

.footer-section p, 
.footer-section li {
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: 0.5rem;
}

.footer-section ul {
	list-style: none;
	padding: 0;
}

.footer-section a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-section a:hover {
	color: var(--primary-color);
}

.footer-contact-info-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 0.8rem;
}

.footer-contact-info-item i {
	color: var(--primary-color);
	width: 20px;
	margin-right: 0.8rem;
	font-size: 1.1rem;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.footer-contact-info-item span {
	color: var(--text-muted);
	line-height: 1.5;
}

.footer-contact-info-item a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-contact-info-item a:hover {
	color: var(--primary-color);
}


.social-links {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.social-links a:hover {
	background: var(--primary-color);
	color: var(--secondary-color);
	transform: translateY(-2px);
}

.footer-bottom {
	border-top: 1px solid var(--border-color);
	padding-top: 1.5rem;
	text-align: center;
}

.footer-bottom p {
	color: var(--text-muted);
	font-size: 0.9rem;
	margin: 0;
}

/* Responsive design */
@media (max-width: 1360px) {
	.footer-content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.site-footer {
		padding: 2rem 0 1rem;
	}
	
	.social-links {
		justify-content: center;
	}
}










/* ----------------------------------------------------------------- Pillar_spalling input page ---------------------------------------------------------*/
.pillar_input-container {
    padding-top: 20px;
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: flex-start; /* Align content at the top */
    width: 80%;
	height: auto;
}
.two-column-container {
    display: flex;
    width: 90%;
	gap: 0; /* Control the gap size between columns */
	margin: 0 auto;
}

.input-column {
	margin-top:1.3rem;
	padding: 0.2rem;
    width: 35%; /* Take 30% of the container width */
    height: 100%; /* Full height of container */
    box-sizing: border-box;
}
.plot-column {
    margin-top:1rem;
	padding: 0.5rem;
	width: 100%; /* Take 70% of the container width */
}
/* Plot wrapper styling */
.plot-wrapper {
	margin-top:1rem;
    width: 100%;
    height: 100%; /* Full height of parent */
    padding: 0.5rem;
    box-sizing: border-box;
    
	
}
#plotDiv {
    width: 100%;
    height: 80%;
    padding: 0.5rem;
    box-sizing: border-box;
	position: relative; /* Change from absolute to relative */
	
	
}

/* Set left column (Basic Parameters) to 40% width */
.input-plot-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.pillar_input-subsection {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: calc(100% - 0.5rem ); /* Account for padding */
    overflow-y: auto; /* Scroll if needed */
    box-sizing: border-box;
	padding: 0.6rem 1.5rem 0.6rem 1.5rem;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.pillar_input-subsection label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.pillar_input-subsection input {
    width: 100%;
    padding: 0.3rem;
    margin-bottom: 0rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.pillar_input-subsection h2 {
    color: #34495e;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid #3498db;
}

.pillar_input-button-group {
    display: flex;
    flex-direction: column; /* Ensures horizontal layout */
    justify-content: center;
    gap: 1rem;
	padding: 1rem;
    margin: 1.5rem auto;
    width: 85%;
}
/* ----------------------------------------------- pillar results page -------------------------------------------------------------*/





/*------------------ Pillar result tables  ----------------------*/
/* Results section container */
.pillar_result-result-section {
	width: 85%;
	margin: 0 auto 2rem auto;
	padding: 1rem;
	
}

/* Main results section header */
.pillar_result-section-header {
	color: #1e3d6b;
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #ADD8E6;
}

/* Grid layout for tables - 2x2 */
.pillar_result-results-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

/* Individual table container */
.pillar_result-table-container {
	background-color: #f8f9fa;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 1rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	
	
}

.pillar_result-table-container:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Table headers */
.pillar_result-table-header {
	color: #1e3d6b;
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 1rem;
	padding-bottom: 0.1rem;
	
}

/* Table styling */
.pillar_result-table {
	width: 80%;
	border-bottom: 1.5px solid #dee2e6;
	margin: 0 auto;
}

.pillar_result-table th, 
.pillar_result-table td {
	padding: 0.7rem;
	text-align: left;
	border-bottom: 1px solid #dee2e6;
}
	
.pillar_result-table th {
	background-color: #1e3d6b;/* Light blue (unchanged) #ADD8E6;*//* Dark blue (unchanged) #1e3d6b; */
	color: white;
	font-weight: bold;
}

.pillar_result-table tr:last-child td {
	border-bottom: none;
}

.pillar_result-table tr:hover {
	background-color: #f1f1f1;
}

/* Value column styling */
.pillar_result-table td:last-child {
	font-weight: bold;
	color: #2c3e50;
}



/* ---------- button------*/
.pillar_result-button-group {
    display: flex;
    flex-direction: row; /* Ensures horizontal layout */
    justify-content: center;
    gap: 1rem;
	padding: 1rem;
    margin: 1.5rem auto;
    width: 85%;
	margin-top: -2rem; /* Negative margin to pull buttons closer to table */
}


.pillar_result-button {
	padding: 0.7rem 1.2rem;
	border-radius: 5px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid #ddd;
	background-color: white;
	min-width: 160px;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #333;
	width: 20%
}

.pillar_result-button i {
	margin-right: 0.5rem;
	font-size: 1rem;
	color: #1e3d6b;
}

.pillar_result-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	filter: brightness(95%);
	color: black;
}






@media (max-width: 576px) {
	.pillar_result-section-header {
		font-size: 1.3rem;
	}
	
	.pillar_result-table-header {
		font-size: 1.1rem;
	}
	
	.pillar_result-table th, 
	.pillar_result-table td {
		padding: 0.5rem;
		font-size: 0.9rem;
	}
}

/* ----------------------------------------------------------------- Bearing Capacity input page ---------------------------------------------------------*/
.Bear-standard-container {
    padding-top: 20px;
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: flex-start; /* Align content at the top */
    width: 100%;
}
.Bear-standard-two-column-container {
    display: flex;
    width: 100%;
	gap: 20px; /* Control the gap size between columns */
	margin: 0 auto; /* Center the container */
    justify-content: center;
    align-items: flex-start; /* Align items at the top */
}
.Bear-standard-input-column {
	display: flex;
    flex-direction: column; /* Changed to column to stack header and grid */
	gap: 0.8rem;
	padding: 1rem;
	width: 30%;
	padding-top: 1rem;

}
.Bear-standard-layer-column {
	width: 70%; /* Fixed width */
    flex-grow: 0; /* Prevent growing */
    flex-shrink: 0; /* Prevent shrinking */
	padding-top: 0;
    margin-top: 1rem;
}
.Bear-standard-form-section {
	width: 100%;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	margin-bottom: 20px;
	margin-top: 0; /* Remove any top margin */
    position: relative; /* Ensure proper positioning context */
    top: 0; /* Align the top edges */
    height: auto; /* Allow height to adjust to content */
}
.Bear-standard-form-section h2 {
	
	color: #34495e;
	margin-bottom: 0.75rem;
	font-size: 1.2rem;
	border-bottom: 2px solid #3498db;
	padding-bottom: 0.25rem;
	width: 100%; /* Make underline span full width of container */
    margin-bottom: 0.75rem;
    text-align: center;
	margin-top: 0;
    padding-top: 0;
}
/* Layer inputs styling */
#layerContainer {
    min-height: 200px; /* Ensure minimum height even before content loads */
}        
/* Image container styling */
.Bear-standard-image-case {
	margin-top: 20px;
	text-align: center;
}


/* Make images responsive */
.Bear-standard-image-case img {
    max-width: 90%;
    height: auto;
    margin-top: 20px;
	margin: 0 auto;
}

.Bear-standard-form-group {
	display: flex;
    flex-direction: column; /* Ensure labels and inputs stack vertically */
    margin-bottom: 1rem; /* Add spacing between groups */
	font-size: 1rem;
}
.Bear-standard-form-group select {
	max-width: 100%; /* Prevent inputs from shrinking */
	font-size: 1rem;
	padding: 0.5rem;

}
.Bear-standard-form-group input {
	max-width: 100%; /* Prevent inputs from shrinking */
	font-size: 1rem;
	padding: 0.2rem;

}

.Bear-standard-button-group {
    display: flex;
    flex-direction: column; /* Ensures horizontal layout */
    justify-content: center;
    gap: 1rem;
	padding: 1rem;
    margin: 1.5rem auto;
    width: 85%;
}

.Bear-standard-button {
	padding: 1.5rem;
	border-radius: 5px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid #ddd;
	background-color: white;
	min-width: 200px;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #333;
	width: 100%
}

.Bear-standard-button i {
	margin-right: 0.5rem;
	font-size: 1rem;
	color: #1e3d6b;
}

.Bear-standard-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	filter: brightness(95%);
}

/* Make it responsive */
@media (max-width: 1360px) {
	.Bear-standard-two-column-container {
		flex-direction: column;
	}
	
	.Bear-standard-input-column,
	.Bear-standard-layer-column {
		max-width: 100%;
	}
}

/* ----------------------------------------------------------------- Bearing capcaity result page ---------------------------------------------------------*/


/* ----------------------------------------------------------------- Bearing point estimate input page ---------------------------------------------------------*/
.file-upload {
	display: flex;
    align-items: center; /* Vertically align label and input */
    gap: 1rem; /* Space between label and input */
    margin-bottom: 1rem;
    background-color: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}

.file-upload label {
    font-size: 1rem;
    color: #1e3d6b;
    font-weight: bold;
    white-space: nowrap; /* Prevent text wrapping */
	
}


.file-upload input[type="file"] {
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
    color: #333;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	/* Adjust width here */
    width: 350px; /* Set desired width */
    max-width: 100%; /* Ensure responsiveness */
	
}


#csv-file {
    display: block;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    color: #333;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

#csv-file:hover {
    border-color: #1e3d6b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#csv-table {
    
    font-size: 1rem;
    
}
.download-template-text {
    color:  #163057; /* Initial text colour */
    text-decoration: underline;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.3s ease, font-size 0.3s ease, transform 0.3s ease
	
}

.download-template-text:hover {
    color: #5aa8e6; /* Darker blue on hover */
	transform: scale(1.02); /* Slightly enlarge the text on hover */
}

.download-template-text.downloaded  {
    color:#5aa8e6; /* Bright blue after download #00eeff */
    /* Optional: Make it bold after download */
	font-weight: normal; /* Unbold after download */
	transform: none; /* Reset transform (optional if needed) */
}







.button-group_bear_monte {
	margin-top: auto;         /* Push the button group to the bottom */
	text-align: center;       /* Center the button if desired */
	padding: 400px 0;          /* Optional: add some vertical padding */
}
.example-btn,
.calculate-btn,
.reset-btn,
.download-btn,
.back-btn{
	width: 90%;              /* Adapts to content */
    padding: 0.2m;     /* Adds internal spacing */
    margin-bottom: 0.5rem;    /* Spacing between stacked buttons */
    border: 1px solid #ddd;   /* Keeps a subtle border */
    border-radius: 5px;       /* Slightly rounded edges */
    cursor: pointer;          /* Indicates clickability */
    transition: all 0.2s ease;/* Smooth transitions */
    font-size: 1rem;        /* Larger text */
    color: #333;              /* Default text color */
    text-align: center;       /* Centers the text */
    background-color: #f0f0f0;/* Default background */
	
}

/* Specific button styles */
.example-btn {
    background-color: white; /* Light gray for neutral */
}
.example-btn i {
    font-size: 1rem;    /* Slightly larger than the text */
    margin-right: 0.5rem; /* Space between icon and text */
    color: #1e3d6b;       
    vertical-align: middle; /* Aligns icon with text */
}
.calculate-btn {
    background-color: white; /* Green for action */
                  /* White text for contrast */
}
.calculate-btn i {
    font-size: 1rem;    /* Slightly larger than the text */
    margin-right: 0.5rem; /* Space between icon and text */
    color: #1e3d6b;
    vertical-align: middle; /* Aligns icon with text */
}

.reset-btn {
    background-color:  white; /* Red for reset */
    color: Black;              /* White text for contrast */
}
.reset-btn i {
    font-size: 1rem;    /* Slightly larger than the text */
    margin-right: 0.5rem; /* Space between icon and text */
    color: #1e3d6b;      
    vertical-align: middle; /* Aligns icon with text */
}

.download-btn {
    background-color: #ADD8E6; /* Light blue (unchanged) */
    color: #1e3d6b;            /* Dark blue text (unchanged) */
}

.back-btn {
    background-color: #1e3d6b; /* Dark blue (unchanged) */
    color: white;              /* White text (unchanged) */
}

.example-btn:hover,
.calculate-btn:hover,
.reset-btn:hover,
.download-btn:hover,
.back-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	filter: brightness(95%);
}


button:hover {
	filter: brightness(90%);
}

.layer-count {
	margin-bottom: 1rem;
	padding: 1rem;
	background-color: white;
	border-radius: 4px;
	font-size: 1.3rem;

}



@media (max-width: 1360px) {
    /* ==================== COMPACT HEADER ====================*/
    .header {
        min-height: 50px !important; /* Reduced from 70px */
        padding-top: 0.3rem !important;
        padding-bottom: 0.3rem !important;
    }
    
    /* Smaller logo */
    .logo-image {
        height: 35px !important; /* Reduced from 60px */
        width: auto;
    }
    
    /* Smaller header title */
    .header-logo h1 {
        font-size: 1rem !important; /* Reduced from 1.5rem */
        font-weight: 600;
    }
    
    /* Adjust header logo spacing */
    .header-logo {
        margin-left: 10px !important;
        gap: 8px !important;
    }
    
    /* Smaller logout/signin button */
    .btn-auth {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.85rem !important;
        margin-right: 10px !important;
    }
    
    .btn-auth i {
        font-size: 0.9rem !important;
    }
    
    .btn-auth span {
        display: inline-block;
        margin-left: 0.3rem;
    }
    
    /* ==================== LAYOUT ADJUSTMENTS ====================*/
    .container {
        flex-direction: column;
        padding-top: 3rem !important; /* Adjusted for smaller header */
    }
    
    /* ==================== HAMBURGER MENU BUTTON ====================*/
    .mobile-menu-toggle {
        position: fixed;
        top: 60px !important; /* Adjusted for 50px header + 10px margin */
        left: 15px;
        z-index: 1001;
        background: #2c3e50;
        color: white;
        border: none;
        border-radius: 8px;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
    }
    
    .mobile-menu-toggle:hover {
        background: #34495e;
        transform: scale(1.05);
    }
    
    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }
    
    .mobile-menu-toggle i {
        font-size: 1.5rem;
    }
    
    .mobile-menu-toggle .fa-bars {
        display: block;
    }
    
    .mobile-menu-toggle .fa-times {
        display: none;
    }
    
    .mobile-menu-toggle.active .fa-bars {
        display: none;
    }
    
    .mobile-menu-toggle.active .fa-times {
        display: block;
    }
    
	
	
	
    /* ==================== MOBILE SIDEBAR ====================*/
    .sidebar {
        position: fixed;
        top: 50px !important; /* Adjusted for smaller header */
        left: -100%;
        width: 85%;
        max-width: 350px;
        height: calc(100vh - 50px) !important; /* Adjusted calculation */
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1000;
        background-color: #2c3e50 !important;
        box-shadow: 4px 0 12px rgba(0,0,0,0.3) !important;
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        transition: left 0.3s ease;
    }
    
    .sidebar.mobile-visible {
        left: 0;
    }
    
    /* Overlay */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 50px !important; /* Adjusted for smaller header */
        left: 0;
        width: 100%;
        height: calc(100vh - 50px) !important; /* Adjusted calculation */
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    .sidebar.collapsed {
        left: -100%;
        width: 85%;
        max-width: 350px;
    }
    
    .sidebar.collapsed.mobile-visible {
        left: 0;
    }
    
    /* Scrollbar styling */
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }
    
    .sidebar::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 3px;
    }
    
    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.5);
    }
    
    /* Sidebar sections */
    .sidebar-section {
        flex-shrink: 0;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .sidebar-section:last-child {
        border-bottom: none;
    }
    
    /* Section headers */
    .sidebar-section-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 0.85rem 1.2rem !important;
        background: transparent !important;
        color: white !important;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border-radius: 0 !important;
        border-left: none !important;
        margin-bottom: 0 !important;
    }
    
    .sidebar-section-header:hover {
        background-color: rgba(255,255,255,0.1) !important;
        transform: none !important;
    }
    
    .sidebar-section-header.active {
        background-color: rgba(255, 215, 0, 0.2) !important;
        border-left: 3px solid #FFD700 !important;
    }
    
    .sidebar .section-right {
        display: flex !important;
        align-items: center;
    }
    
    .sidebar .section-left {
        display: flex;
        align-items: center;
        gap: 0.7rem;
    }
    
    /* Text styling */
    .sidebar .sidebar-text {
        font-size: 0.95rem;
        opacity: 1;
        width: auto;
        margin-left: 0;
        white-space: nowrap;
        color: white;
        font-weight: 500;
    }
    
    /* Icon styling */
    .sidebar .sidebar-icon {
        font-size: 1.1rem;
        margin-right: 0;
        color: white !important;
    }
    
    .sidebar .sidebar-icon-wrapper {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        background: rgba(255,255,255,0.15) !important;
    }
    
    .sidebar .sidebar-icon-wrapper .sidebar-icon {
        color: white !important;
    }
    
    /* Override all icon colors for mobile dark theme */
    .sidebar .pillar-icon,
    .sidebar .floor-icon,
    .sidebar .coalburst-icon,
    .sidebar .results-icon,
    .sidebar .guide-icon,
    .sidebar .home-icon {
        background: rgba(255,255,255,0.15) !important;
    }
    
    .sidebar .pillar-icon .sidebar-icon,
    .sidebar .floor-icon .sidebar-icon,
    .sidebar .coalburst-icon .sidebar-icon,
    .sidebar .results-icon .sidebar-icon,
    .sidebar .guide-icon .sidebar-icon {
        color: white !important;
    }
    
    /* Toggle icon */
    .sidebar .toggle-icon {
        color: white !important;
        transition: transform 0.3s ease !important;
        font-size: 1rem;
    }
    
    .sidebar .toggle-icon.collapsed {
        transform: rotate(0deg) !important;
    }
    
    .sidebar .toggle-icon:not(.collapsed) {
        transform: rotate(90deg) !important;
    }
    
    /* Show all sub-items */
    .sidebar .sidebar-subitem,
    .sidebar .sidebar-subsubitem,
    .sidebar .sidebar-subitem-group-label {
        display: block !important;
    }
	
    
    /* Collapsible content */
    .sidebar-collapsible-content {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        background: rgba(0,0,0,0.2);
        opacity: 1 !important;
    }
    
    .sidebar-collapsible-content:not(.collapsed) {
        max-height: 800px !important;
    }
    
    /* Sub-items */
    .sidebar .sidebar-subitem {
        padding: 0 !important;
        margin: 0;
        border-radius: 0 !important;
    }
    
    .sidebar .sidebar-subitem a {
        display: flex !important;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 1.2rem 0.7rem 2.5rem !important;
        color: rgba(255,255,255,0.9) !important;
        text-decoration: none;
        transition: background-color 0.2s ease;
        border-radius: 0 !important;
        font-size: 0.9rem;
    }
    
    .sidebar .sidebar-subitem a:hover {
        background-color: rgba(255,255,255,0.15) !important;
        transform: none !important;
    }
    
    .sidebar .sidebar-subitem.active,
    .sidebar .sidebar-subitem.active a {
        background-color: rgba(255, 215, 0, 0.3) !important;
        border-left: 3px solid #FFD700;
    }
    
    /* Sub-sub-items */
    .sidebar .sidebar-subsubitem {
        padding: 0 !important;
        margin: 0;
    }
    
    .sidebar .sidebar-subsubitem a {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 1.2rem 0.6rem 3rem !important;
        color: rgba(255,255,255,0.85) !important;
        text-decoration: none;
        font-size: 0.85rem;
        transition: background-color 0.2s ease;
    }
    
    .sidebar .sidebar-subsubitem a:hover {
        background-color: rgba(255,255,255,0.1) !important;
    }
    
    .sidebar .sidebar-subsubitem.active,
    .sidebar .sidebar-subsubitem.active a {
        background-color: rgba(255, 215, 0, 0.25) !important;
        border-left: 3px solid #FFD700;
    }
    
    /* Group labels */
    .sidebar .sidebar-subitem-group-label {
        padding: 0.6rem 1.2rem 0.4rem 2.5rem;
        color: rgba(255,255,255,0.6);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        border-left: 2px solid rgba(255,255,255,0.2);
        margin-top: 0.6rem;
    }
    
    /* Disabled items */
    .sidebar .disabled-item a,
    .sidebar .disabled-link {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }
    
    /* Home section */
    .sidebar .section-home {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .sidebar .section-home a {
        padding: 0.85rem 1.2rem !important;
        color: white !important;
        display: flex;
        align-items: center;
        gap: 0.7rem;
    }
    
    .sidebar .section-home:hover a {
        background-color: rgba(255,255,255,0.1) !important;
    }
    
    .sidebar .section-home a.active {
        background-color: rgba(255, 215, 0, 0.2) !important;
        border-left: 3px solid #FFD700;
    }
    
    .sidebar-item {
        margin: 0;
    }
    
    /* Main content */
    .main-content {
        width: 100%;
        padding: 1rem;
        margin-top: 0;
        transition: margin-left 0.3s ease;
    }
    
    body {
        overflow-x: hidden;
    }
    
    /* ==================== OTHER MOBILE STYLES ====================*/
    
    .two-column-container {
        flex-direction: column;
    }
    
    .input-column, .plot-column {
        width: 90%;
        max-width: none;
    }
    
    .plot-column {
        min-height: 450px;
    }
    
    #plotDiv {
        min-height: 450px;
    }
    
    .hero {
        padding: 2rem 0.5rem;
    }
    
    .hero h1 {
        font-size: 1.3rem;
    }
    
    .hero p {
        font-size: 1.1rem;
        max-width: 95%;
    }
    
    .grid-container {
        grid-template-columns: 1fr;
        gap: 0rem;
        width: 90%;
        padding: 0;
        margin: 0 auto;
    }

    .row-header {
        width: 80%;
        margin: 0 auto;
        font-size: 0.6rem;
    }

    .feature-card {
        width: 80%;
        margin-bottom: 10px;
        padding: 0rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .feature-card h2 {
        font-size: 0.6rem;
        margin-bottom: 0rem;
        display: flex;
        flex-wrap: wrap;
        color: #2c3e50;
    }
    
    .feature-card p {
        font-size: 0.3rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        margin-bottom: 0.3rem;
        color: #2c3e50;
    }
    
    .button-group {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .calculate-btn,
    .reset-btn,
    .download-btn,
    .example-btn,
    .back-btn {
        width: 90%;
        padding: 0.4rem 0.5rem;
    }
    
    .form-group input,
    .form-group select {
        font-size: 0.6rem;
    }
    
    .calc-options {
        display: flex;
        flex-direction: column;
        align-items: center;
        white-space: normal;
        width: 100%;
    }

    .calc-options .cal-btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .input-grid {
        grid-template-columns: 1fr;
        width: 80%;
    }
    
    .section p,
    .section li {
        font-size: 0.6rem;
    }
    
    .form-layout4 {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0;
        margin: 0;
        gap: 0.5rem;
    }
    
    .form-layout4 > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0;
    }
    
    .form-layout4 .form-group {
        margin-bottom: 0rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .form-layout4 .form-group input,
    .form-layout4 .form-group select {
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
        padding: 0.25rem;
        box-sizing: border-box;
        border: 1px solid #ddd;
    }
    
    .form-layout4 label {
        font-size: 0.9rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    .form-layout4 img {
        max-width: 100%;
        height: auto;
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    .form-layout3 {
        grid-template-columns: 1fr;
    }
    
    .form-layout3 > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ==================== EXTRA SMALL SCREENS ====================*/
@media (max-width: 400px) {
    /* Hide logout/signin button text on very small screens */
    .btn-auth span {
        display: none;
    }
    
    .btn-auth {
        padding: 0.4rem !important;
        min-width: 35px;
    }
}

@media (max-width: 360px) {
    /* Even more compact for very small phones */
    .header {
        min-height: 45px !important;
    }
    
    .logo-image {
        height: 30px !important;
    }
    
    .header-logo h1 {
        font-size: 0.9rem !important;
    }
    
    .header-logo {
        gap: 6px !important;
    }
    
    .sidebar {
        top: 45px !important;
        height: calc(100vh - 45px) !important;
    }
    
    .sidebar-overlay {
        top: 45px !important;
        height: calc(100vh - 45px) !important;
    }
    
    .mobile-menu-toggle {
        top: 55px !important;
        width: 45px;
        height: 45px;
    }
    
    .mobile-menu-toggle i {
        font-size: 1.3rem;
    }
}



.results-section {
	margin: 2rem auto;
	max-width: 800px;
	padding: 1.5rem;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.results-section h2 {
	color: #2c3e50;
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #eee;
}

.results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
}

.result-card {
	background: #f8f9fa;
	border-radius: 6px;
	padding: 1rem;
	transition: transform 0.2s ease;
}

.result-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.result-name {
	font-weight: 600;
	color: #34495e;
	margin-bottom: 0.5rem;
	font-size: 1.2rem;

}

.result-value {
	font-size: 1.2rem;
	color: #2c3e50;
	font-family: monospace;
	background: #ffffff;
	padding: 0.5rem;
	border-radius: 4px;
	border: 1px solid #e9ecef;

}


.section {
	background-color: #f8f9fa;
	padding: 1.5rem;
	border-radius: 4px;
	margin-bottom: 1.5rem;
	width: 100%;
	margin: 0 auto;
}

.section li {
	font-size: 1rem;
}
.section p {
	font-size: 1rem;
}
.subsection {
	margin-bottom: 1rem;
	
}
.subsection h2 {
	font-size: 1.2rem;
	
}
.subsection p {
	font-size: 1rem;
	
}
.subsection li {
	font-size: 1rem;
	
}

.input-detail {
	background-color: white;
	border: 1px solid #e9ecef;
	border-radius: 4px;
	padding: 1rem;
	margin-bottom: 1rem;
}













.error-message {
    color: red;
    font-size: 0.9rem;
    margin-top: 0.9rem; /* Adds space between element and error */
    display: block; /* Ensures it appears below the field */
}

/* Apply Flexbox to the list container */
.side-by-side-options {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
	padding: 0;
}
/* Style each option to take up roughly half the width */
.side-by-side-options li {
	flex: 0 0 48%;
	box-sizing: border-box;
	margin-bottom: 20px;
}
/* Ensure images scale nicely */
.image-case img {
	max-width: auto;
	height: 40%;
	display: block;
	margin: 10px auto 0 auto;
}
.image-case_pillar_spa img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}