/* Palette pulled directly from enterpriseintelligence.co.za's own stylesheet
   (css/ei_main.css): brand blue #00AAEB/#00A7EA, deep blue #0B5694/#014D7D,
   body grey #666666, page background #E5E5E5, Verdana/Arial/Helvetica. */

:root {
  --brand-blue: #00AAEB;
  --brand-blue-dark: #0B5694;
  --brand-blue-darker: #014D7D;
  --text-grey: #666666;
  --heading-grey: #717b7e;
  --page-bg: #E5E5E5;
  --panel-bg: #ffffff;
  --border-grey: #CCCCCC;
  --nav-grey: #666666;

  --status-occupied: #2e9e3f;
  --status-occupied-bg: #e5f5e8;
  --status-available: #ffffff;
  --status-available-border: #CCCCCC;
  --status-defective: #d98b00;
  --status-defective-bg: #fdf0dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: var(--text-grey);
  background-color: var(--page-bg);
}

/* ---- top bar ------------------------------------------------------- */

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--nav-grey);
  color: #ffffff;
  padding: 12px 24px;
}

#brand {
  display: flex;
  flex-direction: column;
}

#brandName {
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
}

#brandSlogan {
  font-size: 11px;
  font-style: italic;
  color: #cfd8dc;
}

#topnav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  margin-left: 22px;
  padding-bottom: 3px;
}

#topnav a:hover {
  text-decoration: underline;
}

#topnav a.active {
  border-bottom: 2px solid var(--brand-blue);
  font-weight: bold;
}

/* ---- layout ---------------------------------------------------------- */

#appBody {
  display: flex;
  gap: 16px;
  padding: 16px;
  align-items: flex-start;
}

h2 {
  font-variant: small-caps;
  color: var(--heading-grey);
  font-size: 15px;
  margin: 0 0 10px 0;
}

/* ---- left pane: locker tree ------------------------------------------ */

#lockerTree {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-grey);
  border-radius: 3px;
  padding: 14px;
  width: 280px;
  flex-shrink: 0;
}

#treeRoot, #treeRoot ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

#treeRoot ul {
  padding-left: 16px;
}

#treeRoot .siteNode > .nodeLabel {
  font-weight: bold;
  color: var(--brand-blue-darker);
  cursor: default;
  padding: 4px 0;
  display: block;
}

#treeRoot .lockerNode > .nodeLabel {
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#treeRoot .lockerNode > .nodeLabel:hover {
  background-color: #f0f8fc;
}

#treeRoot .lockerNode.selected > .nodeLabel {
  background-color: var(--brand-blue);
  color: #ffffff;
}

.lockerBadge {
  font-size: 10px;
  background-color: var(--border-grey);
  color: #ffffff;
  border-radius: 10px;
  padding: 1px 7px;
}

#treeRoot .lockerNode.selected .lockerBadge {
  background-color: rgba(255,255,255,0.35);
}

.lockerBadge.hasIssue {
  background-color: var(--status-defective);
}

/* ---- right pane: door table ------------------------------------------- */

#doorPanel {
  background-color: var(--panel-bg);
  border: 1px solid var(--border-grey);
  border-radius: 3px;
  padding: 14px;
  flex: 1;
  min-width: 0;
}

#doorPanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-grey);
}

.legendItem { display: flex; align-items: center; gap: 5px; }

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot.occupied { background-color: var(--status-occupied); }
.dot.available { background-color: #ffffff; border: 1px solid var(--status-available-border); }
.dot.defective { background-color: var(--status-defective); }

table#doorTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

#doorTable th {
  text-align: left;
  font-variant: small-caps;
  color: var(--heading-grey);
  border-bottom: 2px solid var(--border-grey);
  padding: 8px 10px;
}

#doorTable td {
  padding: 7px 10px;
  border-bottom: 1px solid #eeeeee;
}

#doorTable tbody tr:hover {
  background-color: #fafafa;
}

#doorTableEmpty {
  text-align: center;
  color: #999999;
  padding: 30px;
  font-style: italic;
}

.statusPill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}

.statusPill.occupied {
  background-color: var(--status-occupied-bg);
  color: var(--status-occupied);
}

.statusPill.available {
  background-color: #ffffff;
  color: var(--text-grey);
  border: 1px solid var(--status-available-border);
}

.statusPill.defective {
  background-color: var(--status-defective-bg);
  color: var(--status-defective);
}

/* ---- footer ------------------------------------------------------------ */

#footer {
  text-align: center;
  font-size: 10px;
  color: #999999;
  padding: 14px;
}

@media (max-width: 720px) {
  #appBody { flex-direction: column; }
  #lockerTree { width: 100%; }
}