body {
font-family: Helvetica, sans-serif;
margin: 0 auto;
}
body.coversheet{
max-width: 1000px;
margin: 30px auto;
padding: 5px;
line-height: 1.6;
}
body.ins-sheet {
font-size:.8em;
line-height:1.1;
max-width: 1000px;
}
body.fullpage{
width:1200px;
}
.main{
width: 1200px;
margin: 0 auto;
}
.hm-main{
width:1400px;
}
body.list{
width: 1600px;
max-width: 1600px;
}

.hm-header{
display:flex;
align-items:center;
justify-content:flex-start; /* keep logo + h1 together */
gap:16px;
margin:0 auto;
padding:8px 12px; /* optional */
}
/* footer styles */
.parallax-footer{
position: relative;
color: var(--footer-fg);
margin-top: 48px;
/* Replace with your image path */
background-image: url('/images/footer-bg.gif');
background-size: cover;
background-position: center 30%;
background-attachment: fixed; /* parallax effect */
/* spacing */
padding: 56px 16px;
}
/* translucent color wash over the image */
.parallax-footer::before{
content:"";
position:absolute;
inset:0;
background: var(--footer-overlay);
}
.parallax-footer .footer-inner{
position: relative;           /* keep content above overlay */
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 16px;
}
.footer-meta{
font-size: .95rem;
line-height: 1.4;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.footer-actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Make your <a><button>…</button></a> look consistent */
.footer-actions a > button{
border: 0;
padding: 10px 14px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
background: rgba(255,255,255,.15);
color: var(--footer-fg);
backdrop-filter: blur(2px);
transition: transform .05s ease, background .2s ease, box-shadow .2s ease;
}
.footer-actions a > button:hover{
background: rgba(255,255,255,.22);
box-shadow: 0 6px 20px rgba(0,0,0,.25);
transform: translateY(-1px);
}
.print-btns{
float: right;
margin-right: 10px;
}
.print-btns button{
background: #efefef;
border-radius: 5px;
border: none; 
}
button.btn{
background: #efefef;
border-radius: 5px;
border: none;  
}

div.form-btns{
float: right;
padding-right: 10px;
padding-bottom: 10px;
}

button.btn-danger{
width: 150px;
color: #ff000040;
padding: 3px 3px;
background-color: white;
border-radius: 2px;
border: 1px solid #ff000063; 
}

button.btn-danger:hover{
color: #ebe3e3ab;
padding: 3px 3px;
background-color: #121212;
}
button.deactivate{
background-color: red;
border-radius: 2px; 
color: white; 
width:150px; 
padding:2px;
border: 1px solid #ff000063;
margin-top:5px;
}
button.deactivate:hover{
background-color: rgb(158, 161, 163);
color: white; 
}

/* push menu block to the far right */
.hm-menu-wrap{
margin-left:auto;
position:relative; /* keep your dropdown positioning */
z-index:1000;
}
/* salesman card block  */
.cover-sheet-cards{
margin-left:3px; 
margin-right:3px; 
background: #26592c8f;
background-image: url(https://sign.holmesmotors.com/images/banner.png);
background-size: 350px;
background-repeat: no-repeat;
background-position: bottom right; 
border: 1px solid #87ad8b;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.cover-sheet-cards h3{
color: #FFF;
text-shadow: 0.75px 0.75px #87ad8b;
font-size: 1.5em;
line-height:.5em;
text-align: center;
}

.hm-covers-grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:12px; margin-top:10px;
}
.hm-card{
display:block; background:#fff; border:1px solid #eee; border-radius:12px;
overflow:hidden; text-decoration:none; color:#111;
transition:transform .06s ease, box-shadow .2s ease;
}
.hm-card:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.hm-thumb{ width:100%; height:120px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.hm-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hm-noimg{ font-size:12px; color:#666; }
.hm-meta{ padding:10px; display:grid; gap:6px; }
.hm-stock{ font-size:.95rem; }
.hm-link{ font-size:.9rem; color:#3498db; }

/* Approvals cards layout */
.banner {
padding: 0px 20px;
text-align: center;
margin-top: 0px;
}
.hm-approvals-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
gap:12px;
}
.hm-approval-card{
display:flex;
gap:12px;
align-items:flex-start;
padding: 2px;
font-size: .8em;
}

/* Fixed 150×150 thumbnail */
.hm-approval-thumb{
width:150px;
height:150px;
flex:0 0 150px;
border-radius:10px;
background:#f5f5f5;
overflow:hidden;
}
.hm-approval-thumb img{
width:100%;
height:100%;
object-fit:cover;   /* crop to fill the 150×150 box nicely */
display:block;
}

/* prevent old float styles from fighting flex */
#hm-menu-toggle{ float:none; }

/* make logo + title play nice */
#hm-logo{ height:60px; width:auto; display:block; }
.hm-header h1{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


form.window{
background-color: #fff;
padding: 83px;
width: 450px;
text-align: right;
}

h1 {
color: #26592c;
font-size: 1.25em;
font-weight: 500;
}
form {
margin-bottom: 20px;
}
button {
padding: 14px 22px;
width: 300px;
font-size: 16px;
}

button.small-btn{
width: 100px;
padding: 5px;
font-size: .9em;
background-color: #3498db;
border: none;
border-radius: 5px;
color: white;
}

button.small-btn:hover{
width: 100px;
padding: 5px;
font-size: .9em;
background-color: white;
border:#3498db 1px solid;
border-radius: 5px;
color:#3498db;
}
button.tiny{
width:0px;
padding: 0px;
font-size: .9em;
}
a.button{
display: inline-block;
padding: 14px 22px;
background:  #3498db;
color: #fff;
text-decoration: none;
border-radius: 10px;
margin-top: 20px;
}
button.button {
display: inline-block;
padding: 14px 22px;
background:  #3498db;
color: #fff;
text-decoration: none;
border-radius: 10px;
border:transparent;
}
div.totals, div.totalswide{
color:#3498db;
}
div.totals p{
width: 80px;
display: inline-block;
margin: 0;
padding: 0 10px;
}

div.totalswide p{
width: 115px;
display: inline-block;
margin: 0;
padding: 0 10px;
}

div.status-now {
font-size:.8em;
display: inline-block;
padding: 0 20px 10px 20px;
background: white;
color: #3498db;
}

.totals li{
list-style-type:none;
margin-left:-25px;
color:#000000;
}
.totals li span{
margin-left:-10px;
}
.cancel { 
background: #7e8285; 
margin-top:20px;
}
.dashboard-button{
float: right;
margin-top: -50px;
border: none;
border-radius: 5px;
}
.dashboard-button:hover{
color:#ffffff;
background-color:#87ad8b;
}
.logout-button, .home .logout-button{
background: #acc0af;
float:right;
margin-right:20px;
border-radius: 5px; 
border:1px solid #b7b4b4;
margin-top:10px;
}
.logout-button:hover, .home .logout-button:hover {
background: #8ba18e;
float:right;
color:#ffffff;
border-radius: 5px; 
border:1px solid #b7b4b4;
margin-top:10px;
}
.fc-toolbar-chunk, .fc-button-group {
width: 100px;
}
.fc-today-button {
width: 100px;
margin-left: 0px !important;
}
.fc-toolbar-title{
width:300px;
background:transparent;
border:none;
}
.fc-toolbar{
max-width: 827px;
}
.top-controls {
margin-bottom: 15px;
}
.top-controls button {
padding: 8px 16px;
cursor: pointer;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 4px;
}
form.filter-container {
line-height: 2.5em;
background-color: #87ad8b;
padding: 7px;
margin-bottom: 0px;
border-radius: 5px;
}
.filter-container select, select#salesman_user_id{
width:200px;
}
.filter-container label {
margin-right: 8px;
font-weight: bold;
}
.filter-container input[type="date"],
.filter-container select {
margin-right: 20px;
padding: 4px 6px;
border: none;
}
.filter-container button {
padding: 6px 12px;
margin-left: 10px;
cursor: pointer;
border: none;
border-radius: 5px;
}
.clear-button {
background-color: hsla(0, 0%, 100%, 1);
color: #292a2e;
border-radius: 5px;
border: none;
}
td.center {
text-align:center; vertical-align: top;
}

td.tiny {
font-size:.8em;
}

/* Light row tints per location (tweak as needed) */
tr.loc-DBMS { background: #e8f5e9; border-top: 1px solid #c8e6c9; }   /* light green */
tr.loc-MTAL { background: #f9f9f9; border-top: 1px solid #cccccc;  }   /* light amber */
tr.loc-BHAL { background: #e3f2fd; border-top: 1px solid #90caf9;}   /* light blue */
tr.loc-DVGA { background: #74548b2e; border-top: 1px solid #74548b;}   /* light purple */


table.excel {
border-collapse: collapse;
width: 100%;
background-color: #fff;
}
table.excel th {
background-color: #3498db;
color: #000;
font-weight: bold;
padding: 6px 8px;
text-align: center;
cursor: pointer;
}
table.excel th a{
color: #ffffff;
text-decoration: none;
font-size: .9em;
font-weight: 300;
}
table.excel td {
border: 1px solid #ccc;         /* softer gridlines for data rows */
padding: 6px 8px;
text-align: center;
}
/* Alternate-row shading */
table.excel tr:nth-child(even) td {
background-color: #f7f7f7;      /* very light gray */
}
/* Hover highlight */
table.excel tr:hover td {
background-color: #e3e3e3;
}

.sold-card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
/* Right-align numeric columns */
table.excel td.numeric {
text-align: right;
}
/* Arrow indicators for sorting */
.sort-asc::after {
content: " ▲";
font-size: 0.8em;
}
.sort-desc::after {
content: " ▼";
font-size: 0.8em;
}
/* Edit link styling */
.edit-link {
color: #3498db;
text-decoration: none;
font-size: 0.9em;
}
.edit-link:hover {
text-decoration: underline;
}
form.ro-entry{
line-height:3em;
width: 430px;
}
form.ro-entry select, form.ro-entry input{
float:right;
}
form.ro-entry-get{
line-height:1.5em;
}

select{
padding: 8px;
width: 300px;
font-size: 16px;
}
input[type="text"] {
padding: 8px;
width: 300px;
font-size: 16px;
}
input[type="email"] {
padding: 8px;
width: 300px;
font-size: 16px;
}
input[type="number"] {
padding: 8px;
width: 300px;
font-size: 16px;
}
input[type="password"] {
padding: 8px;
width: 300px;
font-size: 16px;
}
input[type="submit"] {
padding: 8px 16px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
border: none;
}
input[type="submit"]:hover, input.confirm:hover{
background: #8ba18e;
}
input.confirm {
background: #acc0af;
border-radius: 5px; 
border:1px solid #444;
}
ul.confirm li{
list-style-type:none;
}
ul.confirm label{
color:#2c85d6;
}
.lookup-section {
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
background: #f9f9f9;
}
footer.thankyou {
padding:20px 5px 5px 5px;
margin-top: -30px;
background: #acc0af;
}
footer {
padding: 20px 5px 5px 15px;
margin-top: 100px;
background: #acc0b7;;
float: left;
width: 100%;
border-radius: 3px;
}
table, th, td {
border: none;
border-collapse: collapse;
padding:5px 3px 3px 3px;
}
table.coversheet {
margin:0 auto;
width:100%;
margin-top: -30px;
}
table.checklist {
margin:0 auto;
min-width:99%;
font-size:.9em;
}
table.coversheet tbody, table.checklist tbody{
border: 1px solid black;
border-collapse: collapse;
padding:5px 3px 3px 3px;
}
table.coversheet th{
border: 1px solid black;
border-collapse: collapse;
padding: 10px 10px 10px 10px;
text-align:center;
background: #acc0af;
}
table.checklist th{
border: 1px solid black;
border-collapse: collapse;
padding: 10px 10px 10px 10px;
text-align:center;
background: #f7f6d9;
font-size: .8em;
}
table.coversheet td {
padding:10px;
text-align:center;
border: 1px dotted #808080eb;
}
table.checklist td {
padding: 20px;
border: 1px dotted #808080eb;
}
table.review tbody tr td strong{
color: #2c85d6;
font-weight:300;
font-size:.8em; 
}
table.review th{
padding: 30px 7px 0px 7px;
background-color: hsl(0deg 0% 93.73%);
text-align: left;
border-bottom: 1px solid #000000;
}
table.review td{
min-width:300px;
}
div.approval ul {
margin-top: -16px;
margin-left: -40px;
}
div.approval ul li{
list-style-type: none;
background-color: white;
padding: 2px;
overflow:hidden;
}
div.approval ul label{
color:#2c85d6;
font-size:.9em;
padding:2px;
}
div.item{
display: inline-block;
width: 359px;
overflow: hidden;
height: 75px;
float: left;
padding: 6px;
background: #eff4f7; 
}
div.form-footer{
width: 100%;
display: inline-block;
}
th {
background: #f7f6d9;
line-height: 1.5em;
border-bottom: 1px solid hsla(260, 11%, 85%, 1);
font-weight: 300;
padding: 15px 5px 5px 10px;
border-top: 1px solid #ffffff;
border-radius: 5px 5px 0 0;
border-right: 1px solid #ffffff;
}
.selection {
text-align: center;
}
.pagination a {
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ccc;
/*margin: 0 2px;*/
}
.pagination a.active {
background-color: #acc0af;;
pointer-events: none;
}
.pagination a:hover {
background-color: #8ba18e;;
}
a.action {
margin-right: 5px;
}
h3 { color: #333; }
p { margin: 8px 0; }
.logo { margin-bottom: 20px; }
#signature-pad {
border: 1px solid #ccc;
width: 600px;
height: 200px;
}
.column1 {
width: 49%;
display: inline-block;
}
.column2 {
width: 49%;
display: inline-block;
vertical-align: top;
}
.home body{
margin:0 auto;
}
.home h2 {
color: #ffffff;
font-size: 1.25em;
font-weight: 300;
text-transform: uppercase;
background-color: #87ad8b;
border-bottom: none;
border-radius: 4px 4px 0px 0px;
margin-bottom: 5px;
padding: 5px 0px 0px 10px;
}
.home button, .reports button{  
background-color: #f9f9f9;
color: #3498db;
border-radius: 10px;
border: 1px solid #dddddafa;
}
#range-form{
margin: 10px 0 20px;
width: 60%;
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
background-color: #f9f9f9;
padding: 15px;
margin-bottom: 0px;
border-radius: 5px;
}
.reports a.more-btn{  
background-color: #f9f9f9;
color: #3498db;
border-radius: 10px;
border: 1px solid #dddddafa;
padding:10px;
text-decoration: none;
}
.home button:hover, .reports button:hover, .top-controls  button:hover, button.button:hover, a.button:hover, span.btns:hover {
background-color: #f9f9f9;
color: #3498db;
border-radius: 10px;
border: 1px solid #3498db;
}
.reports a.more-btn:hover{ 
background-color: #f9f9f9;
color: #3498db;
border-radius: 10px;
border: 1px solid #3498db;
}
h2 {
font-size: 1.25em;
font-weight: 300;
background-color: #f7f6d9;
padding: 13px 0px 5px 10px;
border-bottom: 1px solid black;
border-radius: 3px 3px 0px 0px;
}
h4 {
font-size: 1.1em;
font-weight: 300;
}
h2.details {
font-size: 1.1em;
font-weight: 300;
margin-bottom: 0px;
margin-left:33px;
}
h5 {
font-size: 1em;
font-weight: bold;
margin-top:0px;
background-color: #f7f6d9;
}
body.reports h5{
font-size: .9em;
font-weight: bold;
margin-top: 10px;
background-color: #ffffff;
color: #989fa3;
text-align: center;
padding: 5px 0;
text-transform: uppercase;
}

a.delete {
color: red;
text-decoration: none;
}
.form-group label {
display: block;
font-weight: 300;
margin-bottom: 5px;
}
.users .form-group label {
display: block;
font-weight: 300;
margin-bottom:-25px;
}
.users .form-group{
width:350px;
}
.insurance .form-group{
width:365px;
font-size:.9em;
padding:0;
}
.form-group {
margin: 10px;
width: 400px;
display: inline-block;
}
.form-group input {
padding: 8px;
box-sizing: border-box;
display:inline-block;
}
.submit-btn, .refresh {
padding: 10px 20px;
background:  #3498db;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.submit-btn:hover, .refresh:hover {
background: #0056b3;
}
button.small{
float: right;
background-color: hsla(0, 0%, 100%, 1);
margin-top: 10px;
border-radius: 5px;
border: 1px solid #444;
}
header.cover {
margin-bottom: 0px;
}

header, section {
margin-bottom: 30px;
}
.contract {
border: 1px solid #cccccc96;
padding: 20px;
background-color: #fdfdfd;
}
.contract-temp {
padding: 5px;
background-color: #fdfdfd;
}
.contract p, .contract-temp p {
text-align: justify;
}
.contract strong, .contract-temp strong {
color: #555;
}
.fields {
display:inline-block;
margin:5px 2px;
}
.fields label{
font-size:.8em;
}
ul.details, ul.customer-details{
display: inline-block;
list-style-type: none;
line-height: 1.5em;
}
div.info ul.details {
max-width: 255px;
overflow: hidden;
}
ul.customer-details{
background-color: #b7c7b9;
width: 350px;
padding: 10px 15px;
float: right; 
vertical-align: top;
}
ul.details li label, ul.customer-details li label{
color: #007bff;
}
div.details{
display: inline-block; 
line-height: 1.5em;
}
.stock-img{
display: inline-block;
padding:20px;
}
.info {
background-color: #f7f6d9;
margin-bottom:30px;
}
.login-section, .auth-section, .lg-content{
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
background: #f9f9f9;
}
.content{
border: 1px solid #ccc;
margin-bottom: 20px;
border-radius: 4px;
background: #f9f9f9;
}
.content-inv{
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 20px;
border-radius: 4px;
background: #f9f9f9;
}

div.lg-content tr{
text-align:center;
}
div.content{
min-height: 570px;
}

div.reference{
font-size:.9em;
}
div.reference p{
color:red;
line-height:.9em;
}
div.reference div.form-group label {
display: block;
font-weight: 300;
margin-bottom: 0px;
}
div.reference div.form-group{
margin-bottom: 0px;
margin-top: 0px;
width: 400px;
display: inline-block;
}
p.obligation{
font-size:.7em;
font-weight:bold; 
}
address{
font-size:.8em;
}
.hidden {
display:none;
}
div.slider {
width: 30%;
display: inline-block;
float: left;
}
.specs {
width: 30%;
display: inline-block;
float: left;
margin-left: 50px;
}
div.filters{
background:#acc0af80;
/* background: #cbace78a;*/
border-radius: 5px;
padding: 5px;
}
div.filters fieldset{
display: inline-block;
padding: 20px;
border: 2px solid #8ba18e;
vertical-align: top;
}
div.filters .radiobtn{
display: inline-block;
}

div.filters .statusbtn{
display: inline-block;
color: #8ba18e;
/*color: #7f6ea7;*/
}

.report h1 {
text-align: center;
margin-bottom: 10px;
}
form.repo div.form-group label {
line-height:2em;
}
.nav {
text-align: center;
margin-bottom: 20px;
}
.nav a {
margin: 0 15px;
text-decoration: none;
color: #007BFF;
}
.calendar {
width: 100%;
border-collapse: collapse;
}
#calendar-container button{
width: 150px;
}

.calendar th,
.calendar td {
border: 1px solid #ccc;
width: 14.28%;
vertical-align: top;
padding: 5px;
/* height: 2em;*/
}
.calendar th {
background-color: #f0f0f0;
text-align: center;
}
.day-number {
font-weight: bold;
display: block;
margin-bottom: 4px;
}
.metrics, .updated {
font-size: 0.9em;
margin-top: 4px;
}
.empty-cell {
background: #f9f9f9;
}
a.day-link {
color: inherit;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
a.day-link:hover {
background: #eef;
}

.btn-group {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.ro-type-btn {
padding: 6px 12px;
border: 1px solid #ccc;
background: #eee;
cursor: pointer;
border-radius: 4px;
font-weight: bold;
}
.ro-type-btn.active {
background-color: #006400;
color: white;
border-color: #004d00;
}

.recon-form{
color: #26592c;
line-height: 3em;
text-align:right;
display:inline-block;
vertical-align:top;
padding:0 20px;
}
.recon-form input{
width:100px;
}
.recon-form button{
width:100px;
}
.recon-form h2{
line-height: 1em;
padding-right:20px;
}

section.insurance ul{
list-style-type: disc;
line-height: 1.5em;
}
section.insurance td label{
display: inline;
}
section.insurance ol{
line-height: 1.5em;
}
section.insurance tr.signature{
line-height:1.5em;
}

/* --- Menu Toggle --- */
#hm-menu-toggle { float: right;
width: 100px;
height: 50px;
cursor: pointer;
user-select: none;}
#hm-menu-toggle:hover { 
background:#87ad8b;
color:#ffffff!important;
}
/* --- Panel container --- */
.hm-menu-wrap { position: relative; z-index: 1000; }
#hm-menu-panel {  position: absolute;  top: 75px;        /* a bit below the image */  right: 20px;  width: 320px;  max-height: 70vh;  overflow: auto;  background: #fff;  border-radius: 14px;  box-shadow: 0 12px 30px rgba(0,0,0,.14), 0 2px 10px rgba(0,0,0,.08);  border: 1px solid rgba(0,0,0,.06);  opacity: 0;  transform: translateY(-6px) scale(.98);  transition: opacity .18s ease, transform .18s ease;  pointer-events: none;}
#hm-menu-panel.hm-open {  opacity: 1;  transform: translateY(0) scale(1);  pointer-events: auto; }
/* --- Tree styles --- */
.hm-tree { list-style: none; margin: 8px 0; padding: 6px 6px 12px 6px; }
.hm-node { margin: 2px 2px; }
.hm-node-btn, .hm-leaf {  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;  width: 100%;  padding: 10px 12px;  border-radius: 10px;  text-decoration: none;  color: #1f2937; /* gray-800 */  background: transparent;  border: 0;  cursor: pointer;  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
.hm-node-btn:hover, .hm-leaf:hover {  background: #f3f4f6; /* gray-100 */}
.hm-node-btn:focus-visible, .hm-leaf:focus-visible {  outline: 2px solid #6366f1; /* indigo-500 */  outline-offset: 2px;}
.hm-caret {  flex: 0 0 auto;  transition: transform .16s ease;  opacity: .7;}
.hm-node-btn[aria-expanded="true"] .hm-caret { transform: rotate(180deg); }
/* Branch indentation & guide */
.hm-branch { margin-left: 10px; padding-left: 10px; border-left: 1px dashed #e5e7eb; /* gray-200 */}
/* Subtle section header for top level (optional) */
.level-0 > .hm-node > .hm-node-btn, .level-0 > .hm-node > .hm-leaf {  font-weight: 600;}
/* Scrollbar (webkit) */
#hm-menu-panel::-webkit-scrollbar { width: 8px; }
#hm-menu-panel::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 8px; }
#hm-menu-panel::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
.hm-node-row { display:flex; align-items:center; gap:6px; }
.hm-parent-link { flex: 1 1 auto; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #1f2937;}
.hm-parent-link:hover { background:#f3f4f6; }
.hm-expand {flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display:flex; align-items:center; justify-content:center;}
.hm-expand:hover { background:#f3f4f6; }
.hm-caret { transition: transform .16s ease; opacity:.7; }
.hm-expand[aria-expanded="true"] .hm-caret { transform: rotate(180deg); }

.entry          { font-size: 0.9em; margin-top: 2px; }
.inventory-info { font-size: 0.8em; color: #444; margin-top: 4px; }
.updated        { font-size: 0.8em; color: #666; margin-top: 4px; }
.add-hint       { margin-top: 6px; font-size: 0.9em; color: #555; }
.inv-image      { max-width: 100%; max-height: 60px; margin-top: 4px; display: block; }
.controls { text-align: center; margin-bottom: 20px; }
/* Location‐based background colors */
.loc-DBMS { background-color: #cce5ff; }   /* light blue */
.loc-MTAL { background-color: #d4edda; }   /* light green */
.loc-BHAL { background-color: #fff3cd; }   /* light yellow */
.loc-DVGA { background-color: #f8d7da; }   /* light coral */
.loc-ALL  { background-color: #e2e3e5; }   /* light gray */
.nav-links { text-align: center; margin-bottom: 15px; }
.nav-links a { margin: 0 8px; text-decoration: none; font-weight: 400; color: #007BFF; }

.myChartDiv{
padding-bottom:65px;
font-size:.8em;
}
.tabbed-container {
margin-top: 1em;
}
.tabbed-container .tabs {
display: flex;
border-bottom: 1px solid #cccccc;
margin-bottom: 0.5em;
}
span.btns {
padding: 10px;
background: #3498db;
color: white;
border-radius: 9px;
}
a.btn {
text-decoration: none;
}

.tabbed-container .tabs button {
background: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
font-size: 1em;
border-bottom: 2px solid transparent;
transition: border-color 0.2s;
}
.tabs button {
width:100px;
color:gray;
}

.tabbed-container .tabs button:hover {
background-color: #f5f5f5;
}

.tabbed-container .tabs button.active {
border-bottom: 135px solid #3498db;
color: #3498db;
font-weight: bold;
}

.block {
display: inline-block; 
width: 200px; 
background: #ffffff; 
padding: 5px 10px; 
margin: 22px; color: #3498db;
}
.counter-box {
font-size: 1.1em;
font-weight: bold;
padding: 10px;
margin: 10px;
display: inline-block;
background: #f0f0f0;
border-radius: 8px;
}
/* ============================
Tab panels (the myChartDivs)
============================ */
.tabbed-container .tab-panel {
display: none;
}

.tabbed-container .tab-panel.active {
display: block;
}

@media print {
.page-break {
display: block;
page-break-before: always;  /* break before this element */
/* or page-break-after: always; to break after it */
}
.insurance {
/* Avoid splitting this box across pages */
page-break-inside: avoid;
break-inside: avoid-column;
}
@page {
size: auto;          /* use default paper size */
margin: 5mm;    /* shrink margins top/bottom 10mm, left/right 5mm */
}
.no-print { display: none; }
}