@font-face {
    font-family: 'ubuntu';
    src: url('/0/fonts/ubuntu-r.woff2') format('woff2'),
         url('/0/fonts/ubuntu-r.woff') format('woff');
}
/* Webkit Scrollbar */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-button{width:0px;height:0px}
::-webkit-scrollbar-thumb{background:#92d84e;border:0px none #ffffff;border-radius:0px}
::-webkit-scrollbar-thumb:hover{background:#92d84e}
::-webkit-scrollbar-thumb:active{background:#92d84e}
::-webkit-scrollbar-track{background:#cde795;border:0px none #ffffff;border-radius:0px}
::-webkit-scrollbar-track:hover{background:#cde795}
::-webkit-scrollbar-track:active{background:#cde795}
::-webkit-scrollbar-corner{background:#000000}
/* End Chrome-Scrollbar */
/* iE Scrollbar */
body{scrollbar-face-color:#92d84e;scrollbar-arrow-color:#000000;scrollbar-track-color:#cde795;scrollbar-shadow-color:#cde795;scrollbar-highlight-color:#cde795;scrollbar-3dlight-color:#cde795;scrollbar-darkshadow-color:#cde795;-ms-overflow-style: -ms-autohiding-scrollbar;}
/* End iE-Scrollbar */
body {
  font-family: 'ubuntu', sans-serif;
  font-weight: bold;
  font-size: 30px;
  margin: 0;
  background-color: #e6ffe6;
}
header {
  background-color: #ccffcc;
  text-align: center;
  font-weight: bold;
  color: #ff7500;
  height: 60px;
  border-bottom: 2px solid #ffcc00;
  position: fixed; /* Fix the position of the header */
  width: 100%;
  white-space: nowrap; /* Prevent text wrapping */
  transform-origin: left center; /* Set the transform origin */
}

/* Responsive text scaling */
header span {
  display: inline-block;
  transform: scale(1); /* Initial scale */
  transition: transform 0.2s ease; /* Smooth scaling transition */
}

/* Adjust scaling based on viewport width */
@media (max-width: 1200px) {
  header span {
    transform: scale(0.8);
  }
}

@media (max-width: 800px) {
  header span {
    transform: scale(0.6);
  }
}

@media (max-width: 400px) {
  header span {
    transform: scale(0.4);
  }
}
header a{
  color: #ff7500;
  text-decoration: none;
}
header h1{
  display: inline;
}
h1 {
  font-size: 48px;
  margin: 0;
  text-align: center;
}
h2 {
  font-size: 42px;
  color: #000;
  margin: 0;
  text-align: center;
}
table, td, th{
  background-color: #ffffff;
  border-collapse: collapse;
  border: 1px solid black;
  margin: 0 auto;
}
/* Sidebar */
#sidebar{
  position: fixed; /* Fix the position of the sidebar */
  top: 62px; /* Align to the top of the viewport */
  left: 0; /* Align to the left of the viewport */
  width: 350px; /* Set the width of the sidebar */
  height: 100%; /* Take full height of the viewport */
  overflow-y: auto; /* Add vertical scrollbar if content overflows */
  vertical-align: top;
  margin 0 auto;
	text-align: center;
  font-weight:normal;
  font-size:12px;
  padding: 0;
}
#enameltable table{
  width:100%;
}
#enameltable td, th{
  white-space: nowrap;
}
.supplytable{
  width:100%;
}
.links{
  text-align: left;
}
/* Kit BLocks*/
#kits{
  position: absolute; /* Fix the position of the sidebar */
  top: 62px; /* Align to the top of the viewport */
  left: 350px;
  right: 0; /* Align to the left of the viewport */
  bottom: 0; /* Align to the bottom of the viewport */
  overflow-y: auto; /* Add vertical scrollbar if content overflows */
  vertical-align: top;
	text-align: center;
  font-weight:normal;
  font-size:12px;
  padding: 0;
  box-sizing: border-box;
}
.kittable th,
.kittable td {
    white-space: nowrap; /* Prevent word wrapping */
}
.kitblock{
	display: inline-block;
	vertical-align: top;
	margin: 0 auto;
	text-align: center;
  font-weight:normal;
  font-size:12px;
  border: 2px solid #ffcc00;
  padding: 0;
}
.kitblock h1{
  font-size: 16px;
  font-weight: bold;
}
.kitblock h2{
  font-size: 14px;
  font-weight: bold;
}
.kitblock h3{
  font-size: 12px;
  font-weight: bold;
}
/* Item Statuses For Tables */
.statushave {

}
.statushave td{
  
}
.statusdonthave {

}
.statusdonthave td{
  background-color: #d0d0d0;}
.statusneed{
  color: #d60707;
  font-weight:bold;
}
.statusneed td{
  background-color: #fda069;
}

.statuswant {

}
.statuswant td{
  background-color: #d5f4ff;
}
.statusreorder{
  color: #d65907;
  font-weight:bold;
}
.statusreorder td{
  background-color: #ffb7e1;
}
.statusonorder {

}
.statusonorder td{
  background-color: #dbffd5;
}
.statusbackorder {
  color: #d60707;
  font-weight:bold;
}
.statusbackorder td{
  background-color: #fda069;
}


  /* ─── Settings Layout ─────────────────────────────────────────────── */

#settings_sidebar {
  position: fixed;
  top: 62px;
  left: 0;
  width: 200px;
  height: calc(100% - 62px);
  overflow-y: auto;
  background: #ccffcc;
  border-right: 3px solid #ffcc00;
  box-sizing: border-box;
}

#settingspage {
  position: absolute;
  top: 62px;
  left: 200px;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 20px 24px;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 13px;
  background: #f5f5f5;
}

/* Nav links */
.nav-section { padding: 6px 0; }

.nav-label {
  display: block;
  padding: 4px 14px;
  font-size: 10px;
  font-weight: bold;
  color: #4d8417;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-link {
  display: block;
  padding: 10px 14px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  transition: background 0.12s;
}

.nav-link:hover  { background: #b3ffb3; color: #4d8417; }
.nav-link.active { background: #4d8417; color: #fff; }

.nav-divider { border-top: 1px solid #92d84e; margin: 4px 0; }

.nav-logout         { color: #c0392b !important; }
.nav-logout:hover   { background: #ffd5d5 !important; color: #c0392b !important; }

/* Settings content */
#settingspage h2 { font-size: 22px; margin: 0 0 12px; text-align: left; }
#settingspage h3 { font-size: 16px; margin: 16px 0 8px; text-align: left; }

.settings-warn {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 10px;
}

.settings-toolbar { margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }

.settings input[type="text"] { width: 100px; }
.short input[type="text"]    { width: 32px;  }
.med   input[type="text"]    { width: 64px;  }
.long  input[type="text"]    { width: 200px; }

#settingspage table tr:hover { background-color: #eaf7ea; }

/* Dashboard cards */
.dash-cards {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px;
}
.dash-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 20px 28px;
  text-align: center;
  min-width: 120px;
}
.dash-card .count { font-size: 36px; font-weight: bold; color: #4d8417; }
.dash-card .label { font-size: 12px; color: #666; margin-top: 4px; }

.settingsButton {
  background: #4d8417;
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.settingsButton:hover { background: #6ab020; }
.settingsButton a { color: #fff; text-decoration: none; }
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.emButton:hover { background: #ffcc00; color: #333; }

/* ─── Kit Enamels Modal ─────────────────────────────────────────────── */
#ke-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
#ke-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
#ke-box {
  position: absolute;
  top: 5%; left: 5%; right: 5%; bottom: 5%;
  background: #fff;
  border: 2px solid #ffcc00;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
#ke-header {
  background: #ccffcc;
  border-bottom: 2px solid #ffcc00;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
#ke-header h3 { margin: 0; font-size: 16px; color: #4d8417; }
#ke-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #c0392b;
  line-height: 1;
}
#ke-actions {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
  background: #f9f9f9;
  flex-shrink: 0;
}
#ke-body { overflow: auto; padding: 16px; flex: 1; font-size: 12px; font-weight: normal; }
.ke-modal-table { border-collapse: collapse; width: 100%; }
.ke-modal-table th,
.ke-modal-table td { padding: 4px 6px; white-space: nowrap; }
.ke-del {
  background: none;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font-size: 14px;
}
.ke-del:hover { color: #ff0000; }

.emButton {
  background: #ff7500;
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.emButton:hover { background: #ffcc00; color: #333; }

.deleteButton {
  width: 10px; /* Set the width of the button */
  height: 15px; /* Set the height of the button */
  border-radius: 50%; /* Make the button a circle */
  border: none; /* Remove the border */
  background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* Gradient background */
  color: #ff0000; /* Text color */
  font-size: 8px; /* Font size */
  cursor: pointer; /* Pointer cursor on hover */
  display: flex; /* Flexbox for centering the text */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  outline: none; /* Remove outline on focus */
}

.deleteButton:hover {
  background: linear-gradient(to bottom, #feb47b, #ff7e5f); /* Gradient on hover */
}