/* ===========================
   Base + Layout
   =========================== */

.dbcalc-app{
  display:flex;
  gap:16px;
  align-items:flex-start;
  font-family: Arial, sans-serif;
  max-width: 980px;
}

/* Sidebar */
.dbcalc-sidebar{
  width:170px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dbcalc-nav{
  border:1px solid #d0d0d0;
  background:#f5f5f5;
  padding:10px 10px;
  cursor:pointer;
  text-align:left;
  font-size:13px;
}

.dbcalc-nav.active{
  background:#e7f1ff;
  border-color:#8ab7ff;
}

/* Content */
.dbcalc-content{
  flex:1;
  min-width: 320px;
}

/* Only show active page (THIS FIXES “all pages visible”) */
.dbcalc-page{ display:none; }
.dbcalc-page.active{ display:block; }

/* ===========================
   Top area (expression + result)
   =========================== */

.dbcalc-top{
  display:flex;
  gap:16px;
  align-items:flex-end;
  margin-bottom:8px;
}

.dbcalc-expr-wrap{
  flex:1;
}

.dbcalc-expr{
  width:100%;
  font-size:28px;
  padding:10px 12px;
  border:1px solid #d0d0d0;
  outline:none;
}

.dbcalc-result-wrap{
  min-width: 220px;
}

.dbcalc-result-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.dbcalc-result-value{
  font-size:34px;
  font-weight:600;
}

.dbcalc-result-unit{
  font-size:14px;
  padding:6px;
  border:1px solid #d0d0d0;
}

/* Caption */
.dbcalc-caption{
  font-size:12px;
  color:#666;
  margin:10px 0 6px;
}

/* Mode bar */
.dbcalc-modebar{
  margin:10px 0 2px;
}

.dbcalc-mode{
  padding:6px;
  border:1px solid #d0d0d0;
}

/* ===========================
   Keypads
   =========================== */

.dbcalc-keypad{
  background:#dfe4ea;
  padding:10px;
  border:1px solid #c9c9c9;
}

/* Grid mapping must match PHP grid-area values */
.dbcalc-keypad-dbm,
.dbcalc-keypad-voltage{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "h1 h2 h3 h4 sp"
    "n7 n8 n9 clear back"
    "n4 n5 n6 plus plus"
    "n1 n2 n3 plus plus"
    "ns n0 nd minus eq";
  gap:8px;
}

/* Keys */
.dbcalc-key{
  padding:16px 10px;
  font-size:18px;
  border:1px solid #c6c6c6;
  background:#f4f6f8;
  cursor:pointer;
  user-select:none;
}

.dbcalc-key:hover{
  filter:brightness(0.97);
}

.dbcalc-key:active{
  transform: translateY(1px);
}

.dbcalc-key-head{
  background:#c9d1db;
  font-weight:600;
}

.dbcalc-key-op{
  background:#2d9cff;
  color:#fff;
  font-size:28px;
  font-weight:700;
}

.dbcalc-key-fn{
  background:#c9d1db;
  font-size:13px;
  font-weight:600;
  padding:16px 8px;
}

.dbcalc-key-eq{
  background:#b9c0c9;
  font-weight:700;
  font-size:14px;
}

/* Footer */
.dbcalc-footer{
  margin-top:10px;
  font-size:12px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
}

.dbcalc-error{
  color:#b00020;
  font-weight:600;
}